
FacebookのUIの配色から考える!ブランドカラーを活かすためのHSB配色講座
色相について
ここまで、Facebookの3つの色がどのようにして作られているのか、またそれを応用して自分たちが3つの色をつくるにはどのようにすればいいのかをご紹介しました。
ポイントは、HSBのS(色相)とB(明るさ)をルールに基づいて調整することです。
しかし、H(色相)については、上がっているものもあれば、下がっているものもありましたね。
これはどういうことでしょうか。
以下に示すのは、「HSB色相環」と呼ばれる色相を環状に並べたものです。
「HSB色相環」はS(彩度)とB(明るさ)を100%にしているので、色相の違いだけを確認することができる色相環です。
ここで着目してほしいことがあります。青色と黄色はどちらも100%の彩度・明るさですが、どちらのほうが明るく見えるでしょうか。
自信を持って、「黄色」だと答えられますよね。
これは、彩度・明るさが同じでも、色相によって持っている光度(Luminosity)が違うからです。
光度と色相の関連性はなく、ばらばらなことがわかります。
そして彩度・明るさを調整すれば、光度も変化し、自然と別の色の方向に色相が推移していきます。
彩度・明るさを調整することで自動的に色相も変わるということがご理解いただけたのではないでしょうか。
まとめ
以上、FacebookのUIを切り口に、ブランドカラーとUIの配色の相関性について考察してみました。
配色に関してはさまざまな理論がありますが、今回はFacebookでも実際に使われている配色を例に解説したので、実践的に使えるのではないでしょうか。
もしテーマカラーの選定に悩んでいるようでしたら、下記の記事を参考にしてみてください。
伝えたいイメージに沿って、核となる1色を選ぶ手助けをしてくれます。
参考:
ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
関連ツール・サービス
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング