配色の基礎 - カラーパレットの作り方

Figmaで学ぶ配色理論 — カラースタイルとパレット設計

配色はデザインの中で最も「感覚的」と思われがちですが、実は明確なルールと手順があります。センスがなくても、正しい手順でカラーパレットを作れば、プロっぽい配色が実現できます。このレッスンでは色の基礎理論からFigmaのカラースタイル設定、実務で使える60-30-10ルールまでを一気に習得します。

60-30-10ルール + Figmaカラースタイル設計

---

色の基礎理論

色の3属性

すべての色は3つの属性で定義できます。

FigmaのカラーピッカーはHSLモードで操作できます。HSLを使いこなすと、「この色の薄いバージョン」「暗いバージョン」を直感的に作れます。

色温度と心理効果

💡 BtoB SaaSに青系が多いのは、「信頼・安定・技術」という心理効果を狙っているためです。デザイン上の好みよりも、ターゲットユーザーの心理に合わせた色選びが重要です。

---

配色パターン4種

1. 補色（Complementary）

色相環で正反対に位置する2色の組み合わせ。強いコントラストとエネルギーを生みます。

• ◆例: 青（#6366f1）× オレンジ（#f59e0b）
• ◆使い方: メインカラーと目立つアクセントに
• ◆注意: 同じ面積で使うとうるさくなる。70:30程度の比率で使用

2. 類似色（Analogous）

色相環で隣接する2〜3色の組み合わせ。統一感と調和を生みます。

• ◆例: 青（#3b82f6）× 青紫（#6366f1）× 紫（#8b5cf6）
• ◆使い方: 落ち着いた雰囲気・グラデーション
• ◆注意: 単調になりやすい。アクセントカラーで変化をつけること

3. トライアド（Triadic）

色相環を120°ずつ等分した3色の組み合わせ。バランスよく活気があります。

• ◆例: 青（#6366f1）× 赤（#ef4444）× 緑（#10b981）
• ◆使い方: 子ども向け・エンタメ・ゲーム
• ◆注意: 3色を同比率で使うと散漫。1色をメインにして2色をアクセントに

4. モノクロマティック（Monochromatic）

同じ色相の明度・彩度違いの組み合わせ。洗練されたミニマルな印象になります。

• ◆例: 青 #1e40af（濃） / #3b82f6（中） / #bfdbfe（薄）
• ◆使い方: テック系・高級感・モダン
• ◆注意: 同じ色なのでコントラストを明度差で作る必要がある

---

60-30-10ルール

配色の黄金比率として知られる「60-30-10ルール」は、インテリアデザインからUI/UXまで広く使われる実用的なガイドラインです。

アクセントカラーは使用面積が少ないほど目立ちます。10%を超えると「どこに注目すればよいか」が曖昧になります。

---

Figmaでカラースタイルを作成する

ステップ1: カラーパレットを設計する

まずFigmaの外でカラーパレットを設計します。推奨ツール: Coolors（coolors.co）、Realtime Colors（realtimecolors.com）

最低限定義すべき色:

• ◆Primary: ブランドのメインカラー（500番台）
• ◆Primary Light: 薄いバージョン（100〜300番台）
• ◆Primary Dark: 濃いバージョン（700〜900番台）
• ◆Accent: アクセントカラー
• ◆Neutral: グレー系（テキスト・ボーダー・背景用）
• ◆Semantic: Success（緑）/ Warning（黄）/ Error（赤）/ Info（青）

ステップ2: Figmaにスタイルを登録する

1. ◆長方形を作成して塗りを設定
2. ◆右パネルのFill横にある「4つの点」アイコンをクリック
3. ◆「Create style」で名前をつけて保存
4. ◆命名は / でカテゴリ分けが可能（例: Primary/500, Neutral/200）

⚠️ カラースタイルを登録せずに色を設定すると、後でブランドカラーを変更する際に全要素を手作業で変える羽目になります。必ずスタイルを使ってください。

ステップ3: アクセシビリティを確認する

カラースタイルを作成したら、テキスト色と背景色の組み合わせを確認します。

Figmaプラグインで確認:

• ◆「A11y - Color Contrast Checker」
• ◆「Contrast」

WCAG AA基準（最低ライン）:

• ◆通常テキスト: コントラスト比 4.5:1 以上
• ◆大きいテキスト（18pt+）: 3:1 以上

---

🏋️実践ワーク

1. ◆以下のカラーを使ってFigmaにカラースタイルを登録してください。
   • ◆Primary/500: #6366f1
   • ◆Primary/700: #4338ca
   • ◆Accent/500: #f59e0b
   • ◆Neutral/50: #f8fafc
   • ◆Neutral/900: #0f172a
2. ◆白背景（#ffffff）に Neutral/600（#475569）のテキストを配置し、コントラスト比をプラグインで確認してください。
3. ◆60-30-10ルールに従い、シンプルなカードUIを作成してください（背景・メイン・アクセントの比率を意識）。

📝まとめ

配色は「センス」ではなく、色の3属性の理解・配色パターンの選択・60-30-10ルールの適用・アクセシビリティ確認という手順で設計できます。Figmaのカラースタイルは反復の原則を実現し、後からの一括変更を可能にします。次のレッスンでは同じアプローチをタイポグラフィに適用します。