UIスタイリングのカラー理論

読了 5分＋実践 15分

「青を使って」という指示を超え、正確なパレットと色の関係性を指定したい方

色彩心理学

それぞれの色は文化によって異なる連想を持つが、広い意味での共通パターンがある。プロンプトを書くときは、色とその意図する役割を両方記述する。

赤 — `#EF4444`

エネルギー・緊迫感・情熱。即座に注目を集める。

赤 (#EF4444) は破壊的アクション（削除・除去）、
エラーメッセージ、必須フィールドの表示にのみ使用してください。
装飾要素には赤を使わないでください。

青 — `#3B82F6`

信頼・安定・プロフェッショナル。プライマリインターフェースとして最も普遍的に安全な選択。

青 (#3B82F6) をボタン・リンク・アクティブなナビゲーション状態の
プライマリアクションカラーとして使用してください。
金融ダッシュボードで信頼性を伝えます。

緑 — `#10B981`

成長・成功・安全。何かがうまくいったことを示す。

緑 (#10B981) を成功メッセージ・完了状態・
正の指標（収益増加・スコア上昇）・エコフレンドリーなブランド要素に使用してください。

黄 — `#F59E0B`

楽観・創造性・注意。赤ほどの緊迫感なく注目を集める。

黄 (#F59E0B) を警告状態・ハイライトバッジ・
新機能ラベルに使用してください。可読性のため濃いテキスト (#1F2937) と組み合わせること。

紫 — `#8B5CF6`

高級感・創造性・神秘。プレミアムプランやクリエイティブツールに効果的。

紫 (#8B5CF6) を「Pro」プランバッジと
アップグレードCTAのアクセントカラーとして使用してください。プレミアム価値を伝えます。

グレー — `#6B7280`

中立性・洗練・バランス。ほとんどのUIカラーシステムの骨格。

グレー (#6B7280) をセカンダリラベル・プレースホルダーテキスト・区切り線・
無効状態に使用してください。プライマリテキストにはより濃いグレー (#1F2937) を確保する。

カラーハーモニーのルール

60-30-10 ルール

3つの割合で色を配分し、視覚的な混乱なくバランスの取れたデザインを作る。

役割	割合	例
ドミナント（背景・大きなサーフェス）	60%	白またはダークグレー
セカンダリ（カード・サイドバー・セクション）	30%	ライトグレーやミュートなトーン
アクセント（ボタン・リンク・ハイライト）	10%	ブランドのプライマリカラー

60-30-10 ルールを適用してください:
60% 白 (#FFFFFF) をページ背景と大きなエリアに、
30% ライトグレー (#F3F4F6) をカードサーフェスとサイドバーに、
10% ブルー (#3B82F6) をボタン・リンク・アクティブ状態に。

補色

カラーホイール上で正反対の色。高いコントラストと視覚的な緊張感を生む。効果を最大化するために控えめに使う。

よく使われる補色ペア:

青 + オレンジ
紫 + 黄
緑 + 赤（アクセシビリティ上の注意あり。エラー状態の近くでは慎重に使う）

青 (#3B82F6) をプライマリカラーとして、
オレンジ (#F97316) をセールバッジとプロモーション要素のハイライトアクセントとして使用してください。
オレンジはインターフェースの 5% 以内に抑えること。

類似色

カラーホイール上で隣接する色。調和と統一感を生む。グラデーションやさりげないバリエーションに最適。

よく使われる類似グループ:

青・インディゴ・紫
緑・ティール・シアン
オレンジ・アンバー・黄

青 (#3B82F6)・インディゴ (#6366F1)・シアン (#06B6D4) の
類似パレットをヒーローセクションのグラデーションとブランド背景に使用してください。

カラーパレット全リファレンス

プライマリカラー

名前	Hex	最適な用途
ブルー	`#3B82F6`	プライマリアクション・金融・企業向け
レッド	`#EF4444`	エラー・破壊的アクション・警告
グリーン	`#10B981`	成功状態・成長・エコ
イエロー	`#F59E0B`	警告・ハイライト・注目
パープル	`#8B5CF6`	プレミアム・クリエイティブ・高級感
ピンク	`#EC4899`	遊び心・ファッション・ライフスタイル
インディゴ	`#6366F1`	テック・洗練・落ち着き
グレー	`#6B7280`	ニュートラルテキスト・ボーダー・無効
オレンジ	`#F97316`	エネルギー・食・ゲーム
ティール	`#14B8A6`	ヘルス・バランス・モダン
シアン	`#06B6D4`	テック・フレッシュ・軽快感
エメラルド	`#059669`	金融利益・自然・エコ

拡張パレット

名前	Hex	名前	Hex
ライム	`#65A30D`	アンバー	`#D97706`
ローズ	`#F43F5E`	バイオレット	`#7C3AED`
フューシャ	`#D946EF`	スカイ	`#0EA5E9`
スレート	`#64748B`	ジンク	`#71717A`
ニュートラル	`#737373`	ストーン	`#78716C`

カラー使用ガイドライン

プライマリカラー — メインアクション・リンク・ブランド要素に使用（インターフェースの5〜10%）

セカンダリカラー — 補助的な要素・セカンダリアクションに使用（インターフェースの15〜20%）

ニュートラルカラー — テキスト・背景・ボーダーに使用（インターフェースの70〜80%）

セマンティックカラー — 赤はエラー・緑は成功・黄は警告に専用で使う。装飾目的で使わない

既製パレットプロンプト

ゼロから構築せずに統一されたマルチカラーシステムを使いたいときに活用する。

モダン

モダンパレットを使用してください:
プライマリブルー (#3B82F6)、サポートグレー gray-100 (#F3F4F6)、
gray-800 (#1F2937)、blue-600 (#2563EB)。
SaaSアプリケーション向けのクリーンでプロフェッショナルな仕上がり。

バイブラント

バイブラントパレットを使用してください:
プライマリパープル (#8B5CF6)、ピンク (#EC4899)、イエロー (#F59E0B)、
グリーン (#10B981)。クリエイティブ・若者向けブランドにエネルギッシュな印象。

アース

アースパレットを使用してください:
アンバー (#D97706)、オレンジ (#F97316)、グリーン (#10B981)、
ストーン (#78716C)。食・ウェルネス・エコブランドに温かく自然な印象。

モノクロ

モノクロパレットを使用してください:
gray-900 (#111827)、gray-700 (#374151)、gray-500 (#6B7280)、
gray-300 (#D1D5DB)、white (#FFFFFF)。
エディトリアルやブログデザインにエレガントでコンテンツ重視の仕上がり。

オーシャン

オーシャンパレットを使用してください:
blue-900 (#1E3A5F)、blue-700 (#1D4ED8)、cyan-500 (#06B6D4)、
teal-400 (#2DD4BF)。金融・データ駆動型インターフェースに信頼感を与える。

サンセット

サンセットパレットを使用してください:
オレンジ (#F97316)、レッド (#EF4444)、ピンク (#EC4899)、
パープル (#8B5CF6)、イエロー (#F59E0B)。
ゲーム・エンタメ・ソーシャルプラットフォームにダイナミックでエネルギッシュな印象。

このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]

参考文献

W3C Web Accessibility Initiative, WCAG 2 Overview
MDN Web Docs, Learn web development

テーマとシャドウの深度

スタイリングの基礎