「３秒で離脱」が当たり前の時代。最初のスクロール幅に“すべて”が詰まっている。

ファーストビューとは何か

目次

Toggle

• 定義：ユーザーがページにアクセスして“スクロールせずに最初に見える領域”。
• 面積ではなく内容が勝負：モバイル端末では高さ約600〜800 px、PCでも900 px程度。ここで「誰に・何を・なぜ」届けるページかを瞬時に理解させる必要がある。
• KPI：TTI（Time to Interactive）– 2.5秒以内、３秒時点の直帰率、ファーストビュー内CTAクリック率。

心理学で読み解く「３秒ルール」

脳の反応	時間軸	役割
初期視覚処理 (0.1秒)	色・形・動きを判定	“注意を引く”段階。彩度が高いカラーや対比が強いコンポジションが有効。
感情判断 (0.5〜1秒)	快・不快を判断	ペインポイント共感・ポジティブ未来の可視化が効く。
論理判断 (1〜3秒)	必要性と信頼性を検討	客観数値・実績・ベネフィットを短文で提示する。

→ ３秒までに「興味」を、「８秒」までに「納得」を、
「15秒」までに「行動導線」を整備することが重要。

刺さるコピーを書く ５つの鉄則

1. ターゲットを1秒で指名
   • 「EC担当者必見」など呼びかけ型が離脱を防ぐ。
2. ベネフィットを数値化
   • 例：「CVR +120%」、「売上1.8倍」。疑似具体性でも良いが必ず根拠を用意。
3. 意外性ワードでズラす
   • 「デザインを捨てろ」「クリックを“奪う”３行コピー」などギャップ効果を狙う。
4. 感情トリガーを混ぜる
   • 危機感（損失回避）× 希望（獲得欲求）を1:1で配置。「広告費が溶ける前に / たった1枚で売上倍増」
5. 行動指示を CTA に内包
   • 「資料ダウンロード」ではなく 「30秒で無料DL」 と時間メリットを添える。

目を奪うビジュアルを設計する ５つの指針

1. ベネフィットを絵で語る
   • グラフ上昇線や成功シーンを視覚で示す。
2. “視線誘導”を仕組むレイアウト
   • ジェスチャー写真 / アイコン矢印 / 斜線背景で視線をCTAへ流す。
3. 彩度とコントラストを戦略的に
   • ブランドカラー × アクセントカラー（補色）。CTAはページ内最大コントラストを維持。
4. 動画 or アニメーションは最短3秒ループ
   • 説明動画は再生待ちで離脱を招く。モーションロゴ＋キャッチコピーだけの短尺に。
5. テキストと画像の“余白”設計
   • モバイルでは20–24 px、PCでは32–40 pxのマージンを基準にバランスを取る。

コピー × ビジュアル「７つの組み合わせパターン」

パターン	コピー位置	ビジュアル構成	適用例
クラシック英雄型	左上	右に製品画像	BtoB SaaS
シネマティック型	中央オーバーレイ	フル幅動画背景	プレミアム商品・ブランド
スプリットスクリーン型	左右50/50	L:コピー / R:実写	体験サービス・イベント
数字強調型	メイン数値中央	背景に薄いグラフ	KPI重視の案件
人物導線型	ヒーロー人物がCTAを見る方向	コピー上部	BtoCアプリ
イラストストーリー型	下部にストーリー漫画	上部見出し	課題啓発・LPロングテール
対比型	Before / After並列	中央にスライダー画像	リフォーム・美容

成功事例に学ぶファーストビュー分解図

事例 A：BtoB マーケティングツール

• コピー：「広告費の無駄を最短30日で60%削減」
• 視覚：アップトレンドの棒グラフ + 社名ロゴ群
• CTA：「無料診断を受ける（30秒）」
• 結果：ファーストビュー内CTAクリック率 18.6% → 34.2%（2.0倍）

事例 B：D2C コスメ

• コピー：「#毛穴レス を叶える、朝1分の新習慣」
• 視覚：商品パッケージ俯瞰 + 肌テクスチャUP動画（3秒ループ）
• CTA：「今だけ20%OFFで試す」
• 結果：直帰率 68% → 41%、平均滞在時間 +27秒

制作ワークフローとチェックリスト

1. カスタマージャーニー再確認
2. ベネフィット抽出 & 優先度付け
3. コピー案を15個ブレインダンプ
4. Figma で３レイアウト粗案（クラシック型／シネマ型／数字型）
5. ユーザーテスト（5人 / 3秒法）
6. 撮影・画像制作
7. 実装 → モバイル最適化 → 速度計測
8. 公開前 QA：ALT, ARIA, CLS, LCP チェック
9. ローンチ後 GA4 & ヒートマップ確認

計測・改善サイクルの回し方

フェーズ	指標	ツール	期間
観測	直帰率 / TT1 秒数 / CTA率	GA4 / PageSpeed	1日ごと
仮説	コピー vs ビジュアル影響度	イベントラベル分割	週次ミーティング
検証	ABテスト（1変数）	Google Optimize 360 / VWO	1–2週間
学習	勝ちパターンの抽象化	社内ナレッジ共有	月次

まとめ & ７日間実装プラン

Day	目標	出力物
1	キーメッセージ定義	コアベネフィット文書
2	コピー20案作成 → 5案絞込	コピーシート
3	ラフビジュアル3案作成	Figma Mock
4	撮影 / アイコン選定 / グラフ作成	アセット一式
5	実装 + パフォーマンス最適化	ステージングURL
6	3秒テスト & ヒートマップ分析	修正リスト
7	本番投入 & ABテスト設計	テストマップ

今日からできる小さな一歩

1. 自社LPのファーストビューを375px幅でキャプチャ
2. 第三者３人に“３秒で何のLPか”を書かせる
3. 回答がズレた箇所をコピー or ビジュアルの問題として分解

ファーストビューは「広告クリエイティブ」と
「商品の最初の接点」を同時に担う“ハイブリッド領域”。
コピーとビジュアルを科学し、３秒で心をつかむ設計に磨きをかけましょう。