elite-brand-design

エリートブランドデザイン

ブランドパーソナリティの定義からビジュアルシステムまで、戦略的なブランドアイデンティティを構築します。

クイックリファレンス

トピック	参照ファイル
ブランドの基礎	brand-fundamentals.md
ビジュアルアイデンティティ	visual-identity-system.md
色彩心理学	brand-color-psychology.md
ブランドの声としてのタイポグラフィ	brand-typography.md
ブランドのトーンと声	brand-tone-voice.md
スタイルガイドの作成	brand-style-guide.md
ブランドのタッチポイント	brand-touchpoints.md
ブランドの進化	brand-evolution.md
アクセシブルなブランディング	brand-accessibility.md
ブランドパッケージジェネレーター	brand-package.md

関連スキル

• elite-design-core — デザイントークン、余白、文字サイズのスケール（実装レイヤー）
• elite-gsap — ロゴアニメーション、モーション言語
• elite-css-animations — CSS ネイティブのブランドモーション効果
• elite-layouts — ブランドに一貫性のあるレイアウトシステム
• elite-performance — ブランドアセットの最適化
• elite-accessibility — インクルーシブデザインの要件
• elite-ux-strategy — コンバージョンを促進するブランド
• elite-inspiration — アーキタイプの事例研究

---

ブランドとデザインの違い

ブランドとは、人々があなたに触れたときに感じるものです。ブランドはファイルの中ではなく、人々の心の中に存在します。

ブランディングとは、一貫したシグナルを通じて、その認識を意図的に形作ることです。

ブランドアイデンティティとは、そうしたシグナルを伝えるビジュアル、言語、体験の各要素からなるシステムです。

このスキルでは、ブランドアイデンティティをゼロから作成する方法を扱います。下流のあらゆるデザイン上の選択に影響する戦略的な判断を扱います。

---

ブランド作成のプロセス

フェーズ 1：発見

あなたは何者ですか？誰に向けたものですか？何を信じていますか？ → brand-fundamentals.md を参照してください

フェーズ 2：パーソナリティ

どのアーキタイプが適していますか？どのような特性がブランドの声を定義しますか？ → brand-fundamentals.md を参照してください

フェーズ 3：ビジュアルアイデンティティ

ロゴ、色、タイポグラフィ、質感――目に見えるシステムです。 → visual-identity-system.md、brand-color-psychology.md、brand-typography.md を参照してください

フェーズ 4：言語的アイデンティティ

トーンと声、メッセージの階層、マイクロコピーです。 → brand-tone-voice.md を参照してください

フェーズ 5：ドキュメント化

チームの成長に合わせて拡張できる、生きたスタイルガイドです。 → brand-style-guide.md を参照してください

---

ブランドアーキタイプのフレームワーク

ブランドの個性がデザインにどのように反映されるかを示す、実運用向けの5つのアーキタイプです。

アーキタイプ	個性	タイポグラフィの特徴	色の特徴	形状の特徴
Modern/Bold	自信に満ち、率直で、技術的	幾何学的なサンセリフ（Space Grotesk）	高コントラストのダークカラー＋鮮やかなアクセント	中程度の角丸
Luxury/Editorial	洗練され、向上心をかき立て、感覚に訴える	コントラストの強いセリフ（Cormorant Garamond）	ニュートラルカラーに温かみのあるメタリックカラー	やわらかな角丸
Warm/Inclusive	安心感があり、共感的で、人間味がある	やわらかな可変セリフ（Fraunces）	落ち着いた幅広いパレット（プラム／セージ／ラベンダー）	大きめの角丸
Authoritative	威厳があり、信頼でき、確立されている	しっかりとしたセリフ（Gelasio）	伝統的な力強い色（ネイビー／ゴールド）	角丸なし（鋭角）
Professional	有能で、頼りになり、思いやりがある	セリフ＋サンセリフの組み合わせ（DM ファミリー）	すっきりと機能的なニュートラルカラー	標準的な角丸

個性をコードに反映する方法

• 「Authoritative」→ セリフのディスプレイフォント＋全体に border-radius: 0 !important ＋ネイビー／ゴールドのトークン
• 「Warm/Inclusive」→ SOFT 軸を備えた可変フォント＋プラムを帯びたシャドウ＋大きめの角丸
• 「Modern/Bold」→ 幾何学的なサンセリフ＋詰めた文字間隔＋グレインテクスチャのオーバーレイ
• 「Luxury/Editorial」→ コントラストの強いセリフ＋アクセント用のイタリックフォント＋ゴールド／温かみのあるニュートラルカラーのトークン

→ トークンの実装については elite-design-core、モーションの表現については elite-gsap を参照してください。

---

よくある落とし穴

1. 色から始める — まず個性と対象ユーザーから始めます。色はそのあとに決めます。
2. フォントを使いすぎる — ファミリーは最大2つまでです。フォントの役割（ディスプレイ、本文、等幅）は3つが上限です。
3. 一貫性のない適用 — ブランドシステムは、すべてのタッチポイントで一貫して適用されて初めて機能します。すべてを文書化してください。
4. 競合を模倣する — 差別化が目的です。競合を調査し、その選択を避けましょう。
5. アクセシビリティを無視する — すべてのユーザーに認識されないブランドは、完全なブランドとはいえません。
6. 目的より装飾を優先する — ブランドの各要素は、何かを伝えるものであるべきです。単なる装飾なら削除しましょう。
7. 言語的アイデンティティを省略する — 口調はビジュアルアイデンティティと同じくらい重要です。美しいサイトでも、ありきたりな文章では中身がないように感じられます。

---

ブランドパッケージの生成

ブランドの発見（フェーズ1～5）を終えたら、すべての成果物を含む brand-assets/ フォルダーを生成します。

→ brand-package.md を参照してください。

生成されるもの：

• デザイントークン（Tailwind v4 @theme＋セマンティックレイヤー）
• ロゴのプレースホルダー（アイコン、ワードマーク、組み合わせの SVG）
• ファビコン一式（SVG ファビコン＋Apple タッチアイコン）
• ソーシャルテンプレート（OG 画像＋プロフィール画像）
• スターター CSS（基本スタイル＋コンポーネントライブラリ）
• ブランドガイドライン文書

すべて、汎用テンプレートではなく、ユーザーの発見プロセスでの回答に基づいてブランド化されます。