この記事でわかること
バナー配色を3色に絞るだけで「なんとなくダサい」問題が解消できる理由がわかります。ベース70%・メイン25%・アクセント5%の比率でターゲット別に色を選ぶ実務基準を身につけられます。クライアント要望を3色に翻訳して修正ラウンドを1回減らす具体的な手順が手に入ります。
バナーの配色は3色に絞り、ベース70%・メイン25%・アクセント5%の比率で組むと、初心者でも一貫性のある垢抜けたデザインに仕上がります。この記事では色の役割分担から心理効果・ターゲット別配色まで実務ノウハウを体系的に解説します。
この記事の結論
バナー配色で最初にやるべきことは「色数を3色に絞る」ことです。ベース・メイン・アクセントの3役に色を割り当て、面積比70:25:5を守るだけで、感覚頼りのデザインから脱却できます。クライアント要望への対応も、この比率の枠組みに当てはめることで再現性が生まれます。
今日やるべき1つ
今使っているバナーデータを開き、使用している色を数えてください。4色以上あれば、最も使用頻度の低い色を削除して3色に絞る作業を行います（所要時間：5〜10分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 配色ルールの基本を知りたい | バナー配色は3色で決まる：役割と比率の基本 | 3分 |
| ターゲット層に合う色が分からない | バナー配色はターゲットで変わる：心理効果と色選びの基準 | 4分 |
| 自分の配色が正しいか診断したい | バナー配色の自己診断：3分で課題を特定 | 3分 |
| クライアント要望を色で再現したい | バナー配色の実例：成功と失敗の分岐点 | 4分 |
| 実務で使えるテクニックを知りたい | バナー配色は5つの仕組みで改善 | 5分 |
バナー配色は3色で決まる：役割と比率の基本
3色ルールを一度身につければ、「なんとなくまとまらない」という悩みのほとんどは解消できます。色を感覚的に選んで4色・5色と増やしてしまうことが、バナーがダサく見える最大の原因です。ベース・メイン・アクセントの3役に色を割り当てる基本から押さえてください。
ベースカラーは全体の70%を占める土台
ベースカラーとは、背景や余白など広い面積に使う色です。バナー全体の約70%を占めるため、ここで選ぶ色が「このバナーは明るい印象か、落ち着いた印象か」という全体のトーンを決定します（魅力的なバナー配色のコツと色の使い方｜アイルリス）。
白・オフホワイト・淡いグレーをベースに選ぶと、他の色が映えやすく初心者でも失敗しにくいです。ベースカラーで迷ったら「引き算の発想」で最も主張の少ない色を選んでください。メインとアクセントが自然に際立ちます。なお、見やすい配色は3色・比率70:25:5で決まる｜初心者でも実践できる5つのコツでもベースカラーの選び方をより詳しく解説しています。
メインカラーは全体の25%：文字と重要要素に使う
メインカラーは文字色や見出し、ブランドを象徴する色として全体の約25%を担います。ベースカラーに対してコントラストが生まれるよう選ぶことで、読者の視線を狙った箇所に誘導できます（魅力的なバナー配色のコツと色の使い方｜アイルリス）。
メインカラーはクライアントのブランドカラーをそのまま充てるケースが実務では最も多く、選定で迷う必要がない場合がほとんどです。ブランドカラーが複数ある場合は、バナーの目的に最も合う1色に絞ることが再現性の高い配色への近道です。
アクセントカラーは全体の5%：CTAに限定して使う
アクセントカラーは全体の5%という最小面積でありながら、バナーの中で最も強い視覚的インパクトを持ちます。ボタンやCTA（行動喚起）テキストに限定して使うことで、「どこをクリックすればいいか」を読者に瞬時に伝えられます（バナー配色の基礎知識と3色ルール｜ニンジャコード）。
アクセントカラーはベースとメインの両方から見て「補色または高コントラスト色」を選ぶと効果が最大化します。面積が5%しかないからこそ、ここは妥協せず最も目立つ色を選んでください。Webデザイン配色は3色70-25-5%で決まる｜初心者が今日から使える実践手順では、Webデザイン全般での3色比率の実践方法も解説しています。4
色数を4色以上に増やすとトーン統一が必須になる
4色以上を使う場面は、企業のブランドガイドラインに複数色が定められている場合などに限られます。このとき、各色のトーン（明度・彩度）を統一しないとデザインが散漫になります（バナー配色の基礎知識と3色ルール｜ニンジャコード）。
具体的には、全色を「ペールトーン（淡い）」または「ディープトーン（深み）」のどちらかに揃えると、4色以上でも一体感が生まれます。フリーランスが個人の判断で4色以上に増やす必要はほとんどなく、まず3色でバナーを完成させることを優先してください。
CHECK
▶ 今すぐやること：手元のバナーデータで使用色を3色に減らし、各色をベース・メイン・アクセントのいずれかに割り当てるラベル付けを行う（5分）
Q：ベースカラーとバックグラウンドカラーは同じ意味ですか？
A：はい、実務上はほぼ同義です。ベースカラーは「デザイン全体の土台となる色」を指し、背景に使うことが多いため「バックグラウンドカラー」と呼ばれることもあります。役割は「全体のトーンを決定すること」と覚えておくと混乱しません。
Q：3色ルールはどんなバナーにも適用できますか？
A：はい、商品バナー・イベントバナー・採用バナーなど、あらゆる種類のバナーに適用できます。特に初心者やデザインに迷いが生じやすい場面では、まず3色ルールから始めることで判断コストを大幅に削減できます。
バナー配色はターゲットで変わる：心理効果と色選びの基準
まずターゲットを言語化することが配色の第一歩です。色には心理的な意味があり、見る人の属性によって受け取り方が変わります。「なんとなくこの色が好き」という感覚だけで選んだ配色は、ターゲットに届かないことがあります。
主要5色の心理効果と適したバナー用途
青は涼しさ・信頼・冷静さを、緑は癒し・穏やかさ・自然を、赤は情熱・緊急性・エネルギーを、黄は明るさ・注目・楽観性を、紫は高級感・神秘・クリエイティブさをそれぞれ喚起します（バナー配色の基礎知識と3色ルール｜ニンジャコード）。
重要なのは「色の意味がバナーの目的と一致しているか」という視点です。緊急セール系のバナーに青を選ぶと購買意欲が上がりにくく、信頼・誠実さを訴求したいBtoBバナーに赤を多用すると企業イメージと乖離します。色の選定は審美眼だけでなく、目的との整合性で判断してください。
ターゲットの年齢・性別・ライフスタイルで配色が変わる
同じ「緑」でも、ターゲットが20代女性なら彩度の高いフレッシュグリーン、40代男性ビジネス層なら落ち着いたモスグリーンが適しています。バナー配色は色相だけでなく、トーン（彩度・明度）でターゲット層への訴求力が変わります（ECサイトバナーの配色パターンとフリーランス依頼メリット｜xデザイナー）。
クライアントのターゲットペルソナが定まっていない場合は、「競合サービスのバナーで使われている色のトーン」を観察してください。業界の標準的な配色から大きく外れないベースラインを設定した上で差別化する方法が現実的です。カラーパレットおしゃれ配色|3色・5色パターン15選とツール3選では、業種別の配色パターンを豊富に紹介しています。
無彩色との組み合わせでまとまり感を高める手法
白・グレー・黒などの無彩色は3色ルールの枠内に含めることで「主張がなく、他の色を引き立てる」役割を果たします。ベースカラーを白（無彩色）に設定し、メインとアクセントを有彩色2色にするだけで、視覚的にすっきりとした構成になります（デザインが垢抜ける！配色のコツ｜佐藤沙也佳）。
デザインが垢抜ける！配色のコツ｜佐藤沙也佳のユーザーは「なんかちょっとダサい？と思ったら、まず色数を3色に絞るのがオスメス。色を3つに絞るだけでバナーがぐんと垢抜けます。」と語っています。
無彩色をベースに置くのは「やらなくていい迷い」を減らす判断でもあります。ベースカラーで有彩色を使いたい場合でも、まず白ベースで完成形を作ってから後で差し替えると、比較判断が容易になります。
CHECK
▶ 今すぐやること：制作中のバナーターゲット像を「年齢層・性別・求めている感情（安心・興奮・信頼など）」の3項目で書き出し、上記の心理効果と照合して選ぶべき色相を1色絞る（7分）
Q：クライアントに「好きな色で作って」と言われたとき、どう対応しますか？
A：「どんな印象をターゲットに持ってほしいか」を先にヒアリングしてください。具体的には「落ち着いた印象か、活動的な印象か」を二択で聞き、その方向性から色相を選定するとクライアントの感覚と乖離しにくくなります。
Q：ECサイトのバナーで鉄板の配色はありますか？
A：食品・健康系は緑＋白、ファッション系は黒＋白＋ブランドカラー、セール・緊急訴求は赤＋黄がよく使われます。競合との差別化のためにアクセントカラーで個性を出すのが実務での定石です（ECサイトバナーの配色パターンとフリーランス依頼メリット｜xデザイナー）。
バナー配色の自己診断：3分で課題を特定
配色の問題がどこにあるかを把握しないまま修正を繰り返すのは、時間のロスです。以下の質問で自分の配色の課題を特定してください。現在制作中または過去に制作したバナーを1枚手元に用意してから始めると、診断結果がより正確になります。
Q1：そのバナーで使っている色は何色ですか？
4色以上ある場合 → Q2へ進んでください。色の多さが問題の根本原因である可能性が高いです。3色以下の場合 → Q3へ進んでください。
Q2：4色以上ある場合、それぞれの色のトーン（明るさ・鮮やかさ）は統一されていますか？
統一されていない（バラバラ） → まず1色削除して3色に絞り、残り3色のトーンを「ペールトーン」か「ディープトーン」のどちらかに揃えることが最優先です。Q3へ進んでください。統一されている → 色数よりも比率の問題である可能性があります。Q3へ進んでください。
Q3：3色それぞれにベース・メイン・アクセントの役割を割り当てていますか？
割り当てていない → Result Aです。割り当てている → Q4へ進んでください。
Q4：アクセントカラーはCTAボタンや最重要テキストにのみ使っていますか？
複数箇所に使っている → Result Bです。CTAのみに限定している → Result Cです。
Result A：色の役割分担が未設定
3色を選んでも役割がなければ、どこに何を使うか毎回迷うことになります。まず「最も広い面積の色＝ベース」「ブランド色＝メイン」「最も目立たせたい色＝アクセント」と手書きでメモして固定してください（所要時間：2分）。
Result B：アクセントカラーの過使用
アクセントカラーは「使いすぎると目立たなくなる」という逆説があります。CTA以外で使っている箇所を1か所ずつ削除し、メインカラーまたはベースカラーに置き換えてください（所要時間：5〜10分）。
Result C：基本は正しく実行できている
比率（70:25:5）が守れているかを数値で確認するステップに進んでください。デザインツール上で各色の面積をパーセンテージで計算し、アクセントカラーが全体の10%を超えていれば削減してください（所要時間：5分）。
CHECK
▶ 今すぐやること：上記の診断を手元のバナー1枚に対して実施し、Result A〜Cのいずれに該当するかを特定して対応を1つ実行する（3分）
Q：診断結果がResult Cだったのに、バナーがダサく見える場合は何が原因ですか？
A：配色は正しくても、フォントサイズや余白のバランスが崩れている場合があります。配色診断の後は「テキストの可読性」と「余白量の均一性」を別途チェックしてください。
Q：過去のバナーと現在のバナーで配色ルールが違う場合はどうすればいいですか？
A：クライアントごとに配色ルール（ベース・メイン・アクセントの色コード）を記録したカラーパレットシートを1枚作成しておくと、次回制作時にゼロから決め直す手間をなくせます（所要時間：初回のみ10分）。
バナー配色の実例：成功と失敗の分岐点
実際の制作現場でどのように配色の判断が分かれるかを、2つのケースで確認します。
ケース1（成功パターン）：クライアント要望「緑系・明るい・自由な印象」を3色で再現
フリーランスデザイナーがキャンペーンバナーの依頼を受けたケースです。クライアントの要望は「緑の配色で、フリーランスらしい自由で明るいキラキラしたイメージ」という抽象的なものでした。担当デザイナーは要望を「緑（有彩色）＋白（無彩色ベース）＋ゴールド系アクセント」に翻訳し、フレッシュグリーンをメインに、白ベースで清潔感を担保、ゴールドのCTAボタンで行動を促す3色構成で完成させました。デザインが垢抜ける！配色のコツ｜佐藤沙也佳のデザイナーは「ご希望の緑の配色でフリーランスの自由で明るいキラキラしたイメージを出しました。」と語っています。
この事例が成功した核心は「クライアントの言葉（緑・明るい・自由）を色の3役（メイン・ベース・アクセント）に変換する翻訳作業」を行ったことです。抽象的な形容詞をそのまま受け取らず、色の役割に落とし込む習慣が、クライアント満足度を高める直接の要因になります。もしここで4色・5色を感覚的に重ねていれば、納品後の修正対応が増えていた可能性が高いです。色の組み合わせおしゃれ見せ|3原則で失敗ゼロでは、色の組み合わせを体系的に学べます。
ケース2（失敗パターン）：色数を増やすほどバナーがまとまらなくなるケース
配色に迷ったとき、「色を足せばどこかがよくなるはず」という判断でどんどん色数を増やしてしまうことがあります。ところが、色を追加するほど視線が分散し、最終的にどこを見ればいいか分からないバナーが出来上がります。デザインが垢抜ける！配色のコツ｜佐藤沙也佳のユーザーは「なんかちょっとダサい？と思ったら、まず色数を3色に絞るのがオスメス。色を3つに絞るだけでバナーがぐんと垢抜けます。」と語っています。
このケースの失敗要因は「色を加える行為が問題解決になっているという誤認」です。色が多いほどバナーが豪華になるわけではなく、色数に比例してコントロールの難易度が上がります。最初から「ダサいと感じたら色を引く」というルールを持っていれば、修正のサイクルを短縮できます。
CHECK
▶ 今すぐやること：過去に修正が多かったバナーを1枚振り返り、色数が4色以上だったかどうかを確認する（2分）
Q：ケース1のように、クライアント要望を3色に翻訳する際のコツはありますか？
A：クライアントの形容詞（「明るい」「柔らかい」「力強い」）をトーン（明度・彩度）に変換し、次に色相を決める順番で進めると整理しやすくなります。「明るい＝高明度」「柔らかい＝低彩度」という変換表を手元に置いておくと即座に対応できます。
Q：成功事例のようなポートフォリオを作るには何から始めればいいですか？
A：既存の自分のバナーを3色ルールで再配色し、ビフォーアフターの形で整理してください。新しい案件を獲得しなくても、手元の素材で強みをアピールできるポートフォリオが作れます。
バナー配色は5つの仕組みで改善
バナー配色を毎回ゼロから考えるのは、フリーランスとして時間効率が悪いです。以下の5つを仕組みとして持つことで、判断コストを削減しながら品質を一定以上に保てます。
ハック1：カラーパレットシートの事前作成でクライアントごとに配色を固定
【対象】：複数クライアントを同時進行しているフリーランスデザイナー
【手順】：まず新規スプレッドシートを1枚作成し、クライアント名・ベース色コード・メイン色コード・アクセント色コードの4列を設ける（5分）。次に、既存クライアント分の色コードをデザインデータから抽出して入力する（クライアント1件あたり3分）。最後に、新規案件発生時はそのシートを最初に開いて色コードを確認することをルール化する（初回設定のみ、以降は参照するだけ）。
【コツと理由】：「案件ごとに一から配色を決める」のではなく「事前に固定したカラーパレットを参照するだけで制作を始められる」仕組みが判断疲労を防ぎます。配色の決定には認知的負荷がかかるため、毎回ゼロから判断すると一定の意思決定コストが発生します。パレットシートがあれば、そのコストを大幅に削減できます。
【注意点】：配色を完全に固定しすぎてバナーの目的（セール訴求か、ブランド認知か）を無視しないでください。アクセントカラーだけは目的別に変えてよいというルールにすると、固定の恩恵を受けながら柔軟性を保てます。
ハック2：補色ペアリングでアクセントカラーを迷いなく決定
【対象】：アクセントカラーを毎回感覚で決めていて、CTAの目立ち具合にムラが出ているフリーランス
【手順】：まずメインカラーの色相をカラーホイールで確認する（Adobe Colorなど無料ツールで30秒）。次に、そのメインカラーの反対側（色相差180度）の色をアクセントカラー候補として抽出する（1分）。最後に、候補色の彩度を少し下げてバナー上に実際に配置し、CTAボタンの視認性を確認して採用を決定する（3分）。
【コツと理由】：「メインカラーと似た色系統でアクセントを作る」とコントラストが不足してCTAが埋もれます。補色（反対色）を使うことで物理的に最大のコントラストが生まれ、アクセントカラーが全体の5%の面積でも目に飛び込む設計になります。Webアクセシビリティの国際基準（WCAG 2.1 AA）では、テキストと背景のコントラスト比が4.5:1以上であることが推奨されており、補色の活用はこの基準を満たしやすくする観点からも有効です（WCAG 2.1 達成基準 1.4.3｜W3C）。
【注意点】：補色をそのままの彩度で使うと色の主張が強くなりすぎる場合があります。彩度を70〜80%に落とすことでメインカラーとの調和が保たれます。彩度を50%以下にするとアクセントとしての役割を果たさなくなるため、その手前で止めてください。
ハック3：Figmaのスタイル機能で配色ミスを制作中に防止
【対象】：Figmaを使っているフリーランスで、色コードの入力ミスや色の重複が発生している人
【手順】：Figmaでプロジェクトを開き、右パネルの「ローカルスタイル」にベース・メイン・アクセントの3色を登録する（2分）。次に、バナー制作時はカラーピッカーではなくスタイルから色を選ぶ操作に変更する（設定後すぐに実行可能）。最後に、スタイル名を「#01_Base」「#02_Main」「#03_Accent」のように番号＋役割名で命名し、他のメンバーや将来の自分が見てもわかるように整理する（3分）。
【コツと理由】：カラーピッカーで直接色を選ぶと「似ているが微妙に違う色」が複数生まれやすい問題があります。スタイルに登録することで、選択できる色が3色だけに制限され、ミスが構造的に起きにくくなります。色の一貫性はデザインのプロらしさに直結し、クライアントへの説明（「この色はブランドカラーのXXです」）も即座にできるようになります。Figma AIデザイン完全ガイド｜7機能で作業時間を半減する方法では、Figmaの効率的な活用方法もあわせて参照できます。
【注意点】：スタイルを更新した場合、既存のバナーデータに自動反映される点に注意が必要です。大幅な色変更はテスト用のファイルで確認してから本番スタイルを更新してください。一方で、この自動反映は複数バナーを一括で色更新したいときには時短になる機能として積極的に活用できます。
ハック4：トーンマップで「明るさ・鮮やかさ」を先に固定してから色相を選ぶ
【対象】：色相は決まっているのに「なんとなく合わない」と感じるデザインになってしまうフリーランス
【手順】：制作前に「このバナーはペールトーン（淡い・穏やか）かビビッドトーン（鮮やか・力強い）か」を先に決める（1分）。次に、選んだトーンの明度・彩度の範囲内で3色すべてを選定する。ペールトーンならHSLのSaturation（彩度）を20〜40%、Lightness（明度）を75〜90%の範囲内に収める（3分）。最後に、アクセントカラーだけは彩度を他の2色より10〜20%高めに設定し、役割差をつける（1分）。
【コツと理由】：初心者は「色相」ばかりに注目しますが、デザインの統一感は実際には「トーンの一致」によって生まれます。同じ緑でも彩度90%と彩度30%では別物の印象を与えるため、色相だけ合わせてもバラバラに見えます。トーンを先に固定する設計にすることで、どの色を選んでも外れにくくなります。
【注意点】：トーンを統一しすぎると3色の区別が見えにくくなります。アクセントカラーだけは意図的にトーンを外すことが必要で、「全色を完全に同一トーンに揃える必要はない」という点を意識してください。
ハック5：バナー制作前の「色方針メモ」で修正ラウンドを1回減らす
【対象】：クライアントとの修正対応に時間が取られているフリーランスデザイナー
【手順】：案件受注直後に「色方針メモ」を1枚（テキスト形式）作成する（5分）。内容は「ベース：白（無彩色・清潔感）／メイン：ネイビー（信頼・誠実）／アクセント：オレンジ（行動促進）」のように色名＋役割＋選んだ理由の3点セットで記述する。完成後、このメモをクライアントに共有して配色方針を事前承認してもらい、制作を開始する。
【コツと理由】：「完成バナーを見せてフィードバックをもらう」進め方は一般的ですが、色方針を事前に言語化・共有することで修正対応が減ります。バナーを見た後の「なんか色が違う」フィードバックの多くは、配色の意図が伝わっていないことが原因です。方針を言語化しておくと、修正指示も「アクセントを赤系に変更」のように具体的になり、対応速度が上がります。
【注意点】：色方針メモを作成しても、クライアントが確認せずに制作を進めてしまうケースがあります。「このメモを確認いただいた後、制作を開始します」と明示することがメモを機能させる前提です。メモなしで制作を始めることは避けてください。
CHECK
▶ 今すぐやること：上記5つのハックのうち、今の自分に最も当てはまるものを1つ選び、【手順】のSTEP1だけを今すぐ実行する（5〜10分）
Q：カラーパレットシートはExcelとスプレッドシートのどちらで作るのが良いですか？
A：クライアントと共有する可能性がある場合はGoogleスプレッドシートが便利です。自分専用であればどちらでも機能します。色コードのほかに「使用バナー名」と「作成日」を列に加えると、後から参照するときに検索しやすくなります。
Q：Figmaを使っていない場合、スタイル管理に代わる方法はありますか？
A：Adobe XDにも「アセット」としてカラーを登録する機能があります。PhotoshopやIllustratorを使っている場合は「スウォッチ」として3色を保存し、毎回スウォッチから選ぶルールにするだけで同等の効果を得られます。
バナー配色は3色の比率で決まる
バナー配色の核心は「3色を決めて比率を守る」という1つのルールに集約されます。ベースに70%・メインに25%・アクセントに5%を割り当て、各色に役割を与えることで、感覚頼りのデザインを再現性のある制作プロセスに変えられます。ターゲットの属性と色の心理効果を照合して色相を選び、トーンを統一すれば完成度は大きく上がります。
今日、手元のバナー1枚を3色に整理することから始めてください。それだけで「なんとなくダサい」という状態から確実に1歩前進できます。配色組み合わせは3色・70:25:5比率で決まる｜初心者向け実践パターン20選では、さらに多くの実践パターンを参照できます。
| 状況 | 次の一歩 | 所要時間 |
| 配色ルールをまだ使っていない | 手元のバナーで色数を数え、3色に絞る | 5〜10分 |
| 3色は決まっているが比率が曖昧 | 各色の面積をパーセンテージで計算し70:25:5に調整 | 10分 |
| クライアント案件で配色に迷っている | 色方針メモを1枚作成してクライアントに事前共有 | 5分 |
| ツールで配色を管理したい | Figmaのローカルスタイルに3色を登録 | 2〜5分 |
バナー配色に関するよくある質問
Q：バナーの配色で一番よくある失敗は何ですか？
A：最も多いのは「色数の過多」です。4色・5色と増やすほど視線が分散し、どこを見ればいいかわからないバナーになります。まず3色に絞るだけで、他の要素を変えなくてもバナーの完成度が上がる場合がほとんどです（バナー配色の基礎知識と3色ルール｜ニンジャコード）。
Q：アクセントカラーを複数の場所で使っても大丈夫ですか？
A：いいえ、避けてください。アクセントカラーはCTAボタンなど最重要要素に限定するのが原則で、複数箇所で使うと「どこが一番重要か」が読者に伝わらなくなります。使用箇所は1〜2か所に絞るのが実務の定石です（魅力的なバナー配色のコツと色の使い方｜アイルリス）。
Q：配色を決めるための無料ツールはありますか？
A：Adobe Colorは色相環をインタラクティブに操作できる無料ツールで、補色や類似色の選定に役立ちます。Coolorsはランダムな配色提案を素早く確認したいときに便利です。どちらもブラウザから利用でき、アカウント登録なしで使用できます。
