フリーランスの配色作業は、3色・70/25/5の比率に固定するだけで8割の案件に対応できます。この記事では用途別・印象別の配色パターン12選をHEXコード付きで一覧化し、失敗しない選び方を解説します。
この記事でわかること
3色固定で配色が30分→5分に短縮できる理由、用途別・印象別12パターンのHEXコード一覧、案件タイプを3分で特定できる判断フローの3点を解説します。
この記事の結論
配色で迷う最大の原因は「選択肢が多すぎること」です。ベースカラー・メインカラー・アクセントカラーの3色に絞り、面積比を70/25/5に固定すれば、初心者でも安定したデザインを短時間で仕上げられます。この記事で紹介するパターンをそのまま保存して再利用することで、案件ごとの配色作業を30分以内に完結できます。
今日やるべき1つ
この記事の早見表から自分の業種・用途に合うパターンを1つ選び、HEXコードをメモ帳かスプレッドシートに保存してください（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 配色の基本ルールを知りたい | 配色パターンは3色×70/25/5が基本 | 3分 |
| すぐ使えるパターンが欲しい | 用途別・印象別の配色早見表12選 | 5分 |
| 自分の案件に合うか診断したい | 配色パターンを3分で選ぶ判断フロー | 3分 |
| 失敗を防ぐ運用方法を知りたい | 配色パターンは5つの仕組みで管理 | 5分 |
| よくある疑問を解決したい | 配色パターン早見表に関するよくある質問 | 2分 |
配色パターンは3色×70/25/5が基本
「何色使えばいいか分からない」と感じるのは、選び始める順番が決まっていないからです。色を感覚で足していくほど、まとまりが失われていきます。
ベースカラー・メインカラー・アクセントカラーの3役割
配色を設計するとき、まず3つの役割を定義することが出発点です。ベースカラーは背景や余白を占める色で、白（#FFFFFF）・薄グレー（#F5F5F5）・アイボリー（#FAFAF0）が代表的です。ページ全体の70%を担うため、目立ちすぎず落ち着いた色が適しています。ここを無彩色に固定するだけで残りの2色の選択肢が大幅に絞られ、迷う時間を削減できます。
メインカラーは25%の面積を占め、ブランドや案件の印象を決定する色です。ボタン・見出し・アイコンなどの主要要素に使います。アクセントカラーは残りの5%のみに使う強調色で、CTAボタンや重要テキストの下線など「視線を止めたい1点」に限定します。この5%を守ることで、全体のメリハリが保たれます。
見やすい配色は3色・比率70:25:5で決まるという原則は、Webデザインから提案資料まで幅広い用途に応用できます。
70/25/5の比率が機能する理由
70/25/5という比率は、人間の視覚が「安定している」と判断しやすい面積バランスとして、インテリアデザインやグラフィックデザインの分野で広く活用されてきた経験則です。均等に3分割すると視線が分散し、どこを見ればいいか分からなくなります。対して70/25/5では、視線がアクセントカラー（5%）の箇所に自然に引き寄せられます。比率を守ることは「デザインの意図を読者に伝える」行為そのものです。
フリーランスの実務では、この比率をスプレッドシートの列幅に見立てて確認する方法が有効です。全体を100列とし、70列・25列・5列に色を塗ると視覚的にバランスを確認できます。配色が決まったらHEXコードをそのセルのメモ欄に記録しておくと、次回案件で再利用できます。
4色以上を使わないことで失敗を防ぐ
4色以上を使うと視覚的なノイズが増え、情報の優先度が伝わりにくくなります。どうしても4色目が必要な場合は、既存の3色のいずれかの明度違い（薄い版・濃い版）で代用することを優先してください。新しい色を追加するのではなく、既存色のトーンを変えるだけで「4色に見えて実は3色体系」を維持できます。色を追加したくなったときは「本当に新しい役割が必要か」を自問するのが鉄則です。
CHECK
▶ 今すぐやること: 手元の最新デザインで使用色数を数え、4色以上あれば明度違いに置き換えられる色を1つ特定してください（所要時間：3分）
Q: グレーやホワイトも色数に含めますか？
A： ベースカラーとして使うグレー・ホワイトは「背景色」として扱い、メインカラー・アクセントカラーとは別に管理してください。色数のカウントはメイン・アクセントの有彩色だけで行うと整理しやすいです。
Q： ブランドカラーが複数ある場合はどう扱いますか？
A： 1色をメインカラー・もう1色をアクセントカラーに割り当て、ベースは白や薄グレーで固定するのが最もシンプルです。3色すべてにブランドカラーを使うと余白が崩れやすいため、ベースは中立色を維持してください。
用途別・印象別の配色早見表12選
以下は用途×印象の軸で整理した12パターンで、HEXコードをそのまま転用できる形にしています。
信頼・誠実系（資料・提案書向け）3パターン
資料や提案書では、クライアントに「信頼できる」「落ち着いている」と感じさせる配色が求められます。紺・グレー・白の組み合わせが最も代表的で、官公庁や金融業界の資料でも標準的に使われています。
パターン1：ネイビー×グレー×ホワイト（定番ビジネス）
ベース #FFFFFF / メイン #1B3A6B / アクセント #4A90D9
パターン2：チャコール×シルバー×スカイブルー（清潔感）
ベース #F5F5F5 / メイン #2D2D2D / アクセント #5DADE2
パターン3：ディープブルー×ライトグレー×コーラル（活動的な誠実さ）
ベース #F2F4F8 / メイン #1A237E / アクセント #E57373
この3パターンは、フォントを黒系（#1A1A1A）に固定することで可読性を確保できます。アクセントカラーは見出しの下線・CTAボタン・グラフの強調箇所に限定すると、5%の比率を守りやすくなります。資料配色は3色で完結を参考にすると、提案書への応用イメージが掴みやすくなります。
柔らかさ・親しみ系（SNSバナー・サービス紹介向け）3パターン
SNSバナーやサービス紹介ページでは、スクロール中に視線を止める柔らかい印象が有効です。高彩度よりも低彩度（くすみカラー）の方がスマートフォン画面での目への負担が少なく、長時間視聴されやすい特徴があります。
パターン4：ミントグリーン×ホワイト×テラコッタ（ナチュラル）
ベース #F0FAF5 / メイン #4DB6AC / アクセント #D4775E
パターン5：ラベンダー×アイボリー×ダスティローズ（柔和）
ベース #FAF7FF / メイン #9C7FBF / アクセント #C4788E
パターン6：セージグリーン×クリーム×マスタード（ナチュラルモダン）
ベース #F5F2E8 / メイン #7A9E7E / アクセント #C8A84B
くすみカラーを使うときは、フォントカラーを純黒（#000000）ではなくチャコール（#2C2C2C）にすると、全体のトーンが統一されます。
強さ・訴求系（LP・キャンペーンバナー向け）3パターン
LPやキャンペーンバナーでは、短時間でインパクトを与える高コントラストの配色が有効です。色相環で反対側に位置する色の組み合わせは視覚的なメリハリが最も強く出るため、購買・申込を促す場面に向いています。
パターン7：ブラック×ゴールド×ホワイト（プレミアム）
ベース #1A1A1A / メイン #D4AF37 / アクセント #FFFFFF
パターン8：ディープグリーン×クリーム×レッドオレンジ（力強さ）
ベース #F8F4EC / メイン #1B5E20 / アクセント #E64A19
パターン9：パープル×シルバー×イエロー（インパクト補色）
ベース #F3F0FF / メイン #6A1B9A / アクセント #FDD835
パターン7のベースが暗い場合は、フォントカラーを白（#FFFFFF）または薄いゴールド（#F0D080）に切り替えてください。暗背景に暗文字を重ねると可読性が著しく低下します。バナー配色は3色ルールで解決でも同様の設計思想を解説しています。
ミニマル・洗練系（ポートフォリオ・高単価サービス向け）3パターン
ポートフォリオや高単価サービスサイトでは、「情報を削って余白で語る」デザインが信頼感を高めます。無彩色のみ、または1色の明度・彩度違いを使った配色は、ブランドの洗練度を演出するのに適しています。
パターン10：ピュアホワイト×ミッドグレー×ブラック（無彩色構成）
ベース #FFFFFF / メイン #757575 / アクセント #212121
パターン11：ホワイト×ダスティブルー×ネイビー（単色の濃淡展開）
ベース #FFFFFF / メイン #7B9DB4 / アクセント #1C3D5A
パターン12：オフホワイト×ウォームグレー×テラコッタ（洗練ナチュラル）
ベース #FAF8F5 / メイン #9E9089 / アクセント #B5654A
パターン10〜12は、余白（ベースカラーの比率）を75〜80%まで引き上げると、より洗練された印象になります。ポートフォリオ配色は3色で決まるも参考にすると、職種別の最適パターンが見えてきます。
CHECK
▶ 今すぐやること: 上記12パターンから用途に合う1つを選び、HEXコードをスプレッドシートに貼り付けて「テンプレート」シートとして保存してください（所要時間：5分）
Q: くすみカラーはどのように作りますか？
A： 彩度を下げ、明度をわずかに上げると「くすみ」が出ます。Canvaでは「カラーピッカー」の彩度スライダーを左に動かし、明度を中間付近に設定するとくすみカラーを作れます。Adobe Colorではこの操作を数値で管理できるため、再現性が高くなります。
Q： HEXコードはどこに保存すれば管理しやすいですか？
A： Googleスプレッドシートに「配色パレット」シートを作り、用途・パターン名・3色のHEXコードを1行に並べる形が最も再利用しやすい形式です。セルの背景色をHEXコードに合わせると視認性が向上します。
配色パターンを3分で選ぶ判断フロー
以下の判断フローで自分の案件タイプを特定すれば、上記12パターンの中から3分以内に候補を絞り込めます。
Q1：制作物の主な目的は何ですか？
情報を伝えることが主目的（資料・報告書・提案書など）の場合はQ2へ進んでください。行動を促すことが主目的（LP・バナー・キャンペーンなど）の場合はQ3へ進んでください。ブランドを表現することが主目的（ポートフォリオ・サービスサイト）の場合はResult Cを選んでください。
Q2：クライアントの業種はどれに近いですか？
金融・法律・コンサル・ITなど専門性が高い業種であればResult Aです。医療・教育・福祉・子育てなど親しみが重要な業種であればResult Bです。
Q3：単価・訴求の強度はどちらですか？
高単価・限定感・プレミアム訴求であればResult Cです。大衆向け・即購入促進・インパクト重視であればResult Dです。
Result A：信頼・誠実系（パターン1〜3）を使用
ネイビー・チャコール系を起点に選択してください。メインカラーをブランドカラーに置き換えても機能します。
Result B：柔らかさ・親しみ系（パターン4〜6）を使用
くすみカラーを基本とし、クライアントのブランドカラーに近い色相のくすみ版を選ぶとなじみやすくなります。
Result C：ミニマル・洗練系（パターン10〜12）を使用
余白を80%に引き上げ、アクセントカラーだけブランドカラーに置き換えると統一感が出ます。
Result D：強さ・訴求系（パターン7〜9）を使用
色相環の反対側を意識した組み合わせで、アクセントカラーにCTAボタンの色を集中させてください。
CHECK
▶ 今すぐやること: 現在進行中の案件1件について上記フローを走らせ、Result A〜Dを特定してください（所要時間：3分）
Q: 同じクライアントでも案件によってResultが変わりますか？
A： 変わります。同一クライアントでも、社内報告書（Result A）と採用バナー（Result B〜D）では求められる印象が異なります。案件の制作物タイプごとにフローを走らせてください。
Q： Result AとResult Cが両方当てはまる場合はどうしますか？
A： 情報量が多い資料ならResult A（信頼・誠実系）、高単価の提案書や実績紹介ならResult C（ミニマル・洗練系）を優先すると判断しやすくなります。ページ数が多い場合はA、1〜2ページの提案サマリはCを選ぶ目安です。
配色パターンは5つの仕組みで管理
配色を毎回ゼロから考えることが作業負担になっている場合、問題は「配色の知識不足」ではなく「再利用する仕組みがないこと」にあります。以下の5つのハックを導入することで、案件ごとの配色作業を30分未満に短縮できます。
ハック1：業種別テンプレートで30分の作業を5分に短縮
【対象】：複数業種のクライアントを持つフリーランスデザイナー・ディレクター
【手順】：直近12ヶ月の案件をクライアント業種ごとに分類し、「金融・法律系」「医療・福祉系」「IT・テック系」「小売・EC系」の4カテゴリに振り分けます（所要時間：15分）。次に、各カテゴリで最も使用頻度が高かった3色構成のHEXコードをGoogleスプレッドシートに記録します（10分）。新案件が来たときは業種カテゴリを確認し、対応するシートのHEXコードをデザインツールに貼り付けるだけで配色完了です（1分）。
【ポイントと理由】：同一業種では配色に求められる印象が大きく重なるため、カテゴリ別に固定した方が精度も速度も上がります。業種の印象要件が大きく変わるのはブランドリニューアルのような特殊案件に限られるため、通常案件での再検討は最小限で済みます。
【注意点】：カテゴリを細分化しすぎると管理コストが増大します。4〜5カテゴリで十分です。既存カテゴリに近い業種は最も近いカテゴリに割り当てる方が効率的です。
ハック2：HEXコード一元管理で「あの色なんだったっけ」をゼロにする
【対象】：デザインツールが複数あり、使用色がツール間でバラバラになっているフリーランス
【手順】：Googleスプレッドシートに「カラーライブラリ」シートを新規作成します（所要時間：5分）。列構成は「用途・パターン名・ベース（HEX）・メイン（HEX）・アクセント（HEX）・最終使用日」の6列を設定します（5分）。新しい配色を使った案件が完了したら、翌日中に必ずこのシートに追記するルールを決め、スプレッドシートのURLをブラウザのブックマークバーに固定します（2分）。
【ポイントと理由】：デザインツール内のスウォッチ管理は、ツールを変えるたびに引き継がれないケースがあります。スプレッドシートで一元管理することで、ツールに依存せず任意の環境でHEXコードを参照でき、クライアントへの納品仕様書にもそのまま転記できます。
【注意点】：追記を後回しにすると管理シートが形骸化します。案件完了当日に更新する習慣が定着するまでの最初の2週間は、カレンダーに「配色シート更新」のリマインダーを設定してください。月次でまとめて追記するルールへ切り替えても十分機能します。
ハック3：アクセントカラーを1点に絞って視線を設計する
【対象】：「全体的にごちゃついて見える」と言われたことがあるフリーランスデザイナー
【手順】：制作物を完成させた後、アクセントカラー（5%の強調色）が何箇所に使われているかを数えます（所要時間：2分）。3箇所を超えていれば、最も重要な1〜2箇所のみ残し、残りはメインカラーかベースカラーに置き換えます（5分）。最後に、アクセントカラーを残した箇所がCTAボタン・最重要数値・最終結論のいずれかであることを確認します（1分）。
【ポイントと理由】：アクセントカラーを1〜2箇所に固定し、それ以外を意図的に弱める理由は、視線の優先順位を設計するためです。アクセントが5箇所あれば視線は5分割され、最も伝えたい情報に誘導できなくなります。1〜2箇所に絞ると、読者の視線はそこに自然に集まります。
【注意点】：全体のページ量に対して5%以内に収まっていれば、2〜3箇所でも機能します。「1箇所ルール」は目安であり、ページが長いほど2〜3箇所は許容されます。
ハック4：補色×類似色の組み合わせ基準を持つ
【対象】：配色パターンの選び方に根拠を持てず、感覚だけで選んでいるフリーランス
【手順】：まず案件の「主目的」を「目立たせる（訴求）」か「まとまらせる（統一）」かで分類します（所要時間：1分）。訴求重視であれば色相環で120〜180度離れた色をメインとアクセントに選びます（2分）。統一重視であれば色相環で30〜60度以内の色をメインとアクセントに選びます（2分）。
【ポイントと理由】：「訴求=色相環の反対側、統一=色相環の近接色」と先に決め打ちしてから微調整する方が、選択肢が半減して迷いなく作業を進められます。根拠のある選択基準を持つことで、クライアントへの説明も「色相環で反対側の色を使いコントラストを強めました」と一言で伝えられます。色の組み合わせおしゃれ見せでは、補色・アナロジー・トライアドの3つの色相環ルールを実務レベルで解説しています。
【注意点】：色相環の反対側の色はコントラストが強いため、ベースカラーに使うと疲れやすい印象を与えます。そうした色はアクセントカラーの5%にのみ限定し、ベースは必ず中立色（白・薄グレー）に固定してください。
ハック5：配色決定前にフォントとのコントラスト比を確認する
【対象】：配色が決まったあとに「文字が読みにくい」と指摘を受けたことがあるフリーランス
【手順】：配色案が決まったら、WebAIM Contrast Checkerを開きます（所要時間：1分）。本文テキストの色とメインカラーの背景色を入力し、コントラスト比が4.5:1以上であることを確認します（2分）。4.5:1を下回る場合は、テキストカラーを濃くするか背景色を薄くして、4.5:1以上になるまで調整します（3分）。
【ポイントと理由】：「コントラスト比4.5:1以上」はWebアクセシビリティの国際規格WCAG 2.1のAAレベルで定められた基準です。この基準を満たしていない配色は、弱視ユーザーが読めないだけでなく、薄暗い環境でスマートフォンを見る一般ユーザーにとっても読みにくくなります。コントラスト比を数値で確認することで、クライアントに「アクセシビリティ対応済み」として提案できる付加価値にもなります。
【注意点】：コントラスト比のチェックは本文テキストとその直接背景の組み合わせのみを確認すれば十分です。見出しは大文字・太字の場合は3:1以上で許容されるため、すべてに4.5:1を適用する必要はありません。
CHECK
▶ 今すぐやること: ハック1の「業種別カテゴリ分類」を今日の案件で1件実施し、Googleスプレッドシートに最初の行を記録してください（所要時間：10分）
Q: Adobe ColorやCoolorsなどのツールと、このハックはどう組み合わせますか？
A： ツールで配色案を生成した後、そのHEXコードをハック2のカラーライブラリシートに記録する流れが最も効率的です。ツールはアイデア生成に使い、管理と再利用はスプレッドシートで行うという役割分担が実務では機能します。
Q： 5つのハックを全部いきなり導入するのは大変ですか？
A： ハック2（HEXコード一元管理）だけ最初に始めてください。ライブラリが5〜10件蓄積されてからハック1（業種別テンプレート化）を追加すると、分類の精度が上がります。
配色パターンは3色固定で迷わず決まる
3色・70/25/5の比率を固定することで、配色の迷いは構造的に解決できます。ベース・メイン・アクセントの役割を先に決め、業種・用途別の早見表から選ぶことで、30分の作業を5分以内に短縮できます。
配色作業は「センスの問題」ではなく「仕組みの問題」です。今日この記事で選んだ1つのパターンをスプレッドシートに保存し、次の案件でそのまま転用するだけで、配色への苦手意識は実感として薄れていきます。まず1パターン保存することから始めてください。「え、3色だけでいいの!?」フリーランスの配色設計が30分で決まる黄金比率も合わせて読むと、実務への応用がさらに具体的になります。
| 状況 | 次の一歩 | 所要時間 |
| 今すぐ配色を決めたい | 判断フローでResult A〜Dを特定し、対応パターンのHEXコードをコピー | 3分 |
| 再利用できる仕組みを作りたい | Googleスプレッドシートにカラーライブラリシートを新規作成 | 5分 |
| クライアントへの説明根拠が欲しい | 色相環の反対側=訴求・近接色=統一の基準をメモして提案書に一言追記 | 2分 |
| フォントとの相性を確認したい | WebAIM Contrast Checkerで本文テキストのコントラスト比を確認 | 5分 |
配色パターン早見表に関するよくある質問
Q: 配色パターンの早見表は、印刷物にも使えますか？
A： 使えますが、モニター表示と印刷の色は異なります。印刷物に使う場合は、HEXコードをCMYKに変換して印刷業者に確認してください。CanvaやAdobe Illustratorでは、カラーモードをCMYKに切り替えてからデザインを確認する手順が必要です。
Q： 日本語フォントと英語フォントで配色の見え方は変わりますか？
A： 変わります。日本語フォントは文字密度が高いため、背景とテキストのコントラスト比を英語フォントより高め（5:1以上）に設定すると読みやすさが改善します。ゴシック体では細い線が多いため、薄いグレーのテキストカラーは避けてください。
Q： 配色パターンを決めた後、クライアントに説明するとき何を伝えればいいですか？
A： 「70/25/5の面積比でベース・メイン・アクセントを設計し、業種の信頼感・用途の目的に合わせて色相を選定しました」と一言伝えるだけで十分です。HEXコードを一覧で共有し、「この3色以外は追加しない」ことを事前に合意しておくと、制作後の色変更要求を最小化できます。
Q： 配色を後から変更したいときは、何から変えると崩れにくいですか？
A： アクセントカラー（5%）から変えてください。面積が最も小さいため、変更しても全体への影響が最小限に抑えられます。メインカラーを変えるとブランド全体の印象が変わるため、クライアントの承認を得てから実施してください。