人が色を処理する方法はたった2つ。だからG Suiteの新ロゴデザインは分かりにくい？

デザインを考える上で「色」は重要です。

色が変わるだけで、ロゴやアイコンなどの印象が大きく変わる例も多いでしょう。最近デザインが刷新されたG SuiteやFacebook Messengerのアイコンからも、色の重要性がわかります。

今回は、色彩認識がデザインに与える影響について、実例を交えながら解説します。

色彩心理学の基礎

過去の研究から、色はさまざまな面で人に影響を与えることがわかっています。たとえば海外の研究では、以下のようなことが分かっています。

• 暖色の偽薬は寒色の偽薬よりも効果が高い
• 人は赤い色により迅速に反応する
• スポーツで黒いユニフォームを着ているとペナルティを受ける可能性が高くなる

しかし、特定の色が人に与える影響は一定ではありません。だからこそ、絶対的なルールを探すのではなく、柔軟にデザインと色を組み合わせることが重要です。

白は西洋文化においては清らかさをあらわす色として捉えられるのに対し、一部の東洋文化においては喪服の色として扱われる、といった例からも、色の認識が一定ではないことがわかります。

文化による色彩認識の違いについて、詳しくは以下の記事をご覧ください。

実例から学ぶ色彩認識の重要性

色彩認識がデザインに与える影響の大きさは、実例からも分かります。冒頭で触れたG Suiteの新アイコンを見てみましょう。

配色によってデザインに統一感が生まれている反面、見分けづらいという欠点も無視できません。また、色に目がいくため形が認識しづらく、どれがなんのサービスなのか分かりにくいですよね。

では、アイコンによって配色を変えるとどのような印象になるのでしょうか。Googleドライブ以外のアイコンを、一色にまとめてみましょう。

アイコンごとに色を変えると、繊細な色のトーンが形を際立たせます。配色を同じにしなくても、アイコンの形自体に類似性があるため、統一感も失われていません。

G Suiteは、Googleが提供するオフィスベースのアプリケーション群です。同じグループに属していることをあらわすため、統一感を出す必要があるのは理解できます。しかしユーザーの利便性を考えると、それぞれのアイコンの差別化も重要でしょう。

人が色を処理する2つの方法

心理学では、人は2種類の方法で刺激を処理すると考えられています。それが「トップダウン処理」と「ボトムアップ処理」です。

• トップダウン処理：
  刺激に「期待」を投影して情報を処理
• ボトムアップ処理：
  刺激を処理してその上に「期待」を投影

たとえば以下の画像を見てください。多くの人が「形」として認識するのは、白い部分だと思います。

これは、ボトムアップ処理の例です。白い形が処理されて、黒い部分が背景として認識から消えているのです。

では、以下の画像ではどうでしょうか。

形が変わっただけで、今度は黒のほうが形として認識しやすくなりますよね。この場合は、トップダウン処理が適用されています。

背景として処理されてもおかしくない黒い部分を形として認識するのは、私たちがそれを「人の顔」として認識するためです。

この2つの処理方法を理解したうえで、デザインを見直してみましょう。

G Suiteのアイコンはボトムアップ処理が前提

G Suiteのアイコンは、ボトムアップ処理を前提にデザインされています。Googleカレンダーの「31」や、Googleハングアウトのレンズのようなディティールは、アイコンを見分けるキーとなる要素です。

しかしG Suiteを使いなれているユーザーでなければ、こうしたディティールはあまり意味を持ちません。詳細から内容を判断するボトムアップ処理ではなく、まず全体を見るトップダウン処理だと、アイコンはどれも似たような印象になるからです。

しかし色を活用すれば、こうした印象を変えられるでしょう。

▲Googleのデザイン（上）と、ユーザーから見たアイコンの印象（下）

トップダウン処理に対応したロゴは単色でも認識できる

トップダウン処理を前提に制作されたロゴは、単色でもすぐに認識できるような、ユニークなデザインに仕上がっています。

各企業の名前はもちろんのこと、その企業のブランドアイデンティティも思い浮かぶのは、トップダウン処理によって形自体に意味が与えられているためです。

一方、色を黒にすると、G Suiteのアイコンからはキャラクター性や面白みがあまり感じられません。

処理モデルを予測する方法

情報の処理方法は人によって異なりますが、特定のデザインに対してトップダウン処理とボトムアップ処理、どちらが用いられるのかを調べる方法もあります。

以下の4つのポイントから、自分のデザインがどちらの処理方法に該当するのかを把握しておきましょう。

ポイント1. 形式を理解する

対象が小さなアイコンなのか、大きい画像なのかによって、処理方法が異なります。小さなアイコンはほとんどの場合、トップダウン処理されて案内係のような役割を果たします。

一方、大きな画像はボトムアップ処理されることが多く、ユーザーに製品情報の手がかりを与えられます。

ポイント2. コンテクストを理解する

Facebookを例に考えてみましょう。

Facebookのフィードを見ているとき、一つひとつの投稿を細かく見るのではなく、全体をなんとなく眺めていますよね。しかし、気になる投稿についてはボトムアップ処理でコンテンツを読み、時間をかけて理解しようとします。

こうしたコンテクストも、処理方法に影響します。

ポイント3. 階層を考慮する

アプリのアイコンはページ上に表示されていることが多いものの、ドックに表示されていることもありますよね。

ドックには構造的な階層があるため、ボトムアップ処理がされがちです。通知が表示された場合、ドック上のアイコンのほうがはるかに目立ちます。

ポイント4. 周辺のものはトップダウン

中心となるコンテンツの周辺の要素は、しばしばトップダウンで処理されます。

ポイント2で挙げたFacebookの例からもわかるように、中心となる要素はボトムアップ、周辺の要素はトップダウンで処理される傾向があるようです。

トップダウン処理モデル、ボトムアップ処理モデルのためのデザイン

トップダウン処理モデルにおいて、デザインは中心的な要素ではないか、より大きなシステムの一部として扱われます。そのため、色、形の複雑さ、情報アーキテクチャなど、さまざまな面でデザインは控えめかつシンプルなものにしましょう。デザインが環境に調和しているのも重要なポイントです。

ボトムアップ処理モデルにおいて、厳しい制限はありません。周囲の要素から分離して処理されることが多いので、トップダウンモデルよりも自由度が高いのが特徴です。

企業が、トップダウン処理が適用されそうな状況ではシンプルなロゴを使い、ボトムアップ処理が適用されそうな状況ではテキストなどの複雑なロゴを使う傾向があるのも、このためです。

おわりに

色が私たちに与える影響は未知の部分も多く、すべての人に共通しているわけでもありません。人間が視覚情報をどのように処理しているのかを解明するためには、より多くの研究が必要になるでしょう。

現段階で分かっているのは、「人はトップダウン処理とボトムアップ処理を使い分けている」ということです。色の処理方法を意識して制作すると、思いがけないアイデアに巡り会えるかもしれません。

（執筆：Christian Leong　翻訳：Nakajima Asuka　編集：齊藤颯人　提供元：UX Collective）