この記事でわかること
配色で失敗する9割の原因は「色を増やしすぎること」で、3色に絞るだけで解決します。カラーコード付きパターン20選をそのままコピーして即使えます。Adobe Colorで10分あれば、今日使えるパレットが完成します。
配色の組み合わせは3色以内に絞り、70:25:5の比率を守るだけでプロの仕上がりになります。色相環の基本ルールを押さえれば、1,677万色の選択肢も怖くありません。この記事では理論から即使えるカラーコード付きパターン20選まで解説します。
この記事の結論
配色で失敗する最大の原因は「色を増やしすぎること」です。ベースカラー・メインカラー・アクセントカラーの3色に役割を持たせ、面積比を70:25:5に固定するだけで、センス不要で統一感のあるデザインが完成します。色相環でメインカラーを決めてから、隣接色をベース、反対色をアクセントに割り当てる順番を守れば、組み合わせに迷わなくなります。
今日やるべき1つ
今使っているデザインのメインカラーを1色だけ決め、色相環ツール（Adobe Color）で隣接色3色を自動生成して70:25:5比率に当てはめてください（所要時間：10分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 配色の基本ルールをまず知りたい | 配色組み合わせは3色・3役割で整理 | 3分 |
| すぐ使えるパターンが欲しい | 配色パターンはテーマ別20選で即活用 | 5分 |
| 自分の状況に合った配色を診断したい | 配色の方向性を3分で診断 | 3分 |
| 実際の成功・失敗事例を知りたい | 配色は2パターンの実例で学ぶ | 4分 |
| 実践テクニックをすぐ使いたい | 配色は5つの仕組みで解決 | 7分 |
配色組み合わせは3色・3役割で整理
色の役割を3つに分けることで、1,677万色の選択肢が一気に整理されます。役割の区分けこそが、配色判断を速くする最初の一手です。
3色の役割はベース・メイン・アクセント
配色の基本は、すべての色に役割を持たせることです。ベースカラーは背景や余白に使う主役の土台で、白・オフホワイト・薄いグレーが典型的な選択肢です。メインカラーはブランドや印象を決定づける色で、ロゴ・見出し・ボタンなどに使います。アクセントカラーは画面全体の5%以下に抑える差し色で、強調したい一点にだけ使う色です。
この3役割を混同するとデザインが散漫になります。アクセントカラーを面積の30%以上に使うと、強調したいポイントが消え、視線が定まらない仕上がりになります。「どの色が主役か」を最初に決めることが、配色判断のすべての起点です。デザイン制作の現場では、画像トリミングや背景処理などの作業効率化と並んで、配色の役割設計がクオリティを左右します。
面積比は70:25:5が崩れると印象が変わる
ベース70%・メイン25%・アクセント5%という比率は、感覚ではなく視覚的安定性の観点から導き出されたルールです（配色デザインのコツ7選｜321web.link）。ベースが70%を下回ると視覚的なうるささが増し、アクセントが10%を超えると強調効果が薄れます。
この比率を「固定ルール」として扱ってください。デザインに迷ったとき、比率に戻るだけで判断が早くなります。WebデザインでもチラシでもプレゼンでもどのMediaでも共通して機能するルールです。
清色と混色は混ぜると違和感が生まれる
清色（鮮やかな純粋な色）と混色（グレーが混じったくすみカラー）を同一デザインに混在させると、色調の統一感が崩れます（配色ルール7選｜dezasuta.com）。ビビッドな赤とくすんだオリーブグリーンを組み合わせると、片方が「浮いて」見える現象がこれに当たります。
清色同士ならポップ・エネルギッシュな印象、混色同士なら落ち着いたナチュラル・エレガントな印象で統一されます。「おしゃれに見えない」と感じる原因の多くは補色選びではなく、清色と混色の混在にあります。手書きかわいいイラストを活用したデザインでも、色調の統一はまず清色か混色かを揃えることから始まります。
純粋な黒・白・原色は避けた方が仕上がりが美しい
真っ黒（#000000）や純白（#FFFFFF）、RGBの原色（#FF0000など）は、印刷物やスクリーンで「浮く」ため、プロのデザイナーはほぼ使いません。黒の代わりに#1A1A2E（ダークネイビー）、白の代わりに#F8F8F2（オフホワイト）を使うだけで、柔らかく洗練された印象に変わります。
カラーピッカーで「0」や「255」を入力するのは避けてください。わずか10〜20の誤差でも、仕上がりの印象が大きく変わります。
CHECK
▶ 今すぐやること: 今使っているデザインのメインカラーを1色書き出し、清色か混色かを判定する（3分）
よくある質問
Q: ベースカラーは必ず白やグレーでないといけませんか？
A： いいえ、必須ではありません。ただし初心者の場合は白・オフホワイト・薄いグレーをベースにすることで失敗が格段に減ります。ブランドカラーが強い場合は、そのカラーの明度を80%以上に上げた版をベースとして使う方法もあります。
Q： 70:25:5の比率はモバイルデザインでも同じですか？
A： はい、基本は同じです。ただしモバイルでは画面面積が小さいため、アクセントカラーのボタンが5%でも視覚的に大きく見えます。比率の考え方は維持しつつ、アクセントの使用箇所を1〜2か所に限定すると安定します。
配色パターンはテーマ別20選で即活用
以下はテーマ別にカラーコードを明記したパターンです。コピーしてそのまま使えます。
ナチュラル系5パターン
ナチュラルテーマは、自然素材・オーガニック・リラックスを訴求する場面に向いています。清色ではなく混色（くすみカラー）で統一することが鍵です。
| パターン | ベース(70%) | メイン(25%) | アクセント(5%) | 印象 |
| アースベージュ | #F5F0E8 | #A8896C | #6B8E6B | 温かみ・土感 |
| モスグリーン | #EFF2EC | #7A9E7E | #C4955A | 森・オーガニック |
| ウォームサンド | #F7F2EA | #C4A882 | #8B6F5E | ナチュラル高級感 |
| ダスティローズ | #F5EFEE | #C4897D | #8A7D72 | 女性・柔らか |
| ライトオリーブ | #F0F2E8 | #8E9E6B | #C49A4A | 清潔・薬草系 |
これら5パターンはすべて混色系で統一されているため、相互に組み合わせても違和感が生じません。ナチュラル系の複数ページを持つWebサイトでも、パレットを使い回せるという実務上のメリットがあります。
ポップ系5パターン
ポップテーマはビビッドカラー（清色）の組み合わせが基本です（配色パターン100選｜Canva）。チラシ・SNS投稿・子ども向けコンテンツで効果的です。フリーアイコン素材を組み合わせる際も、ポップ系パレットを使えば素材のトーンと一体化しやすくなります。
| パターン | ベース(70%) | メイン(25%) | アクセント(5%) | 印象 |
| ビビッドトリオ | #FFFDE7 | #FF6B9D | #4FC3F7 | 元気・若々しい |
| レトロポップ | #FFF8E1 | #FF8A65 | #AB47BC | 70年代・ノスタルジー |
| フレッシュシトラス | #F9FBE7 | #CDDC39 | #FF7043 | 夏・スポーティ |
| ネオンアクセント | #F3E5F5 | #E91E63 | #76FF03 | デジタル・ゲーム |
| マルチビビッド | #E8F5E9 | #FF5252 | #FFD740 | エンタメ・子ども |
ポップ系でよくある失敗は、ベースカラーもビビッドにしてしまうことです。ベースは必ず淡い色（彩度20%以下）に抑えてください。
エレガント系5パターン
エレガントテーマは、低彩度・高明度のカラーと深みのあるダークカラーの組み合わせが基本です。ブランディング・ラグジュアリー商品・ウェディング系に向いています。
| パターン | ベース(70%) | メイン(25%) | アクセント(5%) | 印象 |
| ネイビー×ゴールド | #F8F8F2 | #1A2B5C | #C9A84C | クラシック・格調 |
| シャンパンホワイト | #FDFCF8 | #B8A99A | #8B7355 | 上品・ブライダル |
| ダークエメラルド | #F0F4F4 | #1B4D3E | #C9A84C | 高級感・深み |
| パウダーブルー | #F0F4F8 | #5B7FA6 | #C4935A | 品格・信頼 |
| モノクロームグレー | #F5F5F5 | #424242 | #C4A000 | ミニマル・洗練 |
ネイビー+ゴールドの組み合わせは、色相環上の補色関係ではなくコントラスト比（明度差）で成立しています。明度差が大きいと自然と視線の階層が生まれるため、「なぜか上品に見える」仕上がりになります。
クール系5パターン
クールテーマはテクノロジー・ビジネス・信頼感を訴求する場面に向いています。青系・無彩色の組み合わせが中心です（デザインセンス0でも使える配色30選｜design-ac.net）。ポートフォリオサイトや提案書など、クライアントへの信頼感を訴求するデザインにはクール系パレットが特に効果を発揮します。
| パターン | ベース(70%) | メイン(25%) | アクセント(5%) | 印象 |
| テックブルー | #F0F4F8 | #1565C0 | #00B0FF | IT・信頼 |
| ミッドナイト | #F5F5F5 | #263238 | #546E7A | プロフェッショナル |
| アクアフレッシュ | #E8F8F5 | #00796B | #0288D1 | 爽快・医療系 |
| スレートグレー | #F9F9F9 | #455A64 | #78909C | 落ち着き・ビジネス |
| ディープパープル | #F5F0FF | #4527A0 | #00BCD4 | 革新・クリエイティブ |
CHECK
▶ 今すぐやること: 上記20パターンから自分のテーマに近い1つを選び、カラーコードをコピーして実際のデザインツールに貼り付ける（5分）
よくある質問
Q: カラーコードを入力するツールはどれを使えばいいですか？
A： ブラウザで使えるAdobe Color、Canvaのカラーピッカー、またはFigmaのプロパティパネルで直接HEXコードを入力できます。いずれも無料で利用可能です。
Q： 同じパターン内のカラーコードをアレンジしたい場合はどうすればいいですか？
A： メインカラーのHEXコードをAdobe Colorに入力し、「類似色」モードで隣接する色を確認してください。彩度と明度を±10%以内で動かす範囲なら、テーマの印象を維持したまま微調整できます。
配色の方向性を3分で診断
以下の質問に答えると、3分で配色の方向性が決まります。
Q1: デザインのターゲットは誰ですか？
一般消費者（BtoC）の場合はQ2へ進んでください。企業・ビジネス向け（BtoB）の場合はResult Cへ進んでください。
Q2: ブランドが伝えたいイメージはどちらに近いですか？
温かみ・親しみやすさ・自然感の場合はQ3へ進んでください。元気・楽しさ・若々しさの場合はResult Bへ進んでください。
Q3: 価格帯やポジショニングはどちらですか？
高価格・高品質・プレミアムの場合はResult Dへ進んでください。日常使い・カジュアル・親近感の場合はResult Aへ進んでください。**
Result A: ナチュラル系を選択上記テーブルのナチュラル系5パターンから始めてください。アースベージュかモスグリーンが最初の一歩として汎用性が高く、失敗が少ない組み合わせです。
Result B: ポップ系を選択ビビッドトリオまたはフレッシュシトラスを試してください。ベースを淡色に固定することで、どんなビビッドカラーを当てても崩れない基盤を作れます。
Result C: クール系を選択テックブルーまたはスレートグレーが汎用性の高い出発点です。BtoBサービスでは信頼感を最優先にするため、アクセントカラーは面積比3%以下で使うとより効果的です。
Result D: エレガント系を選択**ネイビー×ゴールドまたはダークエメラルドをベースに検討してください。エレガント系はフォントとの相性が重要で、明朝体・セリフ系フォントと組み合わせると一体感が出ます。日本語フォント無料おすすめ12選では、エレガント系に合う明朝体フォントも紹介しています。
CHECK
▶ 今すぐやること: 診断のResult確認後、対応するパターンのカラーコード3色をメモし、実際のデザインに当てはめてみる（3分）
よくある質問
Q: 複数のターゲットに向けたデザインの場合、どうすればいいですか？
A： 最も重要なコアターゲット1人を想定して配色を決めてください。「全員向け」の配色を狙うと、結果として誰にも刺さらない印象の薄い仕上がりになります。
Q： 診断でナチュラルと出たが、ブランドカラーが既に青の場合は？
A： 既存ブランドカラーがある場合は、そのカラーのトーンを診断結果のテーマに寄せることを検討してください。青でも彩度を下げてくすみカラーにすれば、ナチュラル系の文脈で使えます。
配色は2パターンの実例で学ぶ
配色の成否は、実例から学ぶことで理解が定着します。以下の2ケースは、同じ素材を使いながら配色の選択だけで結果が変わった事例です。
ケース1（成功パターン）: テーマを先に決めて3色に絞り込む
あるデザイナーが飲食店のメニューデザインを受注した際、最初に「温かみのある日常使い」というテーマキーワードを設定し、ナチュラル系のアースベージュパレット（#F5F0E8・#A8896C・#6B8E6B）の3色のみを使用しました。追加の色要求があってもパレットを変えず、明度の違いで対応した結果、クライアントから「プロらしい統一感がある」と評価されたとされています。
3色に絞ったことで作業中の判断が減り、修正サイクルも短縮されました（配色パターン100選｜Canva）。途中で「もう少し変化が欲しい」という理由で4色目を追加していれば、統一感が崩れてやり直しが発生していた可能性があります。
ケース2（失敗パターン）: 色を増やして印象が分散する
別のケースでは、ポップ系のSNSバナーを制作する際に「元気さを出したい」という理由でビビッドカラーを5色以上使ったところ、各色がアクセントとして機能しようとするため、視線がどこへ向かえばいいか定まらず、成果が目標を大きく下回ることがあります。
「色をたくさん使えばにぎやかになる」という認識が、「何も目立たない状態」を生む典型的なパターンです（配色理論実践21選｜quoitworks.com）。最初から3色・70:25:5のルールを適用していれば、強調したいCTAボタンがアクセントカラーとして際立ち、クリック率の改善につながった可能性があります。
CHECK
▶ 今すぐやること: 手元の既存デザインで使っている色の数を数える。4色以上あれば、最もインパクトが薄い色を1つ削る検討を始める（5分）
よくある質問
Q: 既存デザインの色数を減らす場合、どの色から削ればいいですか？
A： 使用面積が最も小さい色を1つ残してすべて削り、その1色をアクセントカラーとして再定義することをおすすめします。面積の大きい色から削ると全体の印象が大きく変わるため、調整に時間がかかります。
配色は5つの仕組みで解決
「理論はわかったが、実務で手が動かない」という状態を解消するため、明日から使える5つの具体的な手順を示します。
ハック1: 色相環の60度ルールでメインカラーを3秒で決定
【対象】: 「どの色を選べばいいか」で毎回1時間以上悩んでいるデザイン初心者
【手順】:
Adobe Colorを開きます（30秒）。「類似色」モードを選択し、ブランドイメージに近い色相に中心点をドラッグします（2分）。生成された3色のうち、最も明度が高い色をベースに、中間をメインに、最も彩度が高い色をアクセントに割り当てます（2分）。3色のHEXコードをコピーしてデザインツールに貼り付けて確認します（1分）。
【コツと理由】: 多くの人は「自分の感覚でメインカラーを決めてからサブを探す」という順番を取りますが、色相環ツールを先に使い「関係性が決まった状態」から選び始めると、選んだ時点で調和が保証されます。色相環60度以内の類似色は人間の目が自然に「なじんでいる」と認識しやすい範囲であり、ツールがこの関係を自動で担保します。
【注意点】: 色相環ツールで生成した色をそのままの明度・彩度で使う必要はありません。生成後に明度を調整することが前提です。ツールの出力は「最終形」ではなく「関係性の参照」として使ってください。
ハック2: 同一色相の明度3段階展開で2色をリッチに見せる
【対象】: 2色しか使えない制約があるのに「単調で物足りない」と感じているデザイナー
【手順】:
メインカラーを1色決めます（例: #1A2B5C）（1分）。同じ色相（Hue値）を維持したまま、明度（Lightness）を+30%した色と-20%した色を作ります（配色ルール7選｜dezasuta.com参照）（3分）。元の色・明色・暗色の3つを70:25:5の比率で配置します（3分）。補色を一切使わず、明度差だけでコントラストを作れているか確認します（1分）。
【コツと理由】: 実務では同一色相内の明度展開の方がまとまりやすく、修正も少なくなります。人間の視覚は「同じ色が濃くなった・薄くなった」という変化を「統一感の中にある奥行き」として認識します。異色相を追加すると「組み合わせの妥当性」を毎回検証する手間が発生しますが、明度展開では色相の統一が自動的に担保されます。
【注意点】: 明度差が小さいと背景と文字のコントラスト比がアクセシビリティ基準（WCAG 2.1のAA基準：通常テキストでコントラスト比4.5:1以上）を下回る場合があります。「雰囲気でなんとなく明度を変える」のではなく、必ず数値で確認してください。
ハック3: テーマキーワード先行で配色候補を5色以内に絞る
【対象】: デザインの方向性が決まらず、カラーピッカーを延々と動かしてしまう初心者
【手順】:
ブランドやコンテンツのテーマキーワードを3語書き出します（例:「清潔・信頼・爽快」）（2分）。各キーワードに連想される色を1色ずつ書き出し、3色の候補を得ます（3分）。3色のうち最もブランドイメージに近い1色をメインカラーに決定します（1分）。ハック1のAdobe Colorで決定したメインカラーを入力し、類似色を確認して最終パレットを確定します（3分）。
【コツと理由】: 画像や参考デザインを見ながら「なんとなくいい色」を拾うアプローチは「好き嫌い」の判断に流れやすく、ターゲットや目的と切り離されてしまいます。キーワードを先に言語化すると「この色はターゲットに刺さるか」という客観的な検証基準が生まれ、クライアントへの説明根拠としても機能します（配色デザインのコツ7選｜321web.link）。提案書の書き方においても、配色の根拠を言語化しておくことがクライアントへの説得力を高めます。
【注意点】: キーワードから直接「赤→#FF0000」のように純色に飛ばないでください。キーワードから色相（色の方向性）だけを決め、明度・彩度は必ず後から調整する手順を守ることで、清色・混色の混在ミスを防げます。
ハック4: 補色ペアを「7:3」の面積比で使いコントラストを制御する
【対象】: 補色を使いたいが「ケンカして見える」と感じてうまく使えないデザイナー
【手順】:
色相環で選んだメインカラーの反対色（180度）を確認します（1分）。反対色をアクセントカラーとして面積比5%以下に限定します（2分）。メインカラー側の面積を7割以上確保し、補色側の面積を3割以下に抑えます（2分）。補色側の彩度をメインカラーよりも10〜20%下げてトーンを合わせ、「主役vs脇役」の関係を明確にします（3分）。
【コツと理由】: 補色の役割は「差し色」であり、9:1の面積比でも十分なコントラスト効果を発揮します。面積の非対称性が「視線の階層」を生み出し、読者の目が自然にメインカラーから補色の順番で動く設計になります（配色理論実践21選｜quoitworks.com）。
【注意点】: ダブルコンプレメンタリー（補色ペアを2組使う4色パレット）は上級技法です。1組の補色関係を完全にコントロールできるようになってから試してください。
ハック5: 既存デザインの「色数カウント」から改善点を特定する
【対象】: 既存のデザインが「なんとなくおしゃれじゃない」と感じているが原因がわからない方
【手順】:
既存デザイン（Webサイト・バナー・資料）のスクリーンショットを撮ります（1分）。デザインツールのカラーピッカーで使用中の色を1つずつ抽出し、使用色リストを作ります（5分）。リストの色数を確認し、4色以上あれば面積の小さいものから削る候補を選びます（3分）。削る候補の色を、既存のアクセントカラーに置き換えるか、ベースカラーの明度違いに統合します（5分）。
【コツと理由】: 「足りない部分を追加する」改善アプローチより「引く」改善の方が効果的です。色を1つ削るだけで残りの色の「役割」が明確になり、70:25:5の比率が自然に成立します。「色が多い＝役割が曖昧な色が存在する」という解釈が正確であり、削ることで解決します（HP配色コツ・70:25:5法則｜hitotsunagi.co.jp）。画像圧縮で画質を落とさない方法と同様に、「減らす視点」は制作物のクオリティを上げる普遍的な考え方です。
【注意点】: 削る色を「完全に使わない」のではなく、「同一色相の明度違い」に変換して統合するのが実務的な対応です。まずテスト用コピーに対して削る実験を行ってください。
CHECK
▶ 今すぐやること: 手元のデザインツールを開き、ハック1のAdobe Colorで今日使うパレットの3色を生成し、HEXコードをメモする（10分）
よくある質問
Q: 色相環のどのモード（類似色・補色・トライアド）を最初に使えばいいですか？
A： 初心者には「類似色」モードから始めてください。色相環上で60度以内の隣接した色を組み合わせるため、自動的に統一感が保証されます。補色やトライアドは類似色で3色パレットを作れるようになってから試してください。
Q： パレット生成ツールはAdobe Color以外にもありますか？
A： Coolors、Paletton、Canvaのブランドキット機能でも同様のパレット生成が可能です。いずれも無料で利用できます。
配色組み合わせに関するよくある質問
Q: 配色の組み合わせでおしゃれに見えない原因は何ですか？
A： 最も多い原因は「色数が多すぎる（4色以上）」と「清色と混色が混在している」の2点です。まず使用色を3色以内に絞り、清色同士か混色同士に統一するだけで印象が大きく変わります。
Q： 初心者が最初に覚えるべき配色ルールはどれですか？
A： 70:25:5の比率と「ベース・メイン・アクセントの3役割」の2つだけを最初に覚えてください。色の理論（色相環・補色など）はこの2つを実践してから学ぶと、実務での活用イメージが具体的になります。
Q： カラーコードの調べ方がわからない場合はどうすればいいですか？
A： ブラウザでAdobe Colorを開き、目的のカラーをスポイトで選択するか、色相スライダーで探すと自動的にHEXコードが表示されます。既存の画像から色を抽出したい場合は、Canvaのカラーピッカー機能を使うと画像からそのままHEXコードをコピーできます。
配色組み合わせを3色・比率で決める
配色の組み合わせで最初に実行すべきことは、色数を3色に絞り、70:25:5の比率でベース・メイン・アクセントの役割を固定することです。色相環ツールを使えばメインカラーから調和が保証されたパレットを3分で生成でき、センスがなくても統一感のある仕上がりが実現します。清色か混色かのトーン統一を守り、「引く」視点で色を管理することが、プロに見えるデザインの実態です。
配色のルールは覚えるほど「選択肢を減らすための道具」として機能します。1,677万色の中で迷うのではなく、3色の役割と比率という基準を持つことで、毎回のデザイン判断が速くなります。作業効率上げる方法の一環として、配色ルールを仕組み化しておくことで、デザイン作業全体のスピードが向上します。
| 状況 | 次の一歩 | 所要時間 |
| メインカラーが決まっていない | Adobe Colorで類似色モードを使ってパレット生成 | 10分 |
| 既存デザインが散漫に見える | 使用色を数えて4色以上なら1色削る | 5分 |
| テーマが決まっていない | テーマキーワード3語を書き出してから色を選ぶ | 5分 |
| すぐ使えるパターンが欲しい | 本記事のパターン20選からテーマに合う1つをコピー | 3分 |
※本記事で紹介した情報は2025年6月時点のものです。
【出典・参照元】
デザインセンス0でも使える配色30選｜design-ac.net