Brand

ブランドスキル

一貫性があり、独自性が際立ち、ありきたりな AI 生成物と混同されることのない、完全なブランドアイデンティティを構築します。

何が違うのか

AI らしい粗雑な仕上がりを避けることに注力： このプロセスでは、次のようなブランドを作成します。

• 感情に根ざしている — すべてのビジュアル上の選択が、人間的な意味と結びついています
• 体系的に独自性がある — 無作為な「モダン」風の美学ではなく、一貫したシステムです
• 意図を持って作り込まれている — 初稿のままのありきたりな仕上がりではなく、専門家レベルの洗練度です

秘訣： ビジュアル制作に入る前に、感情に訴える物語から始めます。これにより、LLM に深い記憶が形成され、ありきたりな方向への逸脱を防げます。

---

構成

brand-skill/
├── SKILL.md                      # Overview and routing (you are here)
├── TOOLS-REQUIRED.md             # Prerequisites checklist
├── ADDENDUM-4-WEB-PRESENCE.md    # Convergence theory (why LLMs revert to mean)
├── SKILL-AUDIT.md                # Gap analysis from AutonoLabs build
├── Workflows/
│   ├── 00-EmotiveNarrative.md    # Soul of the brand
│   ├── 01-Discovery.md            # Strategy and positioning
│   ├── 02-VisualDirection.md      # Reference exploration
│   ├── 03-MarkDevelopment.md      # Logo via tracing or hand-coding
│   ├── 04-Wordmark.md             # Typography and lockups
│   ├── 05-DesignSystem.md         # Complete system (web + iOS)
│   ├── 05A-CompositionIdentity.md # Evolutionary diverge/kill/mutate process
│   ├── 06-DesignMdCreation.md     # Consolidate to DESIGN.md
│   └── 07-Packaging.md            # Final delivery
├── Templates/
│   ├── DESIGN-template.md         # Comprehensive DESIGN.md template
│   ├── philosophy-template.md
│   ├── visual-philosophy-template.md
│   ├── design-guidelines-template.md
│   └── readme-template.md
└── Examples/
    └── sorted-brand-kit/          # Real-world example (Sorted.fund)

---

はじめに

何よりも先に：

1. Workflows/00-Orchestrator.md を読みます — フェーズの進行と状態の追跡を管理します
2. TOOLS-REQUIRED.md を読みます — 前提条件を確認します
3. 00-Orchestrator.md のチェックリストを使って、プロジェクトディレクトリに .brand-progress.md を作成します。これは継続的に更新する進捗トラッカーです — 各ゲートチェックのたびに更新してください。

トリガー

• 「[project] のブランドを作って」
• 「ブランドガイドラインを作成して」
• 「ロゴとビジュアルシステムをデザインして」
• 「AI らしい粗雑な仕上がりに見えない、完全なアイデンティティが必要です」
• 「iOS と Web の仕様を含むデザインシステムの作成を手伝って」

---

プロセス（8 フェーズ）

フェーズ 0：感情に訴える物語 ⭐ 新規

ビジュアルより先に、ブランドの魂を作る

成果物： 4〜6 段落の、美しい感情に訴える物語

• 人間的な瞬間（なぜこれが重要なのか）
• 変化（何が可能になるのか）
• 精神（価値観と原則）
• 人格（世界の中でどのように振る舞うのか）
• 北極星（意思決定を導く光）

最初に行う理由： これは、その後の各フェーズが参照する感情的な文脈になります。すべての選択を人間的な意味に根ざすことで、「クリーンでモダン」というありきたりな方向への逸脱を防ぎます。

所要時間： 20〜30 分

---

フェーズ 1：ディスカバリー

戦略的な基盤を確立する

成果物： ブランドのポジショニング、ボイスガイドライン

• ポジショニングステートメント
• 中核となるメタファー
• ブランドのパーソナリティ特性
• ボイスとトーンの原則

コンテキストを考慮： コードベースにアクセスできる場合は、まずプロジェクトファイルを読み、ポジショニングの仮説を作成します。最初から質問票を提示しないでください。

所要時間： 15〜20 分

---

フェーズ 2：ビジュアルの方向性

参考画像を生成し、美的な方向性を探る

成果物： 方向性を検討するための参考画像（PNG）

• 異なる解釈を探る 3〜4 個のプロンプト
• ユーザーが方向性を選択
• 必要に応じて改良版を生成

任意： スキップして、SVG の反復作業（フェーズ 3）に直接進むこともできます

所要時間： 10〜15 分

---

フェーズ 3：マークの開発

トレースまたは手書きの SVG によってロゴを開発する

成果物： [brand]-mark-final.svg、ファビコン PNG

• 主な方法： 参考画像を生成 → SVG にトレース（vtracer） → 改良
• 代替方法： シンプルな幾何学的マークを手書きで作成
• 変更のたびにレンダリングして検証するループを実施（rsvg-convert）
• 反復の上限：5〜8 回。その後は別のアプローチに切り替える
• ファビコンのサイズ（32px、16px）でテストする

所要時間： 20〜60 分

---

フェーズ 4：ワードマーク

マークとタイポグラフィを組み合わせる

成果物： [brand]-wordmark-final.svg、各種バリエーション

• 横型、縦型、テキストのみのロックアップ
• 反復作業を通じて配置を調整する
• 実際の使用状況を想定してテストする

所要時間： 30〜45 分

---

フェーズ 5：デザインシステム ⭐ 更新

Web と iOS の両方を対象に、完全なビジュアル言語を定義する

成果物： [brand]-design-guidelines.md

• カラー（Web CSS + iOS Swift）
• タイポグラフィ（Dynamic Type 対応の Web + iOS）
• 余白（8pt/px の共通基準）
• コンポーネント（Web + iOS の実装）
• モーションとアニメーションの原則
• プラットフォーム固有の考慮事項

iOS の仕様を含む：

• SwiftUI コンポーネント
• Asset Catalog の設定
• Dynamic Type のサポート
• セーフエリアの処理
• タッチターゲットのガイドライン

所要時間： 30〜60 分

---

フェーズ 5.5：構成とビジュアルアイデンティティ ⭐ NEW

このブランドが空間を独自に占める方法を定義します

成果物： 構成フレームワークと、比較用に展開する名前付きの構造バリエーション 3～5 種類

ここに進化のプロセスがあります。トークン（フェーズ 5）が素材を定義し、構成がそれらを使って何を作るかを定義します。このフェーズがなければ、トークンに関係なく、どのブランドも同じレイアウトに収束してしまいます。

プロセス：

1. アンチリファレンスボードを作成します（明示的に避けるサイトやパターン）
2. 構造の異なるページバリエーションを 3～5 種類生成します。それぞれ、名前の付いた慣習に対抗するものです
3. ユーザーが視覚的に評価できるよう、比較ページに展開します
4. ユーザーがバリエーションを却下します（混ぜ合わせません）。残った方向性を変異させます
5. ぼかしテストで構成が際立つまで繰り返します（視認性 20％の状態で、レイアウトのシルエットをアンチリファレンスと見分けられること）

重要： このフェーズは、ユーザーの参照画像と直感的な反応がすべてを左右します。LLM が生成し、ユーザーが選択します。詳しい手順については、05A-CompositionIdentity.md をご覧ください。

所要時間： 60～120 分（独自性を高めるうえで最も重要なフェーズ）

---

フェーズ 6：DESIGN.md の作成

すべてを 1 つのマスターリファレンスにまとめます

成果物： DESIGN.md（包括的で、継続的に更新するドキュメント）

内容：

1. 感情に訴えるナラティブ（フェーズ 0）
2. 戦略的基盤（フェーズ 1）
3. ビジュアル哲学（フェーズ 1/2）
4. ロゴシステム（フェーズ 3/4）
5. デザイントークン（カラー、タイポグラフィ、スペーシング — Web + iOS）
6. コンポーネント（Web + iOS の実装）
7. 実装ガイドライン（プラットフォーム固有の仕様）
8. アンチ AI スロップの原則（品質検証）

重要な理由： 信頼できる唯一の情報源です。どの LLM も DESIGN.md を読めばブランド全体を把握でき、いつまでも画一的な方向への逸脱を防げます。

所要時間： 20～30 分

---

フェーズ 7：パッケージ化

引き渡し用のアセットを収集します

成果物： [brand]-brand-kit/ フォルダー（または .zip）

• 最終アセット一式を整理
• クイックスタート README
• マスターリファレンスとしての DESIGN.md

所要時間： 10～15 分

---

所要時間の合計

• 短縮コース： 3～4 時間（方向性が明確で、反復が最小限）
• 全工程： 5～7 時間（探索と洗練）
• 複雑なブランド： 8 時間以上（複数のコンセプト、大規模な反復）

---

主な成果物

プロセス中

• [brand]-emotive-narrative.md（フェーズ 0）
• [brand]-philosophy.md（フェーズ 1）
• [brand]-visual-philosophy.md（フェーズ 1/2）
• 参照画像（フェーズ 2）
• [brand]-mark-final.svg + ファビコン（フェーズ 3）
• [brand]-wordmark-*.svg（フェーズ 4）
• [brand]-design-guidelines.md（フェーズ 5）

最終納品物

• DESIGN.md — 信頼できる唯一の情報源（フェーズ 6）
• ブランドキットフォルダー — アセット一式をパッケージ化（フェーズ 7）

---

LLM のデザイン上の限界について — まずお読みください

ブランドに取り組むたびに、開始時に必ずユーザーへ正直に伝えてください。

このスキルで優れた「材料」を作ることはできます。感情に訴えるナラティブ、カラーパレット、タイポグラフィシステム、デザイントークンなどです。しかし、それらの材料を組み合わせて、他のよくデザインされたページと似ていない独自の「構成」を生み出すことは、それだけではできません。

なぜこうなるのか

LLM は、次に来る可能性が最も高いトークンを予測して出力を生成します。これは統計的な平均化処理です。出力が平均へと近づいていくのではありません。仕組みが見つけるよう最適化されているのは平均なので、最初から平均の地点にあります。トレーニングデータに含まれる「良いデザイン」は、圧倒的に洗練され、バランスが取れ、完成され、慣習に沿ったものです。「良いもの」を求めるブランドはすべて、同じ「良いもの」を得ることになります。

具体的には、次のとおりです。

• LLM は自分が作っているものを見られません。 視覚的なフィードバックループがないまま、HTML/CSS/SVG をテキストトークンとして書きます。目隠しをして絵を描いているようなものです。
• LLM は一貫性を最適化します。 あえて未完成にしたり、配置をずらしたり、ルールを破ったりするデザインは、学習時の重み付けに反します。間違いが狙いだったとしても、間違いに見えるものは何でも「修正」しようとします。
• LLM は緊張感を感じられません。 優れたデザインは、創造的な不快感を生み出します。LLM はそれを調整できません。心地よいもの（収束）を作るか、無作為に壊すかのどちらかです。
• LLM には審美眼がありません。 審美眼とは、ルールに還元できない判断力です。LLM はヒューリスティクスによって審美眼を近似しますが、ヒューリスティクスは一般化であり、一般化は平均へと収束します。

これがプロセスに意味すること

ユーザーの方向性、参考例、直感的な反応は、あってもなくてもよいものではありません。それこそがデザインです。 LLM は手であり、ユーザーは目なのです。

テクニックを指定しても役に立ちません。「大胆に」と指示すれば、大胆さの平均へと収束します。「グリッドを崩して」と指示すれば、グリッドを崩すことの平均へと収束します。「驚かせて」でさえ、驚きの平均へと収束します。特徴的な結果を生むほど具体的な指示は、どれも新たな収束の中心になります。

そこから抜け出す唯一の方法は、指示ではなくプロセスです。

1. 発散 — 構造の異なるバリエーションを 3～5 個生成します（色を変えるだけではなく、空間のロジックを変えます。それぞれ、どのデザイン慣習に「抗う」のかを明示します）。
2. 選別 — ユーザーが二択で判断します。残すか、捨てるかです。混ぜてはいけません。混ぜることは平均化です。
3. 変異 — 生き残った方向性の中で、意図的に名前を付けた「逸脱」（慣習への違反）を加えます。
4. 反復 — サイクルを重ねるごとに、中心からさらに遠ざかります。ユーザーの選択こそが創造的な行為です。

この進化的なプロセスは Phase 5.5（Composition）に組み込まれています。理論的な枠組みの全容については、ADDENDUM-4-WEB-PRESENCE.md も参照してください。

このスキルで今も防げること

上記は、ブランドの各フェーズが無意味だということではありません。感情に訴えるナラティブ、哲学、トークンは、重要な役割を果たします。

• 感情に訴えるナラティブ は、すべての選択を意味に結び付けます（恣意的な判断を防ぎます）。
• ビジュアル哲学 は、特定の美的潮流を定義します（「クリーンでモダン」への収束を防ぎます）。
• 体系的なトークン は、一貫性を生み出します（サイズや余白の無秩序な設定を防ぎます）。
• DESIGN.md は、哲学を埋め込みます（時間の経過による逸脱を防ぎます）。

しかし、トークンだけでは、構成が平均へと収束するのを防げません。このスキルは優れた素材を生み出します。そこからどんな一皿を作るかは、ユーザーと進化的なプロセスが決めます。

---

ガイドライン

反復について

最初の試行で完璧を目指さないでください。このプロセスは進化的なものです。

• 発散 — あるテーマのバリエーションではなく、構造の異なる選択肢を生成します。
• 選別 — ユーザーが残すものを選びます。捨てたものは、完全に捨てます。混ぜてはいけません。
• 変異 — 残ったものを、予想外の方向へ押し進めます。
• 反復 — サイクルを重ねるごとに、より特徴的になります。

通常、バージョン 15 はバージョン 3 よりずっと優れています。ただし、反復が LLM 自身の中心へ向けた洗練ではなく、人間による選択圧に導かれている場合に限ります。

ユーザーからの入力について

あなたは専門知識を提供し、ユーザーは審美眼を提供します。理由を添えて選択肢を提示しつつ、選ぶのはユーザーに任せてください。方向性を本当に必要とする場合に AskUserQuestion を使い、確認を求めるためだけには使わないでください。

感情的な基盤について

Phase 0 は必須です。 省略すると、魂のないデザインになります。ナラティブは次のものを生み出します。

• LLM の深い記憶（一般的な方向への逸脱を防ぎます）
• 意思決定の枠組み（選択肢をナラティブに照らして検証します）
• 感情的な一貫性（ビジュアルシステムで物語を表現します）

テストについて

ロゴには複数のサイズがあります。ヒーロー用（200px以上）、アプリアイコン用（64px）、ファビコン用（32px、16px）です。すべてのサイズでテストしてください。小さくすると崩れる場合は、シンプルにしましょう。

色について

暗い背景には温かみを持たせましょう。純粋な #000 は生気のない印象になります。機能を示す色（成功を表す緑、エラーを表す赤）には意味があるため、装飾目的で使わないでください。

プラットフォームごとの特性について

Web と iOS は「同じブランド」と感じられる一方で、それぞれのプラットフォームに自然になじむデザインにします。

• Web はより表現豊かなデザインにできます（グラデーション、シャドウなど）
• iOS ではシステムの慣習を使います（SF Pro、ネイティブのナビゲーションなど）
• カラーパレットと余白のリズムは統一します
• コンポーネントは「同じもの」と認識できるようにしつつ、プラットフォームに適したものにします

タイポグラフィとロックアップの開発について

フォントの組み合わせには、直感ではなく方法論が必要です。 ディスプレイフォントと組み合わせる本文フォントを選ぶ際は、次の点に留意してください。

• 類似ブランドが実際にどのフォントを使っているか調査します（フィンテック、テクニカル、ラグジュアリーでは状況が大きく異なります）
• 専門的なフォント組み合わせのデータベースを使い、実績のある組み合わせを確認します
• xハイトを分析します。同程度のxハイトは統一感を生み、コントラストは階層を作ります
• 各候補の根拠を示します。単に「何か」ではなく、「なぜ」その組み合わせが適切なのかを説明します
• テクニカル系や組織系のブランドでは、本文にサンセリフ体を使うことが必須です。画面での読みやすさは、エディトリアルなスタイルより優先されます

ロックアップの調整について： 最終決定の前に、間隔とサイズを変えた案を3～4種類提示します。光学的なバランスを取るには、テキストの高さをマークの高さの60～75％にします。マークとテキストの間隔は、狭め（マークの高さの0.25倍）にすると密度が高まり、広め（0.75倍）にすると余裕が生まれます。どちらが適切かは、ブランドの理念に沿って判断してください。

技術的な実装について： タイポグラフィのレンダリングは早い段階でテストしてください。SVG テキスト、Web フォント、各種エクスポート形式にはそれぞれ特有の問題があり、異なる形で不具合が発生します。ユーザーに見せるべきでない問題を検出できるよう、提示前に検証してください。装飾要素をコンセプトに含める場合は、特定のグリフの特徴に合わせようとするのではなく、自然な位置（単語の末尾、下線、独立したマークなど）に配置してください。

品質について

ありきたりなパターンは避けてください。紫と青のグラデーション、過度に丸みを帯びた形、意味のない幾何学的な装飾などが該当します。そのブランド独自のものにできる、個性的なデザインを作りましょう。

覚えておきましょう： ありきたりなものを作るのは簡単です。個性を生み出すには意図が必要です。

---

依存関係

インストールコマンドを含む完全なチェックリストは TOOLS-REQUIRED.md を参照してください。

必須

• Node.js — SVGO による最適化に必要です
• SVGO — SVG の最適化（npx svgo@latest — グローバルインストールは不要です）
• ブラウザー — SVG／HTML のプレビュー

推奨

• rsvg-convert（librsvg）— レンダリングと検証を繰り返す際の SVG→PNG 変換（代替手段：macOS のブラウザーまたは qlmanage）
• vtracer — PNG→SVG のトレース（フェーズ3のマーク開発で推奨される方法）
• potrace — ビットマップのトレース（vtracer よりシンプルな代替手段）

代替手段

• freeconvert.com/png-to-svg — ローカルツールが利用できない場合や、忠実な結果が得られない場合に使える、ブラウザーベースの PNG→SVG トレース。vtracer よりファイルサイズは大きくなりますが、問題ありません。参照画像への忠実さのほうが重要です。
• qlmanage（macOS）— 視覚的な検証に使える、組み込みの SVG レンダリング機能

画像生成（任意）

フェーズ2では、参照案を検討するために AI 画像生成を利用できます。API キーが必要です。設定については TOOLS-REQUIRED.md を参照してください。

1. 任意のテキストから画像を生成するツール — Gemini、DALL-E、Midjourney、Flux など
2. 手動での参照画像の用意 — ユーザーがムードボードの画像やリンクを提供します
3. SVG に進む — 初期案を増やして（8～10案）、フェーズ3へ直接進みます

フェーズ0～1は、画像生成を使わずに進められます。 API キーが必要なのは、フェーズ2のモードAに進んだときだけです。

フォント

ブランドの個性に基づいてフェーズ4で選定します。既定のフォントは指定されていません。

---

ワークフローファイル

各フェーズの詳細な手順は Workflows/ にあります。

• 00-EmotiveNarrative.md — ブランドの魂と感情的な基盤を作成 ⭐ NEW
• 01-Discovery.md — コンテキスト認識モードを備えた包括的なディスカバリープロセス
• 02-VisualDirection.md — 参考画像の生成ガイド
• 03-MarkDevelopment.md — SVG の反復的な改善手法
• 04-Wordmark.md — タイポグラフィの組み合わせと配置
• 05-DesignSystem.md — トークンとコンポーネントの定義（Web + iOS）
• 05A-CompositionIdentity.md — ブランドが空間を占める方法（進化的なプロセス） ⭐ NEW
• 06-DesignMdCreation.md — 内容をマスター DESIGN.md に統合
• 07-Packaging.md — アセットの収集と引き継ぎ

各フェーズを実行する際は、該当するワークフローファイルをお読みください。

---

DESIGN.md の利点

重要な理由：

従来のブランドシステム：

• 複数のファイルに分散しています
• 知識が人々の頭の中にあります
• 時間の経過とともにデザインのずれが生じます
• 汎用的なパターンが入り込みます

DESIGN.md を使う場合：

• ✅ 1つのファイルでシステム全体を網羅
• ✅ どの LLM でも読み取って、一貫性を維持できます
• ✅ 感情的なナラティブを組み込み済み（汎用的なデザインへの逸脱を防止）
• ✅ プラットフォーム固有の実装（Web + iOS）
• ✅ AI らしい凡庸なデザインを防ぐ検証を組み込み済み
• ✅ すぐにオンボーディングできます
• ✅ ブランドの独自性をいつまでも保てます

これは、汎用的なデザインに陥らないための保険です。

---

使用例

新規に開始する場合

"Use the brand-skill to build a complete brand identity for [project].
Start with Phase 0: create the emotive narrative that captures the soul
of what we're building."

プロセスの途中から再開する場合

"Continue Phase 3 of the brand process. Here's feedback on v1-v5:
[your feedback]. Create the next iteration batch."

フェーズをスキップする場合

"I already have a logo. Skip to Phase 5 and create a design system
(web + iOS) that complements this mark: [describe logo]."

最終統合

"We've completed Phases 0-5. Now create the master DESIGN.md file
that consolidates everything into one comprehensive reference."

---

品質基準

このスキルを使って作成するブランドは、すべて次の条件を満たす必要があります。

1. 感情的な深みがあること（単なるビジュアルスタイルではない）
2. 体系的な一貫性があること（場当たり的な選択ではない）
3. トークンだけでなく、構成に独自性が感じられること（同じレイアウトで色だけを変えても独自性はありません）
4. ぼかしテストに耐えること（視認性が20％でも、レイアウトのシルエットを認識できる）
5. クロスプラットフォームで機能すること（Web + iOS の実装）
6. 実装可能であること（コピー＆ペーストですぐに使えるコード）
7. 一貫性を保つこと（DESIGN.md がトークンのずれを防ぎ、構成のアイデンティティがレイアウトのずれを防ぎます）

異なる16進数値を使っただけの、どこにでもある「クリーンでモダン」なブランドになり得るなら、失敗です。独自性を生むのは構成、つまりブランドが空間を占める方法であり、トークンだけではありません。

---

実例

このスキルライブラリを使って、次のブランドを作成しました。

1. Compost.fi — 「Quiet Infrastructure」ブランド

   • プロセスの記録：compost.fi/process.html
   • 哲学から本番環境まで、約2,600回の API 呼び出し
   • ロゴの反復26回、完全なデザインシステム

2. Sorted.fund — 「Utility Sublime」ブランド

   • 例：Examples/sorted-brand-kit/
   • 温かみのあるインフラストラクチャの美学
   • 密度が高く、機能的なデザイン言語

どちらも、独自性のある成果を生み出した7フェーズのプロセス全体を実演しています。

---

最終更新：2026年2月 — バージョン 3.0 追加内容：LLM のデザイン上の限界に関する率直な説明、フェーズ5.5「構成」（進化的なプロセス）、マークのビットマップトレース、フォントの探索、収束フレームワーク