Nielsen Norman Groupの調査によると、ユーザーはページ閲覧時間の57%をファーストビュー（スクロールせずに見える範囲）に費やしており、最初の1画面を過ぎると注目度は急激に低下することがわかっています。ランディングページの場合、この傾向はさらに顕著で、訪問者はわずか2〜3秒以内にそのページに留まるか離脱するかを判断します。
つまり、ファーストビューのデザインは、文字通り訪問者を引き止めるための「一度きりのチャンス」なのです。
アイトラッキング調査が明らかにするもの
Djamasbi et al. (2010)によるアイトラッキング調査では、ファーストビューで注目を集める要素が特定されています：
| 要素 | 平均注視時間 | 最初に視線が向く割合 |
|---|---|---|
| メインビジュアル / 画像 | 1.2秒 | 67%が最初にここを見る |
| メインの見出し | 0.8秒 | 22%が最初にここを見る |
| CTAボタン | 0.4秒 | 3%が最初にここを見る |
| ナビゲーション | 0.3秒 | 8%が最初にここを見る |
メインビジュアルが最も注目を集めますが、コンバージョンが発生するのはCTAです。課題は、メインビジュアル → 見出し → CTAという視線の流れ（ビジュアルパス）をいかに設計するかです。
高コンバージョンなファーストビューを構成する5つの要素
1. 欲求を喚起するメインビジュアル
メインビジュアルは製品そのものではなく、「得られる結果」を示すべきです。Adaval & Wyer (1998)の研究では、最終的な状態（製品を使って喜んでいる顧客など）を描いた画像は、製品のみの写真よりも購入意欲を2倍高めることが示されています。
2. 独自の価値を約束する見出し
Copyhackersのコンバージョン・コピーライティング調査によると、訪問者の心の声に合致する見出しは、一般的な価値提案よりも3〜5倍高いパフォーマンスを発揮します。見出しは、「私は〜してくれるものを探している」という文章を完結させるものであるべきです。
3. 視線を誘導する視覚的階層
ウェブデザインにおける視覚的階層に関するFaraday (2000)の研究では、サイズ、コントラスト、配置によって、測定および最適化可能な「閲覧順序」が形成されることが示されています。理想的な流れは、視覚的アンカー（メイン画像） → 課題/解決策 → CTAです。
4. コントラストを最大化したCTA
Ling & van Schaik (2006)は、背景に対して最も色のコントラストが高いCTAボタンは、使用されている色に関わらず、クリック率が21%向上することを発見しました。重要なのは「色」ではなく「コントラスト」です。
5. ファーストビュー内の社会的証明
Klucharev et al. (2009)で示されているように、信頼のシグナル（顧客数、評価、ロゴ一覧）をファーストビューに配置することで、前頭前野によるリスク評価を軽減できます。「10,000人以上のマーケターが信頼」といった一行があるだけで、コンバージョンが15〜20%向上する可能性があります。
ランディングページをテストする
あなたのランディングページのURLをFlowDxに貼り付けて、訪問者の視線が実際にどこに向いているかを確認しましょう。アテンションヒートマップにより、CTAが「ホットゾーン」にあるか、あるいはノイズの中に埋もれてしまっているかが一目でわかります。
参考文献
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.