LPの最適サイズとは？PC・スマホ別の幅と画像サイズの目安

LP（ランディングページ）を制作するとき、最初に迷いやすいのが「サイズ（幅）をどう設計するか」です。PCとスマホで画面の大きさが違うため、適切なサイズを知らないと、レイアウトが崩れたり画像がぼやけたりしてしまいます。本記事では、LPサイズとは何かという基本から、PC・スマホ別の幅の目安、画像サイズの考え方、そして最適なサイズで作るためのポイントまでを、わかりやすく解説します。

LPサイズとは

LPサイズとは、ランディングページを表示・制作するときの「幅」や「画像の大きさ」など、ページの寸法に関わる設計値のことです。Webページはピクセル（px）という単位で大きさを表し、LPの幅やメインビジュアルの画像サイズも、このピクセルを基準に決めていきます。

ここで押さえておきたいのが、「コンテンツ幅」と「フルワイドの背景幅」を分けて考えることです。文字や要素を配置するコンテンツ幅は読みやすさを基準に決め、背景色や背景画像は画面いっぱい（フルワイド）に広げる、という二段構えが一般的です。LPサイズを考えるときは、この2つを区別すると整理しやすくなります。

LPサイズを正しく設計することが重要な理由

LPサイズは見た目の問題にとどまらず、成果にも影響します。サイズ設計を誤ると、次のような問題が起こります。

• レイアウト崩れ：幅が画面に合っていないと、横スクロールが発生したり要素がはみ出したりして、見づらいページになります。
• 画像のぼやけ・劣化：表示サイズに対して画像が小さすぎると、引き伸ばされてぼやけ、印象が悪くなります。
• 表示速度の低下：逆に画像が大きすぎると、データ量が増えてページの読み込みが遅くなり、離脱の原因になります。
• デバイスごとの見え方の差：PCとスマホでサイズを考慮しないと、片方のデバイスで極端に見づらくなることがあります。

LPは「見て、納得して、行動してもらう」ためのページです。サイズが適切でないと、その入り口でユーザーを取りこぼしてしまいます。だからこそ、最初のサイズ設計が重要なのです。

PCでのLPサイズの目安

PC向けのLPでは、「全体の表示幅」と「中身を配置するコンテンツ幅」を分けて考えます。

コンテンツ幅の目安

文字や画像など、実際のコンテンツを配置する幅は、一般的に960px〜1200px程度に収めることが多いです。これより広いと一行が長くなって読みづらく、狭いと余白ばかりが目立ちます。近年は大きなモニターも増えているため、1000px〜1200pxあたりを目安にすると、多くの環境でバランスよく表示できます。

背景・フルワイドの考え方

背景色やメインビジュアルの背景画像は、画面の横幅いっぱい（フルワイド）に広げるデザインが主流です。この場合、大きなモニターでも背景が途切れないよう、背景画像は1920px程度の幅を想定して用意しておくと安心です。コンテンツ自体は中央のコンテンツ幅に収め、背景だけを全幅に広げる、という構成が一般的です。

想定する画面解像度

PCの画面解像度はさまざまですが、現在はフルHD（横1920px）が広く使われています。そのため、「背景は1920pxまで耐えられるように」「コンテンツは1000〜1200pxに収める」という考え方が、多くの環境に対応しやすい設計になります。

スマホでのLPサイズの目安

近年はLPへのアクセスの多くがスマホからになっており、スマホ表示を前提に設計することがとても重要です。

スマホのコンテンツ幅

スマホのLPは、基本的に画面の横幅いっぱいに表示します。デザインを考える際の基準幅としては、375px（多くのスマホで使われる標準的な論理幅）を想定して制作することが多いです。左右に少し余白（パディング）を取りつつ、中身は画面幅に合わせて柔軟に伸縮させるのが基本です。

レスポンシブで幅を可変にする

スマホは機種によって画面サイズが異なるため、特定の固定幅で作るのではなく、画面幅に応じて要素が伸縮する「レスポンシブデザイン」で作るのが現在の主流です。幅をパーセント指定にしたり、最大幅だけ決めて中で可変にしたりすることで、さまざまな端末で破綻しにくいLPになります。

LPの画像サイズの目安

LPでは、メインビジュアルや図版など画像を多用します。画像サイズは「表示サイズ」と「実データの解像度」を分けて考えるのがポイントです。

高解像度ディスプレイを意識する（2倍ルール）

スマホをはじめ、現在のディスプレイは高精細（Retinaなど）なものが多く、表示サイズの2倍の解像度で画像を用意するときれいに表示されます。たとえば横375pxで表示する画像なら、実データは横750px程度で書き出す、という考え方です。これにより、高精細な画面でも画像がぼやけず、くっきり表示されます。

メインビジュアル（ファーストビュー）の画像

LPの第一印象を決めるメインビジュアルは、画質と表示速度のバランスが重要です。PCのフルワイド背景なら横1920px前後、スマホ向けなら横750px前後を目安に、用途に応じて書き出します。PCとスマホで異なる画像を出し分けると、それぞれに最適化でき、無駄なデータ転送も抑えられます。

ファイル形式と容量の最適化

画像は解像度だけでなく、ファイル容量にも気を配る必要があります。写真はJPEG、透過やイラストはPNG、軽量化を重視するならWebPといったように、用途に応じて形式を選びます。さらに圧縮ツールでファイルサイズを削減すると、画質を保ちつつ表示速度を改善できます。

LPの縦の長さ（ページの高さ）について

LPは1ページで完結し、縦に長くスクロールさせる構成が一般的です。縦の長さに厳密な決まりはなく、「伝えたい情報を過不足なく載せられる長さ」が適切です。ただし、長ければよいわけではありません。

重要なのは、最初に表示される領域（ファーストビュー）でユーザーの興味を引き、その後の流れで自然に読み進めてもらうことです。冗長に長いと途中で離脱されますし、短すぎると説得材料が足りません。必要な情報を、適切な順番で、無駄なく配置することを意識しましょう。縦の長さは「結果」であって、最初から決めるものではないと考えるとよいでしょう。

最適なLPサイズで作るためのポイント

最後に、LPサイズを適切に設計するための実践的なポイントを整理します。

• スマホファーストで考える：アクセスの多くがスマホである以上、まずスマホでの見やすさを基準に設計し、PCに展開すると失敗が減ります。
• レスポンシブ対応を前提にする：固定幅にこだわらず、画面幅に応じて伸縮する設計にすることで、多様な端末に対応できます。
• 画像は2倍サイズで用意する：高精細ディスプレイでもぼやけないよう、表示サイズの2倍を基準に書き出します。
• 容量を最適化する：解像度を確保しつつ、圧縮や形式選びで容量を抑え、表示速度を犠牲にしないようにします。
• 実機で確認する：制作したら、実際のPC・スマホで表示を確認し、崩れやぼやけがないかをチェックします。

まとめ

LPサイズとは、ランディングページの幅や画像の大きさといった、ページの寸法に関わる設計値のことです。PCではコンテンツ幅を1000〜1200px程度に収めつつ背景はフルワイド（1920px想定）で、スマホは375pxを基準にレスポンシブで可変にするのが基本の考え方です。

画像は、高精細ディスプレイに対応するため表示サイズの2倍を目安に用意し、容量の最適化も忘れないようにしましょう。そして、アクセスの多いスマホを起点に設計し、最後は必ず実機で確認することが、見やすく成果につながるLPを作る近道です。サイズは見た目だけでなく、表示速度やコンバージョンにも関わる重要な要素として、最初の段階でしっかり設計しておきましょう。