「配色を選ぶときに、なんとなく感覚で決めてしまう」「クライアントから『なぜこの色なんですか？』と聞かれて答えられない」。駆け出しデザイナーなら誰もが経験する悩みです。

でも、配色は「センス」ではなく「角度」と「形容詞」のロジックで選べるようになります。本記事では、色相環を「6つのエリア×形容詞」で読み解き、駆け出しデザイナーが今日から使える配色の論理的選び方を完全解説します。

NOT DESIGN SCHOOLのUIデザインメンター・キャシ（Katherine）さんのウェビナー「非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜」をベースに、giffgaff、Airbnb、Spotify、Nike など実在ブランドの配色を分解しながら、「配色のセンス」を後天的に身につける方法を学びます。

本記事は「センスに頼らないデザイン」シリーズの#2です。先に元記事「デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド」を読むと理解が深まります。

▶ ウェビナー動画：非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜

1. 配色は「センス」じゃなく「角度」で決める｜色相環の基礎

配色で迷う最大の原因は、「色を直接選ぼうとしている」ことにあります。「赤か青か」「明るくするか暗くするか」を最初に考えるから、選択肢が無限に広がって決められなくなる。

正解は、「先に形容詞を決めて、その形容詞に対応する色相エリアから選ぶ」という順番です。

色相環とは？

色相環（カラーホイール）は、虹のスペクトル（光の波長）を円形に並べたものです。0〜360°の角度で全ての色相を表現できます。

このうち、駆け出しデザイナーが最初に覚えるべきは③です。「何度のエリアがどの形容詞に対応するか」を覚えるだけで、配色精度が劇的に上がります。

色の3属性（HSL）：色相だけじゃない

ただし、色相だけで全てが決まるわけではありません。色は HSL（Hue / Saturation / Lightness） の3軸で表現されます。

本記事では、色相エリアと形容詞の対応をメインに扱いますが、最終的な印象は HSLの3軸の組み合わせ で決まることを忘れないでください。

2. 色相環の6エリア×形容詞｜完全マッピング表

ここからが本記事の核心です。色相環を6つのエリアに分け、各エリアが連想させる形容詞と代表ブランドを一覧にまとめました。

完全マッピング表

このマップの使い方（実例）

クライアントから「信頼感のあるBtoBサービスのキービジュアルを作って」と言われたら、形容詞「信頼／誠実／知的」 → 240〜300°エリア（青系）が確率論で正解です。

逆に「遊び心があってZ世代に刺さる」なら、60〜120°（黄）または300〜360°（ピンク・マゼンタ）から選ぶ。

このように、形容詞からエリアを逆引きできる脳を作るのが、配色マスターへの第一歩です。

3. 形容詞→色エリアへの翻訳手順｜giffgaff／Airbnb／Spotify／Nike実例

実例で「形容詞→色」の翻訳プロセスを追ってみます。

実例1｜giffgaff：「Friendly／Playful／Bold／Spirited」 → 黄＋ピンク

イギリスの携帯会社giffgaffは、4つのブランドDNA（Friendly／Playful／Bold／Spirited）から、プライマリーカラーに黄色（60〜120°）とマゼンタピンク（300〜360°）を選んでいます。

形容詞が4つでも、色相エリアは「黄＋マゼンタ＋黒＋白」の4色＋セカンダリー2色（ターコイズ・オリーブ）に収束します。これがブランドカラーパレットの作り方の王道です。

実例2｜Airbnb：「Belong Anywhere（どこにいてもあなたの居場所）」 → ピンクレッド（#FF385C）

Airbnbのブランドカラーは、色相約350°のピンクレッドです。なぜこの色を選んだのか、5要素に分解します。

競合のBooking.com（青・240°：信頼・効率）、Expedia（青＋黄：論理的・効率的）と完全に異なる感情ポジショニングを取っているのが分かります。

実例3｜Spotify：緑（約140°） → 「新鮮／成長／自由」

Spotifyの鮮やかな緑（約140°・高彩度）は、「音楽が新鮮で、ユーザーの感情と共に成長していく」というブランド体験を表現しています。

緑は癒しや健康のイメージが強いですが、彩度を高くすることで「爽やかさ・若さ・革新」のニュアンスが強まります。

実例4｜Nike：黒＋赤（0〜30°） → 「力強さ／挑戦／勝利」

Nikeのロゴは黒＋一部赤系で、「Just Do It」のメッセージと完璧に整合しています。0〜30°エリアの赤は「興奮・エネルギー・力強さ」を喚起し、スポーツブランドの王道色です。

4. 色→形容詞の逆引き｜既存ブランドカラーを分析する方法

「形容詞→色」の翻訳ができるようになったら、次は逆方向（色→形容詞）もマスターしましょう。これは、街中で見た広告・パッケージを分析する毎日の言語化ワークで使うスキルです。

5要素分解の手順（キャシさんウェビナーより）

任意のブランドを見たら、以下の5要素に分解します。

要素1：色相（角度・スペクトル波長）
要素2：彩度（HSLのS値）
要素3：明度（HSLのL値）
要素4：文化的連想（その色相が想起させる感情）
要素5：ブランドとの整合性（ミッション・競合との差別化）

実践演習：好きなブランドを1つ分解してみる

例としてLINE（黄緑・約75°）を分解してみます。

これを毎日1ブランドずつやるだけで、3ヶ月後には「この色は何度エリアで、形容詞はこれ」が反射的に出てくるようになります。

言語化ワークの具体的シーン

シリーズ#1のハブ記事でも紹介した「待ち時間の言語化ワーク」と組み合わせると、配色筋が一気に育ちます。

• 電車待ちの中吊り広告：「メインカラーは何度？ 形容詞は？」を10秒で言語化

• カフェのメニュー表：「ベース／メイン／アクセントの3色配分は？」を分析

• コンビニの新パッケージ：「色相エリアと彩度・明度の意図は？」を分解

• アプリのスクショ・LP：「ブランドDNAから逆算するとこの配色になる理由は？」を考察

詳しくはハブ記事の校長の見解（視点3）を参照してください。

5. 明度・彩度で印象を微調整する方法（同じ黄でも全く違う）

色相エリアが決まっても、それだけで完成ではありません。明度（L）と彩度（S）を操作することで、同じ色相でも印象が大きく変わります。

黄色（60〜90°）の例：HSLで5パターン

同じ「黄色」でも、HSLの組み合わせ次第で「ベビーフード」から「警告色」まで表現できるわけです。

配色を組むときの黄金比：60-30-10ルール

色相エリア＋HSLが決まったら、最後は配色比率を意識します。デザイン業界の定番は 60:30:10ルール です。（75-25-5ルールもある）

「セカンダリーであえて逆方向の色を入れる」giffgaff戦略（→ ハブ記事参照）も、この10%のアクセントにあたります。

6. 配色技法5選｜補色・類似色・トライアド・スプリットコンプリメンタリー・モノクロマティック

色相環マップが頭に入ったら、次は配色技法を組み合わせます。技法は5つ覚えれば十分です。

配色技法5選

配色技法の選び方フロー

1. 形容詞を決める
   ↓
2. 色相エリアを1つ選ぶ（60-30-10のメインカラー）
   ↓
3. 「DNAを継承するなら類似色／モノクロマティック」
   「対比を効かせるなら補色／スプリットコンプリメンタリー」
   「カラフルにするならトライアド」を選ぶ
   ↓
4. ベース／メイン／アクセントの3色に絞る
   ↓
5. HSLで微調整＋コントラストチェック

順番が重要です。「先に技法を決めてから色を選ぶ」のは順序が逆。形容詞→色相エリア→技法の順で考えましょう。

7. 配色ツール3選｜Adobe Color / Coolors / Figmaプラグイン

配色の理屈を覚えたら、次はツールで効率化します。駆け出しが押さえるべきは以下の3つです。

ツール1｜Adobe Color（理論派・無料）

特徴：色相環ベースで配色技法（補色・類似色・トライアド等）を自動生成してくれる定番ツール。色覚多様性チェック・コントラストチェッカーも内蔵。

こんな人におすすめ：

• 色相環マップを覚えたばかりで、技法ごとの組み合わせを自動で見たい人

• ブランドカラーを「画像から抽出」したい人

• Adobe Creative Cloudと連携したい人

料金：無料（Adobe IDがあれば全機能利用可能）

ツール2｜Coolors（直感派・無料／有料）

特徴：スペースキー1つで新しいカラーパレットを瞬時に生成。アプリ・拡張機能・Figmaプラグインと連携。

こんな人におすすめ：

• とにかく早くたくさんの配色を試したい人

• インスピレーションが欲しい人

• 既存パレットをエクスポートしてFigmaに持ち込みたい人

料金：無料（Pro版 $36/年 で全機能アンロック）

ツール3｜Figmaプラグイン

Figmaユーザーなら、以下のプラグインが必須です。

ツール選びの落とし穴

ツールに頼りすぎると「なぜこの配色なのか」を説明できなくなります。最初は色相環マップを脳内に焼き付けてから、ツールは確認・微調整に使う順番が王道です。

8. 校長の見解｜AI時代こそ「色彩語彙」がプロンプト精度を決める

ここからは、NOT DESIGN SCHOOL校長のもちが、配色について思うところを書いていきます。

視点1：AI時代こそ「色彩語彙」がプロンプト精度を決める

Claude、Figma MakeなどのAIに「青系で」と指示するのと、「色相240〜280度・明度60〜70%・彩度50%の信頼感のある青系」と指示するのとでは、アウトプット違ってきます。

これからのデザイナーは、配色を「HSL値＋形容詞」で言語化できると、より自分がイメージしているデザインを精度高く出力できるようになっていきます。

視点2：配色は「色を選ぶ」より「形容詞を選ぶ」のが先

迷う人の9割は、色から考えて形容詞が後付けになっているんです。

正しくは：

形容詞を3つ決める
   ↓
色相エリアを1〜2個に絞る（確率論で2〜3個）
   ↓
HSLで微調整
   ↓
配色技法で広げる

この順番さえ守れば、「迷う」状態から抜け出せます。何もヒントがない状態から配色を考えるのではなく、まずは見た人がどんな印象を抱いてほしいのか、から考えてみましょう。

視点3：「日常の広告言語化ワーク」は色相環を覚えるとさらに加速する

ハブ記事の視点3で紹介した「待ち時間の言語化ワーク」（電車中吊り・カフェメニュー・パッケージ等を10秒で形容詞分解する習慣）に「角度（HSL）」を加えると、最強です。

例えば駅の中吊りを見た時に「色相220度・彩度80%・明度55%・信頼感と冷静さ表現・想定ターゲットはBtoBの経営層」と1秒で分解できる脳になれば、もうその時点で「センスがある人」と同じ景色が見えています。

視点4：ツールに頼りすぎず、まず色相環マップを脳に焼き付ける

Adobe Color や Coolors は便利ですが、ツール任せだと「なぜこの配色なのか」が説明できなくなります。

マップを暗記してから、ツールは確認・微調整に使う順番が正解。理屈を脳に持っているデザイナーこそが、生き残ります。

9. 限界と注意点｜色相環マップが効かないケース

色相環×形容詞マップは万能ではありません。以下の3つに気をつけてください。

注意点1：色相環マップは「欧米基準」が前提

本記事のマップは、欧米（特にイギリス・アメリカ）のデザイン文化が前提になっています。文化圏によっては、色の意味が大きく異なります。

ターゲット文化圏を最初に必ず確認してください。グローバル展開するブランドほど、色彩の文化的差異の調査が重要です。

注意点2：明度・彩度を操作すると同じ色相でも印象が激変する

H2-5で解説した通り、同じ黄色でも明度90%（ベビーフード）と明度50%（警告色）では印象が真逆です。

「角度（色相）」だけで判断せず、必ず HSLの3軸全て で印象をコントロールしてください。

注意点3：配色技法は形容詞選定の「後」

「補色配色がカッコいいから補色で行こう！」と先に技法を決めると、ブランドDNAから外れた配色になります。

必ず以下の順番を守ってください：

形容詞 → 色相エリア → HSL微調整 → 配色技法で広げる

順番を間違えると、いくらツールを使っても「なぜこの配色なのか説明できない」状態に逆戻りします。

10. FAQ

Q1. 色相環マップは何度きざみで覚えればいいですか？

A. まずは本記事で紹介した6エリア（60°きざみ）を覚えてください。慣れたら12エリア（30°きざみ）まで細分化すると、より精密な配色判断ができます。色彩検定2級レベルでは24エリア（15°きざみ）まで暗記しますが、実務では12エリアで十分です。

Q2. 形容詞が複数あって、対応する色相エリアが矛盾する場合はどうしますか？

A. 「形容詞4つのうち、最も優先する1〜2個でメインカラーを決める。残りの形容詞はセカンダリー・アクセントカラーで表現する」が正解です。giffgaffの例なら、Friendly/Playful → 黄＋ピンクをプライマリーに、Bold → 純黒で締める、Spirited → セカンダリーのターコイズで補完、というレイヤー戦略を使います。

Q3. クライアントから「もっと派手にして」と言われたら？

A. 「派手」をHSL用語に翻訳して聞き返すのが正解。「彩度を上げて目立たせますか？」「色相を補色側にずらしてコントラスト強くしますか？」「メインカラーの面積を60%→70%に増やしますか？」など、複数の選択肢で再提案すると、クライアントも自分が求めているものが明確になります。詳しくはロゴデザインのヒアリング&修正対応を参照してください。

Q4. AI（Figma Make、Claude）に配色を頼むときのプロンプトのコツは？

A. 「形容詞 + HSL値 + 配色技法 + ターゲット」の4要素を入れると精度が劇的に上がります。例：「Friendly／Playfulな印象で、メインカラーは色相75°・彩度80%・明度60%、サブカラーは類似色（色相45°）、ターゲットはZ世代女性、CTAボタンは補色（色相255°）でアクセント」。詳しくは駆け出しデザイナーのためのClaude入門で。

参考リンク

ウェビナー動画

• 非デザイナーのためのデザイン入門！〜センスに頼らない"形容詞の魔法"を覚えよう〜（NOT DESIGN SCHOOL公式 / 登壇：キャシさん）

スピーカー

• キャシ（Katherine）さん：NOT DESIGN SCHOOL UIデザインメンター

• 肩書き：シニアデジタルプロダクトデザイナー／Friends of Figma London Group Leader

• X：@uialchemistjp

配色ツール

• Adobe Color（理論派定番）

• Coolors（直感派定番）

• Color Contrast Checker - Figma

• Able - Friction Free Accessibility - Figma

• Image Palette - Figma

出典・公式ドキュメント

• giffgaff design system

• Refactoring UI（Adam Wathan & Steve Schoger 著）

• Apple Human Interface Guidelines - Color

• Material Design 3 - Color

NOT DESIGN SCHOOL 関連記事

• 🌟 シリーズハブ：デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド

• 駆け出しデザイナーのためのClaude入門

• 駆け出しデザイナーのためのClaude Code実践ガイド

• Figma Makeとは？使い方・料金・活用例まで徹底解説

• いいロゴとは？プロが教える4つの条件と良いロゴの作り方

• ロゴデザインのヒアリング&修正対応完全ガイド