• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

Webデザイン エンジニアリング

第22回 適切な「色」の選び方

三井 英樹 2006/09/13 日経ソフトウエア
三井 英樹@日刊デジタルクリエイターズ

 Webサイトを設計する際,「色」は様々な問題を起こします。開発者それぞれの想いが込められやすいのかもしれません。開発末期になってから,色の変更指示で不眠開発になるという話は,いまだ昔話にはなっていません。

 色の問題を解決するためには,色についての知識があったほうが助かります。ただし,色自体の講釈をここではしません。色を決めていく過程の参考になりそうなことを記します。

刷り込まれている色/固定イメージのある色

 私たちは様々な色に囲まれて生活しています。その中で,色と行動が一番密接にかかわりを持つのは「信号」です。我々の取るべき行動を色が指示します。それはあまりに一般的になりすぎて,我々は無意識のうちにそれらの色に対して同様の行動パターンを取りやすくなっています。

 例えば,赤色を見ると何か危険なことがそばにあるのかもしれないと警戒したり,黄色の標識を目にすると周囲に対して少し注意力をはらったり,といったことはよくあるでしょう。それは,社会全体があるルールに基づいて色を使用していることと関係があります。

 安全色という概念が,JIS(日本工業規格)によって定められ,多くの標識などがこれに従って作られています。こうした統一ルールが,非常時にもパニックにならず同じ判断を下せるよう,我々の中に色に対する固定されたイメージを育てているのです。

安全色及び安全標識(JIS Z 9101)
安全色 意味又は目的 使用例
防火 防火標識,配管系識別の消火表示
禁止 禁止標識
停止 緊急停止ボタン,停止信号旗
高度の危険 火薬警標
黄赤 危険 危険標識,配管系識別の危険表示,スイッチボックスのふたの内面,機械の安全カバーの内面,露出歯車の側面,目盛板の危険範囲
航海,航空の保安施設 救命いかだ,救命具,救命ブイ,水路標識,船舶繋留ブイ,飛行場用救急車,飛行場用燃料車
注意 注意標識,感電注意標識,クレーン,構内機関車のバンパー,低いはり(梁),衝突の恐れがある柱,床上の突出物,ピットの縁,床面の端,ホッパの周囲及び階段の踏みづらの縁,つり足場,電線の防護具,道路上のバリケード,有害物質の小分け容器又は使用箇所,家電製品の警告表示
安全 安全指導標識及び安全旗
避難 誘導標識
非常口の方向を示す標識,回避所の位置を示す警標及び回避所,坑口,特免区域の方向を示す標識
衛生・救護・保護 衛生指導標識,労働衛生旗,救護標識,保護具箱,担架,救急箱,救護所の位置及び方向を示す標識
進行 進行信号旗
義務的行動 指示標識
指示 保護めがねの着用,ガス測定などを指示する標識,修理中又は安定休止箇所を示す標識,スイッチボックスの外面
赤紫 放射能 放射能標識,放射能警標,放射性同位元素及びこれに関する廃棄作業室,貯蔵施設,管理区域内などに設けるさくなど

 したがって,この「意味」から外れた色の使われ方をされると,私たちは戸惑います。例えば,赤色の点滅を単に目立たせるためだけに使われた場合です。それを見る私たちは,サイレンのようなイメージが頭の中に浮かび,緊急事態を連想してしまうからです。

モノからイメージされる色

 逆に,「モノ」から固定の色がイメージされやすいものがあります。身近な例でいうと,多少個人差がありそうですが,「牛乳のパッケージ」などがわかりやすいかもしれません。


筆者が飲んでいる牛乳パッケージーの例

 子供時代,給食でガラス瓶の牛乳に見慣れたためか,「牛乳」には「白」のイメージが私には付いています。同時に,ガラスの色や清潔感,白を引き立てる意味からか,「青」も違和感なく結びつく色として,私の色彩感覚には入力されています。

 これは,買い物に行ったときに,牛乳が欲しければ白や青のパッケージを探す,という行為に繋がります。何も意識しないでも,牛乳を買いに行けば,この色を目が自動的に探しているのです。その結果気づくことは,それらの色のパッケージの牛乳がかなりあるということです。

 つまり多くの人にとって共通に「牛乳=白or青」という意識があるのだろうと思われます。逆に言えば,これらの色にしておけば,多くの人たちに「牛乳」だと気づいてもらいやすい土壌がすでにあるということです。

戦略的な色

 しかし,すべての牛乳が白か青だとしたらどうなるでしょうか。店の棚としては統一感はあるでしょうが,個性がありません。購入者はお目当てのメーカーの牛乳を探すのに,苦労するかもしれません。

 そこで,多少「常識(何が常識かは,かなりあいまいですが)」はずれな色――紫,赤,緑,灰色など――が実は結構存在します。「牛乳=白or青」と頭のどこかに刷り込まれている私には,正直,違和感を感じるパッケージも多々あります。でも,最初の関門を通過すれば,青や白の棚の中で,ひときわ個性的に自己主張する牛乳パッケージになるのは理解できます。


様々な牛乳パッケージ( 参考サイト1参考サイト2

色選定の参考

 正直に言えば,牛乳に紫や赤をもってくるパッケージ・デザイナの勇気には驚きすら感じます。では,こうした色はどのように決まるのでしょうか。消費者の目にどう映るかは,少なくとも下記の三つの方向性から検証されていると言えるでしょう。


三つの視点からの「色」の決定

 まずは「戦略的な色」の視点です。どんなサイトでも,その企業のコーポレート・カラーを無視できません。どんな製品やサービスであっても,競合他社の色合いでの広報活動は許されるはずがないのです。コーポレート・カラーという定義が明確に存在する限り,この「縛り」が一番厳しいものだと思います。サイト全体の色構成はここから始まるのが普通でしょう。

 製品(群)にテーマのようなものがあり,そのテーマ色のようなものがあれば,それも大きな視点になります。サイト全体として,その色調を保つ必要がありますし,ボタンやテキストの色なども,それらを印象深くすることを目指すべきでしょう。

 二つ目は「固定イメージのある色」とうい視点です。人とモノとに目を向けるのです。それぞれの色には,何かしらイメージがあるわけですから,その固定イメージを最大限に活用するように色を選びます。それはその色を好む人たちを対象ユーザーに迎え入れることを意味します。

 三つ目は「商品からイメージされる色」という視点です。商品やサービスをイメージしやすい色を選定するのです。提供しようとしている「モノ」が明確であるほど,これらの色選定もすっきりと進むはずです。


三つの視点からの「色」の決定:その2

 モニターが何万色で表示できようとも,これら三方向からの観点で色選びをしていて,「戦略/対象ユーザー/提供するモノ」が明確であるならば,組合せはそれほど多くはならず,適切な色を選択できると思います。逆に言えば,もし昨日指示した色を今日変更する,というようなケースが頻発するなら,それはWebサイトの設計以前に何か軸足が揺らいでいるということを意味している可能性があります。

 「色」は最終的に,直接エンドユーザーに届く「要素」です。決して誰かの趣味や気分で決めるべきものではありません。細心の注意を払って選ぶべき課題なのです。もしWebサイトの一部分でも色を決める機会があるのなら,こうした三つの観点から,お客様の目に触れて何を伝えたいのかを考えてみてください。お客様とのコミュニケーションという言葉が,もう少しリアルに感じられるかもしれません。


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

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る