其の27 配色で視線の誘導を行う | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の27

配色で視線の誘導を行う


色の効果でユーザーの視線を引きつける場合、一番シンプルなのは、目立たせたい(読ませたい)箇所を色彩で強調する方法だ。

Webサイト上で利用者を的確に誘導したい場合は、「強調する」ことが効果的である。誘目性が高い暖色系(最も誘目性が高いのはオレンジ)を使用することで、そこに視線を引きつけることができるだろう。一番目立たせたい要素から配色や配置を考え、ページ上部から順番にプライオリティに応じて徐々に色彩を薄くしていく方法が有効だ。

ただ、そうした理論通りには行かない場合も多い。通常、サイトはメイン・アクセント・サブで配色を考えることが多いが、アクセントカラーの使い方によっては、視線誘導の順番が変わってしまう。

たとえば、3段組のデザインを制作していたとする【1】【2】。一番見せたいのは中央なのに、別の箇所にアクセントカラーを使うとユーザーの視線が定まらなくなり、重要な部分が読み飛ばされてしまう可能性がある。ユーザーに見せたい部分はアクセントカラーで見出しを付けるなどして、視線の誘導を行うといい。

アクセントカラーを右と左の要素に使用してしまった例
【1】アクセントカラーを右と左の要素に使用してしまった例。真ん中を見せたいのに両サイドばかり目立ってしまう
一番読ませたい部分の見出しにアクセントカラーを使用した例
【2】一番読ませたい部分の見出しにアクセントカラーを使用してみた。一番最初に真ん中部分に視線が動くようになる
また、グラデーションは単なる繰り返しではなくて徐々に変化するため、「統一」と「変化」を同時に演出する。このため、見る側の視覚に美しいリズムを与えることが可能であり、流れるような視線の誘導が期待できる。

ただし、コントラストが強すぎる色を組み合わせたり面積が広い場所で多用すると、可読性が下がって見づらくなり、ほかに視線が逃げてしまう可能性があるので使い方には注意しなければならない。


お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在