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

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

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

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

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

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

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

1.png

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

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

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

2.png

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

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

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

HSBカラーモデル

HSBカラーモデルとはコンピューター上で扱う色を数値化したものの一つで、色の三属性である色相(Hue)・彩度(Saturation)・明度(BrightnessまたはValue)を用いて色を指定するものです。

OSやソフトウェアによってはHSBをHSVと呼ぶこともありますが、ここではPhotoshopやIllustratorでも採用されている通り、HSBで統一して話を進めていきます。

実生活から見えるカラーバリエーション

さて、部屋を見渡すと、いろんな色が目に飛び込んできます。
そして、特に際立って色のバリエーションを作っている箇所があります。

それは「影」です。

影は、ベースカラーを暗くしたものだと考えることができます。

3.png

さて、先ほど見てきたとおり、HSBによって配色を分析してみましょう。

4.png

数値を見て明らかですが、明度が下がっていますね。
しかしそれだけでなく、彩度が上がっているのにお気づきでしょうか。

もうひとつ例を見てみましょう。

5.png

さて、こちらはどうでしょうか。HSBを確認してみましょう。

6.png

見比べてみて、どうでしょうか。
やはり同じパターンになっていますね。

つまり、ベースカラーと影(ダークカラー)のバリエーションの関係を見てみると、明度が下がるだけでなく、彩度が上がっています
あなたのホームページアプリで1色のブランドカラーからUIの配色を決める場合、「明度を下げて、彩度を上げる」というルールにのっとればいいことになります。

Facebookのカラーリングルール

さて、改めてベースカラーとダークカラーの関係を挙げると以下のようになります。

ダークカラー → 明度を下げて、彩度を上げる

もう一度、Facebookのベースカラーと検索窓の配色を確認してみましょう。

7.png

やはり、明度が下がっている一方で、彩度は上がっていますね。
もし検索窓がベースカラーに黒い半透明のオーバーレイがかかっただけだとしたら、明度は下がりますが、彩度には影響しません。
これが「検索窓部分に黒いオーバーレイがかかっているわけではない」と断言できる理由です。

さて、もう一方の「ライトカラー」の部分に関してです。
もうお気づきかと思いますが、逆のことをすればいいのですね。

ライトカラー → 明度を上げて、彩度を下げる

明度と彩度の調節によって、ベースカラーからダークカラーとライトカラーが作り出されました。

色相について

ここまで、Facebookの3つの色がどのようにして作られているのか、またそれを応用して自分たちが3つの色をつくるにはどのようにすればいいのかをご紹介しました。
ポイントは、HSBのS(色相)B(明るさ)をルールに基づいて調整することです。
しかし、H(色相)については、上がっているものもあれば、下がっているものもありましたね。
これはどういうことでしょうか。

以下に示すのは、「HSB色相環」と呼ばれる色相を環状に並べたものです。
「HSB色相環」はS(彩度)とB(明るさ)を100%にしているので、色相の違いだけを確認することができる色相環です。

8.png

ここで着目してほしいことがあります。青色と黄色はどちらも100%の彩度・明るさですが、どちらのほうが明るく見えるでしょうか。
自信を持って、「黄色」だと答えられますよね。
これは、彩度・明るさが同じでも、色相によって持っている光度(Luminosity)が違うからです。

9.png

光度と色相の関連性はなく、ばらばらなことがわかります。
そして彩度・明るさを調整すれば、光度も変化し、自然と別の色の方向に色相が推移していきます。
彩度・明るさを調整することで自動的に色相も変わるということがご理解いただけたのではないでしょうか。

まとめ

以上、FacebookのUIを切り口に、ブランドカラーとUIの配色の相関性について考察してみました。
配色に関してはさまざまな理論がありますが、今回はFacebookでも実際に使われている配色を例に解説したので、実践的に使えるのではないでしょうか。

もしテーマカラーの選定に悩んでいるようでしたら、下記の記事を参考にしてみてください。
伝えたいイメージに沿って、核となる1色を選ぶ手助けをしてくれます。

参考:
ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント