ポスターやWebサイトを見たとき、最初に大きな写真へ目が向き、そのあと見出し、最後にボタンを見ることがあります。偶然そうなっているように見えて、デザインでは「どこを先に見てほしいか」を考えて配置することがあります。
こうした考え方が視線誘導です。ただし、人の目を決められた順番どおりに完全に動かせるわけではありません。色や明るさの差、要素の大きさ、人物の視線、余白、見る人が探している情報などが重なり、注目する場所は変わります。
視線誘導は「目を操る技術」というより、見てほしい情報へ注意が向きやすくなるように、配置や見せ方を工夫する考え方として使われています。
視線誘導とは「次にどこを見るか」を導くデザイン
視線誘導は、広告、ポスター、雑誌、Webサイト、プレゼン資料などで、見る人の注意を重要な情報へ向けやすくするための配置や表現を指して使われます。
たとえば、画面の中に同じ大きさ・同じ色の文字が大量に並んでいれば、どこから読めばよいのか迷いやすくなります。一方、一つだけ大きな見出しがあり、その下に説明文、さらに目立つボタンがあれば、情報の優先順位をつかみやすくなります。
人の視覚的な注意は、周囲と違う色や明るさ、形などに引かれることがあります。こうした「周囲より目立つ状態」は、視覚的顕著性と呼ばれます。
ただし、目立っているものが必ず最初に見られるとは限りません。「商品名を探している」「価格を知りたい」といった目的があれば、それに関係する情報へ注意が向くこともあります。
色や大きさだけでなく、見る人が何を探しているのかも視線の動きに関わります。
「視線」と「注意」は完全に同じではない
「視線誘導」という言葉から、目そのものを動かすことだけを想像するかもしれません。
しかし人は、目を動かさなくても別の場所へ注意を向けることがあります。たとえば正面を見たまま、視界の端で何かが動いたことに気づくような場合です。
そのため視線誘導を考えるときは、眼球がどの順番で動いたかだけでなく、どの情報に気づきやすいか、どこへ注意が向きやすいかも合わせて考えられます。
「決められたルートを目でなぞらせる」というより、見てほしい情報が認識されやすい状態を作ることに近い考え方です。
大きさや色の差があると目立つ場所が生まれる
視線誘導で使われる代表的な方法の一つが、周囲との差を作ることです。
たとえば10個の灰色の丸の中に赤い丸が一つあれば、その部分は見つけやすくなります。同じように、小さな文字が並ぶ中に大きな文字を置いたり、淡い背景の中に濃い要素を置いたりすると、そこが視覚的な目印になります。
こうした差はコントラストと呼ばれ、色だけでなく、
- 大きい・小さい
- 明るい・暗い
- 太い・細い
- 密集している・離れている
- 静止している・動いている
といった違いでも生まれます。
ただ、見出しも写真もボタンも装飾もすべて大きく鮮やかにすると、今度は「どれが特に重要なのか」が分かりにくくなります。
情報の重要度に合わせて差を付けることで、最初に目に入ってほしい場所と、そのあとに見てほしい場所を区別しやすくなります。
近いものは「ひとまとまり」に見えやすい
視線誘導では、どこを目立たせるかだけでなく、どの情報同士が関係しているように見えるかも関係します。
人は、近くに置かれたものを同じグループとして感じやすい傾向があります。
たとえば商品名のすぐ下に価格があれば、その2つは同じ商品の情報だと理解しやすくなります。反対に、別の商品との間に広めの余白を取れば、「ここから別の情報」と区切って見やすくなります。
同じ色や形を使った要素も、仲間として受け取られやすくなります。
そのため余白は、単なる「何もないスペース」ではありません。情報同士を近づけたり離したりすることで、どこまでが一つのまとまりなのかを伝える役割があります。
大きさや色で注目する場所を作り、距離や余白で情報のまとまりを示す。両方を組み合わせると、画面内の情報同士の関係も伝わりやすくなります。
人物の「視線」そのものにも誘導する力がある
広告やバナーで、人が商品や文字の方向を見ている構図を目にすることがあります。これも視線誘導に使われる方法の一つです。
人は、ほかの人がどこを見ているのかという情報に反応します。心理学では、他者の視線方向によって注意が同じ方向へ移りやすくなる視線手がかり効果（gaze-cueing effect）が知られています。
たとえば広告写真で、人物が正面を向いていれば顔そのものが注目されやすくなります。一方、人物が横の商品や見出しへ目を向けていると、「その人は何を見ているのだろう」と視線の先へ注意が移るきっかけになります。
矢印も方向を示せますが、人の視線には「その人物が何に注目しているか」を伝える役割があります。そのため、単なる線や記号とは少し違った形で注意を動かすことがあります。
顔を置けば必ず狙った場所を見てもらえるわけではない
人物写真を置けば、どんなデザインでも思いどおりに誘導できるわけではありません。
顔そのものが強く目立ち、肝心の商品や文章より人物ばかり見られることもあります。人物の視線方向だけでなく、顔の大きさ、周囲とのコントラスト、文章の位置、見る人が探している情報なども一緒に影響するためです。
人物の視線だけで結果が決まるわけではなく、写真や文字、余白など周囲の要素との組み合わせによって見え方は変わります。
読む方向も目の動きに影響する
文章を読む習慣も、視線の動きと無関係ではありません。
横書きの日本語や英語では、左から右へ文字を追います。一方、右から左へ読む言語もあります。日本語の縦書きでは、文字を上から下へ読み、次の行へは右から左へ移るのが基本です。
普段どちらの方向へ文字を読むかという習慣は、視線移動や空間への注意にも影響すると考えられています。
そのためWebデザインや広告では、文章を読む方向と、写真や見出し、ボタンなどの配置を組み合わせて考えることがあります。
ただし、読む方向がそのまま「最初に見る場所」を決めるわけではありません。大きな写真があればそこへ目が向くこともありますし、探している文字があれば、その情報を先に見つけることもあります。
「F型」はWebページで見られるパターンの一つ
Webページの見られ方を説明するとき、「F型」と呼ばれる視線の動きが紹介されることがあります。
文章量の多いページなどをざっと読む際、上部を横方向へ見たあと、少し下を再び横へ見て、その後は左側を中心に縦方向へ進むことで、視線の軌跡がアルファベットの「F」に近く見えるパターンです。
ただし、F型になるようにページを作れば優れたデザインになる、という意味ではありません。
文章が長く続き、見出しなどの手掛かりが少ないページでは、利用者が必要な情報を探しながら走査した結果としてF型に近い動きが現れることがあります。
一方、見出しが分かりやすく配置されていれば、必要な見出しを拾いながらページを読む別のパターンになることもあります。
F型は、「人の目は必ずこの形に動く」という法則ではなく、Webページを見るときに現れることがあるスキャンパターンの一つです。
「Z型」はレイアウトを考えるときに紹介される型
F型と並んで、デザインでは「Z型」という言葉もよく使われます。
左上から右上へ進み、そこから斜め下へ移動し、最後に右下へ向かうように情報を配置する考え方です。要素の少ない広告やランディングページなどのレイアウト例として紹介されることがあります。
ただし、Z型はF型とまったく同じ位置づけではありません。
F型はWebページを閲覧した際に観察された視線のスキャンパターンとして知られています。一方のZ型は、人間の目が必ずZ字に動くとする法則というより、情報をどの順番で置くか考えるためのレイアウトの型として使われることが多い考え方です。
写真、文章、人物の顔、色、見る目的などによって、実際の視線は変わります。
「Z型にすれば必ずこの順番で見てもらえる」と考えるのではなく、重要な情報を配置するときの一つの案として扱うのが適しています。
視線誘導では「順番」より情報の優先順位が大切
視線誘導という言葉から、「1番→2番→3番と目を移動させる技術」を想像するかもしれません。
しかし実際のデザインでは、細かな視線の軌跡を決めることより、
最初に気づいてほしい情報は何か
次に理解してほしい内容は何か
最後にどんな行動へつなげたいか
という優先順位を考えることが役立ちます。
たとえばイベント告知なら、最初にイベント名へ気づいてほしい場合があります。その次に日時や会場、最後に申し込み方法を配置すれば、必要な情報を追いやすくなります。
商品ページなら、商品写真、商品名、価格、特徴、購入ボタンなど、見る人が知りたい内容に合わせて優先順位を付けられます。
視線誘導に使える要素も一つではありません。大きさ、色、明るさ、余白、配置、写真、人物の視線、矢印などを組み合わせながら、「どこが重要なのか」が伝わる状態を作ります。
逆に、矢印を大量に置いたり、すべての文字を太字にしたりすると、注目させたい要素同士が競い合ってしまいます。
見出しの大きさや余白、色の差を使えば、情報の優先順位そのものを画面上に表すことができます。 視線誘導は、目の動きを細かく指定することより、何を先に見せたいのかを見た目へ落とし込むために使われる考え方です。
Q&A
まとめ
視線誘導とは、デザインの中で見てほしい情報へ注意が向きやすくなるように工夫することです。
人の注意は、大きさや色、明るさなど周囲との差に引かれることがあります。近くに置かれた情報はひとまとまりとして感じやすく、人物が見ている方向や普段の読む方向も、次に注目する場所へ影響します。
一方で、人の視線には「必ずこの順番で動く」という一つの法則があるわけではありません。F型はWebページで見られるスキャンパターンの一つで、Z型は情報配置を考えるためのレイアウト例として捉えるほうが適しています。
視線誘導では、「最初に何を知ってほしいのか」「どの情報同士が関係しているのか」「次に何を見せたいのか」を決め、その優先順位やまとまりが画面上でも伝わるように配置することがポイントになります。
参考情報
- McKay, K. T. et al.「A meta-analytic review of the gaze-cueing effect」PubMed
- Li, H. H. et al.「Dissociating presaccadic and covert spatial attention」PubMed
- Wagemans, J. et al.「A Century of Gestalt Psychology in Visual Perception I. Perceptual Grouping and Figure-Ground Organization」PubMed Central
- W3C「Requirements for Japanese Text Layout（日本語組版処理の要件）」
- Nielsen Norman Group「F-Shaped Pattern of Reading on the Web」
- Nielsen Norman Group「Setup of an Eyetracking Study」
