色の組み合わせ｜相性のいい配色と基本の考え方
相性のいい色の組み合わせを作る基本を解説。同系色・類似色・補色・トライアド、主役色の決め方、文字と背景のコントラストまで紹介します。
色の組み合わせを考えるときに大切なのは、『相性のいい色を丸暗記すること』ではありません。色相・明度・彩度・トーン・面積・役割を分けて考えると、2色でも4色でも配色を組み立てやすくなります。
配色は、①主役を決める → ②色相関係を選ぶ → ③明度・彩度を整える → ④面積差をつける → ⑤文字やUIならコントラストを確認する、の順で考えると失敗しにくくなります。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1色の組み合わせは『色相・明度・彩度・面積』で考える
| 見るポイント | 何を決める？ | 配色への影響 |
|---|---|---|
| 色相 | 赤・青・黄など色みの関係 | 近い色ならまとまり、離れるほど変化が出やすい |
| 明度 | 明るさの差 | 可読性、軽さ・重さ、階層感に影響する |
| 彩度 | 鮮やかさの差 | 主役・脇役、落ち着き・強さを作る |
| 面積 | どの色をどれだけ使うか | 同じ2色でも印象を大きく変える |
基礎から確認したい場合は、色相、明度、彩度、トーンを先に押さえると理解しやすくなります。
代表的な配色パターン
| 配色 | 考え方 | 向いている印象 |
|---|---|---|
| 同系色 | 一つの色相を明暗・鮮やかさで変える | 統一感、落ち着き |
| 類似色 | 色相環で近い色を選ぶ | 自然、なじみ |
| 補色 | 色相環で反対側の色を選ぶ | 強調、活気、視線誘導 |
| トライアド | 色相環上でおおむね等間隔に3色 | 華やか、バランス |
| 無彩色＋有彩色 | 白・黒・グレーを土台に色を加える | 整理、実用性 |
配色は『主役・背景・アクセント』に役割を分ける
複数色を同じ面積・同じ鮮やかさで並べると、どこを見ればよいか分かりにくくなることがあります。まず1色を主役にし、背景や広い面積を支える色、最後に小面積のアクセントを決めると整理しやすくなります。
背景や余白など、最も広く使う色。主役を邪魔しない色を選びます。
ブランド、見出し、主役となる色。配色の方向性を決めます。
ボタン、強調、小物など。小面積でも視線を集めやすい役割です。
60:30:10や70:25:5のような比率は考え方の目安にはなりますが、すべてのデザインに共通する規格ではありません。媒体・情報量・目的に合わせて調整します。
補色は『反対だから相性がいい』ではなく、強い対比を作る関係
補色は、色相差を大きく取る配色です。隣に置くと互いの色みが強く感じられやすいため、アクセントには向きますが、両方を高彩度・同面積にすると刺激が強くなることがあります。
使いやすくするには、片方の彩度を下げる、明度差をつける、片方の面積を小さくする、といった調整が有効です。
暖色・寒色を組み合わせると温度感の対比が生まれる
暖色と寒色を組み合わせると、色相だけでなく『暖かい・涼しい』という印象差も作れます。ただし温冷感は相対的で、緑や紫のように周囲との関係で暖かくも冷たくも見える色があります。
2色・3色・4色は考え方が少しずつ違う
| 色数 | 向いている使い方 | 詳しく |
|---|---|---|
| 2色 | 主役と支える色を明確にしやすい | 2色の組み合わせ |
| 3色 | ベース・メイン・アクセントを作りやすい | 3色の組み合わせ |
| 4色 | 情報量や表現の幅を増やせる | 4色の組み合わせ |
文字と背景は『色相差』ではなくコントラストも確認する
見た目の相性がよくても、文字が読めなければ実用的な配色とはいえません。WebではWCAGのコントラスト基準を確認し、状態や意味を色だけで伝えないことも重要です。
赤と緑のように色みが大きく違っても、明るさが近ければ文字と背景の判別が難しい場合があります。可読性は別に確認してください。
色しるべで配色を実際に試す
色の組み合わせは『関係性』で考える
配色は、好きな色を並べるだけではなく、色同士の距離・明度差・彩度差・面積比を整理すると安定します。似た色でまとめるか、差をつけるかを先に決めると選びやすくなります。
| 関係 | 特徴 | 使いやすさ |
|---|---|---|
| 同系色 | 同じ色相系で明度や彩度を変える | 統一感を出しやすい |
| 類似色 | 色相環で近い色を組み合わせる | 自然でやわらかい |
| 高コントラスト | 色相差・明度差を大きくする | 注目を集めやすい |
| 無彩色＋有彩色 | 白・黒・グレーを土台にする | 失敗しにくく実用的 |
色名が合っていても読みづらいことがある
相性がよいとされる色同士でも、文字と背景の明るさが近いと読みにくくなります。見た目の調和とアクセシビリティは別に確認してください。
同じ2色でも、面積と明度で印象は変わる
『相性のいい色』は、色名の組み合わせだけでは決まりません。どちらを広く使うか、明るさの差をどれくらいつけるかでも見え方は大きく変わります。
50:50両方を同じ強さで見せる
80:20ネイビーを主役にする
20:80ベージュを主役にする
文字と背景では、色相が離れていても明度差が小さいと読みにくくなります。情報は色だけで区別せず、文字・形・アイコンも併用すると安全です。
色の組み合わせについてよくある質問
相性のいい色に絶対的な正解はありますか？
ありません。色相関係だけでなく、明度・彩度・面積・素材・用途で印象は変わります。
補色なら必ずおしゃれに見えますか？
補色は強い対比を作る関係であり、それだけで完成するわけではありません。面積差やトーン調整が重要です。
配色比率は60:30:10にすべきですか？
目安の一つですが規格ではありません。情報設計や媒体に合わせて変えてかまいません。
コメントを残す