視線を誘導する色の使い方とは?コントラストで視線を集める方法を解説

基本の理解

まずは色による視線誘導がどんな仕組みで起こるのかを押さえましょう。

視線を誘導する色の使い方とは何か

視線を誘導する色の使い方とは、色の差(コントラストや進出色など)を利用して、ユーザーの視線を伝えたい情報や行動してほしい要素へと自然に導く手法のことです。

人の視線は、周囲と明らかに違う色(コントラストの強い色)や、進出色に自然と引きつけられるという性質があります。2つの言葉の意味を押さえておきましょう。

• コントラスト:隣り合う色同士の明るさ(明度)や色みの差の大きさのことです。差が大きいほど「はっきり違う色」として目立ちます
• 進出色:赤やオレンジなどの暖色や明るい色のことで、画面の中でパッと真っ先に目に飛び込んでくる、主張の強い色です。反対に、青や紺・黒などの寒色や暗い色は「後退色」と呼ばれ、引っ込んで見えて背景になじみやすい性質があります(詳しくは進出色・後退色とは?)

ページ全体を後退色や落ち着いた色でまとめると背景が控えめになり、その中に置いた進出色がより一層目立つ、という関係です。

文章で説明しなくても、色の力だけでユーザーの目を目的の場所に向けられるのが大きな利点です。重要な情報が確実に見てもらえるようになれば、購入やお問い合わせといった行動の増加にもつながります。

コントラストの強い・弱いの見分け方

「周囲との差が大事」といっても、どのくらいの差があれば目立つのかは、実際に見比べると分かりやすくなります。

強いコントラストを作る簡単な方法は2つあります。1つは、白い背景に濃い色のように明るさの差を大きくすること。もう1つは、青い背景にオレンジのボタンのように、色相環で正反対にある補色同士を組み合わせることです(詳しくは補色配色とは?)。文字やボタンのコントラストを数値で確認する方法は、コントラスト比とは?で解説しています。

視線誘導をどう実践するか

重要なボタンや情報も、周囲に埋もれるデザインでは気づいてもらえません。色によって能動的に視線を導く工夫が必要です。色による視線誘導には、大きく分けて「点で注目させる」使い方と「線で流れを作る」使い方の2つがあります。

① 点で注目させる(一か所に視線を集める)

ページ全体を落ち着いた色でまとめ、CTAボタン(「今すぐ購入」「資料請求」など、ユーザーに取ってほしい行動へ促すボタン。CTAはCall To Actionの略です)だけに目立つアクセントカラー(配色の中でごく狭い面積だけに使い、一点を目立たせる役割の色)を使うことで、一点に視線を集める方法です。タイトルや価格など、最初に見てほしい情報に強めの色を使い、視線の入り口を作る方法もよく使われます。

② 線で流れを作る(ページを順番に読ませる)

同じ形・同じ色の要素が並んでいると、人はその並びに沿って視線を動かす性質があります。そのため、読んでほしい順番に同じ色の見出しを配置すると、見出しが「道しるべ」になり、ページを上から下へスムーズに読み進めてもらえます。

実践のポイント

視線誘導を狙うときに陥りやすい失敗と、効果を高めるコツ、よくある疑問をまとめます。

注意点・よくある間違い

• 目立たせたい要素を増やしすぎて、あちこちに強い色を使ってしまうと、視線が分散して情報の優先順位が伝わらなくなります。本当に目立たせたい要素を1つか2つに絞りましょう。
• 色だけに頼って視線誘導をしようとし、配置や文字サイズなど他の要素との組み合わせを考えないと、効果が弱くなることがあります。色は視線誘導の手段の一つであり、レイアウトとあわせて考えることが大切です(具体例は下記)。

色×大きさ×余白で効果を高める

色の効果は、ほかの要素と掛け合わせることでさらに強くなります。たとえばボタンを目立たせたい場合は、目立つ色にするだけでなく、文字やボタンを周囲より一回り大きくし、ボタンのまわりに十分なすき間(余白)を空けると、視線が一層集中しやすくなります。

左:色は同じでも、小さく詰め込まれていて埋もれる/右:大きさと余白を足すと、同じ色でもボタンに目が行く

余白の取り方はデザイン初心者のための余白学習ロードマップ、配置や大きさも含めた視線誘導の全体像は視線誘導とは?で解説しています。

よくある質問

• Q. どんな色を使えば一番視線を集められる?
  A. 特定の色というより、周囲との「差」が重要です。周囲を落ち着いた色でまとめ、その中で目立たせたい要素だけ明確に異なる色にすることで、強いコントラストが生まれ視線を集めやすくなります。上で紹介したように、明るさの差を大きくするか、補色同士を組み合わせるのが近道です。なお、赤はWebサイトではエラー表示によく使われるため、申し込みボタンなどにはオレンジ系を使うと誤解を招きにくくなります(状態色とは?)。
• Q. 1ページに視線を集めたい要素が複数ある場合はどうすればいい?
  A. すべてを同じ強さで目立たせると、結局どれも目立たなくなってしまいます。最も優先したい要素に一番強い色を使い、それ以外は控えめにするなど、優先順位をつけて色の強さに差をつけましょう。ボタンやリンクなら、次のように見た目を3段階に分けると分かりやすくなります。

「色の強さ」とは、色の鮮やかさや、色を使う面積の大きさのこと。塗りつぶし→枠線→文字だけ、の順に控えめになる

まとめ

視線を誘導する色の使い方とは、コントラスト(色の明るさや色みの差)や進出色(パッと目に飛び込んでくる主張の強い色)を利用して、ユーザーの視線を伝えたい情報へ自然に導く手法です。周囲を落ち着いた色でまとめ、目立たせたい要素だけにアクセントカラーを使う「点」の使い方と、同じ色の見出しで読む順番を示す「線」の使い方があります。

目立たせたい要素を絞り込み、塗りつぶし・枠線・文字だけの3段階で優先順位をつけること、そして色だけでなく大きさや余白ともあわせて考えることが、視線誘導を成功させるポイントです。