「好きな色を選んだのに、なんだかまとまらない」
「2色まではいいけれど、3色になると難しい」
「おしゃれな配色にしたいけれど、どの色を組み合わせればいいのかわからない」
色を組み合わせるとき、こんな悩みを感じることはありませんか？
配色は、センスだけで決まるものではありません。
色相環を使って近い色を選んだり、反対側の色を組み合わせたり、明るさや鮮やかさを揃えたりすることで、色同士の関係を考えながら配色することができます。
この記事では、
について、初心者にもわかりやすく解説していきます。
配色とは？
配色とは、複数の色を組み合わせて、全体の印象や見た目を整えることです。
例えば、以下のようなところで、配色を見ることができます。
| Webサイト | ファッション | インテリア |
|---|---|---|
| ・背景色 ・文字色 ・ボタン ・見出し ・イラスト | ・トップス ・ボトムス ・靴 ・バッグ ・アクセサリー | ・壁 ・床 ・家具 ・カーテン ・小物 |
つまり、私たちの身の回りにある「色の組み合わせ」のほとんどが配色です。
配色で大切なのは「色」だけではない
配色というと、「何色と何色を組み合わせるか」を考えがちです。
もちろん色相は重要ですが、それだけではありません。
色には、「色相・明度・彩度」という3つの属性があります。
例えば同じ青でも、明るさや鮮やかさによって印象が大きく変わります。
■ 明るい青
■ 暗い青
■ 鮮やかな青
■ くすんだ青
そのため、配色では「どの色を選ぶか」＋「どんな明るさ・鮮やかさにするか」まで考えることがポイントです。
まず覚えたい「3色の役割」
複数の色を使うときに、まず覚えておきたいのが、
ベースカラー・メインカラー・アクセントカラー
という考え方です。
ベースカラー
全体の中で最も大きな面積に使う色です。
Webデザインなら背景、インテリアなら壁や床などがイメージしやすいでしょう。
全体の土台になるため、主張が強すぎない色を選ぶとまとめやすくなります。
メインカラー
デザインや空間の中心になる色です。
Webサイトならブランドカラー、ファッションならトップスやボトムスなど、目立つ部分に使います。
「この配色は○○色っぽい」と感じる、全体の印象をつくる色です。
アクセントカラー
面積は小さくても、視線を集める色です。
ボタンや小物、バッグ、クッションなどに使います。
メインカラーとは少し違う色を選ぶことで、全体にメリハリが生まれます。
3色を使うときの基本
厳密なルールではありませんが、次の割合くらいを目安にすると、まとまりやすくなります。
- ベースカラー：70％前後
- メインカラー：25％前後
- アクセントカラー：5％前後
ただし、これはあくまで目安です。
デザインの目的やファッション、インテリアによって適切なバランスは変わります。
失敗しにくい配色①｜同系色でまとめる
最も簡単な方法のひとつが、同じ色相の色を組み合わせる方法です。
例えば、濃い青→中くらいの青→淡い青、というように、同じ青系の中で明度や彩度を変えます。
色同士が近いため、統一感を出しやすいのが特徴です。
「色をたくさん使いたいけれど、派手にしたくない」というときにも使いやすい配色です。
失敗しにくい配色②｜類似色で組み合わせる
色相環上で近い位置にある色（類似色）を組み合わせる方法です。
例えば、黄色→黄緑→緑のように、隣り合う色を組み合わせます。
色同士に共通点があるため、自然なまとまりを作りやすいのが特徴です。
ナチュラルなデザインやファッション、インテリアなどにも使いやすい配色です。
失敗しにくい配色③｜補色を使う
色相環で反対側に位置する色を補色といいます。
補色同士は色の差が大きいため、メリハリのある配色になります。
そのため、すべてを同じくらいの面積で使うより、「メインカラー＋補色をアクセント」という使い方がおすすめです。
例えばWebデザインなら、青系のページ＋オレンジのボタンというように使うと、ボタンを目立たせることができます。
補色を使うときの注意
補色は目立ちやすい反面、強くなりすぎることがあります。
特に、鮮やかな補色＋鮮やかな補色を大きな面積で組み合わせると、刺激が強く感じられる場合があります。
そんなときは、以下のように色を調整してみるのがおすすめです。
失敗しにくい配色④｜反対色でメリハリをつける
「補色」と似た言葉として、反対色があります。
色相環上で反対側にある色同士は、一般的に反対色として考えられます。
補色同様に、メリハリのある配色にすることができます。
失敗しにくい配色⑤｜トーンを揃える
「色相は違うけれど、なんとなくまとまっている」
そんな配色を作りたいときは、トーンを揃える方法が便利です。
例えば、淡いピンク・淡いブルー・淡いイエローのように、色相は違っていても、明るさや鮮やかさの印象を近づけます。
すると、異なる色を使っていても統一感が生まれます。
反対に、鮮やかな赤・くすんだ青・暗い黄色のように、トーンが大きくバラバラになると、意図しないちぐはぐ感が出ることがあります。
失敗しにくい配色⑥｜明度差をつける
配色では、明るさの差も重要です。
例えば、文字と背景が似た明るさだと、色相が違っていても見づらくなることがあります。
反対に、「明るい背景＋暗い文字」のように明度差をつけると、見やすくなります。
明るい背景＋明るい文字
明るい背景＋暗い文字
これは特にWebデザインで重要です。
「おしゃれな色」だけを優先するのではなく、「読めるか・見やすいか」も一緒に確認しましょう。
＼ おしゃれな配色がいっぱい ／
配色に迷ったときの簡単な手順
「結局、どの色から選べばいいの？」
という場合は、次の順番で考えると簡単です。
STEP 1｜まずメインカラーを決める
最初から3色決めようとせず、「この色を使いたい」というメインカラーを1色決めます。
好きな色から選んでもOKです。
STEP 2｜色相環から近い色を探す
統一感を出したいなら、メインカラーの近くにある色を探します。→ 類似色配色
メリハリを出したいなら、反対側の色を探します。→ 補色配色
STEP 3｜明度・彩度を調整する
色相が決まったら、
「もっと明るくする？」
「少しくすませる？」
「暗めにする？」
と考えます。
ここでトーンを揃えると、かなりまとまりやすくなります。
STEP 4｜アクセントカラーを決める
最後に、少量だけ使うアクセントカラーを決めます。
アクセントカラーは、メインカラーと同系色でも構いません。
あえて補色などを使って、視線を集める方法もあります。
配色でありがちな失敗
① すべての色を同じくらい使う
3色を使う場合、すべてを同じ面積にすると、どこを見ればいいのか分かりにくくなることがあります。
「主役」「脇役」「アクセント」と役割を分けると、まとまりやすくなります。
② 鮮やかな色を使いすぎる
鮮やかな色は目立つので、たくさん使うと情報量が多く感じられます。
特にWebデザインでは、背景・文字・ボタンなどすべてを鮮やかにするより、目立たせたい部分だけに彩度の高い色を使う方が効果的です。
③ 色相だけで考えてしまう
「赤と青だから合う・合わない」と考えるだけではなく、明度・彩度・トーンも確認しましょう。
同じ赤と青でも、明るさや鮮やかさを変えるだけで印象は大きく変わります。
④ 色を増やしすぎる
「もう少し色を足した方がおしゃれかも」と色を増やしていくと、まとまりがなくなることがあります。
迷ったときは、いったん色を減らしてみるのもおすすめです。
⑤ 実際に使う場所を考えていない
同じ配色でも、Webサイト・ファッション・インテリアでは、色の見え方や適切な面積が変わります。
「どこで使う色なのか」を考えることも大切です。
デザインでの配色
Webサイトやバナーでは、まず、この順番で考えると整理しやすくなります。
- 背景色
- メインカラー
- アクセントカラー
例えば、
- 淡い背景 ■
- 落ち着いたメインカラー■
- 目立つアクセントカラー■
という組み合わせなら、読みやすさとメリハリを両立しやすくなります。
特に重要なのが、文字の読みやすさです。
「好きな色だから」という理由だけで文字色を決めず、背景との明度差もしっかり確認しましょう。
ファッションでの配色
ファッションでは、服だけでなくバッグや靴、アクセサリーなども含めて全体の配色を考えます。
例えば、トップス＋ボトムスで2色を決めたあと、
バッグ・靴・アクセサリーでアクセントカラーを加える方法があります。
同系色なら統一感のあるコーデ、補色ならメリハリのあるコーデを作りやすくなります。
また、全身を鮮やかな色にするのではなく、小物だけ鮮やかな色にする方法もあります。
「色は好きだけれど派手になりすぎる」という場合におすすめです。
インテリアでの配色
インテリアでは、色を使う面積が大きくなります。
そのため、ファッションや小さなバナー以上に、ベースカラーの影響が大きくなります。
例えば、この順番で考えると分かりやすいでしょう。
- 壁・床などの大きな面積
- ソファ・家具などの中くらいの面積
- クッション・雑貨などの小さな面積
アクセントカラーをクッションや小物などに少量使うと、季節や気分に合わせて模様替えもしやすくなります。
迷ったら「3色」から始めよう
配色が難しいと感じるなら、最初からたくさんの色を使う必要はありません。
まずは、こちらの3色から始めてみましょう。
- ベースカラー
- メインカラー
- アクセントカラー
そして、
「この3色は色相環上でどんな関係？」
「明度は近い？」
「彩度は揃っている？」
「一番目立たせたい色はどれ？」
と考えていきます。
こうすると、「なんとなくおしゃれ」だった配色を、理由を持って組み立てられるようになります。
配色をもっと楽しむなら「色相環」を使ってみよう
配色に慣れてきたら、ぜひ色相環を使ってみましょう。
色相環を見ると、近い色・反対側の色・類似色・補色などの関係が視覚的に分かります。
「この色には何色が合うんだろう？」
と迷ったときにも、感覚だけでなく色の位置関係から考えられるようになります。
よくある質問（FAQ）
- Q配色は何色まで使うといいですか？
- A
初心者の場合は、まず3色程度から始めると考えやすいでしょう。
ただし、3色が絶対的なルールというわけではありません。
デザインの目的や媒体によって、使う色の数は変わります。
- Q3色なら必ずベース・メイン・アクセントにするべきですか？
- A
基本的な考え方として便利ですが、必ずこの比率にする必要はありません。
3色それぞれの役割を決めておくと、配色が整理しやすくなります。
- Q補色を使えばおしゃれになりますか？
- A
補色はメリハリを作りやすい一方、使い方によっては強すぎる印象になることがあります。
補色の一方を淡くしたり、アクセントとして少量使ったりすると調整しやすくなります。
- Q色が合わないときはどうすればいいですか？
- A
色相だけでなく、明度・彩度・トーンを調整してみましょう。
また、使う面積のバランスを変えるだけでも印象が変わります。
- Q配色はセンスが必要ですか？
- A
センスだけでなく、色相環や色の三属性、トーンなどの基本を知ることで、理論的に考えることができます。
最初は「好きな色＋近い色」など、簡単な組み合わせから試してみるのがおすすめです。
関連記事
まとめ
配色は、ただ「合いそうな色」を並べるだけではありません。
色相・明度・彩度・トーン・面積・色の役割などを考えることで、まとまりのある配色を作りやすくなります。
まずは、次の順番で考えてみましょう。
- メインカラーを決める
- 類似色や補色など、色相環から組み合わせを考える
- 明度・彩度・トーンを調整する
- ベース・メイン・アクセントの役割を決める
「色の組み合わせは難しい」と感じていても、基本的なルールを知ると、少しずつ理由を持って色を選べるようになります。
色相環を眺めながら、「この色とこの色を組み合わせたらどうなる？」と試してみるのも楽しいですよ。
コメント