WEBの色彩デザイン
Webの配色セオリー
Webにおける配色のセオリーは 前述 「色彩の基本理論」項目の色彩学に加えて、Webならではの注意点を考えなければなりません。Webデザインの中でも 配色は重要な要素です。
配色によって Webサイトの印象が変化するばかりではなく、最も重要なユーザビリティまでも決まってしまうからです。ここでは、Webユーザビリティを念頭に置いた色彩理論をまとめます。
色の誘目性
色の誘目性とは 色によって視線をひきつける機能のことです。一般的には、暖色系の高彩度の色が 効果が高いといわれています。注目させたい箇所に 誘目性の高い色を使えばユーザビリティが高まります。
しかし、周囲が彩度の高い色で覆われているような状況では、相対的に彩度を落とすなどして、効果を考えた配色を施す必要があります。一般的には PC画面一面の中で 目立たせたい箇所を3カ所くらいに絞り誘目性の高い色を用い、それ以外の部分は低彩度色でまとめると良いでしょう。
色の可読性
可読性とは 文字の読みやすさのことです。背景色とその上にのる文字とのコントラストが関わってきます。
可読性を確保するためには、背景と文字との、明度差が大きいことが重要となります。明度差があればあるほど 文字はくっきりと見えてきます。また、補色の関係にある色の組み合わせも 読みやすさという点においてはメリットがありますが、この場合も明度、彩度が近い配色だと 読みづらいものになってしまうので注意が必要です。
ディスプレイ上の文字を読む、という行為は、印刷文字を読むのに比べ はるかに読みづらくストレスのある作業です。文字の配色には 特別な配慮が重要でしょう。
可読性を確認するツールを利用することも有効です。
富士通(株)のカラーセレクター は、背景色と文字色の見やすさを判定する無償配布ソフトウェアです。(有)アイクリエイツのカラーコントラストチェッカー も、ブラウザ上で簡単に可読性の評価が行えます。
下図は 低彩度背景色に 高彩度色をのせたサンプルです。
背景が変わると 同じ色でも 色そのものの見え方も変化しますし、同様に誘目性、及び 可読性がかなり変わってくることがわかります。

ユーザーを動かす色彩デザイン
Webサイトを公開する目的は、商用であれ個人サイトであれ ユーザーに興味を持ってもらうことでしょう。ユーザーが Webページを開いた瞬間に興味を惹かれるのは、まずは「色」です。瞬間的に文章などを判断・認識することはできませんが、色なら 瞬時に認識されます。
それほど、Webサイトにおいて 色彩デザインというのは重要なものです。
クリックしてもらうために
Webページは クリックにより閲覧動作が継続していきます。
見せたい箇所、次の動作に移ってもらいたい箇所は、Webサイトの中で目立たなければ困ります。
交通標識のように、コントラストのきいた配色、反対色の組み合わせなどを用いて、まずは視認性を確保することが重要です。また、他の要素がカラフルな場合は、クリックさせたい箇所に あえて無彩色を使用するなどして、他所とは差別化をはかる方法も有効です。
信頼してもらうために
玉石混淆のWebサイトの中で、自分が提供する情報に信頼感を加味するのに 配色が重要なポイントになるケースが多々あります。
派手な高彩度色同士の組み合わせは、見ていて落ち着けないので、信頼できない印象を持たれやすいものです。ですが、色数を抑えて 且つ 色の組み合わせがマッチしていれば、個性的なサイトになります。
また、高彩度の色を使っていても、どこかに落ち着いた色をおくことによって 信頼感を出すこともできます。逆に、薄い色だけの配色は 自信がなさそうに見えることから 信頼性に乏しいと判断されやすいので、どこか1カ所だけにでも締まりのある強調となる色をおくと良いでしょう。
覚えてもらうために
Webサイトで最も大事なのはコンテンツに違いありませんが、印象に残るかどうかを左右するのは全体的なイメージです。そのイメージを表現するのが 「色」の役目です。
サイトに使われている色を見ただけで、何を扱っているサイトなのかわかってもらえるのは何よりです。そのような配色効果を出すために、通常生活の中で習慣として身についている色への感覚を意識して生活することも重要でしょう。また、制作にあたっては、多くの人の意見・感覚を集約したイメージ集などを参考にして、一般的イメージから あまりにもかけ離れたものにならないよう 考慮することも大事でしょう。
◆ Webの色彩デザインカラーサンプルは こちら:赤のイメージ からご参照下さい
