UIデザインのための配色理論：色彩心理・カラーパレット設計・実践テクニック

色はUIデザインにおいて感情・意味・優先度を伝える強力な手段です。正しく使えばブランドを印象付け、ユーザーの行動を誘導できますが、誤用するとUIを混乱させ、アクセシビリティ問題を引き起こします。本記事では、UIデザイナーが知っておくべき配色理論の基礎から、実際のカラーパレット設計の方法まで解説します。

色の基本属性

色相（Hue）：

赤・青・黄・緑など、色の種類そのものです。色相環（カラーホイール）上での位置で表されます。

彩度（Saturation）：

色の鮮やかさです。彩度が高いと鮮やかで目を引きます。彩度が低いとグレーに近くなります。

明度（Brightness/Lightness）：

色の明るさです。明度が高いと白に近く、低いと黒に近くなります。

HSL表記の重要性：

UIデザインでは色をHSL（色相・彩度・明度）で管理することを推奨します。Hex値（#FF5733）よりも、色のバリアントを体系的に作りやすいためです。例えば同じ色相の明度違いバリアント（100〜900のトーンスケール）の作成に便利です。

主要な配色技法

モノクロマティック（単色配色）：

1つの色相の明度・彩度を変えて組み合わせる方法。統一感があり洗練された印象を与えます。シンプルなブランドアプリや高級感を出したいUIに向いています。

アナログ（類似色配色）：

色相環で隣り合う色（例: 青・青緑・緑）を組み合わせる方法。自然で調和のとれた印象を与えます。

コンプリメンタリー（補色配色）：

色相環で対角に位置する色（例: 青とオレンジ）を組み合わせる方法。高いコントラストで目を引きますが、使いすぎると騒がしくなるため、プライマリとアクセントカラーの関係に留めることが多いです。

トライアド（三色配色）：

色相環で等間隔の3色を組み合わせる方法。バランスよく活気ある印象ですが、設計が難しいため1色を主役にして他2色は控えめに使うのが基本です。

UIカラーパレットの設計方法

ブランドカラーの定義：

まずブランドを代表するプライマリカラーを1色決めます。このカラーはCTAボタン・リンク・重要なUI要素に使用します。

トーンスケールの作成：

プライマリカラーを中心に、明度を変えた50〜900の9〜10段階のトーンスケールを作ります（Tailwind CSSの色パレットがわかりやすい参考例です）。薄い色は背景・ハイライト、濃い色はテキスト・アクセントに使います。

セマンティックカラーの定義：

UIには「意味を持つ色」が必要です：

• 成功: 緑系（例: #22C55E）
• 警告: 黄〜橙系（例: #F59E0B）
• エラー: 赤系（例: #EF4444）
• 情報: 青系（例: #3B82F6）

これらは状態の伝達に使用し、ブランドカラーとは区別して管理します。

ニュートラルカラーの定義：

背景・テキスト・ボーダー・シャドウに使うグレースケール系の色を体系化します。純粋なグレー（R=G=B）ではなく、プライマリカラーの色相をわずかに混ぜた「クールグレー」または「ウォームグレー」にすることで、ブランドの色調と調和した統一感が生まれます。

色彩心理とブランドカラーの選択

青： 信頼・安定・テクノロジー → 金融・SNS・テックアプリに多い

緑： 自然・健康・成長・成功 → フィンテック・健康アプリ・環境系

赤： 情熱・緊急・食欲 → フードデリバリー・警告・セール表示

オレンジ： 活気・フレンドリー・食欲 → 飲食・コンシューマーアプリ

紫： 高級・神秘・創造性 → 美容・エンタメ・ラグジュアリー

黒： 高級・洗練・権威 → ファッション・高級ブランド

色彩心理はあくまでも傾向であり、文化・ターゲット・業界によって効果は異なります。特に日本と欧米では色の連想に違いがある場合があるため、ターゲットユーザーに合わせた検討が必要です。

コントラスト比とアクセシビリティ

WCAG 2.1 AA基準（最低要件）：

• 本文テキスト（18px未満通常・14px未満ボールド）: 4.5:1以上
• 大テキスト（18px以上通常・14px以上ボールド）: 3:1以上
• UIコンポーネントとグラフィック要素: 3:1以上

コントラスト確認ツール：

Figmaプラグイン「Contrast」・WebAIM Contrast Checker・Chrome DevToolsのアクセシビリティパネルなどで確認できます。

色だけに情報を頼らない：

「赤はエラー、緑は成功」のように色だけで情報を伝えると、色覚特性を持つユーザーには伝わりません。アイコン・テキスト・形状などを組み合わせて状態を表現することが重要です。

まとめ

配色は「センス」ではなく「体系」です。プライマリ・セマンティック・ニュートラルカラーをHSLで体系化し、コントラスト比を確認しながら設計することで、美しくアクセシブルなUIカラーパレットが完成します。UI ZUKANでは実際のUIコンポーネントの配色事例を多数掲載していますので、ぜひ参考にしてください。