Advertisement

signal-noise-top

 

 

海外デザインブログViget Inspireで公開された「Signal vs. Noise: Color as a Wayfinding Tool」より許可をもらい、日本語抄訳しています。

 

注意深く利用されている配色は、ユーザーがどこにいて、次にどこに進むのか、みちしるべのように利用することができます。ユーザーインターフェース・デザインを考えるときは、限られた色数で、意図的に(英: Intensionally)、そして有意義な(英: Meaningful)方法で、配色を利用してみましょう。

 

 

色数を増やし過ぎると、 何にもっとも注目したらよいのか分かりにくくなってしまいます。たくさんのひとが話している様子を連想してみましょう。もしみんなが一度に喋っていると、本当に大事なことを言っているひとがいても、聞こえなくなってしまいます。反対に、たくさんの人がいる時に、一人だけが話していると、その人が何を言っているのか耳を傾けようとするでしょう。

 

 

以下のドット柄パターンをサンプルに見てみましょう。使用している色数が少なくなることで、ひとつのドットに気付きやすくなります。それぞれのドットがリンクだと連想してみましょう。右下のパターンでは、どれがもっとも重要なリンクになるでしょう?

 

cw-041-1

 

 

 

配色をうまく使って、みちしるべに。

 

みちしるべとして、配色は4つの重要な使い方があります。

 

  • 証明(英: Identification): ブランドとして認識され、ロゴとの色合い
  • アクション(英: Action): リンクやボタン、その他に投票やレーティング・システム。
  • 意義(英: Signification): どこを見ているのか教えてくれます。
  • 通知(英: Notification): なにか新しいものがあったとき、ユーザーに伝えます。

cw-05

 

 

 

通常、写真やビデオなどのメディア系のコンテンツでは、配色は自然とシンプルになることを覚えておきましょう。サンプル例として、Facebook、Quora、Pandora、Netflixの人気アプリを見てみます。

 

cw-01

 

 

 

これらのサンプルを見てみると、どこに色が使われているでしょう。配色が、ユーザーに何を伝えようとしているでしょうか。

 

 

Netflixのアプリは色をたくさん使っているように見えます。しかし、すべてのメディア・アセットと鮮やかな画像を取り除いてみるとどうでしょう。

 

cw-02

 

 

これらのアプリが、メディア画像からたくさんの色を利用しているのが分かります。コンテンツを灰色ボックスに置き換えることで、どこに色が使われていたのか明白となります。画像をたくさん利用しているNetflixアプリは、ほんのわずかしか色を使っておらず、文字テキストの多いQuoraアプリでは、ブランドカラーとアクションカラーが区別されて利用されています。

 

 

もうひとつ注目すべき点が、視覚的な興味とコントラストを追加するために、アイコンがみちしるべになっています。(そのためサンプル例では、アイコンをサークル円に置き換えています。)

 

次にYoutube、Behance、Instagram、Vineアプリのデザインパターンを見てみましょう。

 

cw-03

 

 

 

どこを見るべきかすぐに分かりますか。何を次にしたらよいか明確ですか。どこがクリックできるのか、きちんと分かるでしょうか。サンプル例で取り上げたモバイルアプリ用インターフェースには、じっくり検討された配色を利用しています。すこしだけ色を利用することで、サイトのみちしるべとなっています。

 

cw-06

 

 

 

さいごに、。

 

インターフェース・デザインへの配色には、意味を持った選択を心がけることで、アプリケーションのみちしるべ、そしてユーザビリティを最適化することができるでしょう。こうすることで、ユーザーが混乱することも少なくなくなり、成功への近道と言えるでしょう。

 

 

参照元リンク : Signal vs. Noise: Color as a Wayfinding Tool – Viget