LPのファーストビューとは？推奨サイズと設計の手順

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

「ファーストビューは何ピクセルで作ればいいですか」。LP制作で最も多く聞かれる質問のひとつです。

そして、これに固定値で答えられる人はいません。ファーストビューの高さは、見ている人の端末とブラウザによって変わるからです。「iPhoneなら〇〇px」という数字を持ってきても、機種によっても、ブラウザのアドレスバーの有無によっても変わります。

ではどうするか。答えは、自社のLPに実際に来ている端末の分布から基準値を出すことです。この記事では、その手順を具体的に示します。

あわせて、ファーストビューに入れるべき4要素と、作ったあとに確認する方法まで解説します。読み終えたときに、自社のLPのファーストビューを何pxで設計すべきか、自分で決められる状態を目指します。

1. LPのファーストビューとは？なぜ最重要なのか

1-1. スクロールせずに見える範囲のこと

ファーストビュー（FV）とは、ページを開いた瞬間、スクロールする前に画面に表示されている範囲のことです。紙媒体の用語を借りて「アバブ・ザ・フォールド（折り目より上）」とも呼ばれます。

LPにおいてこの領域が特別なのは、全セッションの100%が必ず見る唯一の領域だからです。2画面目以降は、スクロールした人しか見ません。つまりファーストビューは、唯一「全員に届く」場所です。

逆に言えば、ここで「自分には関係ない」と判断されると、その先にどれだけ良い内容を書いていても届きません。

1-2. ファーストビューで起きている2つの離脱

ファーストビューでの離脱には、原因が異なる2種類があります。切り分けないと対策を間違えます。

(1) 表示される前に離脱する

ページの読み込みが遅く、表示を待たずに戻られるケースです。Googleが公開している調査では、モバイルページの読み込みに3秒以上かかると訪問者の53%が離脱する傾向が示されています（出典：Think with Google）。

これはデザインの問題ではなく速度の問題です。画像の容量、読み込みの順序、外部スクリプトの数が原因になります。測り方はPageSpeed Insights とは？指標の見方と改善する手順を解説で解説しています。

(2) 表示されたうえで離脱する

読み込みは間に合っているのに、内容を見て戻られるケースです。最も多い原因は、広告の訴求とファーストビューの内容が一致していないことです。

広告で「初回半額」と打ち出しているのに、リンク先の冒頭にその情報がなければ、ユーザーは「違うページに来た」と判断します。離脱率から原因を切り分ける手順はLPの離脱率を改善する方法とは？メリットと分析ツールを紹介にまとめています。

本記事では(2)、つまり表示されたうえで読んでもらうための設計を扱います。

2. ファーストビューの推奨サイズは「自社のデータから出す」

ここが本記事の中心です。

2-1. 固定値が存在しない理由

ファーストビューの高さは、次の要素すべてに左右されます。

• 端末の画面解像度（機種ごとに異なる）
• ブラウザのアドレスバー・ツールバーの高さ（スクロールで隠れる場合もある）
• OSのステータスバー、ホームインジケーターの高さ
• ブラウザの種類（Safari・Chrome・アプリ内ブラウザで異なる）

「アプリ内ブラウザ」は特に見落とされます。InstagramやLINEの広告から遷移した場合、画面上部にアプリ独自のバーが表示され、その分だけファーストビューが狭くなります。SNS広告を配信しているなら、この分を見込んでおく必要があります。

つまり、汎用の推奨サイズという概念自体が成立しません。自社のLPに来ている端末の分布から決めるしかありません。

2-2. GA4から自社の基準値を出す手順

GA4に蓄積されている画面解像度のデータを使います。

手順

1. GA4を開き、左メニューの「レポート」→「ユーザー」→「ユーザーの環境」→「ユーザーの環境の詳細」を開く
2. 表の1列目（ディメンション）を「画面の解像度」に変更する
3. 期間を直近90日に設定する
4. あわせて「デバイスカテゴリ」でモバイルに絞り込む

これで、自社のLPを見ている人の画面解像度が多い順に並びます。

基準値の決め方

上位から累積して80%をカバーできる解像度を探し、その中で最も高さが小さいものを基準にします。最も多い解像度ではなく、カバー範囲の下限を取るのがポイントです。多数派に合わせると、画面の小さい端末で要素が見切れます。

ただし、GA4に出るのは端末の画面解像度であって、実際に表示に使える高さ（ビューポート）ではありません。ブラウザのアドレスバーやツールバーの分だけ小さくなります。

この差は端末とブラウザで変わるため、目安の数字を当てはめず実測してください。方法は簡単です。確認用のページを1枚用意し、`window.innerHeight` の値を画面に大きく表示させておきます。そのページを対象の端末・対象のブラウザで開けば、実際に使える高さがそのまま読み取れます。

SNS広告を配信しているなら、LINEやInstagramのアプリ内ブラウザからも同じページを開いてください。アプリ独自のバーの分だけ、さらに小さい値が出るはずです。その中で最も小さい値が、設計の基準になります。

2-3. 実機で確認する方法（PAA「スマホでどうやって見るの？」への答え）

数値で設計したあとは、必ず実機で確認します。ブラウザ幅を縮めた確認では再現しないためです。

PCのブラウザで疑似確認する場合

1. Chromeでページを開き、右クリック →「検証」でデベロッパーツールを開く
2. 左上のスマートフォンのアイコン（Toggle device toolbar）をクリック
3. 上部のプルダウンから確認したい機種を選ぶ

ただしこの方法では、アプリ内ブラウザのバーは再現されません。

実機で確認する場合

自社のLINE公式アカウントやInstagramのプロフィール欄などにURLを置き、そこから開いてください。実際の広告経由と同じ見え方になります。SNS広告を配信しているなら、この確認は必須です。

3. ファーストビューに入れる4要素

サイズが決まったら、限られた面積に何を入れるかを決めます。

3-1. キャッチコピー｜誰に何を提供するか

最も面積を取る要素です。対象と提供価値の2つを1行で示します。

「あなたのビジネスを加速させる」では対象も価値も分かりません。「月商100万円以下のEC事業者へ｜広告運用を内製化する」なら、対象（月商100万円以下のEC事業者）と価値（内製化）が明確です。

読み手は自分が対象かどうかを最初に判断します。そこで対象外だと分かってもらうことも、無駄なクリックを減らす意味では正しい設計です。

3-2. サブコピー｜キャッチを補う具体

キャッチコピーで言い切れなかった条件や数字を置きます。「初期費用0円／最短翌営業日から」のように、判断材料になる事実を短く並べます。

ここに形容詞を並べても効きません。数字と条件を入れてください。

3-3. ビジュアル｜使っている場面が分かるもの

商品単体の写真より、使っている場面が伝わる画像のほうが理解されます。読み手は「自分が使っている状態」を想像できたときに関心を持ちます。

素材サイトの汎用写真は、競合と重複します。自社でしか用意できない画像を1枚使うだけで印象が変わります。

3-4. CTA｜ファーストビュー内に1つ置く

ファーストビューの中にCTAを1つ置いてください。「まだ説明していないのに」と思うかもしれませんが、すでに決めている人が一定数います。その人にスクロールを強いる理由はありません。

文言は押した後に何が起きるか分かるものにします。作り方は成果が出るCTAの文言の作り方｜事例、5つのコツと改善方法を紹介、ボタンのデザインは成果が出るCTAボタンのデザインとは？効果的な方法と実践ステップで解説しています。

入れないほうがよいもの

• グローバルナビゲーション（他ページへ逃がす導線になります）
• 会社ロゴの過度な強調（読み手が知りたいのは会社名ではありません）
• 装飾だけの要素（限られた面積を消費します）

4. 作ったあとに確認する3つのこと

4-1. 広告の訴求と一致しているか

配信中の広告クリエイティブとファーストビューを並べて見比べてください。バナーに書いた言葉が、ファーストビューにも書かれているかを確認します。

複数の訴求で配信している場合、すべてのバナーに対して1本のLPで受けていると、どれかが必ずズレます。訴求ごとにファーストビューを出し分けるのが本来の形です。

4-2. ヒートマップでスクロール到達率を見る

ファーストビューを見た人のうち、何%が次の画面に進んだかを確認します。この数字が低ければ、ファーストビューで止まっているということです。

どこで止まっているかの見方はヒートマップ分析とは？LP改善の見方とおすすめツール5選で解説しています。

4-3. 端末別にCVRを分けて見る

GA4でデバイスカテゴリ別にCVRを比較します。スマートフォンだけ極端に低いなら、ファーストビューで要素が見切れているか、読み込みが遅い可能性があります。

スマートフォン特有の設計論は【2026年最新版】スマートフォンLPOとは？成果を出すための設計と改善ポイントで詳しく扱っています。本記事はファーストビューに絞りました。

5. ファーストビューの検証ができる「Squad beyond」

ファーストビューは、正解を一度で当てるものではありません。複数パターンを配信して、数字で決める領域です。

Squad beyondは、LPの制作・計測・改善を1つの画面で行うデジタルマーケティングプラットフォームです。ファーストビューの検証に関わる部分では、次のことができます。

• 同じURLのままABテストができる：キャッチコピーや画像だけを変えたパターンを同時に配信し、CVRで比較できます
• 広告の訴求ごとに出し分けられる：流入元やパラメータに応じてファーストビューを切り替えられるため、バナーとの不一致をなくせます
• ヒートマップでスクロール到達率が見える：ファーストビューで止まっているのか、その先で離脱しているのかを切り分けられます
• クリック操作で編集できる：ファーストビューの差し替えにコーディングが不要なため、検証の回転を上げられます

6. ファーストビューについてよくある質問

7. まとめ

ファーストビューは、全セッションの100%が必ず見る唯一の領域です。ここで「自分には関係ない」と判断されると、その先は読まれません。

推奨サイズに固定値はありません。端末の解像度、ブラウザのUI、アプリ内ブラウザの有無で変わるためです。GA4の画面解像度データから、累積80%をカバーする範囲の下限を基準にし、ブラウザUI分を差し引いて設計してください。

入れる要素は4つ。対象と価値を1行で示すキャッチコピー、数字と条件を並べたサブコピー、使用場面が分かるビジュアル、そしてCTAを1つ。グローバルナビゲーションは置かないこと。

そして確認は必ず実機で。デベロッパーツールではアプリ内ブラウザのバーが再現されません。SNS広告を配信しているなら、実際に広告経由と同じ経路で開いて見てください。

---

　

Squad beyondサービス紹介資料はこちらからダウンロード