1. UIデザインの基本は “3色構成”
UIの配色は、実は 3色で十分。
🔹① ベースカラー（背景）
白・薄いグレー・黒など
→ UIの土台になる色
🔹② メインカラー（ブランドカラー）
ロゴやサービスの印象を作る色
→ ボタン・リンク・アイコンなどで使う
→ 「一番よく使う色」
🔹③ アクセントカラー（補助）
注意喚起や強調したい場所に少量使う
→ 赤・黄色・緑のような “目に入る色” を控えめに
UIはこの 3色 + グレー階調（Gray-scale）で十分！
（5〜6色以上使うと素人っぽくなりがち）
3. 色の心理効果（UI向け）
色には心理的な印象があるため、UIの目的に合わせて使います。
色 心理効果・印象 UIでの用途例
青 信頼・清潔・知性 金融、SaaS、企業系UI
緑 安心・健康・自然 成功メッセージ、チェックマーク
赤 危険・注意・緊急 エラー、削除ボタン
黄 注意・明るさ 警告（Warning）
黒 高級・強さ モダンUI、文字色
グレー 中立・控えめ 背景、境界線、無効状態
4. コントラスト（可読性）の基礎
UIで一番重要なのが 可読性（文字が読みやすいか）。
💡基本ルール
文字色と背景色のコントラストを十分にする
ベースが白なら 文字は黒〜濃いグレー
背景色は薄い色（#F7F7F7 など）
ボタンの文字は「白 × 濃い色」 or 「濃い文字 × 淡いボタン色」
コントラストの指標（WCAG）
4.5:1 以上が推奨（一般文字）
3.0:1 以上（大きい文字）
5. カラーハーモニーの種類（UIでよく使う）
① モノクロマティック（同一色系）
1つの色の明度・彩度違い
→ UIデザインで最も安全
例：青 → 濃い青 → 薄い青 → グレー
② アナログ（類似色）
隣り合う色
→ 優しい・調和しやすい
例：青、青緑、緑
③ コンプリメンタリー（補色）
反対色
→ 注意喚起に最強（エラー・アクセント）
例：青 × オレンジ
例：緑 × 赤
6. Figmaでの配色運用（超基本）
🎨 色を決めたら Style に登録する
何かオブジェクトを選択
右パネル → Fill
四角のアイコン → ＋（Create style）
名前をつけて保存
/Colors
Primary / Blue 500
Primary / Blue 300
Accent / Red 500
Gray / 100〜900
こうすると…
色変更すると全画面に反映される
統一感が出る
開発者へ正しい値を渡せる（ハンドオフ）
7. 最初に決めるべき “UIカラーセット” サンプル
Primary: #0066FF
Primary Light: #E5F0FF
Primary Dark: #004FCC
Accent: #FF4D4D
Success: #22C55E
Warning: #FACC15
Error: #EF4444
Gray 900
Gray 700
Gray 500
Gray 300
Gray 100
White (#FFFFFF)
