【コラム】スマホ用ランディングページの横幅は、何ピクセルが主流になるのか?



スマホ用ランディングページを制作する時にいつも懸念材料となるが、横幅のサイズをどう考えるかです。

ちなみに、現在の私の結論としては、PCとスマホで両方兼用できるランディングページの場合、横幅を950pxとしています。
※1024pxというのが、およそWebデザイン業界的に一般的ではありますが、私の経験上、それだとやや横に長過ぎる印象があります。

また、PCでの閲覧は想定せずに、スマホのみで閲覧を考えた際は、横幅は640pxでデザインを行います。

スマホLPの最適な横幅というのは、主流のスマホ画面サイズで決まってくる

私は2013年頃からランディングページを作り続けていますが、この5年間の中で最も顕著だったのが、スマホ画面の大型化です。

当時はiPhone5が主流でしたから、おおよそスマホのデザインの横幅は320px、また上部固定ヘッダーを設置する際は、40〜45px程度と、ある種教科書的なサイズ指定がありました。

しかし、現在はとても多くの画面サイズのスマホがありますので、Webデザイナーは数多くの場面でのスマホ使用を想定したデザインを求められるようになっています。

上記の記事では、iPhoneSEが販売終了したことにより、今後横幅320pxのスマホは影を潜め、横幅414pxの画面サイズをもつスマホがいよいよ主流になると示唆しています。

加えて、解像度も機種が進化するにつれ、どんどん密度が高くなってきていますから、デザインの仕上がりについても綺麗に見えるように解像度には気を配らなければいけません。

このように、スマホ用ランディングページのデザインを設計する際は、現在最も人々が触れ合っている画面サイズを想定しながら制作を進める必要があるのです。

スマホLPデザインで、最も力を入れるべきなのは、「ファーストビューの表示領域」

私はこれまで数多くのスマホ閲覧用ランディングページを作成してきましたが、これからますますスマホ用LPの重要性は高まっていくと考えています。

もはや人々はスマホで発見した商品やサービスを、もう一度パソコンで検討するということはあまりしません。海外旅行や高級車など、たとえ何百万円の商品だろうと、スマホから直接注文をすることも珍しくなくなりました。

その中で、私たちデザイナーがもう一度考えなければならないのは、特に「スマホ画面のファーストビュー」の領域問題です。

スマホの画面サイズによって、ファーストビューの表示領域は大きく異なってきますので、機種ごとにページを開いた瞬間の印象やインパクトは異なってきます。なので、この辺りのバランスも考慮したデザインが今求められています。

私の現時点でのスマホファーストビューの結論としては、

・横幅はどれだけスマホファーストにするかによって、640px〜950pxの間で考える
・逆に縦はダイナミックに、1000px程度使って作成してもOK。※PCは750pxが縦幅の限度だが、それを超えても問題なし。

といったように、自分なりの施策を考えてデザインを設計しています。

もし今後スマホ用ランディングページを制作する際は、こういったファーストビューの横幅や縦幅の表示領域について、デザイナーに意見を聞いてみるのがよいでしょう。

ヘタなファーストビューでは、どんなお客さんもあなたの商品やサービスを信頼してくれないのです。

無料電子書籍
Webデザイナーの思考法と仕事術

実績・スキルゼロスタートでも年間100件のLP制作を担当できるWebデザイナーの思考法と仕事術を1冊の本にまとめて無料で配布しています。