三井 英樹＠日刊デジタルクリエイターズ

　前回に引き続き，「色」の話をします。前回は，「色を決めるプロセス」に触れましたが，今回は色がユーザーに届いた後，どんな「効果」を発揮するのかを考えてみます。

　「色」が他の要素に比べて「雄弁」になりうる場面は，少なくとも三つあります。「強調」「印象」「関連」です。言葉で長々と説明しなくても，色を有効活用することで，発信者が持っているこれら三つの意思を，暗黙的にユーザーに伝えることができます。


色の持つ「力」

▼強調

　まず「強調」に注目してみましょう。

　前回の安全色に関する慣れ（あるいは刷り込み）のおかげか，特定の色に対して私たちは似たような反応を示します。例えば赤色を使った「ここに注目！」という表示があれば，この部分だけが目に飛び込んで見えます。他の文字色が黒であるがゆえに，そのコントラストの差によって目立たされているのもわかると思います。

　しかし，この強調するという効果を，あまりに多用すると，かえって焦点がぼけてしまい，逆効果になりかねません。焦点を合わせるべきことを明確に計画し，強調したいことが，強調しやすいような下地作りが必須となります。

▼印象

　次に「印象」です。色は，Webサイトやページ全体の印象づけをするのに大きな役割を果たします。ボタンなどのユーザー・インタフェース（UI）部品の形やシャープさも重要ですが，私たちは思いのほか，色によって瞬時に判断している傾向があるようです。


加工していない状態

　例えば，上図のサイト（ITpro）について皆さんはどのような「印象」をもたれるでしょうか。デッサンでは，全体の構造をチェックする際に目を細めて，ワザと「ぼーっ」とした映像にして全体を把握するということをよく行います。そこで画像加工ソフトを使って，擬似的にそれを再現してみましょう。「ぼかし」というフィルタをかけてみます。


ぼかし（ガウス：半径5）をかけた状態

　いかがですか？　一つひとつの記事は判読できなくなりますが，何があるのかは想像できます。人が何かマイクを前に話していることや，何か「箱物（PCやHDDなど）」の新製品が出たのかとも予想できます。では，さらにフィルタを強めにかけてみましょう。


ぼかし（ガウス：半径15）をかけた状態

　全体がぼんやりとして，色の情報しかないような状態になります。このような映像を人が意識的に見ているとは思いませんが，ニュース・サイトのような日々訪れるようなサイトでは，こうした「印象」が，そのサイトに入ったことを「感じさせる仕掛け」になっていて，それが「ブランド」に育っていくこともあるのです（青色」といったらあのサイト，「黄色」といったらこのサイト…という具合）。

　実際，サイト開発の現場では，何度となく目を細めてグラフィック・デザインを眺めて，クライアントのリクエスト通りのイメージになっているか，ページによって印象が変わったりしていないか，といったことを目で確認することがあります。

　ただし，少し注意しなければならない点があります。

　現在の多くのWebサイトは広告型のビジネス・モデルの場合が多く，挿入されるバナー広告の色までは指定しづらいという事実です。広告クライアントに対して，「台（Webサイトの基本色）」を意識したバナーを用意してほしいとは言いにくいでしょう。しかし，あとしばらくすれば，サイト訪問者の属性によって広告を変えるような時代になり，場違いな色の広告は減っていくように私は予想しています。


バナー広告によって印象が変わる例（左は無加工，右はガウス：半径15）
ぼかしなどのフィルタ効果を試したい場合には，写楽などのフリーソフトを使ってみるといいでしょう。適当な画像を用いて，「フィルター」>「ぼかし」の手順で，実験できます。

▼関連

　最後は，三つ目の「関連」です。色には，「関連付け」を連想させるチカラがあるのです。

　多くの情報には，いわば「親子関係」のようなものが存在します。そこで，全体像をとらえる場合には細部を無視し，まず「大分類」に属するような項目を押さえ，それから細部（中小分類）の項目に目を移したほうが早く理解できます。

　下図は，Webサイト構築についての検討項目をタスク管理表のように表現したものです。多くの人が一見して，「コンテンツ構成」「サイト構成」「ページ構成」の三つの大分類（あるいは中分類）があることを理解できると思います。


色による，情報の関連付けの例（情報は「ウェブ・リデザイン（発行：エムディエヌコーポレーション）」を参考にExcelで作成）

　それぞれの分類について，インデント（字下げ）を用いているのもわかりやすい要因でしょう。しかし，青色の段階状の濃さが，関連付けを暗示してくれていることもよく理解できると思います。

　参考のため，上記の表を白黒で描き直したものも紹介しましょう。

　

上記の表を白黒で表現したもの
　

　全体を理解するのに，どちらが楽に感じるでしょうか。もし，どちらかが楽だと感じるのであれば，それは「色」が何かを表しているということにほかなりません。

　もう一つ，参考例を紹介しましょう。

　

色が「全体像の把握」には有効に働いていない例
　

　上記のような表は，プレゼンテーションの資料でもありがちな，やたらと色を多用した例です。実際，色で担当者を表したりする場合は多いと思います。そうした特定の目的（Aさんは赤色だけを見ていればいい）がない限り，このように色を不必要に多用すると，全体像を把握するのが難しくなる可能性は高いでしょう。

まとめ

　色を選ぶ際，色自体のもつこうした「力」を意識すると，適切な色の選択ができたり，仕様の変更を減らせたりするかもしれません。色を決める前に，「何かを強調したいのか」「何かを印象づけたいのか」「何かとの関連付けを連想させたいのか」――この三つを考えてみてください。


三井 英樹（みつい ひでき）
1963年大阪生まれ。日本DEC，日本総合研究所，野村総合研究所，などを経て，現在ビジネス・アーキテクツ所属。Webサイト構築の現場に必要な技術的人的問題点の解決と，エンジニアとデザイナの共存補完関係がテーマ。開発者の品格がサイトに現れると信じ精進中。 WebサイトをXMLで視覚化する「Ridual」や，RIAコンソーシアム，日刊デジタルクリエイターズ等で活動中。Webサイトとして，深く大きくかかわったのは，Visaモール（Phase1）とJAL（Flash版：簡単窓口モード/クイックモード）など。