brand-systems

ブランドシステム

ブランドとは、目に見える形にした約束です。ブランドシステムは、その約束が一貫して守られるようにするルールです。

このスキルを使う場面

• 新しいブランドアイデンティティの作成
• 既存のアイデンティティのリブランディングや刷新
• ブランドガイドラインのドキュメント作成
• 場当たり的なブランド要素の体系化
• ブランドの適用方法に関するトレーニング

ブランドシステムの構成要素

1. 戦略レイヤー（基盤）

ポジショニングステートメント

For [target audience]
Who [statement of need]
[Brand] is a [category]
That [key benefit]
Unlike [competitors]
We [key differentiator]

ブランドの柱

1. 目的：利益を超えて、私たちが存在する理由
2. ビジョン：私たちが創り出す未来
3. ミッション：その未来を実現する方法
4. 価値観：私たちが信じること（中核となる価値観を3～5つ）

ブランドパーソナリティ

行動の例とともに、3～5個の形容詞を定義します。

特性	意味	意味しないこと
大胆	明確な立場を取る	攻撃的／無謀
親しみやすい	温かく、誰でも歓迎する	プロ意識に欠ける
革新的	先進的	奇をてらう

ブランドアーキタイプ

以下から、主要なもの（必要に応じて副次的なものも）を選びます。

アーキタイプ	中核となる欲求	声の特徴
賢者	真実	知識豊富、分析的
無垢な人	安全	楽観的、シンプル
探検家	自由	冒険的、誠実
支配者	支配	権威ある、洗練された
創造者	革新	想像力豊か、先見性のある
世話をする人	奉仕	思いやりがあり、支援的
魔術師	変革	先見性があり、カリスマ性のある
英雄	熟達	勇敢、意志が固い
反逆者	解放	反抗的、既存の秩序を揺るがす
恋人	親密さ	情熱的、官能的
道化師	楽しさ	遊び心があり、型破り
普通の人	所属	親しみやすく、謙虚

---

2. ビジュアルアイデンティティレイヤー

ロゴシステム

ロゴの種類：

種類	説明	例
ワードマーク	名前をロゴにしたもの	Google、Coca-Cola
レターマーク	頭文字	IBM、HBO
シンボル	抽象的なマーク	Nike、Apple
コンビネーション	シンボル＋ワードマーク	Adidas、Lacoste
エンブレム	シンボル内にテキストを配置	Starbucks、NFL

ロゴの要件：

• 16pxのファビコンサイズでも機能する
• 暗い背景と明るい背景の両方で機能する
• 白黒でも認識できる
• 印刷時に問題となるグラデーションを使わない
• アイソレーションエリアのルールを定める

ロゴの組み合わせ：

[Symbol]        [Symbol][Wordmark]       [Wordmark]
                                          [Symbol]
  Symbol          Horizontal              Stacked
  Only            Lockup                  Lockup

アイソレーションエリア： ロゴの周囲に確保する最小の余白（通常はロゴ要素の高さを基準にする）を定義します。

   ┌──────────────────────────────┐
   │                              │
   │    ┌──────────────────┐      │
   │    │                  │      │
   │    │      LOGO        │      │  ← Clear space = 'X'
   │    │                  │      │    (defined by logo element)
   │    └──────────────────┘      │
   │                              │
   └──────────────────────────────┘

カラーパレット

プライマリパレット：

Primary:
  Name: [Descriptive name, e.g., "Trust Blue"]
  Hex: #2563eb
  RGB: 37, 99, 235
  HSL: 221, 83%, 53%
  Tailwind: blue-600

  Usage: CTAs, links, primary actions
  Accessible on: white (5.17:1), gray-50 (4.95:1)

拡張パレット：

• プライマリーカラーのシェード（50～950のスケール）
• セカンダリーカラー（シェードを含む）
• アクセントカラー（高コントラスト）
• ニュートラルスケール（グレー系）
• セマンティックカラー（成功、警告、エラー、情報）

色の比率：

60% - Dominant (backgrounds, large areas)
30% - Secondary (supporting elements)
10% - Accent (highlights, CTAs)

ダークモードに関する考慮事項：

Light Mode          Dark Mode
white           →   gray-900
gray-50         →   gray-800
gray-900        →   white
blue-600        →   blue-400

タイポグラフィシステム

文字サイズのスケール：

const typeScale = {
  xs:     '0.75rem',    // 12px - captions
  sm:     '0.875rem',   // 14px - secondary text
  base:   '1rem',       // 16px - body
  lg:     '1.125rem',   // 18px - lead text
  xl:     '1.25rem',    // 20px - h4
  '2xl':  '1.5rem',     // 24px - h3
  '3xl':  '1.875rem',   // 30px - h2
  '4xl':  '2.25rem',    // 36px - h1
  '5xl':  '3rem',       // 48px - display
  '6xl':  '3.75rem',    // 60px - hero
};

フォントの組み合わせの原則：

アプローチ	例	効果
コントラスト	セリフ体の見出し＋サンセリフ体の本文	クラシック、エディトリアル
調和	ジオメトリック体の見出し＋ヒューマニスト体の本文	モダン、親しみやすい
スーパーファミリー	同じファミリーの異なるウェイト	統一感があり、体系的

おすすめの組み合わせ：

• エディトリアル：Playfair Display + Source Sans Pro
• モダン：Outfit + Inter
• テクニカル：Space Grotesk + IBM Plex Sans
• エレガント：Cormorant Garamond + Lato
• スタートアップ：Cal Sans + Geist

画像とアイコノグラフィ

写真のスタイル：

• 被写体に関するガイドライン
• 色の処理（自然、鮮やか、控えめ）
• 構図の好み
• ムードと照明
• 避けるべきもの

アイコンシステム：

Style: [Outlined | Filled | Duotone]
Stroke weight: [1.5px | 2px | 2.5px]
Corner radius: [0 | 2px | rounded]
Grid: [24x24 | 16x16]
Source: [Lucide | Heroicons | Phosphor | Custom]

イラストのスタイル（該当する場合）：

• スタイルの参考例
• 色の使い方
• 線の太さ
• ディテールのレベル
• キャラクターに関するガイドライン

---

3. ボイスレイヤー

ボイス属性

変わらないパーソナリティの特性を3～4つ定義します。

We are:
1. [Trait 1] - [What this means in practice]
2. [Trait 2] - [What this means in practice]
3. [Trait 3] - [What this means in practice]

We are NOT:
1. [Anti-trait 1]
2. [Anti-trait 2]
3. [Anti-trait 3]

トーンのバリエーション

声の特徴は一定ですが、トーンは状況に合わせて調整します。

状況	トーンの調整	例
歓迎	温かく、熱意のある	「ようこそ！お迎えできてうれしいです。」
エラー	落ち着いて、役立つ	「問題が発生しました。解決方法をご案内します。」
成功	お祝いの気持ちを込めて、簡潔に	「完了しました！変更が反映されています。」
チュートリアル	辛抱強く、励ます	「一緒に手順を確認していきましょう。」
法務	明確で、率直	「続行すると、利用規約に同意したことになります。」

ライティングガイドライン

• 文の長さに関する方針
• 能動態と受動態の使い分け
• 句読点のスタイル
• 大文字・小文字のルール
• 使用する語句／避ける語句
• 専門用語の方針

---

4. システムレイヤー

デザイントークン

// tokens.js
export const tokens = {
  colors: { /* color definitions */ },
  typography: { /* font definitions */ },
  spacing: {
    xs: '0.25rem',   // 4px
    sm: '0.5rem',    // 8px
    md: '1rem',      // 16px
    lg: '1.5rem',    // 24px
    xl: '2rem',      // 32px
    '2xl': '3rem',   // 48px
    '3xl': '4rem',   // 64px
  },
  radii: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '0.75rem',
    xl: '1rem',
    full: '9999px',
  },
  shadows: { /* shadow definitions */ },
  transitions: {
    fast: '150ms ease-out',
    normal: '200ms ease-out',
    slow: '300ms ease-out',
  },
};

コンポーネントのパターン

一般的なコンポーネントパターンを記録します。

## Button

### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Tertiary actions
- Destructive: Dangerous actions

### Sizes
- sm: Compact contexts
- md: Default
- lg: Prominent placement

### States
- Default
- Hover
- Active/Pressed
- Focus (keyboard)
- Disabled
- Loading

レイアウトパターン

• グリッドシステム（12列、ガター）
• ブレークポイント
• コンテナーの幅
• セクション間の余白

---

5. アプリケーションレイヤー

タッチポイントのガイドライン

以下のブランド適用について記録します。

• ウェブサイト
• モバイルアプリ
• メールテンプレート
• ソーシャルメディアのプロフィール
• プレゼンテーションテンプレート
• 印刷物
• パッケージ（該当する場合）
• 環境／サイン

使用上の注意

正しい使用方法と誤った使用方法の例：

✓ DO                         ✗ DON'T
─────────────────────────────────────────
Logo on white background     Logo on busy photo
Logo with clear space        Logo crowded by elements
Primary button for CTA       Multiple primary buttons
Consistent icon style        Mixed icon styles

---

ブランドキャンバス（クイックリファレンス）

# [Brand Name] Brand Canvas

## Who We Are
Purpose: [Why we exist]
Vision: [Future we're creating]
Mission: [How we'll get there]

## Who We Serve
[Target audience description]

## What Makes Us Different
[Key differentiators]

## How We Sound
Voice: [3-4 adjectives]
Archetype: [Primary archetype]

## How We Look
Colors: [Primary, Secondary, Accent]
Typography: [Display font + Body font]
Style: [Visual approach in 2-3 words]

## Our Promise
[The one thing we deliver]

---

リソース

ブランドに関する作業で、上記の要約より詳しい情報が必要な場合は、該当するファイルをお読みください。

• assets/brand-canvas-template.md：記入式ブランドキャンバス
• references/logo-design.md：ロゴ作成の原則
• references/color-palettes.md：ブランディングのための色彩理論
• references/typography-pairing.md：フォントの組み合わせガイド
• references/brand-voice.md：ブランドボイス開発フレームワーク