色数を絞るだけで劇的に変わる！配色設計で押さえるべき「3色の法則」｜現場で使える実践テクニック

2026年05月25日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「色数を絞るだけで劇的に変わる！配色設計で押さえるべき『3色の法則』」について解説します。

色数が多すぎるデザイン、その悪循環

僕も新人時代に、めっちゃやってしまった失敗があるんです。
クライアントから「この部分は赤で、ここは青で、あ、あとオレンジも入れてほしい」って言われて、気づいたら色が6色とか7色になってたパターン。
もうホンマに、見るたびに「これ統一感ないな…」って感じてました。

現場でよく見かけるのは、デザイナーの方が「もっと華やかに見えるように」って色を足していくんですよね。
気持ちはわかるんですが、実は逆なんです。
色数が多いほど、脳がそれを処理するのに疲れちゃって、むしろ安っぽく見えてしまう。

色数が多すぎるデザインの問題点をまとめると：

実は、色数を絞ることが、最高のデザイン改善法なんですよ。

「3色の法則」は、デザインに使う色を3つのカテゴリに分ける考え方です。
これを理解すると、色選びで迷わなくなります。

全体の70〜80%を占める色です。
白や薄いグレー、淡いベージュなど、目立たないけど信頼感がある色を選びます。

Webサイトだと、背景色やカード背景がベースカラーになることが多いですね。
僕が作ったサイトの場合、ベースカラーは#f9f9f9（ほぼ白）にすることが多いです。
理由は、テキストの可読性が高いから、そして落ち着いた印象になるから。

全体の15〜20%を占める色です。
ボタンやヘッダーなど、目立たせたい部分に使う色。
ブランドイメージを象徴する色になることが多いですね。

例えば、企業の「コーポレートカラー」ってありますよね？
あれがメインカラーです。
CSSだと--primary-colorみたいな変数に入ります。

全体の5〜10%を占める色です。
警告メッセージ、重要なボタン、強調したいテキストに使います。
メインカラーとは違う色を選ぶことで、メリハリが出ます。

ほんまに大事なのは、この3色以外の色をできるだけ使わないということ。
「でも、もう1色足したいな…」って思ったら、既存の色を濃くしたり薄くしたりして対応するんです。

実例を挙げてみますね。
僕が先月完成させたクライアントサイトの配色です。

これだけです。
でも足りません？
大丈夫。opacityを使ったり、rgba()で透明度を変えたりして、色の濃淡で変化をつけるんですよ。

例えば、メインカラーの青を使う場合：

こんな感じで、1色から複数の表現を生み出せます。

実装する際は、CSS変数を活用するといいですよ：

これらを:rootに定義しておけば、デザイン変更が楽になります。
「メインカラーを紫に変えて」って言われても、1箇所変えるだけで全体に反映されますからね。

最近のプロジェクトではダークモード対応も増えました。
その場合も「3色の法則」は同じです。

見て気づくかもしれませんが、ダークモードでは「ライトモードより明度を上げた色」を使うんです。
そうしないと、暗い背景に暗い色だと見えませんからね。

配色で失敗しないコツは、実はシンプルです：
色数を絞ること。
具体的には「3色の法則」で、ベースカラー・メインカラー・アクセントカラーの3つに分けて考えるだけ。

僕も最初は「色が多い＝豪華に見える」って勘違いしていました。
でも、実際にはその逆で、色数が少ないほど洗練されて、ブランド価値も高く見えるんです。
その証拠に、有名なWebサイトやアプリって、すごく色数が少ないですよね。

次のプロジェクトで色選びに困ったら、まず「この3色で本当に足りるか」って考えてみてください。
足りなかったら、色を足すんじゃなくて、既存の色の