配色に迷わない｜メイン・サブ・アクセントの黄金比と運用ルール
2026/05/20
デザイン・ブランディング配色はセンスではなく「配分」と「ルール」で決まる
配色で悩むとき、多くの人は「いい色を選ばなきゃ」と考えがちです。
でも実務で起きている失敗は、色選びよりも “使い方がバラバラ” です。
- ページごとに色の量が違う
- ボタン色が毎回変わる
- 背景色が増えて統一感が崩れる
- 更新のたびに色が足される
つまり、配色はセンスではなく 「配分」と「運用ルール」で決まります。
ここを決めると、サイトは一気に“ちゃんとして”見えます。
まず結論：色は“3色固定”＋“使う場所固定”で迷わなくなる
結論はこれです。
- 色は基本3色に固定する（メイン／サブ／アクセント）
- どこに何色を使うかを固定する（用途表を作る）
この2つだけで、配色の迷いはほぼ消えます。
逆に言うと、色を増やすほど運用で崩れます。
配色の基本｜メイン・サブ・アクセントとは？
メインカラー：ブランドの軸（使いどころが重要）
メインカラーは「たくさん使う色」ではありません。
“ブランドらしさを感じさせたい場所”に使う色です。
おすすめの使いどころ
- 見出しの一部（強調）
- セクションのタイトル周り
- 重要な図やラベル
注意：
メインを面積で使いすぎると、くどくなりやすいです。
サブカラー：背景と区切り（世界観を整える）
サブカラーは主張する色ではなく、整える色です。
背景やカードの背景、区切りで使うと統一感が出ます。
おすすめの使いどころ
- 薄い背景（セクション区切り）
- カード背景
- 表の行背景
アクセントカラー：CTA専用（乱用禁止）
アクセントは、“押してほしい・見てほしい”にだけ使う色です。
特に中小企業サイトは、アクセントの運用が最重要です。
おすすめの使いどころ
- CTAボタン
- 重要な注意喚起（必要な場合のみ）
- 強調アイコン（限定的）
鉄則：
アクセント色は増やさない。
増えた瞬間、サイトはチープに見えやすくなります。
黄金比（配分）の考え方｜60-30-10を“Web向け”に調整する
基本は「メイン少なめ」が上品に見える
よく言われる配色比率に 60-30-10（ベース-サブ-アクセント）がありますが、
Webサイトはテキスト量が多く、ベースが“白”になりやすいので、考え方をこう置くと安定します。
- ベース（白・薄い背景）を最も多く
- サブで区切りとリズム
- メインは“要所だけ”
- アクセントは“点”で効かせる
背景（サブ）で整えて、アクセントは“点”で効かせる
配色で失敗する人ほど、アクセントを面で使います。
でもアクセントは 点（ボタン・小ラベル）で使う方が強いです。
例：コーポレートサイトでのおすすめ配分
実務的には、このイメージで十分です。
- ベース（白〜薄いグレー）：70〜85%
- サブ（薄い色）：10〜25%
- メイン（見出し・要所）：3〜8%
- アクセント（CTA）：1〜3%
※数値はあくまで感覚の目安ですが、「アクセントは最小」が鉄則です。
迷わない運用ルール｜“どこに何色を使うか”を固定する
ここからが一番大事です。色を決めても、運用で崩れる原因は「使いどころ」が曖昧なこと。
だから 用途表 を作ります。
文字色（黒ではなく“濃いグレー”が基本）
真っ黒はコントラストが強すぎて、疲れやすいことがあります。
本文は“濃いグレー”寄りにして、見出しで強弱を作ると読みやすくなります。
背景色（白＋薄いサブ色）で余白を活かす
背景に色を入れるなら、薄いサブ色で“区切り”として使うのが安全です。
ベタ塗りの強い色を背景に使うと、途端に安っぽく見えがちです。
見出し・ライン・アイコンの色ルール
- 見出し：基本は文字色、強調だけメイン
- 区切り線：薄いグレー（主張させない）
- アイコン：基本1色（文字色 or メイン）
線やアイコンに色が増えるほど、雑多に見えます。
CTA（ボタン）の色ルール：原則アクセント1色
CTAは運用で増殖しやすいので、最初に固定します。
- 主要CTA：アクセント色で固定（例：無料相談）
- 補助CTA：枠線 or 薄い背景（例：事例を見る）
ボタンを増やしても、種類は2種類までに抑えると崩れません。
写真と色を合わせる（色味がズレるとチープになる）
配色だけ整えても、写真の色味がバラバラだと世界観が崩れます。
- 暖色寄りの写真なら、色も暖色寄り
- 寒色寄りの写真なら、色も寒色寄り
“写真の温度感”と配色を合わせるだけで質感が上がります。
よくある失敗パターン7つ（配色で損する典型）
- 色数が多くて統一感がない
- アクセント色を増やして“うるさい”
- コントラスト不足で読めない（薄い文字×薄い背景など）
- 背景に色を入れすぎて安っぽい
- 影・枠線が濃くてチープ
- 既製テーマのデフォルト色のまま
- 更新担当が勝手に色を足して崩れる
とくに更新で色が増える問題は、用途表でほぼ防げます。
このまま使える配色テンプレ（3色＋用途表）
【配色（3色）】
- メイン：＿＿＿＿（用途：見出し強調／ラベル）
- サブ：＿＿＿＿（用途：背景区切り／カード背景）
- アクセント：＿＿＿＿（用途：主要CTAのみ）
【用途表】
- 本文文字：＿＿＿＿（例：濃いグレー）
- 見出し文字：＿＿＿＿（例：本文文字＋一部メイン）
- 区切り線：＿＿＿＿（例：薄いグレー）
- 主要CTAボタン：＿＿＿＿（アクセント固定）
- 補助CTAボタン：＿＿＿＿（枠線／薄背景）
- アイコン：＿＿＿＿（基本1色）
- 注意喚起：＿＿＿＿（原則は使わない／使う場合の条件：＿＿＿＿）
まとめ：配色は“選ぶ”より“固定する”と強くなる
配色の悩みは「いい色探し」ではなく、ルール不在が原因です。
メイン・サブ・アクセントの3色を固定し、用途表で「どこに何色」を決めるだけで、統一感と質感が上がり、更新しても世界観が崩れません。
無料相談
Refuでは、現状サイトを見ながら「配色の崩れポイント」を整理し、3色設計＋運用ルール（用途表）まで落とし込む支援を行っています。
「更新で色が増えてしまう」「CTA色がバラバラ」など、まずは気軽にご相談ください。
その他おすすめ記事はこちら
ブランドカラーの心理的効果とは？色で印象を操るデザイン戦略｜企業の魅力を最大化する色づかい
更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
“安っぽく見える”を脱却する質感づくり｜写真・色・文字の整え方
