フレームワーク活用ガイド
押さえておきたい用語
- 60-30-10ルール: メインカラー60%、サブカラー30%、アクセントカラー10%の比率で配色する法則
- メインカラー（ドミナントカラー）: 背景や大面積に使う色。全体の60%を占め、落ち着いた印象を与える
- サブカラー（セカンダリカラー）: メインカラーを補完する色。ナビゲーション、カード背景などに使う
- アクセントカラー: CTAボタンや重要な通知など、ユーザーの注目を集める箇所に使う色
1
ブランドカラー確認
ブランドガイドラインから基本色を取得 → 3色の役割分担
こんな悩みに効く#
- 「色数が増えすぎてページがうるさく見える」
- 「CTAボタンが背景に埋もれてクリックされない」
- 「配色のルールがなくデザイナーごとに色使いが異なる」
使い方#
3色を決める
メインカラー（背景・余白に使う落ち着いた色）、サブカラー（ナビやカードに使う中間色）、アクセントカラー（CTAや重要通知に使う目立つ色）の3色を選ぶ。ブランドカラーが鮮やかな場合はアクセントに回し、メインには薄い派生色を使う。
60-30-10の比率で配分する
画面全体の面積比でメインカラー60%、サブカラー30%、アクセントカラー10%を目安に配分する。正確な計算は不要だが、アクセントカラーが10%を超えるとインパクトが薄れる点に注意する。
アクセントカラーを「少なく・強く」使う
アクセントカラーはCTAボタン、バッジ、エラーメッセージなど「ユーザーに必ず気づいてほしい箇所」だけに限定する。使用箇所が増えるほど「何が重要か」が分からなくなる。
コントラスト比を検証する
メインとサブ、サブとアクセントのコントラスト比がWCAG AA基準（4.5:1以上）を満たすか確認する。比率が美しくてもコントラストが不足していれば可読性に影響する。
具体例#
SaaS — ダッシュボードの配色リデザイン
状況: ダッシュボードに8色が使われておりユーザーから「目がチカチカする」との声が多数。情報の優先順位も色から読み取れなかった。
適用プロセス:
- メイン=#F8F9FA（ライトグレー背景・60%）、サブ=#2B4162（インディゴ・ナビ/ヘッダー・30%）、アクセント=#D4563A（朱赤・CTA/アラート・10%）に整理
- グラフ内の色は3色の派生トーンで統一し、独立した色を排除
- ステータスバッジ（成功=緑、エラー=赤）はアクセント枠内の10%に収めた
成果: ユーザーの「見やすさ」スコアが5段階中2.4→4.2に向上。CTAクリック率も18%改善し、重要な通知の見落としが62%減少した。
ECアプリ — 購入ボタンの視認性向上
状況: 商品詳細ページで「カートに入れる」ボタンが他の要素と同系色で目立たず、ボタン到達後のタップ率が54%と低かった。
適用プロセス:
- 60-30-10で分析。メイン（白背景）60%は適切だが、サブ（青系ナビ）が40%、アクセント（オレンジ系）が0%という偏った配分だった
- サブカラーの使用面積を30%に抑え、CTAボタンをオレンジ（アクセント）に変更
- 「セール」「限定」のバッジもアクセントカラーで統一し、残り要素からオレンジを排除
成果: CTAボタンのタップ率が54%→78%に向上。アクセントカラーの希少性が保たれたことで、セールバッジの注目度も32%上昇した。
コーポレートサイト — ブランドカラーの展開
状況: ブランドカラーの鮮やかなブルーをページ全体に使用した結果、「眩しい」「どこを見ればいいか分からない」というフィードバックが多発。
適用プロセス:
- ブランドブルーをアクセント（10%）に格下げ。メイン（60%）は白+ライトグレー、サブ（30%）はブランドブルーの淡いトーン（明度90%）に設定
- CTAと重要なリンクのみブランドブルー（原色）を使用
- フッターとヘッダーのサブカラー領域でブランドらしさを表現
成果: ページの印象評価で「洗練された」が12%→48%に増加。CTAのクリック率が2.1倍に向上し、ブランドの認知と使いやすさを両立した配色になった。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| アクセントカラーの乱用 | すべてが目立とうとし、結局何も目立たない | 10%の予算厳守。CTAと最重要通知だけに使う |
| メインカラーが強すぎる | 60%の面積が濃い色だと圧迫感が出る | メインは白・淡い色にし、視覚的休息を確保 |
| 3色で足りないと感じる | 色数を増やすほど統一感が崩れる | 3色の明度・彩度バリエーションで対応する |
| ダークモード未考慮 | ライトモードの比率がそのまま使えない | ダークモード用にメインを暗色に再設定する |
まとめ#
60-30-10カラールールはインテリアデザインの世界で確立された配色原則をデジタルデザインに持ち込んだものだ。メインカラーで安定感を作り、サブカラーで変化をつけ、アクセントカラーで行動を促す。この比率を守るだけで、色数が多すぎるUIの「うるさい」問題と、CTAが埋もれる「目立たない」問題を同時に解決できる。