インターフェイスの色にユーザーの目を刺激する色を使っていませんか？
もし、背景に明るく鮮明な色を使っているのであれば、ユーザーがページにとどまるのを困難にしています。明るく、鮮明な色はユーザーの興味を引きます。しかし鮮明な色を広い領域で使うことは、目を圧迫し網膜を過剰に刺激します。
どちらがあなたの目により負担が少ないですか？（左：明るさ・彩度100％、右：明るさ・彩度80％）
たとえば、上記の画像の色見本を見てみてください。左のグループは、最大の明るさと彩度を持つ色で成り立っています。右のグループは、80%の明るさと彩度を持つ色で成り立っています。明るさのせいで右のグループより左のグループを見るほうが辛いでしょう。彩度のある色は目によくないのです。
明るさ vs 彩度
明るさと彩度は異なる色の特性を持っています。明るさは色にどれだけの白や黒が混ざっているかで、彩度は色にどれだけグレーが混ざっているかです。
明るさの上昇は、彩度の減少と同じではありません。彩度を少なくすると、色はグレーに近くなります。明るさを足すと、色は明るくなりますが、グレーにはなりません。（参照）
上段：明るさを上げるとより白みが増す、下段：彩度を下げるとグレーに近くなる
色の効果による注意と反応
「色相・彩度・明度の影響」の研究は、高い彩度や明るさの色でユーザーの反応が大きいことを発見しました。それらの特徴は、色相よりも大きな注意を引くのに重要だと結論づけられています。
ほかにも「彩度の注意・反応への効果」と「色と感情」の２つの研究では、彩度の高く明るい色は大きな反応に結びつくことを発見しました。色相もまた注意を刺激しますが、彩度と明るさのほうがより反応が大きくなる効果があります。
ボタンを明るく、鮮明な色に
明るく鮮明な背景色はユーザーの興味を引きますが、長くは続きません。ユーザーが目の前にいるとき、ユーザーに金切声を上げているようなものです。興味は引きますが、耳障りなためすぐにどこかへ行ってしまいます。
明るく鮮明な色は、ボタンのようなユーザーに要求される行動のインターフェイス部分にのみ使用するべきです。そのような色は興味を引き、ユーザーに次の行動をわかりやすくします。
背景が明るく彩度が高いと背景に注目を集めてしまうが、ボタンをその色にすることでボタンに注目を集めることができる
背景には暗く落ち着いた色を
背景には暗く落ち着いた色を使うのが良いでしょう。色を暗くすると白が減り、色が不鮮明になるとグレーが増えます。これは、色の目に対する刺激を調整します。
それだけでなく、暗く落ち着いた背景色はページテキストやコンテンツと競合しません。そのため視覚的邪魔もなくユーザーが簡単にページを読むことができます。
明るく彩度の高い背景は目に酷だが、暗く彩度の低い背景は目に優しい
良い背景 vs 悪い背景の例
下記は、目に悪いホームページと目に優しいホームページの例です。どれくらい耐えられるか悪い例と良い例で試してみてください。
悪い緑のPanic/Prismic、良い緑のFreshDesk/Sigstr
悪い赤のTelepath/Meat、良い赤のAggFigures/Jackie
悪い青のCompose/DareIt、良い青のRepublic/MailTag
背景色でもユーザビリティを考える
これからは背景色を決定する前に、ユーザーの目に色はどのように映るかを考えましょう。
明るさや彩度は最適化されていますか？ ユーザーはテキストを簡単に読むことができますか？
色はデザインに影響を与えますが、ユーザビリティにも影響を与えます。デザイナーは効果を出すことと同時に目に優しくすることも考えなくてはいけません。デザインのためにユーザビリティを犠牲にすることはありません。どちらも入った素晴らしいインターフェイスをつくることはできるのです。
