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

画像が縦横にびっしり並ぶInstagram型
画像がびっしりに短メッセージ上乗せのメルカリ型
画像と下にメッセージのZOZOTOWN型
画像と右にメッセージのYahooニュース型(不動産紹介型)

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

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

Instagram型スタイル

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

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

メルカリ型スタイル

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

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

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

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

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

ZOZOTOWN型スタイル

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

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

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

Yahooニュース型スタイル

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

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

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

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

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

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

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

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

お役立ち
注目