モバイルファーストWeb スマホアプリのスタイル/レイアウト/デザイン再現

スマホアプリのスタイル/レイアウト/デザイン

上記画像のWebページは左から

Instagram型スタイル

gridレイアウトで画像が横３列、縦は何行でも
Instagram型スタイルといっても用途は画像SNSではなく、下記メルカリ型のメッセージ無し版、サムネイルの訴求力があれば画像リンクのナビゲーションに

下記リンクは、ぜひともスマートフォンもしくはデスクトップ ブラウザーのレスポンシブモードでご覧ください

• https://www.seo009.com/cat/thumb-1×1/
• https://www.instagram.com/hanshintigers_official/

メルカリ型スタイル

gridレイアウトで横３列、２列４列も設定次第
デスクトップファーストのヤフオクサイトを凌駕するモバイルファーストのメルカリサイト
画像と短テキストメッセージで魅力をアピール
小画面のスマートフォンに特化した今風のスマホアプリのスタイルを再現

下記リンクは、ぜひともスマートフォンもしくはデスクトップ ブラウザーのレスポンシブモードでご覧ください

• https://www.seo009.com/cat/thumb-4×3/
• https://jp.mercari.com/

メルカリ型スタイルが第一目標

このメルカリ型スタイルこそ、新WordPressテーマ作成の第一目標
Instagram型スタイルのように、画像を横並びかつ折り返しは、flexboxだけでも可能、さらにgridならもっと簡単

また、短テキストを画像に上乗せも、Webでは position relative/absolute でこれまた簡単、かつそのように実装
課題は、そもそも短テキストをどうやって調達するのかということ
WordPressのカスタムフィールドでなんとかやり遂げることができました

ZOZOTOWN型スタイル

本家ZOZOTOWNはスマートフォンでは横３列、テーマではgridレイアウトで横２・３・４列に
これも今どきの商品多数のECサイトまたスマホアプリ画面
画像と下の短テキストメッセージで商品ページへお誘い

下記リンクは、ぜひともスマートフォンもしくはデスクトップ ブラウザーのレスポンシブモードでご覧ください

• https://www.seo009.com/cat/thumb-16×9/
• https://zozo.jp/sp/

メルカリ型スタイルで実現したカスタムフィールド読み込みを、ZOZOTOWN型スタイルでは下に並べている

Yahooニュース型スタイル

画像左でテキスト右、個別ページへ誘導
一目瞭然のサムネイルと魅力のタイトルテキストで紹介パターン採用

下記リンクは、ぜひともスマートフォンもしくはデスクトップ ブラウザーのレスポンシブモードでご覧ください

linkhttps://www.seojuku.jp/(デスクトップはレガシーtheブログ型/スマートフォンでYahooニュース型)

• https://news.yahoo.co.jp/

メルカリ型スタイルで実現したカスタムフィールド読み込みを同じように、Yahooニュース型スタイルでは右側テキストの下に並べている

ユーザーが馴染んでいるスマホ画面のスタイル/レイアウト/デザイン

上記４スタイルのアーカイブトップは、モバイルファースト、モバイルオンリーのユーザーが見慣れたスマホアプリ画面やUI/UXを再現して、単なるレスポンシブのWebスマホ画面から脱皮しよう！

新テーマのカテゴリートップのスタイル

今回紹介の４スタイルのほかに、スタンダードとレガシーtheブログの２つ
これらの６スタイルは、サイト一括、カテゴリー一括、タグ一括。およびカテゴリー個々、タグ個々でスタイル変更可能