name: designing-brand description: ブランドアイデンティティとビジュアル設計システムを構築します。カラーシステム、タイポグラフィ、デザイントークン、ガイドラインを提供します。ブランド統一、デザインシステムの構築が必要な場合に使用してください。 disable-model-invocation: false
ブランドアイデンティティ設計
概要
ブランドアイデンティティ設計、カラーシステム、タイポグラフィ、ビジュアルガイドラインの構築を包括的に支援するスキルです。
実行フロー
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 - コンポーネントリファレンス