color theoryApril 14, 202613 min read

デザイナーのための色彩理論：優れた配色を支えるシステム

デザイナーのための色彩理論。色彩ホイール、調和、知覚、心理学、アクセシビリティ、そして現代のデザインシステムがそれらすべてを製品化にどう活かすか。

By Boone

色彩理論は美術史概論のように教えられ、建築工学のように実践されている。ホイール、ハーモニー、補色。暖色と寒色。

「赤は情熱を表す」。これらはデザイナーが学校で教わる典型的な例だが、実際の製品インターフェースに触れると、ほとんど役に立たなくなる。

実際に働くデザイナーに必要なのは、体系的なシステムだ。目の色覚から始まり、ホイールとそのハーモニー、コントラストと階層構造、心理学と文化、パレット構成、そして最終的に製品を出荷するトークンとデザインシステムに至るまで、階層化されたシステムである。レイヤーを一つでも省略すると、パレットはFigmaでは問題なく見えても、生産段階では崩壊してしまう。

この論文は、その体系全体を示すものだ。各レイヤーには、より深く掘り下げるためのBrainy論文が用意されている。ここでは、それらを繋げていく。

色彩理論が実際に解決を求めているもの

色彩理論は美的ルールの集合体ではなく、パレットを世に出す前に、視覚、知覚、そして体系的な思考が一体となって機能しなければならない、積み重ねられた概念です。

簡単に言うと、人間の視覚は独特で、色は物理的なものであり、デザイナーは何百ものデバイス、何十ものコンテキストにおいて、何百万人もの人々に受け入れられる成果物を生み出さなければなりません。理論とは、この問題を考察するための語彙です。それは戒律の集合体ではありません。「何かがおかしい」という漠然とした感覚から、「アクセントカラーが背景色と競合していて、14ptではコントラストが不十分だ」という具体的な結論へと導くための、共通概念の集合体なのです。

ラベルの付いた6枚のプレートを垂直に積み重ねたボクセルタワーは、デザイナーのカラー理論の階層構造（知覚、ホイール、調和、コントラスト、パレット、システム）を表しています。

この構造は意図的に階層化されています。各階層は異なる問いに答えます。

| 階層 | 答える問い |

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

| 知覚 | 目は実際にこの色をコンテキストの中でどのように認識するのか？ |

| ホイール |これらの色間の色相関係は？ |

| 調和 | これらの色は関連性があるように感じますか、それとも不協和音のように聞こえますか？ |

| コントラスト | 読みやすく、見やすく、クリックしやすいですか？ |

| パレット | このブランドや製品はどのような色を所有していますか？ |

| システム | これらの色は大規模に一貫して適用されていますか？ |

| アクセシビリティ | システム内のすべての組み合わせはすべてのユーザーにとって適切ですか？ |

すべてのレイヤーは負荷を支えています。知覚を考慮せずに設計されたパレットは、コンテキストにおいて機能しません。アクセシビリティを考慮しずに構築されたシステムは、監査において機能しません。

パレットの論理に基づかずに選択された調和は、大規模に機能しません。レイヤーは積み重なるため、色を正しく選択することが複利効果をもたらすのです。

ホイール、調和、そしてそれらの実際の目的

カラーホイールは色相関係のモデルであり、調和は、目が関連性があると認識するペアやグループを選択するためのショートカットです。

多くのデザイナーは、色相環を原色・二次色・三次色の三角形として覚えるだけで、その後は二度と使わない。これはもったいない。色相環は、どの色が調和し、どの色が不調和になるかを素早く判断できる最も効率的な方法であり、パレット、チャート、マークに新しい色を追加するたびに重要になる。

製品やブランドデザインにおいて、4つの調和が重要な役割を果たす。

補色

色相環上で反対色。青とオレンジ、赤と緑、紫と黄色。補色は、2つの色相間に最も強い視覚的緊張感を生み出す。

これは、ポスター、ヒーローイメージ、スポーツユニフォームなど、一瞬のインパクトを与えるデザインには最適だが、長時間のインターフェース使用には不向きだ。そのため、純粋な補色のみで構成された製品パレットはほとんど見られない。UIデザインでは、補色は控えめに用いられる。一方の色が主役となり、もう一方の色は控えめなアクセントとして使われる。

類似色

色相環上で隣り合う色。スカイブルー、ブルー、ブルーバイオレット。類似色パレットは、統一感と落ち着きを感じさせます。

これらは、現代のデザイン（ブランドシステム）の基盤となっています。しかし、色相間の明度コントラストが十分でないと、単調に見えてしまう危険性があります。類似色パレットは、カラーパレットを対立する色群ではなく、一つの家族として捉えることで効果を発揮します。

トライアドとスプリットコンプリメンタリー：あまり活用されていない組み合わせ

デザイン学校では、コンプリメンタリーと類似色が注目されます。しかし、次の2つの調和はあまり語られることがなく、実際のデザイナーにとっては、より有用な場合が多いのです。

トライアド

色相環上で均等に配置された3色。赤・黄・青。オレンジ・緑・紫。トライアドパレットは、遊び心とエネルギーを感じさせるため、子供向けブランド、スポーツ、エンターテイメントなどでよく用いられます。

プロダクトデザインにおいては、バランスを取るのが難しいため、純粋なトライアドパレットは稀です。トライアド配色（1つの主色と、それに合わせた2つの控えめな色）は至るところで見られます。

スプリットコンプリメンタリー

1つの主色と、その補色に隣接する2つの色を組み合わせた配色です。例えば、青に黄橙と赤橙を組み合わせるなど。スプリットコンプリメンタリーは、補色配色の持つコントラストを大部分維持しつつ、緊張感を抑えます。よく見ると、多くの優れたブランドシステムに見られる、見過ごされがちな調和です。

調和はツールであり、答えではありません。「トライアド配色にしよう」と言ってブランドパレットを選ぶわけではありません。調和は、提案された組み合わせを検討し、既にうまく機能している組み合わせを見つけるためのツールです。

理論よりも知覚が勝る

同じボタンに同じ赤色を使っても、ニュートラルなページでは緊急性を感じさせ、オレンジ色のページでは派手に見え、濃い赤色のページではほとんど目立たなくなります。そして、これらの違いは配色では説明できません。

色彩において、文脈は効果を増幅させる要素です。色には固定された意味、固定された明るさ、固定された視認性はありません。色は、隣接するもの、数秒前に画面に表示されていたもの、ユーザーが見ているディスプレイ、そしてそのディスプレイに当たっている光など、あらゆる要素と関係性を持っています。知覚を伴わない理論は、真空状態の理論に過ぎません。

同じサンゴオレンジのボタンタイルを3つの異なる背景に配置したボクセル分割パネル：ニュートラルダークでは光り輝き、オレンジでは色あせ、ダークレッドではほとんど見えなくなり、文脈依存的な色覚を示している。

知っておくべき3つの知覚効果があります。

同時対比 同じグレーでも、黒の隣にあると明るく見え、白の隣にあると暗く見えます。つまり、白いスタジオの背景に合わせて選んだブランドカラーは、暗いヒーローカラーの上に配置した場合、全く異なる印象を与えるということです。色は単独でテストするのではなく、実際の制作環境の中でテストする必要があります。

色順応 目は500ミリ秒以内に周囲の色に順応します。温かみのあるオレンジ色のヒーローカラーが5秒間表示された後、ニュートラルなコンテンツ領域にスクロールすると、実際のコンテンツ領域の色よりもわずかに寒色に感じられます。ユーザーは気づかないうちに知覚が変化しているのです。

明度クラスタリング 目は、明るさが似ているものを関連のあるものとして、暗さが似ているものを別々のものとして認識します。これが階層構造の仕組みです。優れたデザインは、色相コントラストよりも明度コントラストを重視します。なぜなら、視覚系はまず明度を処理するからです。

色彩心理学：証拠と迷信

色彩心理学は確かに存在しますが、色彩心理学と呼ばれるもののほとんどは、使い古された迷信です。だからこそ、デザイナーは証拠と俗説を区別する必要があるのです。

ロヨラ大学のブランド認知度調査（色はブランド認知度の最大80%を左右する）、彩度が知覚される緊急性に与える影響、ダークモードの好み、そして文化的な色の連想などに関する、確かな研究結果が存在します。これらは非常に役立ちます。「赤はコンバージョン率を21%向上させる」と主張するブログ記事が溢れていますが、少し検証すればすぐに崩れてしまいます。これは役に立ちません。

簡単なテスト：文脈、文化、対象者を考慮しない色彩心理学の主張は迷信です。色の意味は常に文脈によって変化します。アメリカのフィンテック業界では緑は「お金」を、ウェルネス業界では「自然」を象徴しますが、どちらもそれぞれの文脈において正しいのです。

何が真実で、何が使い古された情報なのか、そしてブランドや製品開発において色彩心理学を実際にどのように応用できるのかを詳しく知りたい場合は、デザインにおける色彩心理学の論文にエビデンスに基づいた枠組みがあります。

製品規模で比率のルールが破綻した理由

60-30-10ルールとその類似の手法は、単一の表面の問題を解決しましたが、製品デザインは単一の表面ではありません。

インテリアデザインでは、「壁、家具、アクセントにそれぞれどのくらいの色を使うか」という問いに答えるために60-30-10の法則が考案されました。これは部屋という空間にきれいに当てはまります。これは、数百ものサーフェス、数十の状態、ライトモードとダークモード、そして多様なデバイスを使用するユーザーを抱えるデジタル製品には対応していません。

パレットがレイヤーごとに構築される様子を示すボクセル図：一番下のプレートは長いニュートラルなグレースケールを示し、次のプレートはブランドのアクセントを追加し、その次は意味のある色を追加し、一番上のプレートは名前付きの役割チップを備えた「トークン」とラベル付けされ、矢印は同じスタックのダークモードミラーを示しています。

現代の製品カラーは、役割に基づいた比率を放棄しました。サーフェス、コンテンツ、アクセント、状態、セマンティック。各役割にはデザイントークンが割り当てられ、テーマごとに異なる生の値に解決されます。これが60-30-10の比率に代わるものであり、唯一スケーラブルなものです。

比率がなぜ機能しなくなったのか、そして役割ベースのトークンシステムが実際にどのように機能するのかについては、60-30-10ルールが破られたの論文で詳しく解説しています。

アクセシビリティはカラー理論の一部に

WCAGとAPCAによって、アクセシビリティは「QAが最後にレビューするもの」から、カラーシステム自体の特性へと移行しました。

長い間、アクセシビリティは独立した議論の対象でした。デザイナーは美観を重視してカラーパレットを選び、QA担当者は最後に比率をチェックし、微調整を行い、次の段階へと進みました。しかし、このワークフローは拡張性に欠けます。現在、出荷されるすべてのデザインシステムはトークンレイヤーでアクセシビリティを組み込んでおり、つまりカラーパレット自体を最初からコントラスト比と知覚閾値に基づいて設計する必要があるということです。

簡単に言うと、WCAG 2.2 AAは最低限の準拠基準（本文4.5:1、大きなテキストと非テキストUIは3:1）です。APCAは実際の可読性との相関性が高い知覚アルゴリズムであり、WCAG 3で提案されています。実際の製品は両方を目標としています。

WCAG比率、APCA、そしてデザインシステムがどのようにコントラストをトークン化するかについて、実務デザイナーの視点から詳しく解説したアクセスしやすい色のコントラストの論文をご覧ください。

カラーパレットの構築：実務デザイナーのスタック

出荷可能で拡張性のあるカラーパレットは、一度に選ぶのではなく、レイヤーごとに構築されます。

効果的なプロセスは、意図的な順序で進められます。各レイヤーが次のレイヤーを制約することで、単調な色の組み合わせに陥ることなく、パレットの一貫性を保つことができます。

ニュートラルな色調から始めましょう。 8～12段階のグレー（またはグレーに近い色、多くの場合、ブランドの色温度にわずかに色相をずらしたもの）を作成します。実際のインターフェースの大部分はニュートラルカラーで構成されています。これは、他のすべてのレイヤーの基盤となります。
ブランドのアクセントカラーを選びましょう。 アンカーカラー、つまり読者が単独で見たときにブランドと関連付ける色を1色選びます。ここでは、控えめな表現が重要です。アクセントカラーは、ブランドの重要な場面、主要なアクション、そしてシグナル性の高い要素のために確保しておきましょう。
意味のある色を追加しましょう。 成功、警告、重要、情報など。これらは装飾ではなく機能的な色であり、ブランドの個性を反映することなく、ライトモードとダークモードの両方で機能する必要があります。これらは、味付けではなく、実用性を重視した色として扱いましょう。
状態レベルを拡張する。 ホバー、フォーカス、押下、無効化、選択。これらは通常、他のレベルから派生しますが（ホバーには濃いアクセント、無効化には控えめなニュートラルカラーなど）、それぞれ独立したトークンとして扱われます。
すべてをトークン化する。 出荷されるすべてのペアには役割名が必要です。text-on-accent、bg-subtle、border-default。デザイナーがトークンなしで生の色を使用できる場合、パレットが既に漏洩している可能性があります。
数学的な評価だけでなく、知覚に基づいたテストを行う。 まずWCAGの比率、次にAPCAスコア、そして実環境でのテスト：グレースケールモード、斜視検査、低照度プレビュー、ブランドに関わっていない人による5秒間の反応。
ダークモードを並行トークンセットとして出荷する。 フィルターでも反転でもありません。同じトークンを異なる値に解決する、適切な並列パレット。

一度にすべてではなく、順番に構築する

順番が重要なのは、ニュートラルカラーがどのページでも重要な役割を果たしているからです。アクセントカラーから始めるデザイナーは、最終的に、必ずしも適切ではないかもしれない一つの決定に基づいてパレット全体を構築してしまうことになります。まずは控えめなレイヤーから始め、目立つレイヤーは最後に追加しましょう。

応用色彩理論としてのデザインシステム

今日の色彩理論に関する最良の参考資料は教科書ではなく、大規模に製品を出荷しているブランドの公開デザインシステムドキュメントです。

これらのシステムは、スタックのすべてのレイヤーをデフォルト設定として組み込んでいます。また、無料でオープンであり、日々製品の色彩を出荷している人々によってメンテナンスされています。

マテリアルデザイン3

Material Design 3 のカラーシステム概要ドキュメントでは、役割ベースのカラートークン、動的なカラーテーマ、アクセシビリティペアのトークンパターンについて説明しています。

m3.material.ioでライブ映像をご覧ください。

マテリアル3は、色彩理論を応用したシステムとして最も明確に表現されています。すべてのロールには、対応するon-要素（そのロールの上に表示されるテキストやアイコン）があり、色相スケールはHSLではなく色相・彩度・トーンに基づいており、システム全体が単一のソースカラーから動的にテーマを生成できるように設計されています。

注目すべき点：on-パターン。デザイナーがボタンにprimaryを選択すると、システムはそのボタンのテキストの色を既に認識しています。アクセシビリティとコントラスト理論は、命名規則に組み込まれています。

Radixカラー

Radix Colorsのホームページには、アプリの背景、UI要素、境界線、テキストのコントラストレベルなど、意味的役割別に整理された12段階のカラースケールが表示されています。

radix-ui.comで実際にご覧ください。

Radixは、色相ごとに12段階のスケールを提供し、各段階を特定の役割（アプリの背景、控えめな背景、UI要素、ホバー、フォーカス、アクティブ、ソリッド、テキスト、高コントラストテキスト）にマッピングします。これは、コントラストラダーにホチキス留めされた色の調和リファレンスのようなものです。デザイナーは、高コントラストテキストが必要な場合、ステップ11を選択することで、それより下の段階と比較してAA評価をクリアできると確信できます。

ここから得られる教訓：番号付きのラダー。スケールの各段階に役割を割り当てることで、デザインレビューで「どのグレーを使うべきか」という議論がなくなる。

## Adobe スペクトラム：スケールにおける知覚的均一性

MaterialとRadixは、役割レイヤーで色を解決します。Adobeはさらに深く、知覚モデルに基づいてスケール自体を構築することで、色相が変化してもコントラストの関係が維持されるようにします。

Adobe スペクトルカラーの基本に関するドキュメント。テーマ間で色相を入れ替えてもコントラスト関係を安定させる、知覚的に均一なスケールを示しています。

spectrum.adobe.comでライブ映像をご覧ください。

Spectrumは知覚的に均一なスケールを使用しているため、同じステップ番号を持つ2つのトークンは、どの色相においても同じ視覚的重みを持ちます。つまり、知覚的な関係がスケールレベルで固定されているため、テーマカラーを青からオレンジに切り替えてもコントラストが崩れることはありません。

ここから得られる教訓：知覚的な均一性。OKLCHやHSLuvのような知覚モデルに基づいてスケールを構築すれば、アクセシビリティはブランドテーマ間で互換性が確保され、新しい色ごとに再確認する必要がなくなります。

エンドツーエンドで実際に機能するカラーシステムをお探しですか？Brainyは、知覚からトークンまで、アクセシビリティを組み込んだカラーパレットを構築します。

よくある質問

デザイナーとして色彩理論を実際に学ぶにはどうすれば良いですか？

色彩理論のスタック（知覚、ホイール、ハーモニー、コントラスト、パレット、システム）を上から順に読み、実際のプロジェクトで順番に適用してください。理論は応用なしでは1週間で忘れてしまいます。実際に出荷されたパレットに適用された理論は、フィードバックがすぐに得られるため、記憶に残ります。まずは、知覚について学ぶためにヨゼフ・アルバースの『色彩の相互作用』を読み、コントラストラダーの応用についてはRadix Colorsのドキュメントをじっくり読み、上記のスタックを使って実際のパレットを作成しましょう。

科学的な知識は必要ですか？それともツールだけで十分ですか？

光の物理学や錐体細胞の生物学を知らなくても、製品をリリースすることは可能です。しかし、知覚、コントラスト、そして役割に基づいたシステム思考を知らなければ、リリースすることはできません。

ツールは計算を処理し、デザイナーは判断を下します。ツールだけに頼るデザイナーは、ツールの誤り（特にWCAG 2の計算では頻繁に起こります）に気づくことができません。

新人デザイナーが色に関して犯す最大のミスは何ですか？

アクセントカラーを最初に選んでしまうことです。アクセントカラーはパレットの中で最も目立つ色であり、目立つ色を基準に他の色を選ぶと、ほぼ間違いなく派手なパレットになってしまいます。

まずはニュートラルカラーから始めましょう。アクセントカラーは最後に決めるようにしてください。スタック全体が適切であれば、後からアクセントカラーを変更することも可能です。

色彩理論は選択肢ではなく、不可欠な要素です

色彩理論は、デザインにおいて誰もが異論を唱えず、意識しているか否かにかかわらず、誰もが適用している要素です。

「あのコーラルピンク、いい感じだ」と選ぶデザイナーは、色彩理論を適用しています。「ボタンをもっと目立たせられないか」と尋ねるプロダクトマネージャーは、色彩理論に関する質問をしています。「このページはごちゃごちゃしている」と言うユーザーは、明度とコントラストの不一致を指摘しています。

色彩理論は既に存在しています。問題は、それを意識的に活用しているか、後から反応しているかです。

スタックを活用することで、目に見えないものが可視化されます。色を選ぶのではなく、パレットをデザインするようになります。色相を選ぶのではなく、システムをデザインするようになります。アクセシビリティを推測するのではなく、実際に実装するようになります。

その効果は累積します。スタックを通してデザインされたパレットは、リブランディングも、ダークトーンへの移行も、スケーリングも、監査もスムーズに行えます。直感だけで選んだカラーパレットでは、これらのどれも実現できず、重要な局面でチームの時間を無駄にするだけです。

スタックを理解し、スタックを使いこなし、スタックをリリースしましょう。