Webデザインの配色は、ベース70%・メイン25%・アクセント5%の3色比率を守るだけで、センスがなくても整ったサイトが作れます。この記事ではメインカラーの選び方から配色ツールの活用まで5つの手順で解説します。
この記事でわかること
3色比率（70-25-5%）を守るだけで配色が整う理由と具体的な手順がわかります。業種・ターゲット年齢層別のメインカラー選定基準を使って、迷わず色を決める方法も身につきます。Adobe ColorとWebAIM Contrast Checkerを使った30分以内の配色確定フローも習得できます。
この記事の結論
Webデザインの配色を成功させる核心は「色数を3色に絞り、比率を守る」という1点に集約されます。メインカラーをターゲット像から先に決め、ベースカラーで読みやすさを確保し、アクセントカラーを5%以内のボタンや強調箇所に限定するだけで、配色センスがなくても整ったデザインが完成します。ツールを使えばこのプロセスは30分以内で完了します。
今日やるべき1つ
Adobe ColorまたはCoolorsにアクセスし、自分のサービスやブランドイメージに合うメインカラーを1色だけ選んでください。これが配色設計の全スタート地点です（所要時間：15分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 配色の基本ルールを最初に理解したい | Webデザイン配色は3色比率が基本 | 5分 |
| 業種・ターゲットに合う色が選べない | Webデザイン配色はターゲットで決まる3基準 | 5分 |
| 自分のサイトの配色を今すぐ診断したい | Webデザイン配色は5分で自己診断できる | 5分 |
| 実際の成功・失敗事例を見たい | Webデザイン配色の実例は2パターンで比較 | 5分 |
| 今すぐ手を動かして配色を決めたい | Webデザイン配色は5つの仕組みで解決 | 10分 |
| チェックリストで最終確認したい | Webデザイン配色は7項目でチェック | 3分 |
Webデザイン配色は3色比率が基本
色を直感で選ぼうとすること自体が、配色迷走の原因です。プロのデザイナーが一貫して使う「3色ルール」を理解するだけで、選択の手間は大幅に減ります。
ベースカラーは全体の70%を明るい淡色で固定
ベースカラーは背景や余白に使う色で、サイト全体の70%を占めます。白や淡いグレー、淡い青みのオフホワイトが代表例です。この色は「目立たない」ことが仕事であり、テキストの可読性を支える土台として機能します。
ベースカラーを暗い色や彩度の高い色にすると、テキストとのコントラスト比が下がり、読みにくさが生じます。WCAG（Web Content Accessibility Guidelines）では通常テキストのコントラスト比を4.5:1以上に保つことを推奨しており（WebAIM Contrast Checker）、これを満たすには明度の高いベースカラーが最も確実な選択です。「目立たないほど優秀」という逆説が、読みやすいサイトの根拠になっています。
メインカラーは全体の25%でブランド印象を決める
メインカラーはサイトのイメージを決定づける主役の色で、ナビゲーションバー、見出し、ボタン背景などに使います。全体の25%を占め、訪問者が最初に受け取る印象の核心です。コーポレートカラーがある場合はそれを採用し、ない場合はターゲット層とサービスの性格から選びます。
メインカラーは配色設計で最初に決める色です（配色の決め方詳細 – m-hand）。ベースカラーとアクセントカラーはメインカラーに合わせて後から導けるため、逆にアクセントから決め始めると整合性が取れず、後から全色を変更する手戻りが発生します。メインカラーを最初に固定することで、残り2色の選定が論理的に進みます。
なお、Webデザインの仕事を始める際のポートフォリオ制作においても、配色の統一感はクライアントへの印象を左右する重要な要素です。
アクセントカラーは全体の5%に限定して効果を最大化
アクセントカラーは視線を誘導するための強調色で、CTAボタン、重要なリンク、バッジなどに使います。全体の5%以内に抑えることが最重要のルールです。
アクセントカラーを多用すると「どこが重要なのか」が伝わらなくなります。強調は希少性から生まれるため、5%という制約を守ることが視線誘導の品質を保ちます。補色（メインカラーの色相環上の反対側に位置する色）を選ぶと視覚的なコントラストが強くなり、ボタンの視認性向上につながります（色相環活用 – ZeroPlus）。アクセントカラーをメインカラーと同系色にすると強調効果がほぼゼロになるため、避けてください。
CHECK
▶ 今すぐやること: 自分が今制作中のサイトを開き、使っている色が3色以内かを数えてください（所要時間：3分）
よくある質問
Q: 3色以上使いたい場合はどうすればよいですか？
A： 追加する色はグレーや白の無彩色に限定するのが現実的な対処法です。無彩色は配色のカウントに含めず使用でき、情報の階層を整理する役割を担います。有彩色を4色以上使う場合は、各色を同一トーン（同じ明度・彩度の系統）に揃えることで統一感を保てます（3色ポイント – blog.grp.mk-dt.com）。
Q： 比率70-25-5%は厳密に守らないといけませんか？
A： ±5%程度の誤差は実務上問題ありません。重要なのは厳密な数値よりも「ベースが最も多く、アクセントが最も少ない」という大小関係を守ることです。
Webデザイン配色はターゲットで決まる3基準
「なんとなく好きな色」を選ぶと、ターゲット層の印象と合わない配色が生まれます。色には業種・年齢層・性別ごとに統計的な傾向があり、これを基準にメインカラーを絞り込むと選択の精度が上がります。
業種別カラーイメージは3タイプに分類
業種別の色選びには一定のパターンがあります（業種別選び方 – bindup.jp）。医療・福祉・IT系は青系（信頼・清潔・専門性）が多く採用され、飲食・エンターテインメント・小売は赤・オレンジ・黄などの暖色系（食欲・活気・親しみ）が機能します。自然・農業・環境系は緑系（安心・健全・持続可能性）と相性が高い傾向があります。
ただし業種別の傾向は「競合と同じ色になりやすい」というトレードオフがあります。医療サイトがすべて青系になると差別化が難しくなるため、業種イメージの色をベースにしつつ、彩度や明度を独自に調整して個性を出す方向が実務的です。業種の慣習色を完全に無視するよりも、まず慣習に乗ってから微調整する順序の方が失敗率は低くなります。
フリーランスのWebデザイナーとして仕事を受注する際も、クライアントの業種に合わせた色選びの提案力は差別化の大きな武器になります。
ターゲット年齢層で明度・彩度を調整
年齢層によって好まれる色の性質が異なります。10代〜20代はビビッドな高彩度の色（鮮やかで目立つ色）に反応しやすく、30代〜40代のビジネス層は中〜低彩度の落ち着いた色を信頼性の指標として評価します。50代以上は明度が高い（明るい）色を好む傾向があります。
ターゲット年齢層が絞れない場合は、中彩度・中明度の色を基準にするのが最も安全です。ビビッドな色は特定のターゲットには強く刺さりますが、幅広い層へのリーチが必要なサービスでは離脱の原因になることがあります。
コーポレートカラーがある場合の流用ルール
既存のコーポレートカラーをWebのメインカラーに流用する場合、印刷物で使っているRGBやCMYKの値をそのまま使うと画面上で意図と異なる見え方をすることがあります。画面表示では彩度が高めに見えるため、コーポレートカラーの彩度を10〜20%下げたWeb用の調整値を別途定義しておくと、ブランドの一貫性を保ちながら画面上の視認性も確保できます（ツール紹介と基礎 – design-baum.jp）。
CHECK
▶ 今すぐやること: ターゲット層の年齢・業種を付箋に書き、上記3基準でメインカラーの候補色を2〜3色に絞ってください（所要時間：10分）
よくある質問
Q: ターゲットが複数いる場合、どの基準を優先すればよいですか？
A： 購入・成約に最も近い意思決定者層を最優先にしてください。たとえばBtoBサービスで最終決定者が40代管理職なら、20代も利用者に含まれていても落ち着いた中彩度の色が適切です。
Q： 競合と色がかぶってしまいそうです。差別化するには？
A： 色相は業種慣習に合わせつつ、明度や彩度で独自性を出す方法が実務的です。同じ青系でも、明度を高くすれば爽やかさ、低くすれば重厚感と、印象を大きく変えられます。
Webデザイン配色は5分で自己診断できる
配色の問題は、作り終えてから「なんか変」と感じる段階で発見されることが多いものです。診断を制作前・途中・完成後のどの段階で行うかで、修正コストが変わります。以下の質問に答えることで、現在の配色の問題点を5分で特定できます。
Q1: 使っている有彩色は3色以内ですか？
3色以内の場合はQ2へ進んでください。4色以上の場合は、追加色のうち最も使用頻度が低い色を無彩色（グレー）に置き換えてください。まずこれだけで整理が進みます。
Q2: メインカラーはベースカラーに対して十分なコントラストがありますか？コントラスト比4.5:1以上の場合はQ3へ進んでください。不足している場合は、メインカラーの明度を下げるか、ベースカラーの明度を上げることで改善できます。WebAIM Contrast Checkerに2色の16進数コードを入力すれば即時確認できます。
Q3: アクセントカラーの使用箇所は5箇所以内ですか？
5箇所以内の場合はQ4へ進んでください。6箇所以上の場合は、アクセントカラーの使用箇所を「最も押してほしいボタン1〜2箇所」に絞り直してください。アクセントが多い状態は「強調がない」状態と同義です。
Q4: メインカラーとアクセントカラーは色相環上で補色または類似色の関係ですか？
補色・類似色の場合はResult Aへ、同系色（ほぼ同じ色相）の場合はResult Bへ進んでください。**
Result A: 現在の配色の基本構造は問題ありません。次の確認事項はコントラスト比と比率の精査です。ベース70%・メイン25%・アクセント5%の比率が守られているかをカラーピッカーで各要素の面積を概算してください。
Result B: アクセントカラーの選定を見直してください。**メインカラーの色相環上の反対側（補色）をAdobe Colorの「補色」モードで生成し、アクセントカラーとして採用することで視覚的なコントラストが生まれます（比率とイメージ解説 – creativelab.biz）。
CHECK
**▶ 今すぐやること: 上記Q1から順に答え、Result AまたはBを特定してください（所要時間：5分）**
よくある質問
Q: モノクロで確認するとはどういう意味ですか？
A： 配色をグレースケール表示に切り替えて、要素の明暗差（コントラスト）だけで情報の階層が読めるかを確認する手法です。色が見えない状態でも構造が伝わるデザインは、色が加わればさらに伝わりやすくなります。Macの場合はシステム設定のアクセシビリティからグレースケールに切り替えて確認できます。
Q： スマートフォンとPCで色が違って見えます。どう対処すればよいですか？
A： デバイスごとのモニター設定（輝度・色温度）の差が原因です。sRGBカラープロファイルで色を設定し、主要ターゲットが使うデバイスで最終確認を行うことが基本的な対処です。
Webデザイン配色の実例は2パターンで比較
配色設計の判断を実際の事例で確認します。同じ業種・同じ構成でも、配色の判断一つで結果が大きく変わります。
ケース1（成功パターン）: メインカラー先決定で統一感を実現
フリーランスのWebデザイナーが飲食店のサイトをリニューアルした事例です。旧サイトは4色の有彩色を同等比率で使っており、訪問者のアンケートで「どこを見ればいいかわからない」という回答が複数出ていました。
リニューアルでは、飲食の業種慣習に合わせたオレンジ系をメインカラーに最初に決定し、ベースは白のみ、アクセントは補色の青をCTAボタンに限定しました。結果として旧サイト比で問い合わせボタンのクリック率が改善されました。
飲食店サイトのリニューアルを経験したWebデザイナーは、「メインカラーが主役で印象決定、アクセントで目立たせるバランスが成功の鍵」と語っています（Webデザイン色選びポイントの解説動画）。
旧来の4色構成のまま進めていれば、視線が分散しCTAの機能が発揮されない状態が続いていた可能性があります。メインカラーを最初に固定するという判断一つが、全体の整合性を生んだ事例です。
なお、Webデザインの仕事を効率的に進めるにはChrome拡張機能の活用も有効です。カラーピッカーやコントラスト比確認ツールをブラウザに追加することで、配色確認の手間を大幅に削減できます。
ケース2（失敗パターン）: アクセントの多用で訴求力がゼロに
コーポレートサイトの初稿で、重要なリンク・見出し・バナー・ナビゲーション・バッジすべてにアクセントカラーを使ったケースです。見た目は賑やかになりましたが、ユーザーテストで「どのボタンが一番重要かわからない」という指摘が全員から出ました。
アクセントカラーを問い合わせボタンの1箇所のみに絞り直した修正後、同じテスターからボタンの視認性評価が改善されました。
配色ルールの実践によるデザイン改善を経験したデザイナーは、「センス不要、ルールで失敗回避」という観点でその過程を共有しています（配色失敗談とルール実践のデザイナー視点共有）。
最初からアクセントカラーを「CTAボタンのみ」と定義して制作を始めていれば、テスト・修正のコスト（約3時間）を省けていた可能性があります。
CHECK
▶ 今すぐやること: 自分の制作物でアクセントカラーが何箇所使われているかを数え、5箇所を超えていれば絞り込み対象をリストアップしてください（所要時間：5分）
よくある質問
Q: ケース1のような改善効果は必ず出ますか？
A： 配色の改善効果はサービス内容・ユーザー層・他の要因（コピー・構成など）に依存するため、効果の大小は状況によって異なります。ただし3色ルールを守ることで「悪化する」可能性は低く、配色起因の離脱要因を取り除く効果は期待できます。
Webデザイン配色は5つの仕組みで解決
ハック1: メインカラーをAdobe Colorで15分以内に確定
【対象】配色のスタート地点がわからず制作が止まっているデザイナー・制作担当者
【手順】まずAdobe Colorの「カラーホイール」を開きます（3分）。次に「カラーハーモニー」を「単色」に設定し、業種イメージに合う基準色を色相環上でクリックして選びます（7分）。生成された5色パレットからメインカラーとして最も使いたい1色を決定し、16進数コードを手元にメモします（5分）。
【コツと理由】色相環上で業種イメージの方向性を決め、ツールに補完させることで、整ったパレットを15分以内に確定できます。ツールが色相・彩度・明度の数学的な整合性を担保するため、選んだ結果が「なんとなく変」になるリスクを排除できます。
【注意点】気に入ったカラーパレットを複数保存して比較検討を続けることはやらなくてよい作業です。候補を絞らずに並べると判断が止まります。最初の候補で「これにする」と決め、後から問題が出たときに修正する順序が実務では速いです。
ハック2: ベースカラーをコントラスト比4.5:1で即時検証
【対象】ベースカラーを選んだ後、テキストが読みやすいか自信が持てない制作者
【手順】まずWebAIM Contrast Checkerを開きます（1分）。「Foreground Color」にテキスト色の16進数コード、「Background Color」にベースカラーの16進数コードを入力します（2分）。「Contrast Ratio」が4.5:1以上であることを確認し、未達の場合はベースカラーの明度を5%単位で上げて再検証します（5〜10分）。
【コツと理由】ブランドカラーに寄せた淡色背景でも4.5:1を確保できます。白固定にするとブランドの個性が失われますが、ツールで数値を確認しながら淡い有彩色を選ぶことで可読性とデザイン性を両立できます。
【注意点】ベースカラーを白以外にしても、明度が高ければ有彩色で4.5:1を超えられます。ただし背景に絵柄や模様を置いたうえでテキストを重ねると、コントラスト比が場所によって変動するため可読性が保証できません。
ハック3: アクセントカラーをCTAボタン1箇所に絞って視線誘導を最大化
【対象】アクセントカラーを複数箇所に使い、どこが重要かわからなくなっているデザイン
【手順】現在のデザインでアクセントカラーが使われている箇所をすべてリストアップします（3分）。リストの中で「ユーザーに最も押してほしいボタン」を1つだけ選び、それ以外のアクセントをメインカラーまたはグレーに置き換えます（10〜15分）。変更後のデザインを自分以外の1人に見せ、「最初にどこに目が行くか」を口頭で確認します（5分）。
【コツと理由】強調を1箇所に絞ることで、その1箇所が3倍目立ちます。アクセントカラーの視線誘導力は周囲の色との比率差から生まれるため、使用箇所を減らすほど1箇所あたりの注目度が上がります。
【注意点】アクセントカラーを廃止してモノトーンにすることはやらなくてよい対処です。視線誘導がなくなるため、CTAの機能が失われます。「1箇所に絞る」と「ゼロにする」は全く異なる結果をもたらします。
ハック4: Coolorsで配色パレットを60秒で生成してトライアドを検証
【対象】色相環の理論がわからず、補色・類似色の組み合わせに時間がかかっている人
【手順】Coolorsにアクセスし、スペースキーを押してランダムパレットを生成します（1分）。生成された色のうちメインカラーに近い1色をロック（鍵アイコンをクリック）し、スペースキーを押し続けて他の色を更新します（5分）。ベースとアクセントの候補が出たらエクスポートし、実際のデザインに当てはめて確認します（5分）。
【コツと理由】色相環を手動で読んで補色を計算する方法は、理論の習熟に数週間かかります。ツールにメインカラーを入力して候補を生成させる方が、初心者は理論習熟より先に結果を出す経験を積めるため上達が早いです。
配色設計と同様に、画像圧縮や画像トリミングなどのツール活用も習慣化することで、Webデザイン全体の作業効率が高まります。
【注意点】ツールが提案するパレットをそのまますべて採用することはやらなくてよい作業です。ツールは数学的な整合性を提案しますが、業種イメージやターゲット層との適合は人間が判断します。生成結果はあくまで「候補」として扱い、最終判断は自分で行ってください。
ハック5: ワイヤーフレームに3色を塗って比率をビジュアル確認
【対象】完成してから「なんか変」と気づく失敗パターンを繰り返しているデザイナー
【手順】ページの主要レイアウトをグレーのワイヤーフレームで用意します（すでにある場合はスキップ）。ベースカラーを全体面積の70%を占める背景・余白エリアに塗ります（5分）。メインカラーをナビゲーション・見出し・カード背景などに25%分塗り、残りの5%にアクセントカラーをCTAボタンのみに当てて全体の比率を目視で確認します（10分）。
【コツと理由】ワイヤーフレーム段階で3色を塗り比率を確認してから詳細に進むことで、修正コストを大幅に削減できます。完成後の配色変更はすべての要素を再調整する必要がありますが、ワイヤー段階なら3色の変更だけで済みます（配色失敗談とルール実践）。
【注意点】ワイヤーフレームなしでいきなり完成デザインに色を置くとリスクが高くなります。特に色数が4色以上になっているときは、ワイヤー段階で3色に整理してから再スタートする方が結果的に速くなります。
CHECK
▶ 今すぐやること: Adobe ColorまたはCoolorsを開き、ハック1の手順でメインカラーの16進数コードを1つ確定してください（所要時間：15分）
よくある質問
Q: 配色ツールで生成した色を使えば失敗しませんか？
A： ツールは色の数学的な整合性（色相の関係性）を保証しますが、業種イメージとの適合やターゲット層への訴求はツールが判断できません。ツールの出力を候補として扱い、業種・ターゲット基準で最終選択を人が行う組み合わせが実務的です。
Webデザイン配色は7項目でチェック
配色を決めた後に確認すべき7項目を以下に示します。この順序で確認すると、問題が発生した場合の修正範囲を最小化できます。制作物を開いた状態で、以下を上から順に確認してください。
チェック1: 有彩色の使用数が3色以内か
3色以内であれば合格です。4色以上の場合は使用頻度最低の有彩色をグレーに置き換えてください。やらなくてよいのは「4色を全部残したまま彩度を下げて調整しようとする」ことです。色数を減らすことが先決です。
チェック2: ベースカラーとテキストのコントラスト比が4.5:1以上か
WebAIM Contrast Checkerで数値を確認します。「なんとなく読めるからOK」で判断することはやらなくてよい確認方法です。ツールで測定してください。
チェック3: メインカラーが全体面積の20〜30%程度に収まっているか
目視でおおよその面積比を確認します。50%を超えていれば、一部の使用箇所をベースカラーに戻します。
チェック4: アクセントカラーの使用箇所が5箇所以内か
リストアップして数えます。5箇所を超えていれば、最重要のCTAボタン以外をメインカラーまたは無彩色に変更します。
チェック5: アクセントカラーとメインカラーが補色または類似色の関係か
Adobe Colorで2色を入力し、色相環上の位置関係を確認します。同系色の場合はアクセントカラーを色相環の反対側に移動させます。
チェック6: グレースケール表示で情報の階層が読めるか
デバイスをグレースケールモードに切り替えて、どの要素が重要かが明暗差だけで伝わるかを確認します。グレースケールで読めない場合は色だけに依存した設計であり、色覚多様性への対応も不十分です。
チェック7: 主要ターゲットのデバイス・環境で実機確認したか
スマートフォンの実機、かつ屋外光に近い明るさで配色を確認します。モニターの輝度設定が高い制作環境では色が薄く見え、モバイル実機では予想より彩度が高く見えることがあります。
CHECK
▶ 今すぐやること: 上記7項目のうち、まずチェック1の「有彩色の数」を確認してください（所要時間：3分）
よくある質問
Q: チェック6のグレースケールで確認する方法はiPhoneでもできますか？
A： iPhoneの場合、設定からアクセシビリティ、画面表示とテキストサイズ、カラーフィルタ、グレースケールの順に進んで切り替えられます。Androidの場合は設定からユーザー補助、色補正、グレースケールの順に進んでください。
Q： 7項目をすべて満たしたのに「なんか変」な感じが残ります。原因は何ですか？
A： 配色以外の要因が原因の場合が多いです。主な候補はフォントの太さ・余白の量・要素の整列です。配色の7項目を満たした後に感じる「変な感じ」は、タイポグラフィかレイアウトのどちらかにある可能性が高く、配色をさらに調整しても解決しません。
まとめ:Webデザイン配色は3色比率で決定
Webデザインの配色は、メインカラーを最初に決め、ベースカラーで可読性を確保し、アクセントカラーをCTAの1〜2箇所に絞るという3ステップで完成します。色数を3色に限定し、70-25-5%の比率を守ることが、センスよりも先に機能するルールです。ツールを使えば最短30分でこの構造を実装できます。
今日からすぐにできることは1つだけです。Adobe ColorまたはCoolorsを開き、自分のサービスの業種イメージに合うメインカラーを1色決めてください。残りのベースとアクセントはそこから論理的に導けます。配色の完成度は最初の色を何にするかで大きく左右され、残りの工程はツールとチェックリストが補ってくれます。
フリーランスのWebデザイナーとして自営業を始める際も、配色の基礎ルールをマスターしていることはポートフォリオの質と案件獲得率に直結します。
| 状況 | 次の一歩 | 所要時間 |
| これからメインカラーを決めたい | Adobe Colorでメインカラーを1色確定 | 15分 |
| ベースカラーの可読性を確認したい | WebAIM Contrast Checkerでコントラスト比を測定 | 5分 |
| 完成した配色を最終確認したい | 7項目チェックリストを上から実施 | 10分 |
| アクセントが多すぎて整理したい | CTAボタン以外のアクセントをグレーに置き換え | 15分 |
Webデザイン配色に関するよくある質問
Q: 配色が決まらないときに最初にやることは何ですか？
A： 業種イメージに合う色相（暖色・寒色・中性色）を1つ選び、Adobe Colorの「カラーホイール」で単色パレットを生成することから始めてください。「好きな色」ではなく「ターゲットが信頼できる色」を基準にすると選択が速くなります（配色の決め方詳細）。
Q： 60-30-10ルールと70-25-5ルールの違いは何ですか？
A： 比率の考え方はほぼ同じで、使用する色の優先順位（ベース・メイン・アクセント）に変わりありません。70-25-5はWebデザインでより広く使われている表現であり、60-30-10は室内デザインやブランディング文脈で多く使われます（60-30-10ルールの実例紹介）。実務ではどちらの比率を基準にしても、「ベースが最も多く、アクセントが最も少ない」という大小関係を守ることが本質です。
Q： 配色ツールはどれを使えば良いですか？
A： 目的によって使い分けると効率的です。パレット生成にはCoolors、色の関係性確認にはAdobe Color、コントラスト比検証にはWebAIM Contrast Checkerを使うと、3ツールで配色設計のほぼ全工程をカバーできます（ツール紹介と基礎）。
※本記事で紹介した情報は2025年7月時点のものです。