LPの最適サイズとは？PC・スマホ別の幅と画像サイズの目安
LP（ランディングページ）を制作するとき、最初に迷いやすいのが「サイズ（幅）をどう設計するか」です。PCとスマホで画面の大きさが違うため、適切なサイズを知らないと、レイアウトが崩れたり画像がぼやけたりしてしまいます。本記事では、LPサイズとは何かという基本から、PC・スマホ別の幅の目安、画像サイズの考え方、そして最適なサイズで作るためのポイントまでを、わかりやすく解説します。
LPサイズとは、ランディングページを表示・制作するときの「幅」や「画像の大きさ」など、ページの寸法に関わる設計値のことです。Webページはピクセル（px）という単位で大きさを表し、LPの幅やメインビジュアルの画像サイズも、このピクセルを基準に決めていきます。
ここで押さえておきたいのが、「コンテンツ幅」と「フルワイドの背景幅」を分けて考えることです。文字や要素を配置するコンテンツ幅は読みやすさを基準に決め、背景色や背景画像は画面いっぱい（フルワイド）に広げる、という二段構えが一般的です。LPサイズを考えるときは、この2つを区別すると整理しやすくなります。
LPサイズは見た目の問題にとどまらず、成果にも影響します。サイズ設計を誤ると、次のような問題が起こります。
LPは「見て、納得して、行動してもらう」ためのページです。サイズが適切でないと、その入り口でユーザーを取りこぼしてしまいます。だからこそ、最初のサイズ設計が重要なのです。
PC向けのLPでは、「全体の表示幅」と「中身を配置するコンテンツ幅」を分けて考えます。
文字や画像など、実際のコンテンツを配置する幅は、一般的に960px〜1200px程度に収めることが多いです。これより広いと一行が長くなって読みづらく、狭いと余白ばかりが目立ちます。近年は大きなモニターも増えているため、1000px〜1200pxあたりを目安にすると、多くの環境でバランスよく表示できます。
背景色やメインビジュアルの背景画像は、画面の横幅いっぱい（フルワイド）に広げるデザインが主流です。この場合、大きなモニターでも背景が途切れないよう、背景画像は1920px程度の幅を想定して用意しておくと安心です。コンテンツ自体は中央のコンテンツ幅に収め、背景だけを全幅に広げる、という構成が一般的です。
PCの画面解像度はさまざまですが、現在はフルHD（横1920px）が広く使われています。そのため、「背景は1920pxまで耐えられるように」「コンテンツは1000〜1200pxに収める」という考え方が、多くの環境に対応しやすい設計になります。
近年はLPへのアクセスの多くがスマホからになっており、スマホ表示を前提に設計することがとても重要です。
スマホのLPは、基本的に画面の横幅いっぱいに表示します。デザインを考える際の基準幅としては、375px（多くのスマホで使われる標準的な論理幅）を想定して制作することが多いです。左右に少し余白（パディング）を取りつつ、中身は画面幅に合わせて柔軟に伸縮させるのが基本です。
スマホは機種によって画面サイズが異なるため、特定の固定幅で作るのではなく、画面幅に応じて要素が伸縮する「レスポンシブデザイン」で作るのが現在の主流です。幅をパーセント指定にしたり、最大幅だけ決めて中で可変にしたりすることで、さまざまな端末で破綻しにくいLPになります。
LPでは、メインビジュアルや図版など画像を多用します。画像サイズは「表示サイズ」と「実データの解像度」を分けて考えるのがポイントです。
スマホをはじめ、現在のディスプレイは高精細（Retinaなど）なものが多く、表示サイズの2倍の解像度で画像を用意するときれいに表示されます。たとえば横375pxで表示する画像なら、実データは横750px程度で書き出す、という考え方です。これにより、高精細な画面でも画像がぼやけず、くっきり表示されます。
LPの第一印象を決めるメインビジュアルは、画質と表示速度のバランスが重要です。PCのフルワイド背景なら横1920px前後、スマホ向けなら横750px前後を目安に、用途に応じて書き出します。PCとスマホで異なる画像を出し分けると、それぞれに最適化でき、無駄なデータ転送も抑えられます。
画像は解像度だけでなく、ファイル容量にも気を配る必要があります。写真はJPEG、透過やイラストはPNG、軽量化を重視するならWebPといったように、用途に応じて形式を選びます。さらに圧縮ツールでファイルサイズを削減すると、画質を保ちつつ表示速度を改善できます。
LPは1ページで完結し、縦に長くスクロールさせる構成が一般的です。縦の長さに厳密な決まりはなく、「伝えたい情報を過不足なく載せられる長さ」が適切です。ただし、長ければよいわけではありません。
重要なのは、最初に表示される領域（ファーストビュー）でユーザーの興味を引き、その後の流れで自然に読み進めてもらうことです。冗長に長いと途中で離脱されますし、短すぎると説得材料が足りません。必要な情報を、適切な順番で、無駄なく配置することを意識しましょう。縦の長さは「結果」であって、最初から決めるものではないと考えるとよいでしょう。
最後に、LPサイズを適切に設計するための実践的なポイントを整理します。
LPサイズとは、ランディングページの幅や画像の大きさといった、ページの寸法に関わる設計値のことです。PCではコンテンツ幅を1000〜1200px程度に収めつつ背景はフルワイド（1920px想定）で、スマホは375pxを基準にレスポンシブで可変にするのが基本の考え方です。
画像は、高精細ディスプレイに対応するため表示サイズの2倍を目安に用意し、容量の最適化も忘れないようにしましょう。そして、アクセスの多いスマホを起点に設計し、最後は必ず実機で確認することが、見やすく成果につながるLPを作る近道です。サイズは見た目だけでなく、表示速度やコンバージョンにも関わる重要な要素として、最初の段階でしっかり設計しておきましょう。
