majiayu000 ブランドアイデンティティ設計
概要
ブランドアイデンティティ設計、カラーシステム、タイポグラフィ、ビジュアルガイドラインの構築を包括的に支援するスキルです。
実行フロー
Step 1: ブランド基盤の構築
コアアイデンティティの定義
## ブランド定義ワークシート
### ブランド価値（3-5個）
- 価値1: [説明]
- 価値2: [説明]
### ブランドパーソナリティ
- 形容詞（例: 革新的、信頼できる、親しみやすい）
### ターゲットオーディエンス
- 年齢層、職業、ライフスタイル、価値観
ロゴとシンボルの設計原則
ロゴのバリエーション:
- プライマリロゴ（フルカラー版）
- セカンダリロゴ（白抜き版）
- モノクロ版
- アイコン/シンボル
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: タイポグラフィシステム
フォント選定
フォントペアリング推奨:
- モダン・ミニマル: Inter
- エレガント: Playfair Display + Lato
- テック系: Space Grotesk + IBM Plex Sans
- ビジネス: 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. ボイスとトーン
- ライティングガイドライン
出力成果物
- ブランドガイドライン文書: PDF/マークダウン形式
- カラーパレット: デザインツール用ファイル、CSS変数
- タイポグラフィ設定: フォントファイル、CSS
- デザイントークン: JSON、CSS Variables
- コンポーネントライブラリ: Figma、Storybook
ベストプラクティス
- 一貫性: 全タッチポイントで統一されたブランド体験
- アクセシビリティ: WCAGコントラスト比を満たす
- スケーラビリティ: 成長に対応できるシステム設計
- 実装可能性: 開発者が実装しやすいガイドライン
- 進化: 定期的な見直しと更新
関連ファイル
- TOKENS.md - デザイントークン定義
- COMPONENTS.md - コンポーネントリファレンス