FacebookのUIの配色から考える！ブランドカラーを活かすためのHSB配色講座

更新日: 2018年01月31日

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

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

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

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

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

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

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

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

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

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

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

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

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

HSBカラーモデル

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

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

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

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

それは*「影」*です。

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

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

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

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

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

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

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

Facebookのカラーリングルール

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

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

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

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

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

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

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

色相について

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

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