実務での配色とは何か（What）
画面やブランドでは、1色だけ で完結することは稀です。主色（支配）・副色・アクセント の3役に分け、面積と彩度で優先順位をつけます。よく引用される目安が 60-30-10 です。
なぜ面積比を意識するか（Why）
アクセントが多すぎると、ユーザーの目線が散り、本文や CTA のどちらが重要か 伝わりにくくなります。学習サイトでは特に、強い色を本文全面に使うと「宣伝ページ」に見え、集中が途切れます。
どう使うか（How）
60-30-10 の考え方
| 割合 | 役割 | 例 |
|---|---|---|
| 約60% | 支配色（背景・余白） | 白、薄いグレー、低彩度のベース |
| 約30% | 副色（カード・セクション） | 類似色のトーン違い |
| 約10% | アクセント | 補色に近いボタン、リンク、注意 |
Colorism での実践
- ヘッダーの6色 — 学習の主題色（アクセントの候補）
- 本文・Callout — 選択色の帯は使わず、グレー系で統一（D10）
- MiniQuiz の正解 — 進捗のフィードバックにのみ強い色を使う
| 観点 | OK の例 | NG の例 |
|---|---|---|
| 面積 | 背景・カードは低彩度、CTA だけテーマ色 | 見出し・枠・ボタンをすべて高彩度の補色 |
| 可読性 | 本文は中立色、リンクは下線＋色 | 本文もアクセント色で埋める |
| 学習 UI | Callout はグレー枠（D10）、進捗だけ強調色 | 選択色の縦帯で全文を装飾 |
たとえ（OK）: 白背景 60% + 薄いグレーのカード 30% + テーマ色の「次へ」ボタン 10%
たとえ（NG）: 本文見出し・枠・ボタンすべてを補色の高彩度で統一 → 疲労・可読性低下
実デザインの事例（Web）
実務の画面では、背景・カード・強調色 の面積差が 60-30-10 に近いことが多いです。次の写真は、ノート PC 上の Web ダッシュボード の例です。白いメイン領域が広く、左のナビ（副色）と、グラフの 小さなアクセント色 が点で使われています（特定プロダクトの推奨配色ではありません）。
配色の練習は 練習モード や検定ドリルと組み合わせると定着しやすくなります。
配色名称の識別ドリルへ3級 — 配色パターンの名称識別
応用配色（2級）ドリルへ2級 — 実務寄りの応用配色
ミニクイズ
学習画面の本文エリアで、アクセント色を使う割合として最も適切なのはどれですか？