【配色】基本とおしゃれな組み合わせパターンを解説
配色とは色の組み合わせであり、この組み合わせにルールを設けることでデザイン全体を整えることができるようになります。
この記事では、それら配色のルールを解説していきます。
配色の基本
配色には基本的な考え方となるものがあります。
それが、統一感と変化です。
統一感とは？
統一感とは、色やトーン（彩度・明度の具合）を同じにしたり似通わせたりすること。
統一感を持たせることで、まとまりを感じる配色にすることができるのです。
変化とは？
変化とは、色やトーン（彩度・明度の具合）に対照性を持たせる配色のこと。
色相環で反対になる色や、彩度・明度の差が大きい色を使うことで、インパクトや目を引く強さを出すことができるのです。
アクセントカラー
配色において、他の色とは対照的な目立つ色のことをアクセントカラーと言います。
アクセントカラーはベースになっている色の反対色を使うのが一般的とされています。
デザインが単調であったり、シンプルすぎたりする場合に加えると、配色のポイントとなってくれるので全体の印象が強くなります。
画像のように、小さい面積で一部分だけに使うとより効果的に仕上がります。
サブ的な要素は色を薄めて馴染ませる
デザイン上そこまで重要ではない部分は、背景色に近づけるよう明度や彩度を調節しておくと、バランスよくまとまって見えます。
※画像は少し薄過ぎですが、かなり薄めても良いかと思います。
配色のパターン（色相編）
それでは、統一感と変化を使った配色のパターンを見ていきましょう。まずは色相を基準にしたものから。
同じ色みでまとめた配色
色相が同じ色を組み合わせた配色で、同一色相配色と言ったりします。
画像のように明度差を大きくとる配色（濃淡配色）はよく見ますね。綺麗にまとまるほか、同じ色相でまとめているので色のイメージがしっかり伝わるというメリットもあります。
画像は青でまとめた配色なので、「落ち着いた」「爽やか」といった色のイメージがより伝わってきますね。色のイメージについては、こちらで解説しています。
【色彩心理】色の心理効果まとめ
ブログのアイキャッチや挿絵の場合、背景色と文字に明度差を付けるだけでも綺麗にまとめることができます。
隣の色でまとめた配色
色相環などで隣り合った色を組み合わせた配色で、カマイユ配色と言ったりします。
色相・明度・彩度の差をほとんどなくして、一見すると一色に見える微妙な配色です。強いまとまり感を出したい時に有効。この場合、テキストの色は白か黒にしておくと良いでしょう。
似た色でまとめた配色
色相が似ている色（青と水色、青と紫など）を組み合わせた配色で、類似色相配色と言ったりします。
まとまり感を出しながら、色の変化が楽しめる配色です。画像のように、文字の色も配色に合わせるとより整った印象になります。
別の色を使った配色
色相が異なる色（青と緑、濃い紫とピンクなど）を組み合わせた配色で、中差色相配色と言ったりします。
色相が若干近い色を使うとまとまりが、離れた色を使うとインパクトが出てきます。異なる色を使う場合でも、だいたい2色に抑え、背景と図で配色を分けると馴染んで見えます。
この配色を上手に使っているのが「ピュレグミ」ですね。
アクセントカラーを使った配色
色相が対照的な色同士を組み合わせた配色で、ビコロール配色と言ったりします。
アクセントカラーを使った配色は、高彩度色で行うとより派手で強い印象になりますね。
配色のパターン（トーン編）
続いてトーン（明度や彩度）を基準にした配色を見ていきましょう。
同じトーンでまとめた配色
トーンが同じ色同士でまとめた配色で、同一（どういつ）トーン配色と言ったりします。
彩度・明度の差が小さい配色なので、たくさんの色を使ってもまとまり感が出ます。またトーンのもつイメージを強く出せるのもポイント。
近いトーンでまとめた配色
トーンが近い色同士でまとめた配色で、類似トーン配色と言ったりします。
明度や彩度に若干の差をつけた配色で、トーンのイメージが近いのでまとまりが感じられます。画像は近い色相にしていますが、異なる色相でもうまくまとまります。
対照のトーンでまとめた配色
トーンが対照の色同士でまとめた配色で、対照トーン配色と言ったりします。
明度や彩度の差を大きくした配色で、コントラスト感を出すことができます。「明度を対照的にする」「彩度を対照的にする」のどちらかで配色するのが良いでしょう。
まとめ
色相とトーンによる配色のルールを抑えると、まとまりやインパクトを与えることができるのですね。
「この配色をしたのは、こういう理由があって…」と説明する際にも、こういったルールを知っておくと良いかもしれません。
