「LPのファーストビューは、パソコンが幅1920px、スマートフォンが幅750px。この数字で作れば形になる」。制作の現場では、この2つの値が長く使われてきました。デザインツールに最初から用意されているアートボードのサイズがその数値で、前任者から引き継いだテンプレートにも同じ値が入っているためです。ところが、その通りに作ったLPを会社のノートパソコンで開くと、いちばん押してほしかったボタンが画面の下に隠れている。
弊社はこれまで多くのWebページと記事を制作し、公開後に社内のノートパソコンやスマートフォンで表示を確かめてきました。その経験から言えるのは、幅や高さの数値を守ることと、見せたい要素が画面に残ることは別の問題だということです。ファーストビューのサイズを決める作業は、何pxで作るかを選ぶことよりも、どこから先は切れてよいかを線引きすることに近いのです。
本記事では、パソコンとスマートフォンそれぞれの幅と高さの目安から、目安どおりに作っても見切れてしまう原因、そして高さを3つの層に分けて決める手順までを、公開後の見え方を確かめてきた立場で順を追ってお伝えします。
- パソコンとスマートフォンで使う幅・高さ・画像書き出しの目安
- 目安どおりに作っても画面の下が切れてしまう4つの原因
- 高さを「必ず見える」「切れてよい」「制作用」の3層に分けて決める手順
- 載せる要素を先に絞り込んでから高さを出す進め方
- 100vhの指定や画像の書き出し倍率でつまずきやすい点
LPのファーストビューとサイズの基本
ファーストビューとは、LPを開いた瞬間にスクロールせずに表示される範囲のことです。訪問者はこの範囲だけを見て「自分に関係のあるページか」を判断するため、ここに何を置くかが以降の読み進めと申し込み数を左右します。数値の話に入る前に、言葉の整理から始めます。
ファーストビューとメインビジュアルの違い
この2つは混同されやすいのですが、指しているものが違います。メインビジュアルは、ページ最上部に置く大きな画像やイラストそのものを指します。対してファーストビューは、そのメインビジュアルに加えてキャッチコピー、サブコピー、ロゴ、申し込みや資料請求へ進むボタン（CTAボタン）まで含んだ「最初に映る画面全体」です。
この区別を持っておくと、サイズの議論が整理できます。メインビジュアルは画像ファイルの大きさの話、ファーストビューは画面に映る領域の話。デザイナーと発注側で話がかみ合わないときは、たいていこの2つが混ざっています。
「サイズ」が指す3つの数字
LPの現場で「ファーストビューのサイズ」と言うとき、実際には次の3つが同じ言葉で呼ばれています。
- 制作サイズ：デザインデータを作るときのアートボードの幅と高さ
- 表示領域：訪問者のブラウザに実際に映る幅と高さ
- 画像の書き出しサイズ：メインビジュアルを画像ファイルとして出力するときのピクセル数
この3つは一致しません。制作サイズを1920pxにしても、表示領域が1920pxある人はごく一部です。書き出しサイズを大きくしたところで、表示領域が広がるわけでもありません。
以降はこの3つを分けて扱います。分けずに1つの数字で語ろうとするから、「1920pxで作ったのに切れる」という食い違いが起きます。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
PC・スマホ別のファーストビューの推奨サイズ
まずは制作の現場で使われている数値の目安を並べます。ただしこれは「この通りに作れば正解」という値ではありません。次の章で扱う見切れの検討をするための出発点として読んでください。
パソコンの制作幅とコンテンツ幅
パソコン向けのデザインデータは、幅1920pxのアートボードで作るのが一般的です。背景の色や写真はこの1920pxいっぱいに広げます。
ただし、文字とボタンは中央1000〜1200pxの内側に収めるのが安全です。ノートパソコンのブラウザは1280〜1440px程度の幅で開かれることが多く、1920pxを前提に端まで要素を置くと、狭い画面では左右が切れるか、全体が縮んで文字が読めなくなります。中央に寄せておけば、画面が広い人には左右の余白として、狭い人には全体が収まる形として、どちらの環境でも成立します。
パソコンのファーストビューの高さ
高さは幅よりも環境差が大きく、単一の正解がありません。実務では、必ず見える高さを600px前後、デザインデータの高さを700〜800pxとして設計する形に落ち着くことが多いと感じています。
なぜ600px前後なのか。ノートパソコンの画面の縦は900〜1080pxが主流ですが、そこからブラウザのタブ、アドレスバー、ブックマークバー、そしてOSのタスクバーが縦方向を占めます。この上下で150〜250px程度が失われるため、ページが実際に映るのは700〜880px程度。ここに次章で扱う表示拡大率の影響を織り込むと、「どの環境でも確実に見える」と言い切れるのは600px前後まで、という計算になります。
スマートフォンの幅と高さ
スマートフォンは幅375pxを基準に設計します。これはCSSピクセルという、画面の物理的な画素数ではなく表示上の単位です。現行のスマートフォンは360pxから430px程度の幅に収まるため、最も狭い360pxで崩れないことを確認しておけば、実質すべての端末をカバーできます。
高さは、アドレスバーやタブバーを除いた表示領域が600〜700px程度になります。ただしこの値は端末の世代や設定で上下するため、必ず見せたい要素は上から500px以内に置くのが実務的な線引きです。
| パソコン | スマートフォン | |
|---|---|---|
| 制作データの幅 | 1920px | 375px |
| 文字とボタンを置く幅 | 1000〜1200px | 335〜355px（左右に余白20px） |
| 必ず見える高さ | 600px前後 | 500px前後 |
| 制作データの高さ | 700〜800px | 700px前後 |
| 画像の書き出し | 2倍（横2400〜3840px） | 2倍（横750px） |
この表で押さえてほしいのは、「制作データの幅」と「文字とボタンを置く幅」、そして「必ず見える高さ」が別々の数値だという点です。1920pxや375pxはあくまでデザインデータを作るための値で、訪問者の目に確実に入る範囲はその内側にあります。この2種類を1つの数字にまとめようとしたとき、次章で挙げる見切れが起きます。
画像の書き出しサイズと容量の目安
高解像度ディスプレイでは、CSS上の1pxが物理的な2つ以上の画素で描かれます。そのため画像は表示させたい幅の2倍で書き出すのが基本です。スマートフォンで幅375pxいっぱいに写真を出すなら750px、パソコンで1200px幅なら2400pxということになります。
3倍で書き出す選択肢もありますが、ファイル容量が跳ね上がる割に肉眼での差が小さく、多くの案件では2倍で十分です。ここで容量を軽視できないのは、ファーストビューの画像がページ表示速度の評価に直結するためです。Googleが定めるCore Web Vitalsでは、画面内で最も大きな要素が表示されるまでの時間（LCP）を2.5秒以内に収めることが良好な水準とされています。ファーストビューの写真は、たいていこの「最も大きな要素」に該当します。
※ 出典：web.dev「Largest Contentful Paint（LCP）」
形式はJPEGやPNGよりもWebPを選び、1枚あたり200KB以内を目標にすると、表示速度と画質の折り合いを付けやすくなります。
関連記事：BtoBのLPは型より載せる材料で決まる｜構成と作り方の考え方
目安どおりに作っても見切れる4つの理由
ここからが、数値の一覧では解決しない部分です。前章の目安を守っても、実際の画面ではファーストビューの下が切れます。しかも原因は、訪問者が使っているディスプレイの大きさそのものではありません。
Web担当者パソコンは1920px、スマートフォンは750pxで作ればよいと教わりました。それで問題ないはずですよね。
Writers-hub編集部
その2つは「デザインデータを作る大きさ」の数値で、「訪問者に映る大きさ」とは別物です。実際の表示領域は、ブラウザの上下のバー、Windowsの表示拡大率、スマートフォンのアドレスバーの伸び縮みによって、数値どおりには残りません。切れる前提で、どこまでを必ず見せるかを決めておくほうが確実です。
見切れの原因の大半は画面の大きさではなく、ブラウザと拡大率の設定にあります。順に見ていきます。
ブラウザの上下に取られる縦の余白
パソコンでLPを開くと、画面の上部にはタブとアドレスバーが並び、人によってはブックマークバーも表示されています。画面の下端にはOSのタスクバーやDockがあります。これらを合計すると、縦方向の150〜250pxがページの表示に使えません。1080pxのディスプレイでも、実際にページが映るのは830〜930px程度という計算です。
さらに、ノートパソコンを外部ディスプレイにつながず単体で使っている場合、画面の縦は768pxや800pxということもあります。この環境では、ページが映る高さは600pxを下回ります。
Windowsの表示拡大率125％
ここは実務でとくに見落とされやすい点です。Windowsのノートパソコンは、初期設定で画面の表示拡大率が125％になっている機種が多くあります。文字を読みやすくするための設定ですが、ブラウザから見ると表示領域が縮んだのと同じ扱いになります。
1920×1080のディスプレイで拡大率が125％なら、CSS上の表示領域は1536×864に相当します。ここからブラウザの上下のバーを引くと、残るのは660px前後。パソコン向けに800pxの高さでデザインしていた場合、下の140px分が最初の画面には映りません。CTAボタンをファーストビューの下端に置いていたなら、その環境の訪問者はボタンを一度も見ないままページを離れることになります。
確認は自分の作業環境だけで済ませないでください。Macの27インチディスプレイで作業しているデザイナーの画面では、800pxの高さでも余裕を持って収まります。チェックすべきは、ブラウザの縦幅を660px程度まで縮めた状態です。多くのブラウザは開発者ツールで表示サイズを指定できるため、この検証は数分で終わります。
スマートフォンのアドレスバーの伸縮
スマートフォンのブラウザは、ページを開いた直後はアドレスバーが大きく表示され、下にスクロールすると縮んで表示領域が広がります。つまり、最初に映る高さは、スクロール後の高さより60〜100px狭いわけです。
この差が問題になるのは、CSSで高さを`100vh`と指定したときです。iOSのSafariでは`100vh`がアドレスバーを含んだ大きい方の高さで計算されるため、指定どおりに作ったつもりでも、ページを開いた直後は下端が画面の外に出ます。対策としては、実際の表示領域に追従する`100dvh`を使うか、`min-height`で固定値の下限を持たせる方法があります。
固定ヘッダーとセーフエリアの重なり
スクロールしても上部に残る固定ヘッダーを置いている場合、その高さ（パソコンで60〜80px、スマートフォンで50〜60px）はファーストビューから差し引かれます。ヘッダーの高さを引いた残りが、実際にコンテンツを置ける範囲です。
もう1つが、画面下端のセーフエリアです。ホームバーのあるスマートフォンでは、画面の最下部に操作用の領域が確保されており、ここに固定のCTAボタンを置くと指が届きにくくなるか、システムの操作と干渉します。画面下に追従するボタンを置く設計なら、下端に20〜35px程度の余白を残しておく必要があります。
関連記事：記事LP vs 通常ブログ記事——CVRが高いのはどちらかを実データで検証
ファーストビューの高さを決める3つの層
ここまでの内容を、実際に使える手順に落とし込みます。高さを1つの数字で決めようとするから見切れが事故になるのであって、3つの層に分けて「何をどこに置くか」を決めれば、切れること自体は問題ではなくなります。
第1層は必ず見える高さ
どんな環境でも表示される範囲です。パソコンは上から600px、スマートフォンは上から500pxを目安にします。ここに入れるのは、次の2つだけです。
ひとつは「誰向けの、何のページか」が1行で分かるキャッチコピー。もうひとつは、その主張を裏づける最も強い理由です。実績の数字でも、対応範囲でも、価格の明示でも構いません。この2つが揃っていれば、訪問者は「読み進める価値があるか」を判断できます。
第2層は切れてよい高さ
パソコンで600〜800px、スマートフォンで500〜700pxの帯です。環境によって見えたり切れたりする、不確定な範囲だと考えてください。
ここに置くのは、見えれば効果があるが、なくても意味が通る要素です。導入企業のロゴ、受賞歴、補足のサブコピー、2つ目のCTAボタンなどが該当します。「切れると困る要素」がこの層に入っていないかを確認するのが、公開前チェックの中身になります。
なお、この層で要素をあえて半分だけ見せる作り方は有効です。帯の下端に次のセクションの見出しや画像の上部をわずかに覗かせておくと、訪問者は続きがあると理解してスクロールを始めます。きれいに切りそろえるより、続きの存在が伝わるほうがページの下まで読まれます。
第3層は制作データの高さ
デザインデータのアートボードに設定する高さです。パソコンで800px、スマートフォンで700pxを取り、背景の写真やグラデーションはさらに大きめに用意しておきます。画面が縦に長い環境で背景が足りず、下端に隙間が出るのを避けるためです。
3つの層を先に決めておくと、デザイナーと発注側のやり取りが具体的になります。「もう少し上に詰めてください」ではなく、「この実績ロゴは第2層に置いてよいので、キャッチコピーを第1層に収めてください」と言えるようになります。
サイズより先に決める掲載要素の優先順位
高さが決まらない案件には共通点があります。載せたい要素を全部並べてから、収まる高さを逆算しようとしていることです。この順番だと要素は減らず、高さだけが伸びていきます。
経営者社内から出てきた要望を入れていったら、ファーストビューが1200pxになってしまいました。どこから削ればいいのでしょうか。
Writers-hub編集部
削る作業から入ると、社内の力関係で結論が決まってしまいます。先に「このページで達成したいことは何か」を1つに絞り、そこに直接効く要素だけを第1層に残してください。残りは削除ではなく第2層以下への移動として扱うと、社内の合意も取りやすくなります。
先に決めるのは高さではなく、切れても意味が通る要素の線引きです。次の順序で進めます。
資料請求なのか、無料相談の予約なのか、商品の購入なのか。複数の目的を1枚のLPに詰め込むと、ファーストビューのボタンが2つ3つと増え、訪問者はどれを押すべきか判断できなくなります。副次的な目的は、ページ下部で受けると割り切ってください。
広告から来たのか、検索から来たのか。どんな言葉で検索し、何を疑っている状態なのか。この前提が変わると、ファーストビューに置くべき一行も変わります。同じ商品でも、比較検討中の人と存在を知ったばかりの人では、必要な情報が違います。
「誰向けの何か」を伝える一行と、それを裏づける最も強い理由。この2つに絞ります。3つ目を入れたくなったら、それは第2層に置く候補です。
実績ロゴ、受賞歴、キャンペーンの告知、サブコピーは第2層へ。詳しい説明や事例、料金表は本文へ送ります。振り分けが終わってから、第1層と第2層の合計で高さを確定させます。
この順で進めると、高さは「決めるもの」ではなく「決まるもの」になります。要素が確定してから高さを出すため、後から詰め込んで見切れる事故が起きません。
ファーストビューに載せきれない説明を、どこで受けていますか？
第1層に置けるのは1行と1つの理由だけです。そこで削った「詳しい根拠」や「よくある疑問への答え」は、本来はLPの外側にある読み物で受け止めるべき情報です。弊社は、その受け皿となる記事の企画から執筆までを制作体制ごとお手伝いしています。
ファーストビューのサイズでよくある失敗
最後に、公開前の確認で拾っておきたい失敗を挙げます。どれも数値を知らなかったから起きるのではなく、確認の手順が抜けたときに起きます。
- 高さを先に決めてから、要素を後から詰め込んでいる
- デザインデータの1920px幅を前提に、文字やボタンを画面の端まで置いている
- キャッチコピーを画像に焼き込み、文言修正のたびに書き出しをやり直している
- `100vh`を指定して安心し、iOSのSafariで下端が切れる状態に気づいていない
- 高解像度対応のつもりで3倍以上に書き出し、画像1枚が1MBを超えている
- デザイナーの27インチディスプレイだけで確認し、ノートパソコンで開いていない
- 画面下に固定したCTAボタンが、ホームバーと重なって押しにくくなっている
とりわけ見落とされがちなのが、最後から2番目の確認漏れです。自分のディスプレイで見えていることは、成果の根拠になりません。公開前には、ブラウザの縦幅を660px程度に縮めた状態と、手元のスマートフォンの実機、この2つだけは必ず通してください。所要時間は5分ほどですが、ここで見つかる問題は公開後の修正コストとは比べものになりません。
社内で作る場合も外部の制作会社に依頼する場合も、3つの層と「必ず見せる2要素」を発注の段階で共有しておくと、確認の回数が減ります。デザイン案が出てきてから「もっと上に詰めて」と伝えるやり取りは、双方にとって時間の消費が大きくなります。
よくある質問
制作の現場で実際に受けることの多い質問を、5つに絞ってお答えします。数値そのものより、どの環境を基準に判断するかが答えの分かれ目になります。
単一の正解はありません。パソコンで600px、スマートフォンで500pxを「必ず見える高さ」とし、そこから先は切れてもよい範囲として設計してください。制作データはパソコン800px、スマートフォン700pxが目安です。
それだけでは不十分です。iOSのSafariでは100vhがアドレスバーを含む高さで計算されるため、ページを開いた直後は下端が画面の外に出ます。100dvhを使うか、min-heightで下限を持たせてください。
2倍で十分な案件がほとんどです。3倍は容量が大きく増える割に肉眼での差が小さく、表示速度の低下という代償のほうが目立ちます。WebP形式で1枚200KB以内を目安にしてください。
広告の出稿先で決めるのが実務的です。流入がスマートフォンに偏るなら、狭い画面で成立する構成を先に固め、その後で余白の使い方をパソコン向けに広げると手戻りが減ります。
商品や価格が既に理解されている再訪問者向けのLPなら有効です。一方、初めて知る商材では、説明を読む前にボタンだけがある状態になり、押される確率は下がります。第1層に入れるかどうかは、訪問者が来る直前の状態から判断してください。
まとめ｜サイズは「切れてよい範囲」から決まる
LPのファーストビューのサイズは、パソコンが幅1920pxで高さ700〜800px、スマートフォンが幅375pxで高さ700px前後。これが制作データの目安です。ただしこの数値をそのまま満たしても、ブラウザの上下のバー、Windowsの表示拡大率125％、スマートフォンのアドレスバーの伸縮によって、実際に映るのはパソコンで600px前後、スマートフォンで500px前後にとどまります。
だからこそ、高さは1つの数字ではなく3つの層で考えます。必ず見える高さには「誰向けの何か」を伝える一行と、それを裏づける最も強い理由だけを置く。切れてよい高さには、見えれば効果があるが無くても意味が通る要素を置く。制作データの高さは、背景が足りなくならないよう余裕を持って取る。この順で決めれば、切れること自体は事故ではなくなります。
私たち合同会社Writers-hubは、LPの外側で訪問者の疑問に答える記事コンテンツの企画と制作を手がけています。ファーストビューの第1層から外した「詳しい根拠」や「他社との違い」は、消してよい情報ではなく、置き場所を変えるべき情報です。その置き場所づくりに困ったときは、具体的なページ構成の話から一緒に考えられます。
LPに人を集める手段が、広告だけになっていませんか？
ファーストビューを整えても、訪問者の数と質が変わらなければ問い合わせ件数は動きません。検索経由で比較検討中の読者を集める設計から、AI検索での引用のされ方まで、貴社の状況をうかがったうえでご提案します。
