02-02_配色設計

出典: 制作部署マニュアル 配色設計（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）

配色の基本ルール

色は感情を支配する。配色を間違えると、どれだけレイアウトが綺麗でも信用されない。

ブランドの印象は色で7割決まる（色彩心理学）

---

カラーホイール（色相環）の理解

色相環の基本配置

• 赤 → 橙 → 黄 → 緑 → 青 → 紫 → 赤 の円環
• 隣り合う色：類似色（調和・落ち着き）
• 真反対の色：補色（強烈なコントラスト・目立つ）
• 三角形配置：トライアド（バランス良い活気）

6つの定番配色テクニック

配色	特徴	使いどころ
モノクロマティック	1色相の濃淡だけ	ミニマル・洗練
アナロガス（類似色）	隣り合う2-3色	自然・落ち着き
コンプリメンタリー（補色）	真反対の2色	エネルギッシュ・スポーツ
スプリットコンプリメンタリー	補色の両隣2色	バランス取れた活発さ
トライアド	三角形3色	カラフル・ポップ
テトラディック	四角形4色	多彩・複雑（上級）

---

60-30-10 ルール（配色比率の黄金則）

プロがほぼ全ての配色で使う比率：

比率	用途	例
60%	ベースカラー（背景・余白）	白 / 黒 / グレー
30%	メインカラー（コンテンツ・カード）	ブランドカラー
10%	アクセントカラー（CTA・強調）	黄 / 赤 / オレンジ

→ TERASUのマニュアルサイトの場合：
- 60% = 黒（背景）
- 30% = 白（テキスト）
- 10% = 黄色（アクセント）

これがプロっぽい配色のシンプル公式。

---

業種別 配色ガイド

コーポレート系（信頼・誠実）

• メイン：紺・ネイビー・グレー
• アクセント：赤・オレンジ・金
• 例：銀行、保険、コンサル、士業

IT・テック系（先進・革新）

• メイン：ブルー・パープル・ブラック
• アクセント：シアン・グリーン・ライム
• 例：SaaS、エンジニア向け、開発会社

美容・健康系（やさしさ・清潔）

• メイン：パステルピンク・ベージュ・ライトグリーン
• アクセント：白・ゴールド
• 例：クリニック、エステ、ヨガ

飲食系（食欲・温かみ）

• メイン：オレンジ・赤・茶
• アクセント：黄・グリーン
• 例：レストラン、カフェ、デリ

教育系（明るさ・成長）

• メイン：青・緑・黄
• アクセント：オレンジ・赤
• 例：学校、塾、研修

エコ・サステナブル系

• メイン：グリーン・アースカラー
• アクセント：ブラウン・サンセットオレンジ
• 例：環境企業、農業、自然食品

高級・ラグジュアリー系

• メイン：黒・濃紺・濃緑
• アクセント：金・銀・白
• 例：高級ホテル、ブランド、富裕層向け

---

色の心理効果

色	心理効果	使い時
🔴 赤	情熱・緊急・食欲・愛	セール・限定・飲食
🟠 オレンジ	活気・親しみ・楽しさ	キャンペーン・若年向け
🟡 黄	注意・明るさ・幸福	警告・注目させたいCTA
🟢 緑	安心・自然・健康・成功	環境・医療・OK表示
🔵 青	信頼・冷静・知性・安定	企業・金融・テック
🟣 紫	高貴・神秘・創造	高級・芸術・スピ系
⚫ 黒	高級・力・洗練	ラグジュアリー・テック
⚪ 白	清潔・純粋・シンプル	医療・モダン・余白
🟤 茶	安定・自然・温かみ	エコ・伝統・木材系

→ ブランドに合った「気持ち」をクライアントにヒアリングしてから配色を決める。

---

コントラスト比（読みやすさの絶対ルール）

WCAG（Web Content Accessibility Guidelines）の最低基準：

要素	最低コントラスト比
通常テキスト（14px〜）	4.5 : 1
大きいテキスト（18px+）	3 : 1
UIコンポーネント（ボタン枠等）	3 : 1
AAA基準（推奨）	7 : 1

チェックツール

• WebAIM Contrast Checker
• Chrome DevTools の Color picker（自動でコントラスト比表示）
• Figma plugin: Stark / Able

NG例

• 白背景 + 薄いグレー文字（#CCC等）→ 読めない
• 黄色背景 + 白文字 → 視認性最悪
• パステルカラー + パステルカラー → 全部沈む

---

ダークモード対応（モダンサイト必須）

ダークモード設計の原則

• 完全な黒（#000）は使わない → #0A0A0A 〜 #121212 推奨（目に優しい）
• テキストは完全な白を避ける → #E5E5E5 〜 #F5F5F5 推奨
• 影の代わりに「明度の段差」で立体感を出す
• アクセント色はやや彩度を落とす（眩しさ防止）

CSS実装

@media (prefers-color-scheme: dark) {
  body {
    background: #0A0A0A;
    color: #E5E5E5;
  }
}

---

TERASU業種別カラーパレット（実用テンプレ）

テンプレート1: コーポレート（紺×金）

ベース  : #FFFFFF / #F8FAFC
メイン  : #1E3A8A (濃紺)
アクセント: #F59E0B (アンバー)

テンプレート2: クリニック（白×水色）

ベース  : #FFFFFF
メイン  : #0EA5E9 (スカイブルー)
アクセント: #06B6D4 (シアン)

テンプレート3: レストラン（茶×橙）

ベース  : #FAF7F2
メイン  : #78350F (茶)
アクセント: #EA580C (オレンジ)

テンプレート4: テック系SaaS（黒×紫）

ベース  : #0A0A0A
メイン  : #8B5CF6 (パープル)
アクセント: #22D3EE (シアン)

テンプレート5: 美容サロン（ピンク×ゴールド）

ベース  : #FFF7F5
メイン  : #EC4899 (ピンク)
アクセント: #D4AF37 (ゴールド)

---

ツール：配色を決めるサービス

ツール	用途
Coolors	スペースキーで配色自動生成
Adobe Color	色相環ベースで配色提案
Tailwind Color Palette	モダンWeb向けカラーセット
Color Hunt	人気の配色パターン集
Realtime Colors	実際のサイトに配色を試せる

---

チェックリスト：配色を決めたら確認

• [ ] 60-30-10ルールに沿ってる
• [ ] ベース・メイン・アクセントの役割が明確
• [ ] テキストのコントラスト比が4.5:1以上
• [ ] 業種・ターゲットの心理に合ってる
• [ ] ブランドガイドラインに沿ってる（既存ブランドの場合）
• [ ] 印刷時にも違和感ない（CMYK出力でくすまない）
• [ ] 色覚多様性に配慮（赤緑色覚で見て情報が伝わる）

→ 全部 なら配色は合格。

---

やってはいけない配色NG

NG	理由
5色以上使う	カラフルすぎて何が大事か分からない
ブランドカラーをCTAじゃないとこに使う	アクセントが分散する
純粋な黒（#000）と純粋な白（#FFF）のみ	硬すぎる・古臭い
赤と緑の組み合わせ	色覚多様性で区別できない人がいる
背景色と文字色のコントラスト2:1以下	読めない
「お洒落だから」で淡い色だけ	視認性低・CVR下がる