LPデザインのサイズ目安｜縦の長さ・横幅・コンテンツ幅を制作の実態から解説

LPの長さを考えるとき、pxの総数だけを見ても実感がつかみにくいものです。そこで当社では、1画面分を単位として長さを捉えています。

PCは横長の画面に対して横幅を広く使うため、1画面あたりの縦の長さは相対的に短くなります。一方スマートフォンは縦長の画面のため、同じ情報量でも縦に伸びる形になります。

加えて、スマートフォンのデザインデータは表示サイズの2倍相当で作成しています。高精細なディスプレイでも画像が粗く見えないようにするためです。実際に表示される大きさは、閲覧する端末の画面幅によって変わります。

この単位で数えると、たとえばPCで5000pxのLPは5画面分、スマートフォンで7500pxのLPは5画面分ということになります。スクロールして5回分の画面が流れていくイメージです。

当社では、LPの長さに応じて3つのプランを用意しています。情報量と予算のバランスを取りやすくするための区分です。

このうち最も依頼が多いのはハイクオリティプランで、10画面相当の長さになります。商材の説明や訴求のポイントを一通り盛り込むと、このくらいの分量になることが多いためです。

プランの区分は目安であり、これ以上の長さにも対応できます。20画面分が必要な商材であれば、その長さで見積もる形です。逆に、予算の範囲内でどこまで作れるかという相談もあります。「この予算ならこの長さまで」という提案ができるのは、長さで区切ったプランがあるためです。

次の章では、この長さがどのような条件で変わるのかを整理します。

次のような条件では、10画面相当かそれ以上の長さになることが多くなります。

検索広告からの流入を想定している

すでに課題を認識して検索している顕在層が対象になるため、競合他社と比較検討されます。比べられても選ばれるだけの情報量が必要です。

無形商材やBtoB、SaaSやシステム

形のないサービスは、導入後に何が変わるのかを説明しないと理解されません。納得に至るまでに省けない説明が多くなります。

採用LP

仕事内容、チーム体制、働き方、選考の流れと、応募を判断するための情報が多岐にわたります。

説明が必要な成分や技術を含む商材

目新しい成分を配合した美容商材などは、その成分が何なのかから伝える必要があります。

単価が高い商材

高額な美容施術のように、金額に見合うかを慎重に判断される商材は、根拠を積み上げる構成になります。

購入者と使用者が異なる商材

ペット向け商材のように、飼い主が納得しないと購入に至らないものは、判断材料を丁寧に示す必要があります。

共通しているのは、読み手が納得するまでに複数の段階を踏む商材だという点です。比較検討される、理解に説明を要する、金額が大きいといった条件が重なるほど、必要な情報量は増えます。

次のような条件では、5画面から10画面程度に収まることが多くなります。

SNS広告からの流入を想定している

Meta広告などは潜在層が対象になります。まだ課題を強く認識していない段階なので、情報が多すぎると重く感じられます。興味を持ってもらう程度の分量が適しています。

ブランドの認知度が高い

すでに知られているブランドであれば、会社や商品の説明を省けます。

商材そのものが広く知られている

何であるかを説明する必要がないぶん、訴求のポイントに絞れます。

潜在層向けのLPで情報を詰め込むと、読み手の関心の高さと内容の熱量が釣り合わなくなります。まだ検討段階に入っていない人に、比較検討用の情報を渡しても読み進めてもらえません。

次のような場合は、4画面以下の短いLPを選ぶことがあります。

予算を抑えたい

まずLPを試してみたいという段階では、短い構成から始める選択肢があります。

テストマーケティングを行う

反応を見ることが目的であれば、あえて短く作って検証する方法もあります。

短いLPは情報量が限られるため、訴求のポイントを絞り込む必要があります。何を残して何を省くかの判断が、長いLPよりシビアになる面もあります。

最初に決めるのは、どこから流入させるかです。検索広告なのかSNS広告なのか、既存顧客へのメール配信なのかによって、読み手の温度感が変わります。

次に、その温度感の相手に対して、行動してもらうまでに何を伝える必要があるかを洗い出します。この情報量が、必要な長さになります。

制作会社に相談する際は、想定している流入経路と商材の内容を共有してください。長さの見当がつき、予算との調整もしやすくなります。

PCのデザインデータは横1920pxで作成します。ただし、この幅いっぱいにコンテンツを配置するわけではありません。

実際に文章や画像を配置するのは中央の1000〜1200px程度で、左右には余白ができます。画面いっぱいに文章を広げると1行が長くなりすぎ、視線の移動距離が増えて読みにくくなるためです。

コンテンツ幅をどのくらいにするかは、お客様のご要望に応じて調整します。狭めにすれば落ち着いた印象になり、広めにすれば情報を並べやすくなります。背景に色や画像を敷く場合は、1920px全体を使う形です。

スマートフォンのデザインデータは横750pxで、全面を使います。PCのように左右の余白を取ることはありません。

750pxという数値は、実際に表示される横幅の2倍相当です。当サイトの訪問者データを見ると、スマートフォンの画面幅は390〜402pxが中心でした。デザインデータをこの実寸で作成すると、画面幅の広い端末では引き伸ばされてぼやけます。2倍で作成しておけば、どの端末でも鮮明に表示されます。

ここまでの数値はすべてデザインデータ上のものです。当社ではデザインが横幅100%で表示されるようコーディングするため、実際の表示サイズは閲覧する端末の画面幅によって変わります。

デザインデータの縦横比が保たれたまま、画面幅に合わせて伸縮する仕組みです。デザインデータのほうが実際の表示サイズより大きいため、画像が粗くなることはありません。

制作会社から数値を提示されたときは、デザインデータのものか表示サイズのものかを確認してください。認識がずれると、仕上がりのイメージも変わります。

LPを開いたときに、スクロールせずに最初に表示される領域です。訪問者が読み進めるかどうかを判断する場所にあたります。

ここで伝えるのは、何の商品なのか、どんなサービスなのかという前提です。内容が分からないまま読み進めてもらえることはありません。広告から流入させる場合は、その広告で伝えた内容の続きになっているかが判断の基準になります。

長さとしては1画面分、PCで1000px・スマートフォンで1500px前後が基準です。伝えたい要素が多い場合は、これより大きくなることもあります。

ファーストビューの高さの決め方や、入れる要素の考え方は、関連記事で詳しく解説しています。

関連記事

LPのファーストビューのサイズと高さ｜PC・スマホ別の目安と制作の実態

2026.09.25

ファーストビューで興味を持ってもらった後、商材の詳しい内容を伝えるパートです。LP全体の大半を占めます。

商品やサービスの説明に加えて、利用者の声、導入の効果、他社との違い、よくある疑問への回答などを配置します。訪問者が「自分に必要なものだ」と判断するための材料を並べる部分です。

長さが最も変動するのがこのパートです。説明が必要な商材ほど本体が長くなり、すでに知られている商材であれば短く済みます。前章で整理した長さの違いは、主にこの本体部分の差から生まれています。

購入や問い合わせの方法をまとめるパートです。本体で検討する意欲が高まった訪問者が、実際に行動に移すための情報を配置します。

入力フォーム、料金や購入方法の案内、会社概要、注意事項や免責事項などが該当します。フォームは項目を絞り、入力の手間を減らすことが基本です。

長さとしては1〜2画面分に収まることが多くなります。ここで情報を増やしすぎると、行動する直前で迷わせる原因になります。

10画面相当のLPであれば、おおまかな配分は次のようになります。

短いLPを作る場合も、この3つのパートは必要です。4画面相当であれば、ファーストビュー1画面、本体2画面、クロージング1画面という配分になります。本体を削ることになるため、訴求のポイントを絞り込む判断が求められます。

LPが長くなるほど、配置する画像の枚数も増えます。画像が増えれば読み込みに時間がかかり、表示されるまでに待たされる原因になります。

特にスマートフォンでは、通信環境によって読み込み速度に差が出ます。電波状況が良くない場所で閲覧された場合、内容を見てもらう前に離脱される可能性があります。

対策としては、画像の圧縮やWebPなど軽量な形式の使用、画面に表示される直前で画像を読み込む遅延読み込みの実装などがあります。長いLPを作る場合は、こうした対応が含まれるかを制作会社に確認してください。

LPは公開した時点が完成ではありません。反応を見ながら、訴求の順序を入れ替えたり、効果の薄い部分を削ったりする調整が発生します。

その際、どこからどこまでを1つのまとまりとして扱えるかが、修正のしやすさを左右します。パートごとに区切られた構造であれば、その部分だけを差し替えられます。逆に全体が一体になっていると、一部の変更でも全体に影響します。

長いLPほど、この構造が重要になります。10画面分のLPを1箇所修正するために全体を作り直すことになれば、運用のコストが上がります。制作の段階で、公開後の修正方法と費用を確認しておいてください。

同じ情報量でも、PCとスマートフォンでは体感する長さが異なります。PCの1画面が1000px、スマートフォンの1画面が1500pxという差が、そのままスクロール量の差になるためです。

PCで見たときにちょうどよいと感じた長さでも、スマートフォンでは長く感じられることがあります。流入の大半がスマートフォンであれば、そちらを基準に判断するほうが実態に合います。

制作方式によっても変わります。PCとスマートフォンでデザインを分ける場合は、それぞれに適した情報量を設計できます。スマートフォンのデザインのみで制作する場合は、1つの構成で両方に対応することになります。