視線誘導 — F型・Z型と視覚的階層

ねらい

あなたがWebサイトやチラシを作るとき、相手はそれを「上から順に、すみずみまで」読んでくれる——と思っていないだろうか。

残念ながら、人はそんなふうには見ない。視線は、決まった癖でページの上を滑っていく。たいてい数秒で「読むか、去るか」を決める。だからデザインの本当の仕事は、「全部を読ませる」ことではなく、限られた数秒で、先に見てほしいものへ目を導くことだ。

このクエストのねらいは二つ。一つ、人の視線が描く二つの典型ルート——F型とZ型——を知ること。もう一つ、視覚的階層（見てほしい順に「強さ」の差をつける設計）で、その視線を意図的に操る方法を身につけることだ。

なぜ左上が一番強いのか — 文字を読む向きが体に染みている

すべての出発点は、たった一つの事実だ。日本語や英語は、左から右へ、上から下へ読む。

私たちは生まれてから何千冊もの本を、左上からスタートして読んできた。「ページを開いたら、まず左上を見る」——これは考える前に体が動く、染みついた習慣だ。だからWebでもチラシでも、人の目はまず無意識に左上へ飛ぶ。ここが最強の場所になる。

逆に言うと、右下は一番弱い。視線がたどり着く頃には、もう疲れているか、立ち去っているからだ。

大事なのは、これが世界共通ではないことだ。アラビア語のように右から左へ読む文化では、強い場所は右上になる。つまり「左上が強い」のは生まれつきの本能ではなく、読む向きという文化の産物。だからこのクエストの話は「左→右に読む文化のための設計」だと、頭の隅に置いておくといい。

F型 — 文章が多いページの視線

ここからは、その視線が実際に描く「形」を見る。一つ目がF型だ。これは文章が多いページ——ブログ、ニュース、検索結果、商品説明——で起きる。

人はこう動く。まず一番上の見出しを、左から右へざっと読む（Fの上の横棒）。次に少し下がって、二行目あたりをもう一度、でも今度は短く横へ読む（Fの下の横棒）。あとは興味が薄れて、左端を下へ縦になめるだけ。各行の頭だけを拾って、続きは読まない。これを線で結ぶと、アルファベットの「F」の形になる。

このF型は、思いつきではなく計測された事実だ。Webの使いやすさを研究するヤコブ・ニールセンらが、2006年にアイトラッキング（目の動きをカメラで追う実験）で232人を調べ、人の視線が繰り返しFの形を描くことを突き止めた。だからF型は「たぶんそう」ではなく「データでそうなっている」。

F型が教えてくれる掟はシンプルだ。大事な言葉は、行の左側・上の方に置け。 「詳しくはこちら」のような肝心の言葉を行の右の端に置くと、視線が届かず読まれない。見出しも、結論を頭に持ってくる。Fの濃い部分（上・左）に、伝えたいものを乗せるのだ。

Z型 — 要素が少ないページの視線

二つ目はZ型。これは文章が少なく、見るものが厳選されたページ——ポスター、トップページ、広告、ランディングページ（1枚で完結する宣伝ページ）——で起きる。

読む文章が少ないと、人は拾い読み（F型）をしない。代わりに面全体をざっと一筆書きで眺める。左上から右上へ（横）、そこから斜めに左下へ下りて、最後に左下から右下へ（横）。線で結ぶと「Z」になる。そしてZの終点＝右下こそ、最後に目が止まる場所だ。なぜそこが効くのか。人は最後に見たものほど記憶に残りやすい。 Zをたどり終えた右下は、視線が一周して落ち着く“着地点”——だからここに置いた行動（ボタンや申し込み先）が印象に残り、押されやすくなる。「最後に押してほしいもの」は、ここに置くと効くのだ。

このZ型の下敷きには、グーテンベルク図式（印刷物のページ上で視線がどう流れるかを図にした古典的な考え方。左上から右下へ流れるとされる）がある。タイポグラファーのエドモンド・アーノルドが1950年代に提示したものだ。ただし注意したい。この図式が本来扱うのは「序列のない、均質な文章の塊」の読み流れで、強弱（視覚的階層）がついた瞬間に当てはまらなくなる。「要素が少ない面はZ型」というのは、そこから派生してWebで広まった経験則だ。原義と派生を区別しておくと、誤解せずに使える。

F型とZ型は、どちらが正しいという話ではない。ページの中身で使い分ける。 文章が主役ならF型を想定し、左上に大事な言葉を寄せる。少ない要素を見せる1枚ものならZ型を想定し、右下に行動の出口を置く。「このページはどっちか？」を最初に決めるのが、設計の第一歩だ。

視覚的階層 — 視線は「ルート」だけでなく「強さの差」で動く

ここまでは「視線は左上から動く」という、いわばデフォルトのルートの話だった。だが本当に強力なのは、その先だ。デザイナーは、このルートを上書きできる。 その道具が視覚的階層——見てほしい順に、要素へ「強さ」の差をつけることだ。

人の目には、もう一つの強い習慣がある。まわりと違うもの・大きいもの・目立つものに、先に飛ぶ。 たとえ右下にあっても、そこだけ大きくて真っ赤なら、左上より先に見られる。つまり視線は「位置」と「強さ」の合わせ技で動く。位置の癖（F・Z）に、強さの差（階層）を重ねて操るのだ。

強さの差は、主に四つの手で作る。

• 大きさ — 大きいものほど先に、強く見える。一番見てほしいものを一番大きく。
• 濃さ・色 — まわりが地味な中の鮮やかな一色、薄い中の濃い一個は、目を引く。
• 余白 — まわりを広く空けると、その要素が孤立して目立つ。空白は「強調する道具」でもある。
• 位置 — F・Zの濃い場所（左上・Zの終点）に置くと、さらに後押しできる。

なぜ「差をつける」と階層ができるのか。それはコントラスト——要素どうしの差（大きさ・濃さ・色の差）——の働きだ。差があるところに、意味と順序が生まれる。逆に全部が同じ強さだと、目はどこから見ればいいか分からず迷う。これを「フラット（強弱がなく全部同じ）で読めないページ」と言う。強弱がない＝階層がない＝視線が迷子になる、ということだ。

この「目立つもの（図）が背景（地）から浮き出る」という見え方は、人の脳に最初から備わったクセだ。準備編の最初「ゲシュタルト原則」で学ぶ図と地（図＝手前の主役／地＝背景）の働きで、それを最初に確立したのはデンマークの心理学者エドガー・ルビン（1915）。視覚的階層は、この脳のクセを味方につけて「どれを図にするか」を設計することだ。

三段で考える — 見出し・本文・行動

実際の設計では、要素を三つの段に分けて考えると、迷わない。

1. 一番上の段 … 真っ先に見てほしいもの。多くは見出しや主役の写真。一番大きく・強くする。
2. 真ん中の段 … 補足や本文。読む人だけが読めばいい。控えめにする。
3. 行動の段 … 押してほしいボタンや申し込み先。目立つ色で最後に効かせる。

この三段に、位置（F・Z）を重ねる。たとえば1枚ものなら——主役（1段目）を左上に大きく、本文（2段目）を中央に控えめに、ボタン（3段目）をZの終点・右下に鮮やかに。すると視線は「主役 → 説明 → ボタン」と、あなたの引いたレールの上を素直に流れていく。

見分け方・直し方

最後に、自分や他人の作ったものを「視線で診断」する目を持とう。

ページを開いた瞬間、目を細めて1秒だけ見る。このとき最初に飛び込んでくるものが、あなたが一番見てほしいものになっているか。なっていれば成功。もし「全部ぼんやり同じ」「変なところが一番目立つ」なら、階層が壊れている。

直し方は決まっている。

• 目が迷うなら → 要素の強弱を増やす（一番大事なものを、もっと大きく・濃く）。
• 大事なものが読まれないなら → 位置を疑う。右端・右下に隠れていないか。左上やZの終点へ動かす。
• 全部が目立って騒がしいなら → 引く。目立たせる要素は一つに絞る。全部を強調すると、何も強調されない。

視線誘導は、難しい話ではない。人は左上から、決まった形（F・Z）で見る。だから大事なものをその通り道に、強さの差（階層）をつけて置く。 たったこれだけだ。あとは「目を細めて1秒」で確かめながら、レールを引き直していけばいい。

譜例

棚（design-gallery）で実例を見て、本文の話がどう現れているか確かめよう。サイトを開いたら、まず「目を細めて1秒テスト」をやってみるといい。

• 棚：視線誘導の実例を見る

見るときは、(1)このページはF型かZ型か、(2)目を細めて最初に浮かぶのは何か、(3)それは作り手が一番見せたいものか、の3つを言葉にしてみよう。

練習・チェック

1. 身近なWebサイトかチラシを1つ選び、まず「文章が多い（F型）／要素が少ない（Z型）」のどちらかを判定しよう。
2. 同じものを「目を細めて1秒」見る。最初に浮かんだものは、作り手が一番見せたいものと一致しているか。
3. もしズレていたら、原因を「位置（右端・右下に隠れている）」か「強さ（大きさ・色の差が足りない）」のどちらかに絞り、直す手を一つ言葉にしてみよう。