色だけに頼らずに伝える

坂本邦夫 — Wed, 27 Jan 2010 10:03:32 +0000

色彩で区別するだけでは全ての方にわかりやすい情報とは言えません。グラフ、ボタンを例に挙げて解説しています。

視覚に何らかの問題がある場合、色だけで情報を区別していては、その理解を妨げることもあります。

左側のグラフが悪い方の例になります。色だけで情報を区別しておりますので、その色自体の区別が付かなければ、A社が実際にどこの領域に対応しているのかがわからないということになります。

対して、右側は引き出し線を付けることによって、領域と文字が１対１で対応しますので、どのような方にもわかりやすいということになります。

これはグラフの表示に留まらず、ボタンなど操作が必要な部位には特に重要になってきますので、特に気を付けるようにしましょう。

模様の併用

また色だけに頼らず、模様を併用する場合にも注意が必要です。色彩と模様のみで区別しようとすると、左側の例の黄色のように明度の高い色は模様が見分けにくくなります。

また水色の部分のように、特に面積の小さなところでも模様がわからないことがありますので、どのような状況であれ、文字の情報を領域と一致して表示するような工夫が必要です。

関連記事：

情報を見せる背景色

坂本邦夫 — Wed, 27 Jan 2010 05:23:50 +0000

文字情報を中心として扱うホームページの配色に際して、背景色・壁紙をどう扱うのがよいかをご説明いたします。

最も大事なのは色ではない

これはウェブサイトで一番大事なのは情報であり、色ではないというスタンスに立つ場合の背景色・壁紙についての考え方です。検索エンジンなどであなたのホームページを見つけてくれた方は、配色を見に来るのではなく、内容を見にくるのです。

ビジネス書や検索サイトを考えれば、わかりやすくなると思います。ビジネス書だけでなく小説なども同じ事ですが、最も大事な部分は文字の情報です。また検索エンジンそのものにおいても最も重要なことは検索結果の表示です。どちらも文字の情報をいかに読みやすくわかりやすく伝えるかが重要だということがおわかりいただけるかと思います。

特に壁紙は模様が入っているため、よほど白に近い色でなければ、文字の読みやすさを妨げこそすれ、助けてくれることはありません。

下の表は背景色と文字色による読みの速さに関する調査の結果で、最も見慣れている白地に黒がやはり一番読むのが早いということになります。判読性の順位とは離れたところからも文字を読めるという距離の順位を表しています。つまり白地に黒が最も早く読め、離れたところからでも文字を読みやすいということになります。

読みの速さに関する色彩対比の効果
配色	相対的読みの速さ	大学生に判定された判読性の順位
（資料）D.G.Paterson and M.A. Tinker, “How to Make Type Readable,” 1940, p.120.
白地に黒	100.0%	1
白地に緑	97.0%	4
白地に青	96.6%	2
黄地に黒	96.2%	3
黄地に赤	95.2%	5
白地に赤	91.1%	6
赤字に緑	89.4%	7
黒字に橙	86.5%	8
白地に橙	79.1%	9
緑地に赤	60.5%	11
紫地に黒	48.5%	10

文字情報が大事な時の背景色は白

このような理由から文字を中心として読ませたい場合は背景色は白を選ぶことをおすすめします。サービスや情報を邪魔するような色はいくら美しくても本来伝えたい内容を邪魔しないようにしましょう。

どうしても背景色をつけなければならない場合はごく薄く付けるようにしましょう。ただしさみしいからとかかわいい壁紙を見つけたなどという曖昧な理由で選んではいけません。