実際に効果のあるブランドカラーパレットの構築方法

ほとんどのブランドカラーパレットはロゴ提案のために作られ、最初のボタンが無効状態になる必要が生じるまでは、見た目は問題ないように見えます。

しかし、実際に機能するブランドカラーパレットは、5色だけではありません。それは階層化されたシステムです。アンカーカラー、真のニュートラルカラースケール、セマンティックカラー、状態カラー、そしてFigmaを開く前から存在していたダークモードプランなどが含まれます。本稿では、これらの階層構造を解説し、成功している5つのブランド事例を紹介し、構築順序で締めくくります。

---

なぜほとんどのブランドカラーパレットは失敗するのか

ほとんどのブランドカラーパレットが失敗する理由は、色の選択自体が間違っているからではなく、製品リリースシステムではなく、ロゴ提案のために作られているからです。

典型的なプロセスは次のとおりです。デザイナーがムードボードを作成し、要件に合致すると思われる5色を選び、プライマリー、セカンダリー、アクセント、ライト、ダークとラベルを付け、製品、サイト、ドキュメント、キャンペーンを担当するチームにパレットを渡します。しかし、これらのチームは5色のカラーサンプルが選ばれた場には立ち会っていません。

「セカンダリー」には使える中間色がありません。「プライマリー」は本文テキストには彩度が高すぎます。誰もニュートラルなグレーを選ばなかったので、デザイナーが自分で作り出しました。

ダークモードチームは諦めて、CSSフィルターで全てを反転させました。このパレットはプレゼンテーションでは役割を果たしましたが、実際の作業では失敗しました。

---

実用的なパレットの5つのレイヤー

実際のブランドワークで通用するパレットは、5つの色ではなく、5つのレイヤーで構成されています。大規模なブランドシステムを運用するデザイナーは、どの色がどのレイヤーに属するかについて議論しますが、「どの緑の色合いが私たちらしいか」について議論するわけではありません。

| レイヤー | 役割 | 標準的な数 |

|-------|--------------|----------------|

| アンカー |ブランド認知度を高める | 1色（場合によっては1色サポート） |

| ニュートラルカラー | サーフェス、テキスト、境界線、背景 | 9～12ステップ |

| セマンティックカラー | 成功、警告、クリティカル、情報 | 3～5ファミリー |

| 状態 | ホバー、フォーカス、押下、無効 | すべてのインタラクティブカラーとペア |

| ダークモード | すべてのレイヤーのダークモード解像度 | 完全な並列セット |

このリストにないものに注目してください。「セカンダリーブランドカラー」「ターシャリカラー」「アクセントカラー2」はありません。セカンダリーブランドカラーが必要だと考えているブランドのほとんどは、実際にはより幅広いニュートラルカラースケール、またはより大胆なアンカーカラーを必要としています。

フラット化はバグです。レイヤーは機能です。

---

アンカーカラーを最初と最後に選択する

アンカーカラーは、すべてのサーフェスでブランド認知度を高める唯一の色であり、2回選択されます。1回目は開始時、2回目は隣接する要素が決まった後です。

最初の選択は方向性を示すものです。アンカーカラーは、ワードマークを取り除いたとしてもブランドを認識できる色であるべきです。色の選択は感情的な訴求力も伴い、色彩心理学 は16進数カラーコードが確定する前に、作業の半分を決定づける役割を果たします。Stripe 紫、Linear 紫、Figma 青、Notion 黒、Slack マゼンタを想像してみてください。1つの色がブランドアイデンティティを確立する役割を果たします。

2番目の選択は技術的なものです。ニュートラルカラースケールが構築された後、アンカーカラーはほとんどの場合、微調整が必​​要になります。アンカーカラーは、その上のニュートラルカラーとのコントラストを保ち、ダークモードに対応した色調調整が必要であり、マウスオーバー時やクリック時の色が濁らないようにする必要があります。真のブランドシステムでは、1つの16進数カラーコードではなく、5～9段階のアンカーカラーステップが採用されています。

---

ニュートラルカラーこそがパレット

出荷されるインターフェースの大部分はニュートラルカラーで構成されており、真のニュートラルカラースケールを持たないブランドはパレットではなく、ムードボードを持っているに過ぎません。

真のニュートラルカラースケールは、ほぼ白からほぼ黒まで9～12段階のグラデーションで構成され、隣り合うアンカーカラーに合わせて調整されます。純粋なグレーは、暖色系のアンカーカラーの隣にあると生気のない印象になり、青系のアンカーカラーの隣にあると冷たすぎる印象になります。

ニュートラルカラースケールは、アクセスしやすい色のコントラスト をデザインに取り入れたり、排除したりする基準となります。すべてのサーフェスステップには、コントラストを通すテキストステップとボーダーステップがあります。すべてのステップには役割があります。背景、控えめな背景、サーフェス、隆起したサーフェス、オーバーレイ、区切り線、ボーダー、控えめなテキスト、デフォルトのテキスト、強調されたテキストなどです。

最も優れたニュートラルカラーワークを持つブランドは、ニュートラルカラーをパレットの主役として扱い、単なる埋め草とは考えません。アンカーカラーは国旗であり、ニュートラルカラーは国全体なのです。

---

アンカーカラーを巧みに活用する3つのブランド

これら3つのブランドは、深みのあるニュートラルな色調の中に、控えめなアンカーカラーを1色だけ使用しています。アンカーカラーは決して広がりすぎないため、その存在をしっかりと認識できます。

Notion

notion.com/product で実際にご覧ください。

Notionは、究極のミニマリズムを体現しています。作業スペースのほぼ全体が、黒のテキストが配された、落ち着いたオフホワイトです。マーケティングラインには深みのあるネイビーが1色使用され、タスクの状態を示すために、赤、オレンジ、青、緑といったセマンティックな色調が用いられています。

参考にすべき点：まず1つのアンカーカラーを選び、次にそのブランドに2つ目のアンカーカラーが必要かどうかを自問自答してみましょう。正直なところ、答えはたいてい「いいえ」です。

Linear

linear.appでライブ配信をご覧ください。

Linearは、このカテゴリーで最も明確なダークファーストのカラーパレットを採用しています。アンカーカラーは単一のパープルです。ニュートラルカラーは、ダークモードに対応したフルスケール（表面、微妙な表面、隆起した表面、オーバーレイ）で構成され、それぞれ異なる役割を果たしています。

参考にすべき点：製品がダークモードに対応している場合、ダークパレットはライトパレットと同様に、フィルター処理ではなく、丁寧に構築する必要があります。

Stripe

stripe.com/paymentsで実際の動作をご覧ください。

Stripeは、SaaS業界で最も洗練されたアンカーカラーの階層構造を採用しています。バイオレット寄りのパープルは、CTA、インラインリンク、イラスト、ブランドモーメントにのみ使用され、それ以外の場所ではほとんど使用されていません。パープルが登場すると、視覚的には装飾ではなく、アクションとして認識されます。

参考にすべき点：アンカーカラーが控えめであればあるほど、ブランドの認知度は高まります。アンカーカラーが曖昧だと、ノイズのように感じられます。

---

ロゴだけでなく、あらゆる要素に使えるブランドカラーパレットをお探しですか？Brainyは、真のニュートラルスケール、ダークモード、セマンティックトークンを組み込んだパレットを作成します。

---

ニュートラルカラーがすべてを物語る2つのブランド

この2つのブランドは、ニュートラルカラーそのものがブランドを支え、アンカーカラーがモノクロームであるか、あるいは役割に応じてトークン化されている場合に何が起こるかを示しています。

Supabase

supabase.comでライブ配信をご覧ください。

Supabaseは、開発ツールの中で最も規律の取れたワンアクセントカラーパレットを採用しています。表面はほぼモノクロームのダークニュートラルカラーで構成されています。アンカーカラーはエメラルドグリーン1色のみで、ブランド要素、CTA、ステータス成功状態にのみ使用されます。他のブランドカラーは一切使用されていません。ニュートラルカラーこそがブランドそのものであり、グリーンは動詞の役割を果たしています。

参考にすべき点：ニュートラルカラーシステムが十分に規律されていれば、ブランドは目立つアンカーカラーを完全に排除することができます。ブランドによっては、シグネチャーカラーではなく、独自のグレースケールカラーが必要な場合があります。

Shopify

polaris.shopify.comで実物をご覧ください。

ShopifyのPolarisシステムは、ブランドパレットを完全にトークン化したものの例を示しています。パレットは、サーフェス、テキスト、アイコン、ボーダー、インタラクティブ、クリティカル、コーション、サクション、インフォといった役割トークンツリーとして表現され、それぞれの役割には明暗の値が割り当てられています。Polarisでは、デザイナーが定義されたトークンを超えてカスタマイズする余地はありません。パレットは雰囲気ではなく、契約なのです。

参考にすべき点：トークンはまず役割として記述し、最後のステップでのみ16進数に変換します。トークン名が役割ではなく色を表している場合、パレットは本来の目的から逸脱してしまいます。

---

6ステップ構築手順

この手順でパレットを構築すれば、よくあるミスはほとんど発生しません。

1. カラーリストを作成する前に、役割リストを作成してください。 アンカー、ニュートラルサーフェス、ニュートラルテキスト、ニュートラルボーダー、セマンティック成功、セマンティック警告、セマンティッククリティカル、セマンティック情報、ホバー状態、フォーカス状態、無効状態。まずは紙に書き出してください。

2. アンカーの方向を選択してください。最終的な16進数ではありません。 色相、おおよその明度目標、おおよその彩度目標を設定します。編集可能な状態にしておいてください。

3. 次に、そのアンカーに合わせてニュートラルスケールを作成します。 9～12ステップです。各ステップを他のステップと比較してテストしてください。寒色系のアンカーには寒色系のニュートラルカラーを、暖色系のアンカーには暖色系のニュートラルカラーを使用します。

4. セマンティックカラーは個別にではなく、セットとして追加してください。 成功、警告、クリティカル、情報。これらは兄弟姉妹のように調和している必要があります。後から追加された単独の緑色は、構築時に使用されていないパレットではほとんどの場合、不自然に見えます。

5. 状態の色は、新しい色を考案するのではなく、既存の色と組み合わせることで定義します。 ホバー状態は通常、色スケール上で1～2段階のシフトです。フォーカス状態は通常、アンカー色相の輪郭線で囲まれたリングです。無効化状態は通常、特定のニュートラルな色相です。

6. アンカーの最終的な16進数値は最後に確定します。 アンカーが配置されているニュートラル色とのコントラストチェックを実行します。ダークモードの兄弟色を調整します。ホバー状態と押下状態のステップを追加します。アンカーが確定値となるのは、この段階になってからです。

---

なぜ順序が重要なのか

すべてのレイヤーは次のレイヤーを制約します。手順を逆にしてしまうと、パレットの色が互いに矛盾する結果になります。

アンカーを最後に選択することで、それが配置されるニュートラル色相を完全に理解した上で選択できます。まず最初に色を決めてしまうと、あらゆるニュートラルカラーの選択は、インターフェースが存在する前に決定された色との妥協の産物となってしまいます。

このレイヤリングの理論については、デザイナーのための色彩理論の柱で全体像を網羅しています。ニュートラルカラーとアンカーカラーの組み合わせにおけるコントラストルールについては、アクセスしやすい色のコントラストで詳細を解説しています。デザインシステム内のパレットについては、デザインシステムガイドでより広い視野で捉えることができます。

---

ほとんどのパレットを失敗に導く3つのミス

失敗に終わるブランドカラーパレットには、ほぼ必ず同じ3つのミスが見られます。そして、その3つはすべて、役割を決める前に16進数カラーを選んでしまうことから生じています。

ロゴスウォッチのミス ロゴに5色使われているからという理由だけで、パレットにも5色使ってしまう。しかし、下流工程で5色も必要ない。ニュートラルカラーも、セマンティックティアも、ダークモードの計画もない。最もよくある失敗パターンです。

彩度の罠 すべての色が同じ彩度、しかも高彩度。ムードボードでは鮮やかに見えますが、実際のインターフェースでは疲れる印象を与えます。優れたカラーパレットは彩度を大胆に変化させ、60-30-10ルールのような比率ルールによって、最も鮮やかな色が画面を支配しないようにします。

中間色の欠落。明るいニュートラルカラーが1色、暗いニュートラルカラーが1色だけで、その中間色がない。実際のインターフェースは、色のスケールの中間に位置します。ニュートラルカラーが2色しかないパレットは、アンカーカラーがどんなに優れていても、平坦な印象を与えてしまいます。

プロセスを改善すれば、こうしたミスは発生しなくなります。

---

よくある質問

ブランドカラーパレットには何色必要ですか？

アンカーカラーは思ったより少なく、ニュートラルカラーは思ったより多く必要です。多くのブランドでは、アンカーカラー1色、ニュートラルカラー9～12ステップ、セマンティックファミリー3～5種類、ペアとなるステートカラー、そしてダークモード用のカラーセットを用意しています。色相数は少なく、ステップ数は多くなります。

ダークモード用に別のパレットが必要ですか？

別のパレットは必要ありません。同じパレットの並列解像度を用意します。役割は同じままで、テーマごとに生の16進数値だけが変更されます。デザイナーがダークモードをゼロから手作業で描き直している場合、パレットはシステムとして構築されていません。

パレットジェネレーターを使ってブランドパレットを作成できますか？

ジェネレーターはアンカーと大まかなニュートラルカラーの方向性を示すことはできますが、システムを構築することはできません。この記事で紹介するすべての出荷パレットは、アンカーに合わせてニュートラルカラーを暖色系または寒色系に調整し、セマンティックファミリーを調整し、ダークモードの値を個別に調整し、ステートカラーを段階的に組み合わせるなど、すべて手作業で調整されています。

---

スウォッチではなくシステムを構築

ブランドカラーパレットは、ムードボード上の5色ではありません。役割、ニュートラルスケール、セマンティックシグナル、ステートカラー、ダークモードプランなど、特定の順序で構築されたレイヤードシステムです。

Notion、Linear、Stripe、Supabase、Shopifyはスウォッチでは勝てませんでした。彼らはカラーパレットをインフラストラクチャとして捉えることで成功を収めた。つまり、アンカーとなる色、完全なニュートラルカラースケール、意味のあるセマンティックレイヤー、ペアとなるステートレイヤー、そして初日から設計したダークモードなどだ。

レイヤーを構築し、6つのステップを実行し、まるで部屋を飾るようにブランドカラーを選ぶのはやめよう。

ロゴだけでなく、あらゆる要素に使えるブランドカラーパレットをお探しですか？Brainyは、真のニュートラルスケール、ダークモード、セマンティックトークンを組み込んだパレットを作成します。