今回のテーマは、人がWebページを「読む」のではなく「眺めている」という事実です。丹精込めて書いた文章も、実際には最初の数秒でざっと流し見されています。この記事では、その視線のクセ——F型とZ型——を手がかりに、眺めるだけで伝わるページのつくり方を考えていきます。
あなたが時間をかけて書いたサービス紹介ページ。訪れた人は冒頭から一字一句ていねいに読んでくれている……と思いたいところですが、現実はもう少しドライです。多くの人はページを開いた瞬間、左上から右へ、そして下へと視線を滑らせ、めぼしい言葉だけを拾って去っていきます。私たちサンアンドムーンがUXデザインの出発点を「読ませようとしない」ことに置くのは、人は読まない生き物だという前提から始めたほうが、結果として”伝わる”ページになると考えているからです。
ページコンテンツ
なぜ人は「読まない」のか——脳は省エネしたい働き者
人がページを読まないのは、不真面目だからではありません。脳が「できるだけ少ない労力で答えにたどり着きたい」と願う、とても合理的な働き者だからです。スーパーで買い物をするとき、私たちは全商品をひとつずつ吟味したりしませんよね。目当ての棚へ一直線に向かい、ほしいものだけをカゴに入れます。Webページでも同じで、人は自分の目的に関係しそうな言葉だけを目で拾い、それ以外はばっさり読み飛ばします。視線は文章の上を一定のリズムで跳ねながら進み、気になる単語の上でだけ、ほんの一瞬立ち止まる。この動きは視線追跡（eye tracking）という手法で観察できます。つまり「拾い読み」こそが、人にとっての自然な読み方なのです。書き手としては少し寂しいですが、まずはここを認めるところから設計が始まります。
F型——文章の多いページに現れる視線のクセ
文章がぎっしり詰まったページでは、視線はおおむねアルファベットの「F」を描きます。まず最上部を左から右へ。少し下がってもう一度横へ、ただし一度目より短く。あとは左端を縦になぞりながら、ときどき右へ寄り道する——これがF型（F-pattern）です。記事やブログ、検索結果のように「読む量が多い」画面でよく現れます。ここからわかるのは、ページの上のほうと、各行の書き出しが、ほぼすべての勝負どころだということ。逆に言えば、右下にそっと置いた渾身のひとことは、ほとんど誰の目にも届きません。大事な言葉ほど、行の頭へ。見出しも本文も、結論を先に置く。たったそれだけで、拾われる確率はぐっと上がります。
Z型——シンプルな画面をなぞる視線
一方、情報量をぐっと絞ったシンプルなページ——トップページやランディングページなど——では、視線は「Z」を描きやすくなります。左上から右上へ、そこから斜めに左下へ下りて、最後に右下へ。ロゴ、キャッチコピー、そして申し込みボタン。この順番に自然と目が流れていくからこそ、Zの「終点」である右下は、行動を促すボタンの特等席になります。F型とZ型は、どちらが正しいと競うものではありません。文字でじっくり読ませたいページはF、ひと目で印象づけたいページはZ。そのページが訪問者に何を期待しているのかを見極めることが、レイアウトを決める最初の問いになります。
「眺める」前提でページを組み立てる
では、ざっと眺めるだけの読者に、どう伝えればいいのでしょう。答えはシンプルで、「拾い読みされても要点が残る」ように組み立てることです。見出しだけを上から追っても話の筋が分かるようにする。段落は短く、言いたいことは最初の一文に置く。大事なキーワードは、文章の奥に埋めず、目立つ位置へ引き上げる。こうした工夫は、視線がどこで止まりどこへ流れるかという視線導線の設計と地続きです。そして視線がそもそもページのどこへ自然に向かうのかは、以前お話しした中心視野と周辺視野のしくみに根を持っています。私たちサンアンドムーンがサイトを設計するときも、「全部読んでもらおう」ではなく「眺めるだけで要点が届く」を合言葉に、見出しと余白を整えるところから手をつけます。
まとめ
人はWebページを、じっくりではなくF型やZ型の軌道でざっと「眺めて」います。これは怠慢ではなく、脳が少ない労力で要点へたどり着こうとする自然な働きです。だからこそ、伝えたいことは上へ、行の頭へ、見出しへと前に出す設計が効いてきます。文章の多いページはF型、シンプルなページはZ型——ページの性格に合わせて視線の通り道を整えれば、隅々まで読まれなくても要点はちゃんと届きます。「読ませよう」と力むのをやめ、「眺めても伝わる」設計へ切り替えることが、ストレスなく伝わるページづくりへの第一歩になります。
記事監修
中谷 浩和
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
