フレームワーク活用ガイド
押さえておきたい用語
- 色相環: 色を円環状に配列した図。隣接色は類似色、対面色は補色の関係にある
- 補色: 色相環で正反対に位置する色の組み合わせ。コントラストが最も強く、互いを引き立てる
- トライアド: 色相環を三等分する3色の組み合わせ。バランスの取れた鮮やかな配色になる
- 彩度と明度: 彩度は色の鮮やかさ、明度は色の明るさ。UIでは彩度を抑えた色が可読性を保ちやすい
1
ブランドカラーの分析
既存のブランドカラーの色相・彩度・明度を把握 → 配色パターンの選択
こんな悩みに効く#
- 「ブランドカラーからUIカラーパレットへの展開方法が分からない」
- 「配色に自信がなく、色を追加するたびにバランスが崩れる」
- 「ダークモード用のカラーパレットをどう設計すればいいか分からない」
使い方#
ブランドカラーの色相を特定する
ブランドカラーのHSL値（色相・彩度・明度）を確認する。この色相が配色の起点になる。例えば青系ブランドカラーが色相210度なら、色相環上のその位置から計算する。
配色パターンを選ぶ
プロダクトの印象に合わせて配色パターンを選択する。補色（コントラストが強く、注目を集めたいCTA重視）、類似色（穏やかで読みやすい、情報量の多いダッシュボード向き）、トライアド（鮮やかでバランスがよい、カラフルなブランド向き）。
明度バリエーションを生成する
選んだ色ごとに50（最明）〜900（最暗）の9段階の明度バリエーションを作成する。UIでは彩度を控えめ（50〜70%）にすると、テキストの可読性が保たれる。
セマンティックカラーに割り当てる
背景（最も明るいバリエーション）、テキスト（最も暗いバリエーション）、プライマリCTA（ブランドカラー原色）、成功（緑系）、警告（黄系）、エラー（赤系）のように、役割に色を割り当てる。
具体例#
ヘルスケアアプリ — 信頼感のある配色設計
状況: 健康管理アプリのブランドカラーがビビッドな緑だったが、UI全体に使うと「安っぽい」印象になり、医療関係者からの信頼度が低かった。
適用プロセス:
- ブランドグリーン（色相150度）を起点に類似色パレット（色相130〜170度）を構築
- UI背景には明度95%の極薄グリーン、テキストには明度15%のダークグリーンを使用
- CTAボタンのみブランドグリーン原色を使い、エラー系は補色の赤系に
成果: 医療機関向けのプレゼンで「信頼できるデザイン」との評価を複数獲得。ユーザーの「プロフェッショナルな印象」スコアが5段階中2.8→4.3に向上した。
EC — カテゴリごとのカラーコーディング
状況: ECサイトの7カテゴリに色をつけたいが、色がぶつかって雑然とした印象になっていた。
適用プロセス:
- 色相環を7等分し、各カテゴリにトライアド+補足色で7色を割り当て
- 全色の彩度を50%・明度を60%に揃え、同じトーンで統一
- カテゴリページの背景には各色の明度90%バリエーションを使用
成果: カテゴリ間の識別率が58%→92%に向上。「色がうるさい」というフィードバックがなくなり、むしろ「整理されて見やすい」との評価に変わった。
SaaS — ダークモード対応のカラーパレット設計
状況: ダークモード対応の要望が多かったが、ライトモードの色をそのまま暗い背景に乗せると可読性が壊滅的だった。
適用プロセス:
- ライトモードのカラーパレット（明度バリエーション50〜900）を反転ではなく再設計
- ダークモード背景はグレー（純黒ではなく#121212）、テキストは白の87%不透明度
- ブランドカラーはダークモード用に彩度を15%上げ明度を20%上げたバリエーションを作成
- セマンティックカラー（成功・警告・エラー）もダークモード用に個別調整
成果: ダークモードのコントラスト比がすべてWCAG AA基準をクリア。ダークモード利用率が3か月で41%に到達し、夜間のアクティブセッション数が28%増加した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 高彩度の乱用 | 目が疲れてテキストの可読性が低下する | UIテキスト周りは彩度50〜70%に抑える |
| 色だけで意味を伝える | 色覚特性ユーザーが情報を読み取れない | アイコン・テキスト・形状を必ず併用する |
| ライトとダークで同じ色 | 背景が変わるとコントラスト比が崩れる | モードごとに個別のカラーパレットを設計する |
| 色数の増加 | 配色パターンから外れた色を追加して統一感が崩れる | セマンティックカラー以外は追加しないルールを徹底 |
まとめ#
色彩理論はUIの配色設計に「直感」ではなく「体系」を持ち込む。色相環上の関係性（補色・類似色・トライアド）を理解した上でパターンを選び、明度バリエーションとセマンティックカラーの割り当てまでを一貫して設計することで、美しさとアクセシビリティを両立したカラーパレットが完成する。色は「感覚で選ぶもの」から「設計するもの」に変わる。