前回,ITproのリニューアル前の印象をぼろくそに言ったままでした。じゃあ,具体的にどうすればよいのかを,今回から一つずつ具体的に要素を取り上げてお話ししたいと思います。

 コミュニケーション・デザインという場合でのコミュニケーションとは,伝えたいことを正確に相手に伝えることと言いました。「伝えたいこと」を,「高学歴のエンジニアの方々に向けて,知的で,信頼性があり,かといって冷たい感じを与えない“ちょっとかわいおもしろい感じ”」というデザイン・コンセプトとした場合,どのようなデザインをしていけばよいのでしょうか。答えは一つではありませんが,今回私が作成したケースを用いて説明していきます。まずは「色」について。

イメージカラーは青

 最初に,ITproのサイトのイメージカラーを“青”と決めました。青は寒色で,クールな感じ。後退色なので,落ち着いた静的な感じ。ITという高度な知的産業にふさわしい知的なイメージを持つ色です。そして,ライバル・サイトの反対色でもあります。赤のコカ・コーラと青のペプシ,黄色のコダックと緑の富士フィルム(最近はデジカメの台頭であまり目にしませんけど)など反対の色を使用することで,印象を強めることができます。ITproのライバルは青色の反対色を使っている,IT○○ですね!

 青といっても,赤みの入った深い青,真夏の空のような鮮やかな青,南国の海の緑がかった青など,様々な青があります。そういった中で,メインに選んだ色は,青紫がかった落ち着いた強い青です。検索窓が置かれている帯の色がその色です。そして,記事のタイトルとなるタイトルバーの最濃部もこの色を使用して,どのページにもこの青色の露出度を上げています。

 タイトルバー以外の部分にも,様々な種類の青色を使用しました。ヘッダーのナビゲーション・ボタンには薄く彩度を落とした水色,記事タイトルの太い文字の色,テキスト・リンクの色,クリック済みのテキストはデフォルトの赤紫ではなく,薄い青,「ピックアップコンテンツ」などのタイトル部分にはやや鮮やかな明るい水色,広告のテキスト・リンクは鮮やかな強い青…(PRの欄なので,広告主に少しサービスしました)など,いろんな青色を使用しています。同じ青色ですべての情報をまとめてしまうと,1色刷りのチラシのように安っぽく単調なイメージになりがちです。特に青色は寒色なので,寒々した感じがしてしまうのです。

 さらに,すべての記事のタイトルバーは,強い青から,明るい水色へグラデーションで変化を付けました。グラデーションは,見る人の気持ちを癒してくれます。自然界の色はグラデーションでできています。刻々と変化する空の色,固い実がだんだんに色づいて,熟れていく様,紅葉,大気による遠近の色の移り変わりなど,人は大昔からの体験でグラデーションに対して潜在意識の奥に快い記憶を持っています。知的労働で疲れたITproのユーザーが少しでも快く思ってもらえるようにとの演出です。青色のグラデーションに加え,細いストライプを敷き,タイトルの文字を太い白抜き文字にして,陰をつけ,黒い帯で全体を引き締めています。ここまで手を加えて,ようやくタイトルバーにITproのオリジナルな表現ができるのです。

 このように様々な青系統の色を組み合わせたり,グラデーションを使用することにより,冷たい感じを与えない工夫をしています。旧IT Proもメインカラーを青色にしていましたが,全体にほぼ同じ青色を使用しており,青色自体も彩度の低い,濁った薄紫のような印象でした。メリハリがなく,青色の持つメリットよりも,暗くて寒いというデメリットのほうが出てしまっていたのではないでしょうか。

信頼感をキープしつつ,テーマカラーで個性を出す

 ITproは総合情報サイトなので,様々なテーマで分類されています。10個のテーマ別に,テーマカラーを設けましたが,いずれの色も彩度を低くして,落ち着いた信頼感あるイメージの色を選びました。10のテーマ毎にいろんな色が出てきても,それらがITproのサイトである印象を保つために青色の使い方は統一しています。しかし,例外のページが「Select」にある「ソリューション営業」「電子行政」「Webデザイン倶楽部」の三つのサイトです。ここは編集上,ITproからやや独立しているサイトなので,青色を使用しないで,各サイトごとの個性を出しています。同じく,ITproの四つのサブサイトである「ITpro Tech」「ITpro Data」「ITpro Start」「ITpro Watcher」も青色を使用せず,各テーマカラーで個性を出しています。

 そもそも色には,汚い色,きれいな色というのは存在しません。その色をどう使うか,どう組み合わせるかによって色の見え方が違ってきます。そして色というのは,人の潜在意識に直接働きかけるので,見る人の感情に大きな影響を与えるものなのです。デザイナーは,色をどう使用して,どのように人の感情をコントロールしていくか,論理的に選択しなければなりません。エンジニアの皆さんがデザイナーと組んで仕事をする場合,この色を選んだ理由は何なのですか? なぜこのトーン(色調)なのですかなどと,質問してみてください。理由が答えられないデザイナーは,雰囲気や好き嫌いで色を決めているかもしれません。色は戦略的に選ばなくてはならないのです。


ちなみに私は色彩検定の1級色彩コーディネーターの資格を持っています。いや,別に自慢しようという…つもりです。