読み手の注意を引き寄せる「色」の6つのルール

デザイン講座

Coloured Pencils [3]

読み手の注意を引き寄せる「色」の6つのルール

 

「どの色にすれば注意を喚起できるのか?」サイトやブログだけでなくバナー広告などでもそうですが、色づかいで悩む時はありますよね。

 

もちろん、読み手の注意を引きつけるのは「色」だけではありません。フォントを大きくする、ゴシックにする、太字なども必要なことです。でもそれだけではありません。

 

「色」です。僕は約15年、ネットで売れる「色」について検証してきたので、今回はその経験などから言える基本的な6つのルールについて話します。

 

 

ルール1:基本的には背景は白

 

全て白にする必要はないですが、基本の背景は白です。分析から導きだした答えなので、理由は必要ないと思いますが、やはり見やすい、読みやすいこと。後ほど説明するルール4の意味でも背景は白がベストです。

 

それでも「背景を赤くしたい」など希望はあるかもしれませんが、これは基本です。ダマされたと思ってまずは白にしてください。繰り返しますが、全てを白くする必要はないです。でも背景の基本的なスペースを白くすることです。

 

 

ルール2:文字は黒

 

文字は黒。つまり背景は白で文字が黒。分析してきた結果です。

 

確かに白抜きの文字はカッコいい。でも視認性が落ち注意を喚起する力が落ち、レスポンスが低下します。変に色をつけた文字を使って見づらくしないことが重要です。(文字に色をつける場合はルール3やルール5を意識してください)

 

また僕らが「慣れている」ことも大きな理由。本でもネットでも基本は背景が白(厳密には真っ白ではありませんが)で文字が黒です。僕らが幼い頃からずっと慣れてきた組み合わせです。読み手が慣れている背景と文字の色を使うことで読んでもらうわけです。

 

 

ルール3:インパクトを与えたい文字(箇所)は赤

 

インパクトを与えたい場合、基本は「赤」です。背景が白、文字が黒の中でインパクトを与えることができます。僕が関わったネット上のビジネスで、高い実績を出したサイトの多くが「赤」を使っています。

 

 

ルール4:読み手の邪魔をしない

 

試しに色々な色を使ったサイトを作ってみればわかりますが、グチャグチャの色づかいは読み手の邪魔になります。特に存在感のある色は邪魔です。

 

たくさんの色を使わないことです。たくさん使えば使うほど、見づらくなり読まれないことにつながり、レスポンスが低下します。読み手の邪魔をしないように多くの色を使わないことです。

 

 

ルール5:コントラストを意識

 

背景が白で文字が黒と言っても、単調になるので全てをそのようにすることはできません。別の色の背景で別の色の文字を使うこともあると思います。その時に重要なのがコントラストです。

 

コントラストというのは背景と文字の明暗の差。ただピンと来ない方も多いと思います。そのために調べる方法があります。目安ですが、こちらを使うと安心してコントラストを確認できます。

 

色の組み合わせチェック http://www.kanzaki.com/docs/html/color-check

文字色1の欄に使う文字の色を入れ、背景色の欄に背景にする色を入れてチェックします。結果を見る時はまず「文字色1と背景色の明度差」を見ることです。目安ですが、158でおおむね十分。185以上になると十分なコントラストになります。

 

 

ルール6:色を使いたい場合は薄いグレー

 

背景に白以外の色を使い、存在感を持たせたくない場合はグレーを使うことを考えてください。これは有名どころで言えばアップル。色の存在を感じさせない薄いグレーを使うことで、必要以上に色を目立たせずにサイトをシンプルに見せています。

 

アップルのサイトは写真が多いので気がつきにくいですが、黒、白、グレーでシンプルに構成されています。

 


まとめ

ルール1:背景は白が基本
ルール2:文字は黒が基本
ルール3:インパクトを与えたい文字(箇所)は赤
ルール4:読み手の邪魔をしない
ルール5:背景と文字のコントラストを調べる
ルール6:色を使いたい場合は薄いグレー

 

この6つのルールを守れば、色が読み手のブレーキになるようなことはなくなり、読み手の注意を引きつけ続けるサイトやブログになります。

背景「白」と文字「黒」は最もコントラストが優れていますし、邪魔をする色使いもなくなります。あなたのサイトやブログのデザインがグーンっと見やすく、読みやすいものに変化します。

 

タイトルとURLをコピーしました