5分で試せるデザインTips：色数は3色まで ― 誰でもまとまる配色ルール

配色で迷子になる最大の理由は、色が増えすぎることです。きれいな色を見つけるたびに足していくと、いつの間にか画面が雑然として、どこが主役か分からなくなる。逆に、色を「選ぶ」のではなく「減らす」ことで、誰でも一気に整った印象へ寄せられます。本稿では、ベースカラー・メインカラー・アクセントカラーの3色で構成する基本ルールを土台に、実務で使える決め方と、5分でできる色の棚卸し手順を解説します。

3色構成の考え方

• ベースカラー（約60〜70%）：背景や大きな面積に用いる土台色。白・明るいグレー・黒のいずれかが扱いやすい。可読性と清潔感を担保する。
• メインカラー（約20〜30%）：ブランド・企画の「声色」。ロゴ色やキーイメージと一致させると筋が通る。
• アクセントカラー（約5〜10%）：ボタン・強調テキスト・バッジなど、視線を点で止める信号色。使いすぎないのがコツ。

色を「足す」前に、まず「数える」

最初にやるべきは、現在の色数を把握することです。スクリーンショットを撮って、スポイトで主要色を拾い、近い色はグルーピングします。似たブルーが3種類あるなら、1色に統一。グレーも明度差が激しければ2〜3段に整理し、役割（背景・罫線・本文）を固定します。色の「役割」を決めると、迷いが減り、作業が速くなるのです。

5分でできる色の棚卸しステップ

• Step1：主要な面を決める（ベースの白／薄グレーか、濃色ベースにするか）
• Step2：主役の色を1つ選ぶ（ロゴ色や写真の支配色から拾う）
• Step3：アクセントは真逆の属性に（明るさ・彩度・補色のいずれかで対比を作る）
• Step4：使用比率をざっくりメモ（ベース6〜7割、メイン2〜3割、アクセント1割）
• Step5：不要色を削除（似た色・役割がかぶる色をリストから外す）

写真・イラストがある場合の調整

写真が強い案件では、写真自体が色数を増やしてしまいます。そこで、UIや文字・罫線の色はよりミニマルに。写真の支配色を「メイン扱い」とみなし、UI側のメインは低彩度に寄せると喧嘩しません。逆にイラスト主体なら、イラストの線色をUIの文字色と揃え、色の「系統」を一つにまとめます。

ビジネス資料・LP・ポスターでの実践

ビジネス資料では、ベース：白、メイン：企業カラー、アクセント：補色に近い彩度高めの色で数値・結論を強調。
LPでは、CTAボタンだけ彩度を上げたアクセントで統一、周辺の装飾は彩度を落としてボタンに視線を集めます。
ポスターは視認距離が遠いので、面の大きさでメインを見せ、アクセントは最低限の点で効かせるのが◎。

配色ミスの典型例と回避策

• 彩度の暴走：全色が元気すぎると幼く見える。メイン以外の彩度を一段落とす。
• 同系色の乱立：ブルーが4種類など。近い色は統合、濃淡は役割で固定。
• 文字色が薄い：可読性は正義。本文は#222〜#333程度の濃度に。
• アクセントの使いすぎ：1割ルールを超えたら効果が薄れる。重要箇所だけに厳選。

まとめ

配色は足し算ではなく引き算です。3色構成と使用比率、写真との役割分担を決めるだけで、誰でも一貫性のあるビジュアルに到達できます。迷ったら、まず「数える→減らす→役割を固定」。これだけで仕上がりは見違えます。

© 2025 attonote All Rights Reserved.