海外デザインブログViget Inspireで公開された「Signal vs. Noise: Color as a Wayfinding Tool」より許可をもらい、日本語抄訳しています。
注意深く利用されている配色は、ユーザーがどこにいて、次にどこに進むのか、みちしるべのように利用することができます。ユーザーインターフェース・デザインを考えるときは、限られた色数で、意図的に（英: Intensionally）、そして有意義な（英: Meaningful）方法で、配色を利用してみましょう。
色数を増やし過ぎると、 何にもっとも注目したらよいのか分かりにくくなってしまいます。たくさんのひとが話している様子を連想してみましょう。もしみんなが一度に喋っていると、本当に大事なことを言っているひとがいても、聞こえなくなってしまいます。反対に、たくさんの人がいる時に、一人だけが話していると、その人が何を言っているのか耳を傾けようとするでしょう。
以下のドット柄パターンをサンプルに見てみましょう。使用している色数が少なくなることで、ひとつのドットに気付きやすくなります。それぞれのドットがリンクだと連想してみましょう。右下のパターンでは、どれがもっとも重要なリンクになるでしょう?
配色をうまく使って、みちしるべに。
みちしるべとして、配色は４つの重要な使い方があります。
- 証明（英: Identification）: ブランドとして認識され、ロゴとの色合い
- アクション（英: Action）: リンクやボタン、その他に投票やレーティング・システム。
- 意義（英: Signification）: どこを見ているのか教えてくれます。
- 通知（英: Notification）: なにか新しいものがあったとき、ユーザーに伝えます。
通常、写真やビデオなどのメディア系のコンテンツでは、配色は自然とシンプルになることを覚えておきましょう。サンプル例として、Facebook、Quora、Pandora、Netflixの人気アプリを見てみます。
これらのサンプルを見てみると、どこに色が使われているでしょう。配色が、ユーザーに何を伝えようとしているでしょうか。
Netflixのアプリは色をたくさん使っているように見えます。しかし、すべてのメディア・アセットと鮮やかな画像を取り除いてみるとどうでしょう。
これらのアプリが、メディア画像からたくさんの色を利用しているのが分かります。コンテンツを灰色ボックスに置き換えることで、どこに色が使われていたのか明白となります。画像をたくさん利用しているNetflixアプリは、ほんのわずかしか色を使っておらず、文字テキストの多いQuoraアプリでは、ブランドカラーとアクションカラーが区別されて利用されています。
もうひとつ注目すべき点が、視覚的な興味とコントラストを追加するために、アイコンがみちしるべになっています。（そのためサンプル例では、アイコンをサークル円に置き換えています。）
次にYoutube、Behance、Instagram、Vineアプリのデザインパターンを見てみましょう。
どこを見るべきかすぐに分かりますか。何を次にしたらよいか明確ですか。どこがクリックできるのか、きちんと分かるでしょうか。サンプル例で取り上げたモバイルアプリ用インターフェースには、じっくり検討された配色を利用しています。すこしだけ色を利用することで、サイトのみちしるべとなっています。
さいごに、。
インターフェース・デザインへの配色には、意味を持った選択を心がけることで、アプリケーションのみちしるべ、そしてユーザビリティを最適化することができるでしょう。こうすることで、ユーザーが混乱することも少なくなくなり、成功への近道と言えるでしょう。
参照元リンク : Signal vs. Noise: Color as a Wayfinding Tool – Viget
