ブランドカラーをWebに展開する方法とは?濃淡バリエーションの作り方

基本の理解

まずはブランドカラーそのものの意味を押さえたうえで、Webへの展開という考え方に進みましょう。

そもそもブランドカラーとは何か

ブランドカラーとは、企業やサービス、商品を象徴する色として意図的に選ばれ、ロゴ・Webサイト・パッケージなど、あらゆる接点で一貫して使われる色のことです。

色は、文字を読むよりも先に目に入る情報です。

同じ色を使い続けることで、ユーザーは「あ、あのサービスだ」と一瞬で気づけるようになり、繰り返し目にするうちに信頼感や親しみも育っていきます。

反対に、ページによって色がバラバラだと、同じサービスだと気づいてもらえなかったり、なんとなく頼りない印象を与えてしまったりします。

例えば、青系の色を基調にした金融系サービスや、緑を基調にした自然食品ブランドのように、色を見ただけで「あのサービスかな」と連想できるのは、ブランドカラーを一貫して使い続けている効果です。

ブランドカラーは、通常ロゴデザインの段階で1色(場合によっては2〜3色)に定められます。

ここから先は、その「定められた1色」を、実際のWebサイト上でどう活用していくかという話に進みます。

ブランドカラーをWebに展開する方法とは何か

ブランドカラーをWebに展開する方法とは、ロゴなどで決められたブランドカラー1色を、Webサイト上のさまざまな要素(背景・文字・ボタンなど)に無理なく使えるように、複数のバリエーションへ広げていく方法のことです。

バリエーションがあれば、ホバー時(マウスカーソルを要素の上に重ねたとき)や無効時(まだ操作できない状態)のように、1色だけでは対応しきれない場面にも、一貫した印象で対応できます。

なぜバリエーションが必要なのか

バリエーションが必要な理由は、大きく2つあります。

1つ目は、ブランドカラー1色だけでは、文字を読みやすくできない場面が出てくるためです。

たとえば明るいブランドカラーの背景に白い文字を乗せると、明るさの差が足りずに読みにくくなることがあります(読みやすさの基準はコントラスト比とは?で解説しています)。

2つ目は、ボタンのホバー時や無効時など、状態ごとに色を変える必要があるためです。

このとき、まったく無関係な色を使うとブランドの統一感が崩れてしまいます。

そこで役立つのが、ブランドカラーを基準にした濃淡バリエーションです。

ブランドカラーをWebに展開する3ステップ

ここからは、青のブランドカラー(#2362EB)を例に、濃淡を作ってWebに展開する流れを3ステップで見ていきましょう。

ステップ1:明るさだけを変えて濃淡を作る

まず、ブランドカラーの色み(色相)と鮮やかさ(彩度)はそのままに、明るさだけを変えた色を何段階か作ります。

このとき便利なのが、色を「色相(H)・彩度(S)・明度(L)」の3つの数値で表すHSLという形式です。

Figmaなら、カラーピッカーの表示形式を「Hex」から「HSL」に切り替えると、この3つの数値が表示されます。

このうちL(明度)の数値だけを、基準から15〜20程度ずつ上げ下げすれば、色みを保ったまま濃淡を作れます。

色相221・彩度83はすべて同じで、明度(L)だけを変えた5段階

3段階(薄い・標準・濃い)から始めて、上の例のように「背景用のごく淡い色」と「文字用のとても濃い色」を加えると、Webサイトで使う場面のほとんどをカバーできます。

なお、カラーピッカーには「HSB」という似た形式もありますが、HSBのB(明るさ)は最大100までしか上げられず、明るい色を作るには彩度も下げる必要があります。

明るさを一方向の数値で調整したいときは、HSLを使うと分かりやすいでしょう。

ステップ2:作った濃淡を使う場所に割り当てる

次に、作った濃淡を、ボタンの状態やページの要素ごとに割り当てます。

使う場所	割り当てる色
ボタン(通常時)	標準(ブランドカラー)
ボタン(ホバー時)	濃い
ボタン(無効時)	薄い
お知らせ枠などの背景	背景用
見出しの文字	文字用

実際にWebページの部品に当てはめると、次のようになります。

1色から作った濃淡だけで、背景・見出し・ボタンの3つの状態を塗り分けた例

この例では、標準のボタンと白文字のコントラスト比は約5.2:1、見出しの濃い青と背景のコントラスト比は約11:1で、どちらも本文の目安4.5:1を満たしています。

無効時のボタンは「押せない」ことを伝えるためにあえて薄くしており、コントラストの基準の対象外とされています。

ステップ3:サブカラーは色相環の近い色から選ぶ

ブランドカラー以外の色(サブカラー)が必要なときは、色相環でブランドカラーの近くにある色から選びます。

たとえばブランドカラーが青なら、隣り合う水色や青緑を選ぶと、色数を増やしても統一感を保ちながら爽やかな印象を加えられます(近い色同士の組み合わせ方は類似色配色とは?で解説しています)。

ボタンなどを特に目立たせたいアクセントカラーが必要な場合は、反対側の色(補色)を狭い面積だけに使う方法もあります。

作った色は名前を付けて管理する

作った色は、「ブランド-背景用」「ブランド-濃い」のように役割の分かる名前を付けて、カラーパレットとして保存しておきましょう。

チームで開発する場合は、色に名前を付けて一元管理するデザイントークンという仕組みにまとめておくと、デザインと実装で色がずれるのを防げます。

Web制作では、CSSのカスタムプロパティ(変数)を使って、次のようにまとめるのが手軽です。

:root {
  --brand-100: #e8eefd; /* 背景用 */
  --brand-300: #8aabf4; /* 薄い(無効時) */
  --brand-500: #2362eb; /* 標準(ブランドカラー) */
  --brand-700: #1043b2; /* 濃い(ホバー時) */
  --brand-900: #0b2c75; /* 文字用 */
}

.button {
  background: var(--brand-500);
  color: #ffffff;
}

.button:hover {
  background: var(--brand-700);
}

数字が大きいほど濃い色になるように名前を付けておくと、後から段階を追加するときにも迷いません。

※明るさや鮮やかさの違いによる色の調子は、配色理論では「トーン」と呼ばれます。より体系的に学びたい方はPCCSとは?を参考にしてください。

実践のポイント

ブランドカラーを展開する際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• ブランドカラーを1色だけ厳格に守ろうとして、状態ごとの色分けや、文字の読みやすさの確保ができなくなってしまうことがあります。
  1色を守ることより、ブランドの世界観を保つことを優先しましょう。
• 濃淡のバリエーションを場当たり的に作ってしまい、後から見返すと色の数値がバラバラで管理できなくなることがあります。
  最初から命名規則を決め、一覧で管理しておきましょう。

よくある質問

• Q. 濃淡のバリエーションはいくつ用意すればいい?
  A. 目安として、薄い・標準・濃いの3段階程度から始めると管理しやすいです。
  必要に応じて、背景用・文字用を加えた5段階や、10段階程度のより細かいスケールに拡張することもあります。
• Q. 状態色(エラーなど)もブランドカラーの色相に合わせるべき?
  A. エラー(赤系統)や成功(緑系統)のように、一般的に意味が定着している色は、ブランドカラーの色相に無理に合わせる必要はありません。
  ブランドカラーに合わせるのは、あくまでブランド自体を表す色(ボタンやリンクなど)に限定するのが基本です。
• Q. ブランドカラーが明るい色で、白い文字が読みにくいときは?
  A. 文字を乗せる部分だけ、明度を下げた「濃い」色を使うか、ボタンの文字を白ではなく「文字用」の濃い色にします。
  ロゴなどブランドの核になる部分は元の色のまま、文字を乗せる部分だけ濃淡で調整すれば、印象を保ったまま読みやすくできます。

まとめ

ブランドカラーとは、企業やサービスを象徴する色として一貫して使われる色のことです。

この1色を、明度だけを変えた濃淡バリエーションに広げ、背景・文字・ボタンの状態などに割り当てるのが、ブランドカラーをWebに展開する方法です。

作った色に名前を付けて管理すれば、色数が増えてもブランドとしての統一感を保てます。

まずはデザインツールのカラーピッカーをHSL表示に切り替え、自分のブランドカラーのLだけを上げ下げして、薄い・標準・濃いの3色を作ってみてください。

あわせて読みたい書籍

ブランドカラーの展開・配色の考え方を、より体系的に学びたい方はこちらの書籍もあわせてチェックしてみてください。