エキスパートコラム
Webの配色で最も考えなければならないことは、そのサイトのビジネスを成功させることです。そのためには重要な情報を訪問者にきちんと伝えなければなりません。第2回目の今回は、Webサイトの情報伝達を妨げないようにする色の使い方と配色に重要なキーカラー選びをお伝えします。
文字情報をきちんと読ませる
文字が読めないことによる機会損失
まず読みやすくするためには背景色と文字色の明度差が重要です。明度差が小さければ、文字は読みにくくなり、それが原因でサイトから去られてしまうこともあります。
また色は誰もが同じように見えているとは限りません。色弱で特定の色が見にくい人もいれば、病気や加齢によっても色の見え方が変わる人もいます。このような見え方の人は少なくなく、知らないうちに機会損失を生み出していることもあるため、ツールを使ってチェックする習慣を付けましょう。
読みやすさをチェックする無償のツール
客観的に読みやすさをチェックするための無償のツールもたくさん存在しますが、おすすめは富士通が提供しているカラーセレクターです。
参考URL:富士通 ColorSelector
http://jp.fujitsu.com/about/design/ud/assistance/colorselector/
このツールでは背景色と文字色を指定すれば、○×で判定してくれます。5つの判定結果がすべて○であれば、まず問題ないと判断してよいでしょう。
読みやすさをチェックしておくべき部分
サイトのどの部分の文字もきちんと読めるのが一番ですが、特にチェックしておきたい部分は以下の部分です。
- サイト名やロゴ
- キャッチコピー
- 文章の見出し
- テキスト本文
- ボタン上の文字
リンクの色の基本は青
GoogleやYahoo!などの多くのサイトで、未訪問ページへのリンク色は青になっています。図の右側の例のように、普段見慣れない色に変更すると、どこをクリックしてよいかわからなくなることがあるため、リンクの色は「青が望ましい」のです。
リンク色が青色以外のテンプレートを選んだ場合でも、リンクの色だけは青に変更した方が、機会損失という点において無難です。もちろんリンク部分の文字もきちんと読めるかのチェックも必要です。
配色の鍵となるテーマカラーを1色選ぶ
よい配色はテーマカラーと呼ばれる1色を決め、その色を様々に展開されて作られたものがほとんどです。まずは自分のサイトのイメージに合う1色を決めてしまいましょう。
テーマカラー選びで重要なことは、業種やサービスのイメージに合っているかということです。もし、どうしても使いたい色と目指す配色の印象が違う場合には、目指す印象に近い色の方をテーマカラーとしましょう。
右の例のように天然素材をアピールしたいのに、ロゴの色に合わせて強い色にしてしまうと、商品の良さが十分に伝わらなくなってしまうのです。
次回は、テーマカラーから色を増やして、必要な部分に配置する考え方を学んでいきます。
ウェブデザイン&配色の見本帳
『ウェブデザイン&レイアウトの見本帳』に続く、ウェブの配色に特化した実例の見本帳です。掲載している項目のテーマは、季節感を感じさせる配色デザインや、イメージを喚起させる配色、文字や罫線などと配色の関係、さらには集客に繋がる配色も紹介しています。なお、本書のはじめには色相や彩度、補色など、配色に関する基本的な事柄も解説することで、ウェブに関する配色の本として充実した内容になっています。