---
title: 配色の基本
url: https://doc.liz6.com/ja/general-education/visual-foundations/06-color-in-context
locale: ja
area: general-education
tags:
- 教養入門
- 視覚表現の基礎
date: 2026-09-10
modified: 2026-09-10
description: 六つの実用的な配色から背景、主色、差し色を選び、ポスターの明暗、クロマ、面積、文字対比を確認して修正します。
---
# 配色の基本
週末の散歩イベントのポスターをつくるとします。青、橙、緑は一色ずつなら好きなのに、背景やタイトルへどう割り当てるか、競い合うとき何を直すか分かりません。配色が解くのはこの問題です。**用途を決め、色同士の関係を選び、具体的な場所へ役割を配ります。**
六つの出発点を比べ、青と橙の案を選んで修正する過程を一度通してみます。魅力的な色見本は候補ですが、実際の画面で使い、確認して初めて配色案になります。
## 色見本より先に、完成した画面を見る
四枚の模式的なポスターは形、文字、位置を固定しています。A は同系色、B は近い色の系統、C は青と橙の対比、D は三色の組です。イベントに使いたい候補を選び、見える違いを説明してください。
A は主に明暗差、B は黄緑から青緑の関係、C は大きな青い山と小さな黄土寄りの橙の円を使います。D は青、赤、黄に役割を分けます。以下の適性の説明はこの形、面積、文字条件での提案で、すべての人に共通する感情の法則ではありません。
## 六つの出発点：何を選び、なぜ組み合わせるのか
赤、橙、黄、緑、青、紫を近い色の移り変わりで一周させると、伝統的な色の系統の模式的な環になります。A は一方向を選んで明暗やクロマを変え、B は隣り合う方向、C は向かい合う方向、D は離れた三方向を選びます。分裂補色は、基準色の向かい側から左右へ一つずつ方向を取ります。
色相環は系統の近さや遠さを示しますが、**最大面積を担う色や、読める文字の暗さまでは決めません**。次の例で実際に使う案へ進みます。
類似色、補色などの名前は主に色相の関係です。明度、クロマ、面積、文字の読みやすさまでは決めてくれません。ここでは本站が作った具体的な配色を使います。十六進数の値で自分のツールでも再現できます。
| 出発点 | 背景 / 主色 / 差し色 | 配分の理由と試せる用途 |
| --- | --- | --- |
| 同系色 | `#E9F1EA` / `#527659` / `#214329` | 灰みの淡緑を地に、深さの異なる緑を置き、色相の競合を絞ります。植物の手引きや静かな商品図から試せます。明暗を分けないと形が埋もれます。 |
| 類似色 | `#F3F1DF` / `#46766B` / `#B6BE63` | クリーム色が青緑と黄緑を支え、近い系統に共通性があります。植物や食材の図などで試せます。淡い黄緑が小さな文字にも使えるとは限りません。 |
| 補色方向 | `#F1E9D9` / `#284D68` / `#C87A35` | 伝統的色相環で向かい合う青と橙の方向です。広い濃青と少量の黄土寄りの橙を分け、淡い地で余地を残します。両者を大面積の鮮烈な色にすると競合しやすくなります。 |
| 分裂補色方向 | `#F0E8DD` / `#505A80` / `#BF734B`、補助に `#B39A50` | 青紫を主に、向かい側を橙寄りと黄寄りの暖色へ分けます。変化が増える分、二つの暖色にも主従が必要です。 |
| 三色配色 | `#F4EEE1` / `#436990` / `#C15B5D`、補助に `#C6A64D` | 伝統的色相環で離れた青、赤、黄を使い、豊かなイベント挿絵などで試せます。一系統を主にして他を小さく配ると、三者同等より整理しやすくなります。 |
| 中性色系＋差し色 | `#F2ECE3` / `#8D8981` / `#A54235` | クリーム色と暖かい灰色が共通の地をつくり、小さな煉瓦色が差になります。情報の多いページで一つの重点を残す案です。低彩度でも偏色は比較します。 |
「補色方向」は色の家族の関係です。明度とクロマを調整した後、特定のソフトの色相角で必ず 180°差になるとは限りません。伝統的な赤・黄・青の環と RGB の環でも対向色は異なります。名称で方向を探し、実際の結果を比較します。
## 青と橙のポスターを段階ごとに作る
週末の散歩のために、読める見出し、山の形、小さな強調点を作ります。見出しを読めるようにし、山を区別し、橙を局所的な強調に使う目的です。三段階で形と配置は固定します。
**A：灰色で階層を先に決める。** 淡い背景、暗い文字と山で情報を分けます。円は中間の灰色にして、鮮やかさに判断を奪われないようにします。ここでは色の雰囲気より先に構造を見ます。
**B：主色と共通の背景を選ぶ。** 山を濃青 `#284D68`、背景を淡いクリーム `#F1E9D9`、文字をさらに暗い青黒 `#233849` にします。青は遠山に対するこの例の表現上の選択です。背景と山は明暗と冷暖が異なり、文字には別の暗色を使うため、山の色だけで小さな文字の対比まで満たす必要はありません。
**C：差し色と周囲を確認する。** 円を黄土寄りの橙 `#C87A35` にして青と色相の系統を離し、クロマと面積を控えめにします。前景の明るい灰青緑 `#7F9CA5` は主色に近い方向を保ち、補助の層になります。
暗い灰色の円でも構いません。その場合は位置と明暗が強調を多く担います。鮮やかな赤も候補ですが、色相、クロマ、明度を再比較します。この例では青と暖色の関係を見せるため橙を選びました。「補色」という名前だけでは選択は完了しません。
色見本と画面内の役割が対応しました。次は五色を一度に取り替えず、小さな変更で問題の原因を探します。
## 現実に近い三つのずれ：一つずつ直す
### 文字が明るすぎる
A はタイトルの色だけを明るくしています。青と橙の関係は残りますが、淡い背景から文字が分かれません。B は暗い文字だけを戻します。文字と背景の対比を直すために、山まで黒くする必要はありません。
### 差し色が鮮やかになる
A は差し色だけを鮮やかな橙へ変え、B は元の黄土寄りの橙を使います。見出しや山と競い始めるかを比較します。鮮やかさは必ずしも誤りではなく、強い活動感なら A、控えめな局所強調という今回の目的なら B が近くなります。
### 差し色の面積が増える
A は円だけを大きくし、色と他の形を固定。B は小さな円を戻します。大きな橙の円は主題や太陽として読まれるかもしれません。色が同じでも役割は変わるので、円の目的を先に決めます。
実験では選んだ配色に三つのずれを別々に適用します。配色と一つのずれを選び、「役割を分ける」で基準へ戻します。灰色表示は明暗確認の補助であり、色の画面自体の比較に代わりません。
**六つの配色を実際の画面に使う**
固定ポスターで六つの配色を選び、文字を明るくする、差し色を強める、面積を広げる変更を基準と比較。一度に一つの色の役割か形の大きさを変えます。
灰色表示は役割版を sRGB の相対輝度で変換します。前の篇の OKLCH L を保つ変換とは異なり、美しさの測定ではありません。
## 同じ色でも、面積で役割が変わる
十二区画では面積だけを分けて調べます。形の配置と三つの色値を固定し、既存の領域への色の割り当てだけを変えます。
**三つの色、三つの配分**
同面積の 12 区画を固定し、ベージュ、青灰色、黄土色の割り当てだけを変えます。小さな強調では 7:4:1、黄土色を広げると 4:2:6、役割を交換すると 7:1:4 です。形の配置は同じです。
黄土色が一区画なら局所的な差し色となり得ますが、六区画なら広い色面を担います。青灰色と交換すると、「差し色」は色固有の身分ではなく用途だと分かります。区画比は実験の条件で、すべての絵に使う配合ではありません。
## 三つの失敗と、最初の修正
| 問題 | 考えられる原因 | 最初に試す変更 |
| --- | --- | --- |
| 全部が競い合う | 面積、クロマ、対比が全部強く、主従がない | 主色を決め、補助の一部を低彩度や中性色へ寄せ、一つの重点を残す |
| 穏やかな色ばかりなのに鈍い | 対象と背景の明暗範囲が近い | 彩度を上げる前に、重要な境界の明度差をつくる |
| 色見本はよいが文字が読めない | 実面積と前景・背景の関係を見ていない | 文字かその地の色を変え、色相だけで直そうとしない |
一般的なウェブ文字では、WCAG 2.2 AA の最低対比は通常 4.5:1、所定の大きな文字は通常 3:1 で、文字サイズなどの条件があります。これは文字の読みやすさの確認で、ポスターの美しさの点数ではありません。色で分類するときは文字、形、模様なども併用します。[W3C：文字の最低コントラスト](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
## 二つ目の課題：ポスターをそのままページに使う？
ポスターでは色のついた山が主内容ですが、茶の紹介ページには既に緑の挿絵があり、文字と入口も必要です。追加する色は既存の情報を支える役割から考えます。青と橙のポスターが使えても、面積や強さをそのまま移す根拠にはなりません。次の図を先に判断し、その後で解説を開いてください。
## 茶の紹介ページへ応用：既存の絵を残して直す
緑の葉の挿絵は決まっています。挿絵と見出しを先に見て、次に購入入口を見つける課題です。A の大きな橙色の入口に対し、B は縮小して濃緑に、C は背景を暖かいクリーム色にしています。A→B と B→C を別々に比べ、競合の修正と全体の色調変更を区別してください。
先に判断してから解説を開く
A→B は入口の面積を減らし濃緑へ変更して、認識できる範囲で挿絵との競合を弱めます。複数を変えた実用的な修正なので、効果を一項目だけに帰属できません。B→C は挿絵、入口、配置を保ち、背景と情報バーの色調を変えます。涼しさや暖かさの意図により両方使えます。茶が緑でも全領域を緑にする必要はありません。
考え方の例を開く
クリーム灰の地に少量の深緑を加え、主な彩色情報を写真へ残す案があります。弱い類似色でも関係をつくれます。枠、見出し、操作部を全部鮮やかな緑にすると写真の重点が弱まるかもしれません。理由は実際の写真、情報階層、読む用途であり、「お茶は緑でなければならない」ではありません。
考え方の例を開く
いいえ。色相差と文字の明暗対比は別の問題です。直近の背景との対比を調べ、文字を明るくする、地を暗くする、文字用の安定した面を置くなどを試せます。大きな図形では青と橙の関係を残せます。この文字検査を通るだけで、あらゆるアクセシビリティが満たされるわけではありません。