前の章に戻る
-
✓色の３属性（色相・彩度・明度）と色相環・トーンの役割を説明できる
-
✓ジャッドの色彩４原理を理解し、自分の配色の根拠として使えるようになる
-
✓Adobe Colorを使って４原理に沿った配色を確認・作成できる
「配色のセンスがない」と感じたことはありませんか。配色は感覚ではなく理論で説明できます。色彩学者ジャッドが体系化した色彩４原理を知ることで、配色の選択に根拠が生まれます。
色の３属性と色相環・トーン
配色を考えるには、まず色を表す３つの属性を整理しましょう。この３属性を軸にすることで、「どう変えれば印象が変わるか」が明確になります。
色相・彩度・明度
色は色相・彩度・明度という３つの属性で表現されます。この３属性はそれぞれ独立して調整できるため、「色あいはそのままで、もう少し落ち着かせたい」といった細かいコントロールが可能になります。
- 色相（Hue） — 赤・青・黄など「色のあい」の違いを指します。色相環上の位置で表され、配色の方向性を決める最も基本的な要素です。
- 彩度（Saturation） — 色の鮮やかさの度合いです。彩度が高いほど鮮やかで目を引き、低いほどグレーに近いくすんだ色になります。
- 明度（Value） — 色の明るさの度合いです。明度が高いほど白に近く、低いほど黒に近づきます。
色相環
色相を円状に配置したものが色相環です。日本のデザイン現場で広く使われるPCCSの色相環は24色で構成されており、色相差は15°単位で考えます。
色相環上の位置関係が配色を選ぶ基準になります。正反対に位置する色を補色と呼び、組み合わせると強いコントラストが生まれます。隣り合う色は類似色（近似色）と呼び、なじみやすく落ち着いた配色になります。次のセクションで学ぶ４原理も、この色相環上の位置関係を根拠にしています。
トーン
トーンは明度と彩度を組み合わせた概念で、PCCSでは12種類に分類されます。たとえば「ビビッド（vivid）」は彩度・明度ともに高い鮮やかなトーン、「ペール（pale）」は彩度が低く明度が高い淡いトーンです。
配色を選ぶとき「何色か（色相）」だけでなく「どのトーンか」まで意識することで、複数の色を組み合わせたときの印象をコントロールできます。同じ色相でもトーンがバラバラだとまとまりが出にくく、トーンが揃うだけで全体の統一感が生まれます。
色を選ぶとき、まず色相環で位置関係を確認し、次にトーンで印象を整えるという順番で考えると判断が早くなります。
ジャッドの色彩４原理とは
色彩学者ジャッド（Deane Brewster Judd）は複数の色彩調和論に共通する原理を研究し、４つにまとめました。「なぜこの配色は調和するのか」を言葉で説明する根拠になります。
| 原理 | 意味 |
|---|---|
| 秩序の原理 | 一定の法則（色相環上の規則的な位置関係など）によって選ばれた色は調和する |
| 親近性の原理 | 自然界にみられる配色や見慣れた配色は調和する（なじみの原理とも呼ばれる） |
| 共通性の原理 | 色相またはトーンに共通点がある色同士は調和する |
| 明白性の原理 | 明瞭なコントラストを持つ色の組み合わせは調和する |
配色に絶対的な正解はありません。４原理は目的に合わせて選ぶための道具です。「まとめたい」「なじませたい」「目立たせたい」という意図によって使い分けると、配色の議論が具体的になります。
各原理の使いどころ
秩序の原理 — 規則的な位置関係で選ぶ
色相環上で幾何学的な関係にある色を選ぶと、規則性が調和を生みます。「なぜこの色を選んだのか」を色相環の位置関係で説明できる配色が、秩序の原理に基づいた配色です。代表的な４種類の配色方法を確認しましょう。
| 配色方法 | 特徴と使いどころ |
|---|---|
| Identity（同一色相） | 同じ色相のみを使い、トーンや明度で変化をつける。まとまりが出やすく扱いやすいため、初めての配色に向いている |
| Analogy（類似色相） | 色相差1〜4程度の隣接する色を使う。自然でなじみやすく、落ち着いた印象になる。ナチュラル・ナチュラルハーモニー配色に近い |
| Triad（トライアド） | 色相環を三等分した120°位置の３色。変化があってもバランスが取れており、目を引きながらもまとまる |
| Tetrad（テトラード） | 色相環を四等分した90°位置の４色。多色使いだが規則性があるため統一感が出る。色数が多い分、使い方にバランスが必要 |
４種類の配色方法を実際のデザインで比較してみましょう。
親近性の原理 — 見慣れた自然の配色を使う
自然界の色の変化を思い浮かべてください。たとえば新緑の葉は、日当たりや成長度合いによって黄緑から深緑へと自然に変化しますが、不自然には見えません。このように私たちが日常的に見慣れた配色・自然界に存在する色の変化は、調和して感じられます。
この原理を応用した代表的な手法がナチュラルハーモニーです。自然界では明るい色ほど黄みを帯び、暗い色ほど青みを帯びる傾向があります。配色でもこの法則に従うと、より自然で見慣れた印象になります。
色相差１〜３の隣接・類似色相でまとめるのが基本ルールです。インテリアや自然をテーマにしたデザインに特に有効で、なじみのある落ち着いた印象を与えます。
ナチュラルハーモニーを実際のデザインに適用したときの変化を確認しましょう。
共通性の原理 — 色相かトーンを揃える
色相またはトーンに共通要素を持たせることで、複数の色を使っても統一感が生まれます。共通要素は大きく３種類に分けられ、それぞれに対応する配色方法があります。
- 色相を統一する — 同じ色相・隣接色相でまとめ、トーンで変化をつける（ドミナントカラー・トーンオントーン）
- トーンを統一する — 同じトーン・近似トーンでまとめ、色相で変化をつける（ドミナントトーン・トーンイントーン・トーナル）
- 色相・トーン両方を統一する — 色相もトーンも近い色でまとめる。単色に近い統一感が出る（カマイユ・フォカマイユ）
各種類に対応する具体的な配色方法を確認しましょう。
各配色方法を使った場合と使わない場合の違いをデザインで比較してみましょう。
明白性の原理 — 明瞭なコントラストを使う
はっきりと対照的な色—特に明度差が大きい色同士—を組み合わせると、メリハリのある調和が生まれます。コントラストが強い配色は視認性が高く、パッと見て分かりやすい印象を与えるため、看板・ロゴ・ポスターなど目立たせたいデザインに適しています。
代表的な手法として、対照的な３色を使うトリコロールと２色のビコロールがあります。フランス国旗（青・白・赤）や日本国旗（白・赤）が身近な例です。明度差だけでなく、色相や彩度の対比によってコントラストをつける場合も明白性の原理に含まれます。
コントラストの強い色の間に白・黒・グレーを挟むセパレーションを加えると、境界がはっきりして配色全体が引き締まります。明白性の原理をさらに効果的に使えるテクニックです。
セパレーションを取り入れた場合の効果をデザインで確認しましょう。
習熟度確認課題
課題１ — Adobe Colorで配色を確認しよう（約60分）
Adobe Colorのカスタムモードを使い、色彩４原理それぞれに対応した配色を１つずつ作成します。
Adobe Colorを開き、好きな色をベースカラーとして選択します。カラーハーモニーは「カスタム」に設定してください。
秩序・親近性・共通性・明白性の各原理を意識した配色を１つずつ作ります。「類似色」「正方形（テトラード）」などの既存ハーモニー設定も参考にできます。
配色画像をダウンロードして、どの原理を使ったか・なぜその配色にしたかをNotionにまとめて提出しましょう。
解答例
① 秩序の原理（トライアド）
② 親近性の原理
③ 共通性の原理（ドミナントカラー）
④ 明白性の原理（トリコロール配色）
- 色の３属性 — 色相（色あい）・彩度（鮮やかさ）・明度（明るさ）はそれぞれ独立して調整できる
- 色相環とトーン — PCCSの色相環で補色・類似色を把握し、12種のトーンで印象を整理する
- 秩序の原理 — 色相環上の規則的な位置関係（Identity / Analogy / Triad / Tetrad）で色を選ぶ
- 親近性の原理 — 自然界の色の変化を参考に、色相差１〜３でまとめるナチュラルハーモニーを意識する
- 共通性の原理 — 色相またはトーンを統一（ドミナントカラー・トーンイントーン等）して複数色をまとめる
- 明白性の原理 — 明度差の大きいコントラスト配色（トリコロール等）。セパレーションで境界を明確にできる