ファーストビューのデザイン

ファーストビューがLPの成否を決める

ファーストビュー（FV）とは、ページを開いたときにスクロールせずに見える最初の画面領域です。訪問者はFVを見た瞬間から約3秒以内に「このページは自分に関係あるか」を判断します。この3秒ルールはヒートマップ解析や視線追跡研究で繰り返し実証されており、FVの設計品質がそのままLPの離脱率・CVRに直結します。FVで離脱されれば、どれだけ優れたコピーや証拠を下に書いても読まれません。逆にFVが機能すれば、訪問者は自らスクロールを続け、LPの本文を読み進めます。このレッスンでは、3秒ルールの実践的な適用方法・キャッチコピー設計の4つの型・メインビジュアルの選び方・CTAボタンの最適化・モバイルFV特有の制約について詳しく解説します。

---

ファーストビューの4要素

ファーストビュー設計 — 3秒ルールとCTA配置

高CVRのFVには必ず「キャッチコピー・サブコピー・メインビジュアル・CTAボタン」の4要素が揃っています。これらはバラバラに存在するのではなく、「3秒で価値を伝える」という単一の目的に向かって有機的に連携する設計が求められます。

---

3秒ルールの実践的適用

3秒ルールとは「訪問者がページの価値を判断する時間は約3秒」という経験則です。この3秒間に伝えるべき情報は次の3点に絞られます。

この3点が3秒以内に視覚的に伝わるFVが「機能するFV」です。デザインの美しさはその次の優先度です。

3秒テストの実施方法

完成したFVのデザインを知人5人に3秒だけ見せ、次の3つを答えてもらいます。

• ◆「このページは何のサービスですか？」
• ◆「誰向けですか？」
• ◆「このページを見て何を感じましたか？」

3人以上が正確に答えられなければFVの見直しが必要です。このテストを制作後・修正後に繰り返すことで、主観的な判断ではなくユーザー視点に基づいたFV最適化が可能になります。

💡 F字型読み取りパターン: アイトラッキング研究によると、ウェブページの読者は左上→右→少し下→左→右というF字型のパターンで視線を動かします。キャッチコピーは左上寄りに配置し、CTAボタンはその視線の流れの延長線上に置くと自然に目に入ります。

---

キャッチコピー設計の4つの型

キャッチコピーはFVの中で最も重要な要素です。フォントサイズは他の要素の1.5〜2倍に設定し、ページを開いた瞬間に視線が引き寄せられる設計にします。

型1：数字×ベネフィット型

具体的な数字で結果を明示し、信頼感を高める最もオーソドックスな型です。数字は可能な限り具体的に設定します。「早く」より「30日で」、「大きく」より「2.3倍」。

• ◆「30日で-5kg達成者続出」
• ◆「月収が平均2.8倍になったプログラム」
• ◆「導入3ヶ月で問い合わせ数が183%増加」

型2：ターゲット限定型

特定のターゲットを名指しすることで「自分ごと」感を最大化します。読者は「自分に話しかけられている」と感じると、他のコンテンツより数倍強く反応します。

• ◆「30〜50代で代謝の落ちを感じている方へ」
• ◆「副業未経験のサラリーマンだけに告げる」
• ◆「SNS集客がうまくいかない美容師さんへ」

型3：疑問・問いかけ型

読者に「YES」と答えさせることでスクロール継続率を上げます。人間は問いかけに対して無意識に答えを考えようとする心理（Curiosity Gap）を持っています。

• ◆「まだ筋トレで消耗してるの？」
• ◆「なぜあなたのLPは読まれないのか」
• ◆「3年後も今の働き方を続けますか？」

型4：逆説・意外性型

読者の常識・思い込み（Belief）を崩す表現で強制的に注目を集めます。「え？そうなの？」という認知的不協和が好奇心を喚起し、続きを読まずにいられない状態を作ります。

• ◆「食べないから太る、本当の理由」
• ◆「運動しても痩せない人が増えている理由」
• ◆「広告費ゼロで集客できる理由」

⚠️ 逆説型の注意点: 意外性を出すために「嘘っぽい」「誇大な」表現を使うと、読者の信頼を最初から失います。意外性は「本当のことだが一般的に知られていない事実」に基づくことが前提です。

---

メインビジュアルの選び方

FVのメインビジュアルは「商品写真単体」より「人物が登場するシーン写真」の方がCVRへの貢献が高いことが多数のA/Bテストで示されています。これは人間の脳が顔・表情に強く反応し、感情移入が起きるためです。

ビジュアル選定の5原則

• ◆ターゲットが「なりたい姿」を映す: ダイエットサプリならスタイルの良い人物、ビジネス教材なら成功した雰囲気の人物
• ◆笑顔・明るい表情のポジティブ画像: ネガティブ訴求の商品でもFVビジュアルはポジティブな「after」を見せる
• ◆視線が誘導される構図: 人物の視線方向にキャッチコピーやCTAボタンを配置すると自然に目線が誘導される
• ◆モバイルでも視認できる解像度・構図: PC用横長画像はスマホで人物が切れるケースが多い。縦長版を別途用意するか、中央配置に統一
• ◆ストックフォトより実際の写真: 可能であれば実際の顧客・スタッフの写真を使用。ストックフォトは「よそよそしさ」を感じさせる場合がある

---

CTAボタンの最適化

FVに配置するCTAボタンは「押させるための設計」が必要です。色・文言・サイズ・補足テキストの4要素をすべて最適化することでCVRが大きく変わります。

ボタン色の選択

「CTAボタンは赤が最強」という都市伝説がありますが、実際にはLPの背景色との補色関係が重要です。白ベースのLPなら赤・橙・青が目立ちます。ダーク系背景なら黄・緑・水色が視認性を高めます。最終的にはA/Bテストで検証することが必須です。

ボタン文言の公式

ボタン下の補足テキスト（マイクロコピー）

CTAボタンの真下に1行の補足テキストを置くことで、クリック直前の不安（Fear）を解消できます。

• ◆「クレジットカード不要・いつでも解約可能」
• ◆「登録は無料・30秒で完了・個人情報は保護されます」
• ◆「お試し14日間無料・自動課金なし」

---

モバイルFVの特別設計

現在のLP流入の60〜80%はスマートフォンからです。PCで美しいFVを作っても、スマホで崩れていれば意味がありません。モバイルFVには固有の制約があります。

モバイルFV設計チェックリスト

• ◆キャッチコピーは2行以内: スマホ画面幅375px基準で1行20〜24文字。3行以上になると縦幅を圧迫しCTAが画面外に出る
• ◆CTAボタンのサイズ: 横幅は画面の80%以上・高さ48px以上（人間の指の平均タップ可能サイズは44px）
• ◆フォントサイズ: キャッチコピー24px以上・サブコピー14px以上（16px推奨）
• ◆CTAボタンの位置: スクロールなしでCTAが見える画面内に収める（iPhone SE基準568pxの高さで確認）
• ◆背景画像のモバイル最適化: PC用横長画像は人物が端に切れることが多い。object-position: centerまたはモバイル専用画像を使用
• ◆ページ読み込み速度: FVの画像はWebP形式・200KB以下に圧縮。LCPが2.5秒以内を目指す

💡 スクロール追従CTAバー: スマホでLPを読む際、FVを過ぎるとCTAボタンが見えなくなります。画面下部に常時表示される「スクロール追従型CTAバー」（高さ56px・フローティング）を設置することで、どの位置にいてもCTAを押せる設計になり、スマホでのCVR向上に有効です。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆FVの3秒テストを実施する: 制作中または既存のLPのFVを知人5人に3秒見せ、「何のサービスか」「誰向けか」「どう感じたか」を答えてもらう。回答を集計してFVの改善点を特定する。
2. ◆4つの型でキャッチコピーを各2本作成する: 同じサービスに対して「数字×ベネフィット型」「ターゲット限定型」「疑問型」「逆説型」の4タイプそれぞれ2本ずつ合計8本書き、最も刺さるものを選ぶ。
3. ◆マイクロコピーを5パターン作成する: CTAボタン下に置く補足テキストを5パターン書き、どのFear（不安）を解消しているかを明記する。
4. ◆競合LPのモバイルFVチェック: 競合LP3本をスマートフォンで開き、「CTAボタンがスクロールなしで見えるか」「キャッチコピーが2行以内か」「読み込み速度は適切か」を評価する。

📝まとめ

ファーストビューは「3秒で離脱するかスクロールするかを決める」LPの最重要セクションです。キャッチコピー・サブコピー・メインビジュアル・CTAボタンの4要素を「誰向け・何が得られる・なぜ今」という3つの情報軸で設計し、3秒テストで客観的に検証することが基本アプローチです。キャッチコピーは数字型・限定型・疑問型・逆説型の4つの型から最もターゲットに刺さるものを選び、CTAボタンは「動詞+ベネフィット+緊急性」の文言公式と補足テキストで設計します。モバイルFVはPC版とは別に専用設計（2行以内・ボタン横幅80%・CTAが画面内）が必須です。次のレッスンでは、読者の信頼を構築する「社会的証明」の設計方法を学びます。