ノンデザイナーがデザイナーを目指す！⑤
～これでもう迷わない
配色の基本ルール～

デザインを決める時に配色計画はとても重要になります。色が少なくてさみしい印象になってもよくないし、反対にたくさんの色を使ってごちゃごちゃさせてしまうと、伝えたいはずのことが伝わらないデザインになってしまいます。どんな色をどれくらい使えばいいのか、そしてどのように色を選べばいいのか。配色の基本ルールを理解して、ベストな色を見つけましょう。

配色は3色あれば十分

まず、基本となるのは3色での配色です。

ベースカラーは背景となる色です。上に乗るコンテンツを目立たせる必要があるため、白や薄いグレーなどの無彩色が適しています。デザインのイメージを決定づけるメインカラーは全体の25%程度に使用します。1色で物足りない場合は、明度に差をつけたり近い色をサブカラーとして設定してもよいでしょう。アクセントカラーは名前の通り、アクセントとなる色です。目立たせたい要素に使用するので、5%程度に抑えて使用しましょう。

3色だけ？と思われる方もいるかもしれませんが、色数が増えるほど配色は難しくなります。まずは3色を軸として配色し、そこから明度差のある色を加えるなどアレンジしていくと上手くいきます。

相性のいい色の組み合わせ

では、色はどのように選べばいいのでしょうか。
１つの方法として、「色相環」を使えば相性のいい色を理論的に導き出せます。

「補色」は色相環上の向かい合う位置にある色を指します。色を１つ決めた場合に、相性のいい色をもう1色探す場合まずこの補色を見ます。

「トライアド」は色相環の中に正三角形を作って選んだ3色です。120度離れた位置にある色を３つ選びます。3色選ぶ場合には、もう１つ「スプリットコンプリメンタリ」という選び方があります。補色を分割させるという意味があり、二等辺三角形のイメージで補色関係にある色から左右に少しずらした色を選びます。

「テトラード」は4色を選ぶ方法です。色相環の中に四角形を作り、90度離れた位置の色を選びます。

動画ではPhotoshopでそれぞれの配色を設定する方法をご紹介していますのでぜひご覧ください。

写真からヒントを得る

同じ画面（紙面）上に写真がある場合は、写真から配色のヒントを得ることができます。

写真から色をピックアップすることで全体の統一感も出て、違和感のない自然な配色となります。

文字色の決め方

背景色に対して、文字色はどのように決めればいいでしょうか。

重要なことは「明度の差」です。薄い色の背景には濃い色の文字、濃い背景には薄い色の文字を乗せます。基本的には明るい背景に明度の低い文字が適していますが、パッケージのラベルや、部分的に目立たせたいときには背景を暗くして明るい文字を乗せることもあります。

最後に・・・

配色の基本ルールを知っておくことで、配色に迷ったときの解決の糸口となります。無数にある色の組み合わせからそのデザインに適した配色を見つけるために、感覚だけではなくルールを理解して配色できると、より魅力的なデザインになるのではないでしょうか。

関連記事