視線誘導とは?Z型・F型の視線パターンとデザインで視線を導く方法

視線誘導の基本を理解しよう

まずは視線誘導の意味と、人の目が画面をどう動くのかという代表的なパターンを押さえましょう。

視線誘導とは何か

視線誘導とは、ユーザーの目が画面や紙面のどこから見始め、どの順番で動いていくかをあらかじめ想定し、伝えたい情報の順番に沿って自然に視線が流れるように設計することです。

人は、画面を開いた瞬間にすべての情報を同時に読むわけではありません。

目に入りやすい場所や目立つ要素から順番に見ていき、興味を持てなければ途中で離れてしまいます。

たとえば商品の紹介ページなら、「キャッチコピー → 商品写真 → 特徴 → 価格 → 購入ボタン」という順番で見てもらえると、内容を理解したうえで行動につなげやすくなります。

このように「何を、どの順番で見てほしいか」を決め、その通りに目が動くよう配置や見た目を整えるのが視線誘導です。

代表的な視線パターン(Z型・F型・N型)

人の視線の動き方には、ある程度決まったパターンがあります。

このパターンを知っておくと、重要な情報をどこに置けば見てもらいやすいかを判断できます。

横書きのデザインでよく使われるのが、次の2つです。

Z型(Zパターン)は、視線が左上→右上→左下→右下とZ字に大きく動くパターンです。

情報量が少なく、全体を一目で見渡せるデザインで起こりやすい動きで、バナーやチラシ、LPのファーストビューがその代表です。

• LP(ランディングページ):広告や検索結果から訪れた人に、「購入」「申し込み」など1つの行動をしてもらうために作られた、縦に長い1枚のページ
• ファーストビュー:ページを開いたとき、スクロールせずに最初に画面に映る範囲

スマホで広告をタップしたとき、スクロールする前にパッと目に飛び込んでくる最初の一画面を想像してみてください。

そこには情報が絞られているため、目は文章を一行ずつ読むのではなく、画面全体を左上→右上→左下→右下とZ字に「泳ぐ」ように見渡します。

そのため、始点の左上にロゴやキャッチコピー、終点の右下に申し込みボタンを置くと、流れに沿って自然に見てもらえます。

F型(Fパターン)は、上部を左から右へ読み、次に少し下を短めに読み、その後は左端を上から下へ流し読みしていくパターンです。

ブログ記事やニュースサイト、検索結果のように、文字が多いページで起こりやすい動きです。

F型は、米国のユーザビリティ調査会社Nielsen Norman Groupの視線追跡調査で知られるようになったパターンです。

同社は後に、F型は見出しや要点が整理されていないページでユーザーが流し読みしたときに現れやすい読み方で、意図して目指すべき形ではないとも補足しています(Nielsen Norman Groupの解説記事・英語)。

少し分かりにくいので、言い換えると次のようになります。

• Z型は、デザインする側が狙って作る視線の流れ
• F型は、文字の多いページを読む人が流し読みした結果、自然とそうなってしまう読み方

つまりF型は「良い・悪い」ではなく、「多くの人は文章を最後までじっくり読まず、F字に流し読みする」という前提として使う知識です。

流し読みされても大事なことが伝わるよう、見出しや各段落の書き出し(左端の数文字)に重要な言葉を置き、要点を太字にしておきましょう。

また、雑誌や縦書きのチラシのように文字を縦書きにするデザインでは、視線は右上から下へ読み、左隣の列へ移っていく「N型」の動きになります。

横書きを前提にしたZ型・F型をそのまま当てはめないよう注意しましょう。

なぜ視線誘導が必要なのか

視線誘導が必要なのは、視線の動きを考えずに要素を並べると、伝えたい順番とユーザーが実際に見る順番がずれてしまうからです。

ユーザーは、ページの隅々まで丁寧に読んでくれるとは限りません。

重要な情報が視線の通り道から外れた場所にあると、存在に気づかれないまま離脱されてしまいます。

たとえば、申し込みボタンが画面の左下の目立たない位置に小さく置かれていると、ページの内容に興味を持った人でも、どこから申し込めばよいか分からず迷ってしまいます。

視線誘導を意識すれば、重要な情報を見落とされにくくなり、ユーザーが求める情報や、こちらが伝えたい情報へスムーズに案内できるようになります。

デザインで視線誘導をする具体的な方法

視線は、配置・大きさ・色・余白・写真の向きといった要素で導けます。

1つだけに頼るより、いくつかを組み合わせるほど効果が高まります。

配置で優先順位をつける

もっとも基本になるのが、要素を「どこに置くか」です。

人の視線は上のパターンのように一定の順番で動くため、その通り道に重要な情報を置くだけで、色や大きさを変えなくても優先順位を伝えられます。

たとえば横書きのページなら、左上に最も重要な情報(ロゴやキャッチコピー)を置き、Z型の終点である右下に申し込みボタンを置くのが定番です。

まずは「何を一番に見せたいか」を決め、それを視線の始点に置くことから始めましょう。

大きさの差(ジャンプ率)で目を引く

人の目は、大きいものから先に見る性質があります。

そのため、見出しと本文、主役の写真とそれ以外の写真のように、サイズに大きな差をつけると、大きい要素に自然と視線が集まります。

このとき、ページの中で「一番大きい文字(要素)」と「一番小さい文字(要素)」のサイズの差のことを「ジャンプ率」と呼びます。

• ジャンプ率が低い(差が小さい):新聞の紙面のように、見出しも本文も似た大きさ。
  整って落ち着いて見えますが、パッと見ではどこが重要か分かりにくくなります。
• ジャンプ率が高い(差が大きい):雑誌の表紙のように、タイトルや「50%OFF」だけがドンと大きく、補足は小さく書かれている。
  メリハリがあり、一瞬で重要なことが伝わります。

一番伝えたい言葉だけを思い切って大きくするのが、手軽で効果の大きい方法です。

色とコントラストで目立たせる

周囲と明らかに違う色の要素にも、視線は強く引きつけられます。

ページ全体を落ち着いた色でまとめ、申し込みボタンなど一番見てほしい部分だけに目立つ色を使うと、そこに視線が集まります。

このとき大切なのは、色そのものより周囲との差(コントラスト)です。

色を使った視線誘導の具体的な方法は、視線を誘導する色の使い方とは?で詳しく解説しています。

余白で注目を集める

余白とは、要素と要素の間や周りにある、何も置かれていない空間のことです。

要素の周りに余白を広く取ると、それだけでその要素が周囲から切り離されて目立ちます。

満員電車の中に有名人が立っていても気づきにくいですが、誰もいない広い部屋の真ん中にぽつんと立っていたら、必ず目が行きますよね。

デザインも同じで、目立たせたいものの周りから余計なものを遠ざける(余白を作る)と、スポットライトを当てたような効果が生まれます。

反対に、要素がぎっしり詰め込まれていると、どれも同じように見えて視線の行き場がなくなってしまいます。

目立たせたい要素を大きくする前に、まず周りの余白を広げられないか考えてみましょう。

余白の考え方はデザイン初心者のための余白学習ロードマップで順を追って紹介しています。

写真の人物の視線や向きを活かす

写真の中の人物が見ている方向にも、見る人の視線は引っ張られます。

人は、写っている人物の目線や体の向きを無意識に追ってしまう性質があるからです。

たとえば、左側に人物写真、右側に購入ボタンがあるデザインを考えてみましょう。

人物が左(画面の外側)を向いていると、見る人の目もつられて画面の外へ向かい、右側にある大事な購入ボタンに気づきにくくなります。

一方、人物が右(ボタンのある内側)を向いていれば、見る人の目も人物の視線をたどって、自然とボタンへ流れていきます。

人物の顔や視線は、見てほしい情報(ボタンやキャッチコピー)がある内側に向けましょう。

イラストでも同じで、キャラクターの顔の向きや指さしの方向を、見てほしい要素に向けるだけで視線を導けます。

視線誘導を実践するときのポイント

視線誘導を取り入れるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• コンテンツの種類を考えずに、どちらかのパターンに当てはめようとしてしまうことがあります。
  パッと「見せる」バナーやLPのファーストビューならZ型、じっくり「読ませる」記事ならF型、というように、まずは自分のデザインがどちらに近いかを考えましょう。
• Z型の四隅を意識するあまり、情報を画面の端に散らばらせてしまい、かえってまとまりのない印象になることがあります。
  パターンは配置のヒントとして使い、関連する情報はまとめて置くことを優先しましょう。
• 目立たせたい要素を増やしすぎると、視線の行き先が分散して、結局どれも見てもらえません。
  主役は1つに絞り、それ以外は控えめにして、主役を引き立てる脇役に回しましょう。

よくある質問

• Q. Z型とF型はどう使い分ければいい?
  A. 「見せる」デザインか、「読ませる」デザインかで選びます。
  バナーやチラシ、LPのファーストビューのように、パッと全体を見渡すデザインならZ型を意識します。
  ブログ記事や商品一覧のように、上から順に読み進めるページならF型で流し読みされる前提に立ち、見出しや各行の書き出しに大事な言葉を置きます。
• Q. ポスターやバナーでも視線誘導は使える?
  A. 使えます。
  むしろ一瞬で内容を伝える必要があるポスターやバナーでこそ重要です。
  キャッチコピーを左上に大きく置き、商品写真を中央、日時や申し込み方法を右下に置くなど、Z型の流れに沿って情報を並べると伝わりやすくなります。
• Q. 写真やイラストの構図でも視線誘導できる?
  A. できます。
  人物の目線や体の向き、道や線の伸びる方向、指さしの向きなどは、見る人の視線を同じ方向へ導きます。
  それらの「向き」の先に、見てほしい文字や要素を配置するのがコツです。
• Q. 自分のデザインで視線誘導がうまくいっているか確かめるには?
  A. 手軽なのは、デザインを数秒だけ見せて目を閉じ、何が印象に残ったかを確認する方法です。
  自分で行う場合も、少し時間を置いてから一瞬だけ画面を見て、最初に目に入ったものが「一番見てほしいもの」と一致しているかを確かめてみましょう。

まとめ

視線誘導とは、見る人の目がどこからどこへ動くかを想定し、伝えたい順番どおりに視線を導くデザインの考え方です。

パッと「見せる」デザインではZ型、じっくり「読ませる」ページではF型の流し読みを前提に、配置・大きさ(ジャンプ率)・色・余白・写真の向きを組み合わせて、主役に視線を集めましょう。

まずは手元のデザインを一瞬だけ見て、最初に目に入ったものが「一番見てほしいもの」になっているかを確かめてみてください。