ブランドアイデンティティ設計

概要

ブランドアイデンティティ設計、カラーシステム、タイポグラフィ、ビジュアルガイドラインの構築を包括的に支援するスキルです。

実行フロー

Step 1: ブランド基盤の構築

コアアイデンティティの定義

## ブランド定義ワークシート

### ブランド価値（3-5個）
- 価値1: [説明]
- 価値2: [説明]

### ブランドパーソナリティ
- 形容詞（例: 革新的、信頼できる、親しみやすい）

### ターゲットオーディエンス
- 年齢層、職業、ライフスタイル、価値観

ロゴとシンボルの設計原則

ロゴのバリエーション:

1. プライマリロゴ（フルカラー版）
2. セカンダリロゴ（白抜き版）
3. モノクロ版
4. アイコン/シンボル

Step 2: カラーシステム設計

プライマリカラーパレット

/* カラー階調システム（50-900） */
--color-primary-50:  #f0f9ff;  /* 最も明るい */
--color-primary-500: #0ea5e9;  /* ベースカラー */
--color-primary-900: #0c4a6e;  /* 最も暗い */

セマンティックカラー

/* 成功 */
--color-success-500: #22c55e;

/* 警告 */
--color-warning-500: #f59e0b;

/* エラー */
--color-error-500: #ef4444;

/* 情報 */
--color-info-500: #3b82f6;

アクセシビリティ確保

WCAGコントラスト比基準:

AA基準（最低要件）:
- 通常テキスト: 4.5:1
- 大きいテキスト: 3:1

AAA基準（推奨）:
- 通常テキスト: 7:1
- 大きいテキスト: 4.5:1

Step 3: タイポグラフィシステム

フォント選定

フォントペアリング推奨:

1. モダン・ミニマル: Inter
2. エレガント: Playfair Display + Lato
3. テック系: Space Grotesk + IBM Plex Sans
4. ビジネス: Roboto + Open Sans

タイプスケール

--text-xs:   0.75rem;  /* 12px - キャプション */
--text-sm:   0.875rem; /* 14px - セカンダリ */
--text-base: 1rem;     /* 16px - 本文 */
--text-lg:   1.125rem; /* 18px - 強調本文 */
--text-xl:   1.25rem;  /* 20px - 小見出し */
--text-2xl:  1.5rem;   /* 24px - H4 */
--text-3xl:  1.875rem; /* 30px - H3 */
--text-4xl:  2.25rem;  /* 36px - H2 */
--text-5xl:  3rem;     /* 48px - H1 */

Step 4: スペーシングとレイアウト

スペーシングスケール

/* 4pxベースのスケール */
--spacing-1:  0.25rem;  /* 4px */
--spacing-2:  0.5rem;   /* 8px */
--spacing-4:  1rem;     /* 16px */
--spacing-6:  1.5rem;   /* 24px */
--spacing-8:  2rem;     /* 32px */
--spacing-12: 3rem;     /* 48px */

グリッドシステム

/* レスポンシブブレークポイント */
--breakpoint-sm: 640px;   /* モバイル */
--breakpoint-md: 768px;   /* タブレット */
--breakpoint-lg: 1024px;  /* ラップトップ */
--breakpoint-xl: 1280px;  /* デスクトップ */

Step 5: ビジュアル要素

アイコンシステム

推奨ライブラリ:
- Heroicons: クリーンでモダン
- Lucide: 豊富なバリエーション
- Phosphor Icons: 多様なスタイル

標準サイズ:
- xs: 16px / sm: 20px / md: 24px / lg: 32px

角丸と影

/* 角丸 */
--radius-sm:   0.125rem;  /* 2px */
--radius-md:   0.375rem;  /* 6px */
--radius-lg:   0.5rem;    /* 8px */
--radius-full: 9999px;    /* 完全な円 */

/* シャドウ */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

Step 6: モーション・アニメーション

/* イージング関数 */
--ease-out: cubic-bezier(0, 0, 0.2, 1);

/* アニメーション時間 */
--duration-150: 150ms;  /* 素早い */
--duration-200: 200ms;  /* 標準 */
--duration-300: 300ms;  /* ゆっくり */

Step 7: ブランドガイドライン作成

# [ブランド名] ブランドガイドライン

## 1. ブランド概要
- ミッション、ビジョン、価値、パーソナリティ

## 2. ロゴ
- プライマリロゴ、バリエーション、使用禁止例

## 3. カラーシステム
- プライマリ、セマンティック、ニュートラル

## 4. タイポグラフィ
- フォント、タイプスケール、使用例

## 5. スペーシングとレイアウト
- スペーシングスケール、グリッド、ブレークポイント

## 6. コンポーネント
- ボタン、フォーム、カード

## 7. アイコンとビジュアル
- アイコンシステム、イラストレーションスタイル

## 8. ボイスとトーン
- ライティングガイドライン

出力成果物

1. ブランドガイドライン文書: PDF/マークダウン形式
2. カラーパレット: デザインツール用ファイル、CSS変数
3. タイポグラフィ設定: フォントファイル、CSS
4. デザイントークン: JSON、CSS Variables
5. コンポーネントライブラリ: Figma、Storybook

ベストプラクティス

1. 一貫性: 全タッチポイントで統一されたブランド体験
2. アクセシビリティ: WCAGコントラスト比を満たす
3. スケーラビリティ: 成長に対応できるシステム設計
4. 実装可能性: 開発者が実装しやすいガイドライン
5. 進化: 定期的な見直しと更新

関連ファイル

• TOKENS.md - デザイントークン定義
• COMPONENTS.md - コンポーネントリファレンス