配色の基本

週末の散歩イベントのポスターをつくるとします。青、橙、緑は一色ずつなら好きなのに、背景やタイトルへどう割り当てるか、競い合うとき何を直すか分かりません。配色が解くのはこの問題です。⁠用途を決め、色同士の関係を選び、具体的な場所へ役割を配ります。

六つの出発点を比べ、青と橙の案を選んで修正する過程を一度通してみます。魅力的な色見本は候補ですが、実際の画面で使い、確認して初めて配色案になります。

色見本より先に、完成した画面を見る

四枚の模式的なポスターは形、文字、位置を固定しています。A は同系色、B は近い色の系統、C は青と橙の対比、D は三色の組です。イベントに使いたい候補を選び、見える違いを説明してください。

A は主に明暗差、B は黄緑から青緑の関係、C は大きな青い山と小さな黄土寄りの橙の円を使います。D は青、赤、黄に役割を分けます。以下の適性の説明はこの形、面積、文字条件での提案で、すべての人に共通する感情の法則ではありません。

六つの出発点：何を選び、なぜ組み合わせるのか

赤、橙、黄、緑、青、紫を近い色の移り変わりで一周させると、伝統的な色の系統の模式的な環になります。A は一方向を選んで明暗やクロマを変え、B は隣り合う方向、C は向かい合う方向、D は離れた三方向を選びます。分裂補色は、基準色の向かい側から左右へ一つずつ方向を取ります。

色相環は系統の近さや遠さを示しますが、⁠最大面積を担う色や、読める文字の暗さまでは決めません⁠。次の例で実際に使う案へ進みます。

類似色、補色などの名前は主に色相の関係です。明度、クロマ、面積、文字の読みやすさまでは決めてくれません。ここでは本站が作った具体的な配色を使います。十六進数の値で自分のツールでも再現できます。

「補色方向」は色の家族の関係です。明度とクロマを調整した後、特定のソフトの色相角で必ず 180°差になるとは限りません。伝統的な赤・黄・青の環と RGB の環でも対向色は異なります。名称で方向を探し、実際の結果を比較します。

青と橙のポスターを段階ごとに作る

週末の散歩のために、読める見出し、山の形、小さな強調点を作ります。見出しを読めるようにし、山を区別し、橙を局所的な強調に使う目的です。三段階で形と配置は固定します。

A：灰色で階層を先に決める。 淡い背景、暗い文字と山で情報を分けます。円は中間の灰色にして、鮮やかさに判断を奪われないようにします。ここでは色の雰囲気より先に構造を見ます。

B：主色と共通の背景を選ぶ。 山を濃青 #284D68、背景を淡いクリーム #F1E9D9、文字をさらに暗い青黒 #233849 にします。青は遠山に対するこの例の表現上の選択です。背景と山は明暗と冷暖が異なり、文字には別の暗色を使うため、山の色だけで小さな文字の対比まで満たす必要はありません。

C：差し色と周囲を確認する。 円を黄土寄りの橙 #C87A35 にして青と色相の系統を離し、クロマと面積を控えめにします。前景の明るい灰青緑 #7F9CA5 は主色に近い方向を保ち、補助の層になります。

暗い灰色の円でも構いません。その場合は位置と明暗が強調を多く担います。鮮やかな赤も候補ですが、色相、クロマ、明度を再比較します。この例では青と暖色の関係を見せるため橙を選びました。「補色」という名前だけでは選択は完了しません。

色見本と画面内の役割が対応しました。次は五色を一度に取り替えず、小さな変更で問題の原因を探します。

現実に近い三つのずれ：一つずつ直す

文字が明るすぎる

A はタイトルの色だけを明るくしています。青と橙の関係は残りますが、淡い背景から文字が分かれません。B は暗い文字だけを戻します。文字と背景の対比を直すために、山まで黒くする必要はありません。

差し色が鮮やかになる

A は差し色だけを鮮やかな橙へ変え、B は元の黄土寄りの橙を使います。見出しや山と競い始めるかを比較します。鮮やかさは必ずしも誤りではなく、強い活動感なら A、控えめな局所強調という今回の目的なら B が近くなります。

差し色の面積が増える

A は円だけを大きくし、色と他の形を固定。B は小さな円を戻します。大きな橙の円は主題や太陽として読まれるかもしれません。色が同じでも役割は変わるので、円の目的を先に決めます。

実験では選んだ配色に三つのずれを別々に適用します。配色と一つのずれを選び、「役割を分ける」で基準へ戻します。灰色表示は明暗確認の補助であり、色の画面自体の比較に代わりません。

灰色表示は役割版を sRGB の相対輝度で変換します。前の篇の OKLCH L を保つ変換とは異なり、美しさの測定ではありません。

同じ色でも、面積で役割が変わる

十二区画では面積だけを分けて調べます。形の配置と三つの色値を固定し、既存の領域への色の割り当てだけを変えます。

黄土色が一区画なら局所的な差し色となり得ますが、六区画なら広い色面を担います。青灰色と交換すると、「差し色」は色固有の身分ではなく用途だと分かります。区画比は実験の条件で、すべての絵に使う配合ではありません。

三つの失敗と、最初の修正

一般的なウェブ文字では、WCAG 2.2 AA の最低対比は通常 4.5:1、所定の大きな文字は通常 3:1 で、文字サイズなどの条件があります。これは文字の読みやすさの確認で、ポスターの美しさの点数ではありません。色で分類するときは文字、形、模様なども併用します。W3C：文字の最低コントラスト

二つ目の課題：ポスターをそのままページに使う？

ポスターでは色のついた山が主内容ですが、茶の紹介ページには既に緑の挿絵があり、文字と入口も必要です。追加する色は既存の情報を支える役割から考えます。青と橙のポスターが使えても、面積や強さをそのまま移す根拠にはなりません。次の図を先に判断し、その後で解説を開いてください。

茶の紹介ページへ応用：既存の絵を残して直す

緑の葉の挿絵は決まっています。挿絵と見出しを先に見て、次に購入入口を見つける課題です。A の大きな橙色の入口に対し、B は縮小して濃緑に、C は背景を暖かいクリーム色にしています。A→B と B→C を別々に比べ、競合の修正と全体の色調変更を区別してください。

別の場面で二つの確認

状況一： 控えめなお茶の紹介ページをつくり、写真にはすでに緑が多くあります。どの出発点を選び、なぜそうしますか。

状況二： 青い領域の上に小さな橙の文字を置くと読みにくくなりました。補色配色が使えないという証拠でしょうか。

自分の用途を書き、主色の系統、低彩度の地、差し色の候補を選び、それぞれの面積と位置を説明してください。別案も残し、取捨選択を比較します。ここまで進むと、配色名を知ることから、理由を持って組むことへ移れます。

参考：Adobe：四つの配色をポスターに使う、Adobe の色相環ツール。候補を探す助けになります。本頁の六組の色値、図案、具体的な分析は本站の教材例です。