UIデザインを論じている記事を探していると、必ず出くわすのが*「配色理論」や「カラーパレット」*に関する記事です。
配色理論を勉強するのはデザインに携わる上で大切ですが、実際のところ、それらが役に立たないことがあります。

なぜかといえば、有名で確立されたブランドほど、複数の配色を使わずに、ほぼ１色を使ってUIをデザインしているからです。
例えば、Facebookでいえば紺色、Twitterでいえば水色、Pocketでいえばビビッドピンク…といった具合です。

確かに、ブランドイメージとブランドカラーが強力に結びつけば結びつくほど、そのパワーは非常に絶大です。
コカコーラなら赤、ポカリスエットならブルー、ロフトなら黄色と黒、というように、私たちの身の回りでも強烈なブランドカラーを掲げている企業や商品は多数あります。

そうすると、ここで一つ疑問が湧きます。
UIについて勉強するのに「配色理論」や「カラーパレット」を学ぶ以上に役に立つことは一体なんだろうか、と。
それを考えるためには、実例を考察するのが一番です。

今回は、FacebookのUIを切り口に、ブランドカラーとUIの配色の相関性について考察します。
Facebookは強力なブランドアイデンティティを築き上げていますが、もし私たちがFacebookで行なっているカラーリングスキームを学習できたらどうでしょうか。
そうした疑問を解決するために、早速実例を見てみましょう。

Facebookアプリで使われている3色のUIカラー

フェイスブックといえば紺色がかったブルーを連想します。
もちろんアンコンにも紺色が使われていますが、サービスやアプリを見てみると、ここでも一貫して*「フェイスブックブルー」が使われていることが分かります。
そして、UIに使われている配色を分析してみると、白・グレー・黒などの彩度を持たない色を除くと、使われているのが3色のブルー*であることがあります。

1.png

ご覧の通り、ヘッダーには*「ベースカラー」、そして検索窓にはベースカラーをやや暗くした「ダークカラー」、そしてアイコンにはベースカラーをやや明るくした「ライトカラー」*が使われています。

ところで、検索窓の部分には、黒い半透明のオーバーレイがかかっているだけだと思ったことはありますか？
検索窓部分に黒いオーバーレイがかかっているわけではなく、あるルールに従って別の色を使用しているのです。

もうひとつ例を持ってきましょう。

2.png

要素がホバーしたりすると色が変わりますが、これを「3色の青」を使っているというのは乱暴です。
「ある１色の青」のバリエーションと呼ぶのがふさわしいでしょう。

さて、まわりをよく見渡すと、このようなバリエーションを配色として利用しているアプリケーションはたくさんあることに気づきます。
そして、これらのカラーリングは実生活からもヒントを得ることができます。

ここからは、Facebookで使われている3色がなぜこの色なのかを読み解くために、少しだけ配色理論のご紹介をしたいと思います。