配色で何時間も迷う人が知らない「3色の法則」【デザイン初心者向け】
note.comでも読むデザインを始めると、必ずぶつかる壁があります。それが「色選び」です。「ここも重要だから赤、ここも見てほしいから青、ここも目立たせたいからオレンジ……」気がつけば画面が原色だらけ。頑張って仕上げたのに、クライアントから「見づらいです」と一言で突き返される。その瞬間の「自分にはセンスがないんだ」という絶望感、あなたにも覚えがありませんか？
「目立たせたい病」が、あなたのデザインを壊している
デザイン初心者が陥りやすい罠があります。それは「全部を強調しようとする」こと。
重要な情報があるたびに赤を使い、次の重要な情報に青を使い、さらにボタンには緑を置く。結果として、色がぶつかり合って画面全体がチカチカし、肝心の「一番伝えたいこと」が色の洪水に埋もれてしまいます。
これはセンスの問題ではありません。「強調したい気持ち」が強すぎるだけです。でも、その気持ちが強ければ強いほど、皮肉なことにデザインはどんどん見づらくなっていきます。
「ここも大事、あそこも大事」と全員を主役にしようとすると、結局誰も主役になれない。これが、配色で迷い続ける人のほぼ全員が陥っているパターンです。
実は、わたしも同じ失敗を繰り返していました
最初は30分で終わると思っていたバナー制作が、気づけば2時間。青にしたり緑にしたり、やっぱり赤のほうが目立つかもと何度も戻して、結局ほとんど進まなかったことがありました。デザインしているというより、“色を選び直しているだけ”の時間でした。
正直に言います。わたし自身、副業でWebデザインを始めた頃は、まったく同じ状態でした。
配色だけで平気で3〜4時間使っていました。「この赤じゃ強すぎる、でも薄くすると弱い、じゃあオレンジ？いや紫のほうが……」と延々とループ。挙句の果てに「なんか違う」という感覚だけが残り、納品したデザインは案の定「チンドン屋みたい」と言われる始末。
そのたびに「自分にはセンスがないから副業なんて無理なのかも」と落ち込んでいました。
でも、あるルールを知ってからは、配色で悩む時間が劇的に減りました。そのルールが「3色の法則（70：25：5）」です。
迷いがなくなる「70：25：5の黄金比」とは
このルールはとてもシンプルです。デザインに使う色を3種類に役割分けして、それぞれの使う面積の比率を固定します。
① ベースカラー（70%） 背景や余白など、画面の大部分を占める色です。主役を引き立てる「舞台」のようなもの。白や薄いグレー、淡いトーンの色が定番です。ここをシンプルに保つことで、全体に「余白の美しさ」が生まれます。
② メインカラー（25%） デザイン全体の印象を決める色です。見出し、ロゴ、テキストの背景などに使います。ブランドのイメージカラーを置くのが基本。この色がそのデザインの「顔」になります。
③ アクセントカラー（5%） ここが最大のポイントです。CTAボタンや「最も目立たせたい一言」など、画面全体でほんのわずかな部分にだけ使う色。使う面積はたった5%です。
アクセントカラーには、メインカラーの「補色（色相環で反対側の色）」を選ぶとメリハリが際立ちます。たとえばメインカラーがブルーグリーンなら、アクセントカラーはオレンジが補色にあたります。
近代色彩学の研究者ルードはこんな言葉を残しています。
「美しい配色は、多くの色ではなくごく限られた色の使用で達成できる」
プロのデザイナーも、実はこの原則を徹底的に守っています。センスがある人がルールを無視しているのではなく、センスがある人ほどルールを正確に理解して使いこなしているのです。
具体例で見る「3色ルール」の使い方
頭で理解するより、具体例を見たほうが早いです。ブルーグリーン×オレンジの配色を例に見てみましょう。
| 役割 | 色 | 使う場所の例 |
|---|---|---|
| ベースカラー（70%） | 白・薄いグリーン | 背景、余白、テキストエリア |
| メインカラー（25%） | ブルーグリーン | 見出し、ヘッダー、ナビゲーション |
| アクセントカラー（5%） | 鮮やかなオレンジ | CTAボタン、強調テキストのみ |
この配色で大切なのは「オレンジをCTAボタンだけに限定する」こと。たった5%に絞り込むから、オレンジが画面に現れた瞬間に視線が引き寄せられます。
もしここで「もう少し色を使いたい」と感じたら、新しい色を追加するのではなく、3色の「明度（明るさ）」や「彩度（鮮やかさ）」を変えた同系色を使いましょう。ベースカラーのグリーンを少し濃くしたり、メインカラーのブルーグリーンを薄くしたりするだけで、単調さを解消しながら統一感を保てます。
これが「3色ルールの本質」です。本当に目立たせたい5%のために、残りの95%をコントロールする。デザインはアートではなく、視線を設計するための「設計図」です。
「3色だと単調にならない？」よくある疑問に答えます
ここまで読んで、こんな疑問を感じた方もいるかもしれません。
Q. 3色しか使わないとデザインが地味にならない？
なりません。同じ色でも「明るいブルーグリーン」「少し暗めのブルーグリーン」「ほぼ白に近い薄いブルーグリーン」と明度・彩度を変えるだけで豊かなバリエーションが生まれます。色数が少ないほど、洗練された印象になります。
Q. センスのある人はこんなルールに縛られていないのでは？
逆です。プロのUIデザイナーやブランドデザイナーほど、このルールを意識的に守っています。ルールを知らない人が「なんとなく」で色を選ぶから、迷子になるのです。ルールは制限ではなく、迷わないための「地図」です。
Q. 色選びはセンスの問題では？
UIデザインやWebデザインは、アートではなく「情報設計」です。読者の目線をどこに誘導するかを設計する作業。だからこそ、感覚だけではなくルールが機能します。センスは経験の積み重ねで育ちますが、ルールは今日から使えます。
今日から使える。最初の一歩を踏み出してほしい
ここまで読んでくれたあなたに、正直に言いたいことがあります。
この「3色ルール」は、読むだけでは意味がありません。実際に今手元にあるデザインやCanvaのテンプレートに当てはめてみて、初めて「なるほど」になります。
わたしが副業で少しずつ結果を出せるようになったのも、知識を増やしたからではなく、知ったその日に試したからです。失敗しながら動いた回数だけ、確実に感覚が身についていきました。
デザインのセンスは才能ではなく、「試した数」で決まります。3色ルールは、その試行錯誤をスタートさせるための一番シンプルな出発点です。
今すぐ手を動かしてみてください。それだけで、昨日のあなたより一歩前に進めます。
まとめ：色で迷う時間を、デザインを磨く時間に変えよう
この記事でお伝えしたことを整理します。
- 配色で迷う原因は、センスのなさではなく「全部を目立たせようとする構造的な問題」
- **3色ルール（70：25：5）**で色に役割を持たせると、迷いが消えて視線の階層が生まれる
- アクセントカラーは5%に限定することで、本当に伝えたい情報が際立つ
- 色を増やしたいときは明度・彩度を変えた同系色で対応する
- ルールはセンスの代替品ではなく、センスを育てるための地図
「なんとなく色を選ぶ時代」から卒業して、意図を持ってデザインできるようになると、副業の現場での自信がまったく変わってきます。
この記事が少しでもあなたの背中を押せたなら嬉しいです。
もし「ここがよくわからない」「自分のデザインに当てはめるとどうなる？」という疑問があれば、ぜひコメントで教えてください。できる限り一緒に考えます。
そして、こういった「非エンジニアでも使えるデザイン・副業の知識」を定期的に発信しています。気に入ってもらえたら、フォローして次の記事も受け取ってもらえると嬉しいです。