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

一般的には、次の要素をファーストビューに配置します。

• キャッチコピー（何のページかが分かる言葉）
• メインビジュアル（商品やサービスのイメージ）
• 訴求のポイント（価格、実績、特典など）
• CTAボタン（問い合わせや購入への導線）

すべてを詰め込む必要はありません。伝えたいことが多いほど1つあたりの要素が小さくなり、かえって何も伝わらなくなります。優先順位を決めて絞り込むことが前提です。

ファーストビューの高さを決めることは、どこまでを最初の画面で見せるかを決めることと同じです。

高さを大きく取れば多くの情報を最初に見せられますが、1つあたりの要素は相対的に小さくなります。逆に高さを抑えれば要素は大きく見せられますが、伝えられる情報は減ります。この配分が、訪問者が続きを読むかどうかの判断に影響します。

また、高さの設定はスクロールの起点にもなります。ファーストビューの直後に何を置くかで、読み進めたときの流れが変わるためです。

PCのデザインデータは横1920px、高さ1000pxで1画面分としています。このうちコンテンツを配置する幅は1000〜1200px程度で、残りは左右の余白になります。コンテンツ幅はお客様のご要望に合わせて調整することが多い部分です。

スマートフォンのデザインデータは横750px、高さ1500pxで1画面分としています。横750pxは、高精細なディスプレイでも画像が粗く見えないよう、表示サイズの2倍相当で作成しているためです。

基準はあくまで目安で、実際の高さは商材やデザインの見せ方によって変わります。

キャッチコピーが長い場合や、訴求のポイントを複数並べる場合は、基準より高くなります。逆に商品の写真を大きく見せることを優先する場合は、要素を絞って高さを抑えることもあります。

PCで800〜1000px、スマートフォンで1400〜2000pxという幅は、この調整の結果として生まれるものです。厳密に1000pxや1500pxに収める必要はありません。

基準を1920×1000pxとしている根拠として、実際の閲覧環境のデータを示します。当サイトを2026年1月から9月に訪れた約6万人の画面解像度を集計した結果です。

1920×1080pxが最も多く、全体の3分の1を占めています。縦の解像度で見ると、900px以上の環境が81.6%でした。デザインデータを1000pxで作成しておけば、大半の環境で1画面に収まる計算になります。

スマートフォンは横390〜402pxが中心で、上位3つで56.8%を占めます。デザインデータの750pxは、この範囲を2倍相当でカバーする設定です。

なお、このデータはLP制作に関する情報を探している方の閲覧環境です。商材によって訪問者のデバイスは変わるため、自社のLPを制作する際は、想定する顧客層の閲覧環境もあわせて検討してください。

デザインデータの基準は次のとおりです。

PCは横1920pxのなかに、中央1000〜1200pxの範囲でコンテンツを配置します。左右に余白ができる構成で、コンテンツ幅はお客様のご要望に応じて調整します。

スマートフォンは横750pxの全面を使います。高精細なディスプレイで画像が粗く見えないよう、表示サイズのおよそ2倍で作成している数値です。

当社では、制作したデザインが横幅100%で表示されるようコーディングします。つまり画面の横幅いっぱいにデザインが広がる形です。

この場合、表示される大きさは閲覧する端末によって変わります。デザインデータの縦横比が保たれたまま、画面幅に合わせて伸縮するためです。

たとえば横750pxで作成したスマートフォンのデザインは、次のように表示されます。

• 画面幅375pxの端末：デザインが半分の大きさで表示され、高さ1500pxのファーストビューは750px分の領域になる
• 画面幅390pxの端末：やや大きく表示され、高さは約780px分
• 画面幅402pxの端末：さらに大きく表示され、高さは約804px分

デザインデータのほうが実際の表示サイズより大きいため、どの端末でも画像が粗くなることはありません。逆にデザインデータを小さく作ると、画面幅の広い端末で引き伸ばされ、ぼやけて見える原因になります。

制作を依頼する際は、提示された数値がデザインデータのものか、表示サイズのものかを確認してください。見積もりや仕様の認識がそろいます。

標準的な制作方式です。PCとスマートフォンで別々のデザインを作成し、コーディングで表示を切り替えます。

PCデザインは横1920px、ファーストビューの高さは900px前後で作ることが多くなります。コンテンツ幅は1000〜1200pxで、左右に余白を取る構成です。

スマートフォンデザインは、PCデザインを横750px×縦1500pxのサイズに再構築します。単に縮小するのではなく、縦長の画面に合わせて要素の配置や大きさを組み直す作業です。横並びだった要素を縦に並べ替えたり、文字サイズを調整したりします。

デザインを2種類作るため、それぞれの画面幅に最適な見せ方ができます。PCでは横幅を活かしたレイアウト、スマートフォンでは縦スクロールを前提とした構成と、デバイスごとに設計を変えられるのが利点です。

スマートフォンのデザイン（横750px×縦1500px）だけを作成し、PCでも同じデザインを表示する方式です。PCでは画面中央に幅750px相当でデザインを配置し、左右に余白ができる形になります。

デザインを1種類しか作らないため、制作の範囲が絞られます。そのぶん費用を抑えられるほか、公開後に修正する際も1つのデザインを直すだけで済みます。

PC表示の左右に余白ができる点が気になる場合は、PC表示用の背景を用意する方法もあります。

次のような条件に当てはまる場合、スマートフォンのデザインのみで制作する選択肢があります。

商材がBtoC向け、またはECモールで使用する

PC版を用意してもほとんど閲覧されないケースが多いためです。

集客がSNS広告中心

Meta広告などはスマートフォンでSNSを見ている人が対象になります。

コンバージョンがLINE友だち登録など

スマートフォンとの親和性が高い行動です。

予算を抑えたい

デザインが1種類になるぶん、制作費を抑えられます。

公開後に改善を重ねる予定がある

修正するデザインが1つで済むため、運用の負担が軽くなります。

逆に、PCからの流入が一定数見込まれる商材や、BtoBのように決裁者がPCで閲覧する可能性が高い場合は、レスポンシブ対応での制作が適しています。

どちらの方式が合うかは、商材と集客方法によって変わります。制作会社に相談する際は、想定している流入経路と閲覧デバイスを共有すると、適した方式を提案してもらえます。

ファーストビューに入れる要素が多いほど、必要な高さは大きくなります。

キャッチコピーだけであれば高さを抑えられますが、訴求のポイントを3つ並べる、実績の数値を見せる、キャンペーンの告知を入れるといった要素が増えると、それぞれを判読できる大きさで配置する必要が出てきます。

要素の種類によっても変わります。テキスト中心であれば高さを抑えられますが、商品写真を大きく見せたい場合や、動画を配置する場合は相応の領域が必要です。

高さを広げるか、要素を減らすか。この判断は、何を最初に伝えたいかの優先順位によって決まります。すべてを入れようとすると、結果的にどれも印象に残らないファーストビューになります。

ファーストビューですべてを伝える必要はありません。続きを読んでもらうための入口と考えれば、高さの取り方も変わります。

スマートフォンでは、スクロールする操作が当たり前になっています。最初の画面で興味を持ってもらえれば、その先を読み進めてもらえます。そのため、情報を詰め込むより、続きが気になる状態を作るほうが効果的な場合があります。

一方PCでは、スクロールせずに判断される割合が高くなる傾向があります。マウスホイールやトラックパッドの操作が必要なぶん、スマートフォンより能動的な行動になるためです。PCを主要な流入先と想定する場合は、ファーストビュー内で伝える情報を厚くする考え方もあります。

画面上の視線は、一定のパターンで移動するとされています。横書きの場合、左上から右へ、そして左下へと動くZ型や、左側を中心に上から下へ動くF型が知られています。

この流れに沿って、キャッチコピー、メインビジュアル、CTAボタンを配置すると、自然に読み進めてもらいやすくなります。逆に視線の流れと配置が合っていないと、要素が目に入らないまま離脱される原因になります。

スマートフォンでは画面が縦長になるため、上から下への流れが中心です。PCとは視線の動きが変わるため、同じ要素でも配置の順序を変える必要があります。レスポンシブ対応の制作でデザインを2種類作るのは、この違いに対応するためでもあります。