デザインの配色のコツ｜基本ルールとAIに配色案を出させる手順 | デザナビ

※本記事にはアフィリエイトリンク（PR）が含まれる場合があります。

「なんとなく色を置いたら、全体がぼやけた」「色を足すほど散らかって見える」。配色は感覚の問題に見えて、つまずきやすいところです。でも実際には、配色には再現できる考え方がいくつもあります。

この記事では、まず配色の基本ルールを整理します。次に、AI（ChatGPTなどの対話型AI）に配色案を複数出させて、その中から選び取る進め方を紹介します。最後に、選んだ配色を自分で検証するチェック項目もまとめます。

センスを待つのではなく、ルールと手順で決められるようにするのがこの記事のねらいです。

配色がうまくいかない原因は「決める順番」がないこと
配色の基本ルール4つ
AIに配色案を出させる手順
AIの配色案を使うときの注意点
配色を決めたあとのチェックリスト
まとめ

配色がうまくいかない原因は「決める順番」がないこと

初心者のうちは、好きな色から並べ始めてしまいがちです。すると後から「文字が読みにくい」「ボタンが目立たない」という問題が出て、最初に戻ることになります。

うまくいかない典型的なパターンを挙げます。

色数が多すぎて、どこを見ればいいか分からない
明るさ（明度）が似た色同士を隣に置いて、境目がぼやける
目立たせたい部分と背景のコントラストが足りない
色のトーン（鮮やかさの度合い）がそろっていなくて、浮いた色がある

共通しているのは、色を「選ぶ」前に「役割を決める」工程が抜けていることです。先に役割を決めておけば、色選びは選択肢を絞る作業になります。

配色の基本ルール4つ

覚えることを増やしすぎないために、まずは4つに絞ります。

1. 色に役割を割り振る（ベース・メイン・アクセント）

配色でいちばん効く考え方です。色を「何色使うか」ではなく「どの役割に何を使うか」で考えます。

ベースカラー：背景など、面積がいちばん広い色。白やごく薄いグレーなど、主張しない色が扱いやすい
メインカラー：そのデザインの印象を決める色。ロゴや見出し、帯に使う
アクセントカラー：いちばん目立たせたい一点に使う色。ボタンや「ここを押してほしい」という場所

面積の比率は、ベースを大きく、メインを中くらい、アクセントをごく小さくするとまとまります。よく「70：25：5」のような目安が紹介されますが、数字を厳密に守る必要はありません。アクセントだけは思っているより狭くする、と覚えておくほうが実用的です。

アクセントを広く使うと、目立たせたいものが目立たなくなります。全部が主役になると、主役がいなくなるからです。

2. 色数は3色前後から始める

色を増やすと表現が広がる気がしますが、実際はまとまりが崩れやすくなります。最初は次の構成を基本にすると安定します。

ベース：1色
メイン：1色
アクセント：1色
文字色：濃いグレーか黒に近い色（これは色数に数えなくてよい）

物足りないと感じたときは、新しい色を足すのではなく、同じ色の明るさを変えて使うのがおすすめです。メインカラーの薄い版を背景に、濃い版を見出しに使えば、色数を増やさず変化が作れます。

3. 明度差でメリハリをつける

「色の違い」よりも「明るさの違い」のほうが、見やすさに直結します。鮮やかな色同士を並べても、明るさが近いと境目がぼやけて見えます。

文字と背景は、明るさの差をしっかり取る
薄い色の背景には、濃い文字を置く
画像の上に文字を置くときは、暗く（または明るく）かぶせる層を挟む

自分の配色を確認したいときは、画面をグレースケール（白黒）にして見る方法が手軽です。白黒にして文字やボタンが沈んで見えるなら、明度差が足りていません。色相を変えるのではなく、明るさを調整して直します。

4. トーンをそろえる

トーンとは、鮮やかさと明るさの組み合わせで決まる色の雰囲気のことです。くすんだ色でまとめる、明るくやわらかい色でまとめる、鮮やかな色でまとめる、といった方向性です。

トーンがばらつくと、1色だけ浮いて見えます。よくあるのが、落ち着いた色でまとめた中に、鮮やかな原色のボタンを置いてしまうケースです。この場合、ボタンの色自体が悪いのではなく、周りとトーンが合っていないことが原因です。

ただし、アクセントカラーだけはあえて少し浮かせるのが有効です。目立たせるための色なので、周りとなじみすぎると役割を果たしません。「ベースとメインはトーンをそろえ、アクセントは差をつける」と整理しておくと迷いにくくなります。

AIに配色案を出させる手順

基本ルールが分かっても、実際の色を決める段階では手が止まります。ここでAIを使うと、案を出す時間を短縮できます。

ポイントは、AIに決めさせるのではなく、選択肢を広く出させて自分で選ぶという使い方です。

ステップ1：条件を言葉にする

AIに頼む前に、自分の条件を整理します。これが曖昧だと、出てくる案も曖昧になります。

何を作るのか（LP、SNS画像、資料、サイトなど）
誰に向けたものか（年齢層、性別、業種など）
どんな印象にしたいか（信頼感、親しみ、高級感、軽やかさなど）
外せない色があるか（ブランドカラーやロゴの色など）
文字の量が多いか少ないか

ステップ2：複数案をまとめて出させる

指示するときは、役割ごとに分けて答えさせるのがコツです。たとえば次のような頼み方です。

「ベース・メイン・アクセントの3つの役割に分けて、配色案を5つ出してください」
「それぞれカラーコードと、どんな印象になるかの説明を付けてください」
「アクセントは背景とのコントラストが十分になるようにしてください」

1案だけ出させると、良いか悪いか判断できません。5案ほど並べると比較できるので、選ぶ判断がしやすくなります。

ステップ3：「なぜその色か」を説明させる

ここが学習につながる部分です。カラーコードだけもらっても、次に応用できません。

「各案で、メインカラーを選んだ理由を説明してください」
「この案が向いている業種と、向かない業種を挙げてください」
「初心者がやりがちな失敗の観点から、この案の弱点を指摘してください」

理由を言語化させると、自分の中に判断基準が残ります。AIの出力をそのまま使うより、理由の部分を読んで自分の引き出しにするほうが長く役に立ちます。

運営者も、AIツールにデザインを評価させて「なぜ良いのか、なぜ良くないのか」を言語化させる形で学習を続けています。配色も同じやり方が使えます。

ステップ4：修正指示で絞り込む

出てきた案がぴったり合うことは少ないので、方向を指定して直してもらいます。

「3案目をベースに、もう少し落ち着いた印象に調整してください」
「アクセントカラーだけ、もっとはっきり目立つ色に変えた案を3つください」
「文字色とベースカラーの明度差を上げた版にしてください」

「もっと良くして」ではなく、変えたい軸を1つに絞ると精度が上がります。鮮やかさ、明るさ、暖かさ・冷たさのどれを動かしたいのか言葉にしてみてください。

ステップ5：実際の画面に当てて確認する

色の組み合わせだけ見ているときと、実物に当てたときでは印象が変わります。面積が変わると見え方が変わるからです。

CanvaやPhotoshopなどのツールで、実際のレイアウトに色を置いて確認します。色だけの小さな四角で見て良かった配色が、広い面積に広げると強すぎることはよくあります。

AIの配色案を使うときの注意点

便利な一方で、そのまま使うと失敗しやすい部分もあります。

カラーコードの正確さは保証されない：AIは色を目で見ているわけではないので、指定した印象とずれたコードが出ることがあります。必ず自分の目で確認してください
コントラストは自分で検証する：「読みやすくして」と頼んでも、実際に読みやすいかはツールや自分の目でのチェックが必要です
ブランドの決まりが優先：すでに指定色があるなら、AI案よりそちらが優先です
案に引っ張られすぎない：出された案の中から選ぶと、その枠の外を考えなくなります。ときどき自分で一から組んでみると練習になります
似た案ばかり出ることがある：条件を変えずに出し直すと傾向が偏ります。印象の言葉を変えて頼み直すと幅が出ます