視線はなぜ「F」と「Z」に流れるのか?認知科学が明かす視線誘導のレイアウト原則
人間が画面を見るとき、視線は無秩序に泳いでいるわけではありません。Webデザインやマーケティングの分野では古くから、ユーザーの視線はアルファベットの「F」や「Z」を描くように流れるという経験則が語られてきました。
出典: Ana Claudia Quevedo Estrada / Pexels
しかし、なぜ視線はそのような軌跡をたどるのでしょうか。この現象の背景には、人間の脳の認知システムと、サッカード(跳躍眼球運動) と呼ばれる眼球の高速な動きが深く関係しています。本記事では、この視線パターンの心理学的メカニズムを紐解き、情報設計にどう応用すべきかを考えます。
1. 情報を「スキャン」する脳:F字型パターン
F字型パターン(F-Shaped Pattern)は、Webサイトのテキストコンテンツ(ブログ記事や検索結果ページなど)を読む際に見られる最も一般的な視線軌跡です。ユーザーの視線は、以下のように動きます。
- まず、コンテンツの最上部を左から右へ水平に読む(Fの上の横棒)。
- 次に、少し下にスクロールし、さきほどより短い範囲を水平に読む(Fの真ん中の横棒)。
- 最後に、画面の左端を縦方向にそって滑り落ちるように流し読みする(Fの縦棒)。
認知心理学的な観点から言えば、これは「脳が処理の労力(認知負荷)を最小限に抑えようとする結果」です。Web上のユーザーは最初から全文を読もうとせず、まずは自分にとって有益な情報があるかを「スキャン(探索)」します。そのため、行の始まりである「左端」に注目が集まりやすく、右に進むにつれて読むのを止めてしまうのです。
このパターンに対応するためには、重要な情報やキーワードを各見出しや段落の「最初の数文字(左側)」に配置する「フロントローディング」という手法が有効です。
2. 視線が全体を走査する:Z字型パターン
一方、Z字型パターン(Z-Shaped Pattern)は、テキストが主体のページではなく、ランディングページ(LP)や、視覚的な要素(画像や大きな文字)が組み合わされた「構成的な画面」で見られるパターンです。
視線は、以下の軌跡をたどります。
- 画面の左上からスタートし、右上に向かって水平に進む(Zの上の横棒)。
- 右上から、対角線を通って左下へと視線を移す(Zの斜め棒)。
- 左下から、再び右下へと水平に進む(Zの下の横棒)。
これは、脳が画面全体の輪郭や構成を素早く把握するための「マクロな探索行動」に基づいています。視線が対角線を通って下へ移動する際、中央の領域は素通りされやすいため、重要なコンテンツはZ字のコーナー(角)にあたる位置に配置するのが定石です。
たとえば、左上に「ロゴ」、右上に「アクションボタン(CTA)」、左下に「キービジュアルの説明」、右下に「購入/登録ボタン」を置くことで、視線の流れに自然に沿ったユーザー体験を提供できます。
3. なぜ「F」と「Z」が崩れるのか? 視覚的ハザードのデザイン
F字やZ字のパターンは、あくまで「均一で特徴の乏しいレイアウト」における初期状態の挙動にすぎません。
私たちは、ゲシュタルト心理学が示す「近接」や「類同」の法則、あるいは色や大きさのコントラストを利用して、ユーザーの視線の流れを意図的に制御(妨害・誘導)することができます。これを「視覚的アンカー(錨)」と呼びます。
- 画像とイラスト: テキストだけのページであっても、途中に大きな画像を1枚挟むだけで、F字の下方向へのスライドはピタリと止まり、視線はまず画像にフォーカスされます。
- 空白(余白)の力: 画面の中に十分な余白をとることで、周囲から孤立した1つの要素が際立ち、視線がそこへ直接ジャンプします(サッカードの標的となる)。
つまり、デザイナーの仕事は「ユーザーをF字やZ字に従わせること」ではなく、「どこでスキャンを止めて、どこをじっくり読ませるか」を、視覚的アンカーを用いて意図的にコントロールすることにあります。
まとめ
ユーザーが画面を見る際に見せるF字型やZ字型の動きは、脳が限られたエネルギーで効率よく情報を収集するための合理的なサバイバル戦略です。私たちはこの基本的な特性を理解した上で、重要な情報はスキャンの軌道上に置き、逆に深く理解させたいポイントでは視覚的アンカーを巧みに配置して「視線を留める」設計を行うべきです。心理学の知見は、直感に頼らないレイアウトの強い味方になってくれます。
お役立ち情報
- Nielsen Norman Group - F-Shaped Pattern for Reading Web Content F字型パターンを発見・定義したNNgによる、アイトラッキング(視線計測)調査のデータと詳細な解説記事(英語)です。
- Web Usability - How People Scan Web Pages Interaction Design Foundationによる、視覚的階層(ビジュアルヒエラルキー)と視線誘導パターンに関する教育的記事(英語)です。
- U-Site - ウェブコンテンツの読まれ方:F字型パターン NNgの記事を日本語訳・要約した、UX専門メディアによる読みやすい日本語の解説ページです。