Trend / Mobile-first

モバイル特化のWebサイト参考集

PCで開いても、スマホ幅の1カラムを画面の中央に置くWebサイトを集めた特集です。訪問のほとんどがスマホから来るイベント・キャンペーン・LPで増えている作り方です。

いまのモバイル特化サイトの傾向4 points

  1. 01PCでも中央に幅400〜600px前後の1カラムを置き、スマホとまったく同じ順番・同じ読み心地で見せる。
  2. 02空いた左右には、キービジュアルの続き・ロゴ・固定のナビやチケット導線を置き、余白を“額縁”として使う。
  3. 03縦に積むだけなので、デザインと実装を1本にでき、告知の差し替えも速い。
  4. 04PCの広い画面では文字や画像が小さく見えやすいので、左右の余白の色や背景で間延びを防ぐ工夫が要る。

モバイル特化サイトについてよくある質問

PCでもスマホ幅で表示するサイトの参考は？

Katapickの「モバイル特化」特集で、PCでも中央に1カラムを置く公開18か月以内のサイトを掲載しています。左右の余白の使い方や、中央カラムの幅を解説と実測値で確認できます。

スマホ幅の1カラムをPCで見せるときの注意点は？

左右の余白が間延びしないよう、背景の色や画像、固定のナビゲーションで埋めるのが一般的です。中央カラムの幅は、スマホの見え方に近い400〜600px前後がよく使われます。