今回のテーマは「視線誘導」です。人の注意は、暗い舞台のなかでひとつの場所だけを照らすスポットライトのように働きます。その光をどこへ向けるかを設計できれば、ユーザーの視線は無理なく導けるのです。
Webサイトを開いた瞬間、あなたの目はどこを見ているでしょうか。大きな見出し、鮮やかなボタン、動いているバナー——気づけば「見てほしい場所」ではなく「目立つ場所」に視線が吸い寄せられている。そんな経験はありませんか。人は画面の隅々を均等に見ているわけではなく、一度にひとつの領域しか深く処理できません。UXデザインの出発点を「人間の注意の仕組み」に置くと、視線誘導はサイト設計の土台になります。
注意は「スポットライト」のように動く
心理学では、人の注意を「スポットライト」にたとえることがあります。舞台全体は薄暗く、光の当たった一点だけがくっきり見える。私たちの視覚も同じで、視野には情報が広がっているのに、はっきり認識できるのは注意を向けたごく狭い範囲だけです。残りはぼんやりとした背景として処理されています。だからこそ、画面のあちこちに「見てほしいもの」を散りばめると、スポットライトはどこを照らせばいいのか迷い、結局どこにも定まりません。視線誘導とは、この光をそっと動かす手助けをすることなのです。
人は「目立つもの」より「流れ」に沿って見る
視線を集めようとすると、つい「もっと大きく、もっと派手に」と考えがちです。けれど、要素を片っ端から目立たせると、スポットライトは奪い合いになり、ユーザーはかえって疲れてしまいます。人の目は、大きさや色だけでなく「自然な流れ」に沿って動きます。左上から右下へ視線が流れる、視線の先にある人物が見ている方向をたどる、矢印や余白が示す道筋を追う——こうした流れに乗せて情報を並べると、ユーザーは「導かれている」という意識すらなく、見てほしい順番で読み進めてくれます。見てほしいものを「目立たせる」のではなく、視線の通り道に「置く」。これが視線誘導の発想です。
「見えている」と「気づいている」は違う
ここで気をつけたいのは、画面に表示されていることと、ユーザーが気づいていることは別だという点です。スポットライトの外にある要素は、網膜には映っていても意識には上りません。重要なボタンをファーストビューに置いたのに押されない、という悩みの多くは、それが「視線の通り道の外」にあることが原因です。この「見えているのに気づかれない」仕組みについては、以前の記事「選択的注意とは？見えているのに見落とす脳の仕組みとUX設計」でも詳しく触れています。あわせて読むと、視線誘導の意味がいっそう立体的に見えてくるはずです。
中小企業サイトで今日から試せる視線誘導
視線誘導は、大がかりな改修をしなくても実践できます。まずは、1画面に「いちばん見てほしいもの」をひとつだけ決めること。その周りに余白をたっぷり取るだけで、スポットライトは自然とそこに当たります。見出しから本文、本文からボタンへと、視線が上から下へ素直に流れるように要素を並べる。写真の人物の視線を、見せたい情報のほうへ向ける。色や大きさは「いちばん大事なひとつ」のためだけに使い、ほかは控えめにする。こうした小さな工夫の積み重ねが、ユーザーを迷わせない設計をつくります。光を増やすのではなく、当てる場所を絞ること。それが、伝わるサイトへの近道です。
まとめ
人の注意は、舞台を照らすスポットライトのように、一度にひとつの場所だけを明るく照らします。要素を片っ端から目立たせると光は奪い合いになり、かえってどこにも視線が定まりません。大切なのは、見てほしいものを「目立たせる」のではなく、視線の自然な流れの中に「置く」こと。限られた注意をどこへ向けてもらうかを考えることは、そのままユーザーへの心配りになります。スポットライトの向きを意識することが、伝わるWebサイトへの第一歩になります。
記事監修
中谷 浩和
株式会社サンアンドムーン｜代表取締役
1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。
