- Published on
brand-guidelines.md: The One File Every AI Tool Needs to Know Your Brand
あなたはブランドガイドラインに多額の費用を支払いました。それはGoogleドライブのどこかに、47ページのPDFとして保存されています — 18ヶ月前にデザインエージェンシーが納品したものです。開発者はそれを開いたことがなく、AIツールも開くことができません。そして、誰かがCursorでランディングページを作成したり、Claudeでマーケティングメールをドラフトしたり、v0でコンポーネントを構築したりするたびに、彼らはゼロから始めます。「またしても、私たちのプライマリカラーは何だっけ？フォントはInterだっけ、それともPlus Jakarta Sansだっけ？角は丸い方がいいんだっけ、それともシャープな方がいいんだっけ？」
ブランドを説明し、それが定着することを願い、そうでない部分を修正する — その繰り返しは毎週何時間もかかります。チーム全体では、手直しだけでも毎月数千ドルの費用がかかります。
GoogleのStitch design-mdフォーマットは、その繰り返しをなくします。そしてBranding5は、完全なbrand-guidelines.mdを自動的に生成します — ワンクリックでダウンロードし、リポジトリにドロップするだけで、チームが触れるすべてのAIツールが瞬時にあなたのブランドを理解します。
design-mdとは？（そしてなぜ人々はそれをDESIGN.mdと呼ぶのか？）
design-mdは、ブランドおよびデザインガイドラインのためのプレーンテキストのMarkdownベースの仕様です。人間だけが（理論的に）読めるPDFの代わりに、人間とAIシステムの両方が解析、理解、構築できる構造化された.mdファイルです。
Googleは、AI搭載のUI生成プラットフォームであるStitchの一部としてこのフォーマットを作成しました。そのシンプルな前提は、「AIにブランドシステムの明確に構造化された説明を与えれば、AIはすでにブランドに沿ったUIを生成し、コピーを書き、デザインの決定を下すことができる」というものです。セッションごとに同じことを繰り返す必要はもうありません。
2つの名前、1つのアイデア
このフォーマットで書かれたファイルは2つの名前で呼ばれます。
DESIGN.md— 開発者コミュニティでの略称。プロジェクトのルートにあるREADME.mdやCONTRIBUTING.mdと並んで配置され、Cursor、Windsurf、その他のAIコーディングツールが自動的にそれを探します。brand-guidelines.md— Branding5が使用する名前。このファイルには、視覚的な仕様だけでなく、ポジショニング、アーキタイプ、ICPs、ボイス、戦略など、色やフォントだけでなくブランドシステム全体が含まれているためです。
どちらの名前でも機能します。フォーマットと機能は同じです。
brand-guidelines.mdの中身
完全なファイルは、戦略からピクセルレベルの仕様まで、ブランドのあらゆる層をカバーします。Branding5が生成するbrand-guidelines.mdが実際にどのようなものか見てみましょう。
# Acme Analytics
## Brand Foundation
- **Positioning:** The only analytics platform built for non-technical marketing teams
who need enterprise-grade insights without the learning curve.
- **Archetype:** The Sage — wise, trustworthy, data-driven
- **Mission:** Make data literacy accessible to every marketer.
- **Values:** Clarity over complexity. Accuracy over speed. Empowerment over dependency.
## Ideal Customer Profiles
### ICP 1: Growth Marketing Manager
- 28–38, mid-market SaaS (50–500 employees)
- Frustrated by complex BI tools; needs dashboards they can build alone
- Language patterns: "actionable insights", "self-serve", "time-to-value"
- Key objection: "Will this replace our existing BI stack?"
### ICP 2: VP of Marketing
- 35–50, reports to CMO or CEO
- Cares about cross-channel attribution and board-ready reporting
- Buys on ROI proof and integration breadth
## Visual Identity
### Colors
| Role | Hex | Usage |
| ----------- | --------- | ------------------------------------ |
| Primary | `#2563eb` | CTAs, active states, key UI elements |
| Secondary | `#f8fafc` | Backgrounds, cards, containers |
| Accent | `#16a34a` | Success states, positive metrics |
| Neutral 900 | `#0f172a` | Body text, headings |
| Neutral 400 | `#94a3b8` | Placeholder text, disabled states |
| Error | `#dc2626` | Error states, destructive actions |
| Warning | `#f59e0b` | Warning states, attention alerts |
### Typography
| Role | Family | Weight | Size | Line Height | Tracking |
| ------- | ----------------- | ------ | ---- | ----------- | -------- |
| H1 | Plus Jakarta Sans | 800 | 48px | 1.1 | -0.02em |
| H2 | Plus Jakarta Sans | 700 | 36px | 1.2 | -0.01em |
| H3 | Plus Jakarta Sans | 700 | 24px | 1.3 | 0 |
| Body | Inter | 400 | 16px | 1.6 | 0 |
| Caption | Inter | 500 | 13px | 1.4 | 0.01em |
| Code | JetBrains Mono | 400 | 14px | 1.5 | 0 |
### Spacing & Layout
- Base unit: 8px
- Component padding: 16px (compact), 24px (default), 32px (spacious)
- Section spacing: 64px (desktop), 48px (mobile)
- Max content width: 1200px
- Border radius: 8px (cards), 12px (modals), 9999px (pills/buttons)
### Shadows & Elevation
- Card: `0 1px 3px rgba(0,0,0,0.08)`
- Dropdown: `0 4px 12px rgba(0,0,0,0.12)`
- Modal: `0 8px 32px rgba(0,0,0,0.16)`
## Brand Voice & Tone
- **Voice:** Direct, confident, jargon-free. We explain, we don't lecture.
- **Tone shifts:** Warmer in onboarding, more assertive in sales copy,
precise and neutral in documentation.
- **Sentence style:** Short sentences. Active voice. Lead with the benefit.
- **Avoid:** Passive constructions, "leverage", "synergy", filler phrases,
exclamation marks in product UI.
### Examples
- ✅ "See which campaigns drive revenue — in one click."
- ❌ "Our innovative platform leverages cutting-edge technology to empower
your marketing team with best-in-class analytics solutions."
## Component Guidelines
### Buttons
- Primary: filled, `#2563eb`, white text, rounded-full, min-height 44px
- Secondary: outlined, 1px border `#2563eb`, transparent background
- Ghost: no border, text-only, used in nav and tertiary actions
- All buttons: 16px horizontal padding, font-weight 600, no uppercase
### Cards
- Background: white, border-radius 8px, subtle shadow
- Padding: 24px
- Header: H3 weight, 8px margin-bottom
- Always include a clear CTA or next action
### Forms
- Label above input, font-weight 500
- Input height: 44px, border-radius 8px, 1px border neutral-300
- Error message below input in red, 13px
- Required fields marked with \* (not colour alone)
## Do's and Don'ts
- ✅ Always include a single, clear CTA per section
- ✅ Use real data in examples and screenshots, never "Lorem ipsum"
- ✅ Test contrast ratios — minimum WCAG AA (4.5:1 for text)
- ❌ Never use more than 3 colours in a single component
- ❌ Don't use stock photos of people pointing at screens
- ❌ Avoid centre-aligning body text longer than 2 lines
これはプレーンテキストです。独自のフォーマットも、特別なツールも不要です。どんなAIツール — Cursor、Claude、Stitch、v0、Bolt、Copilot — に渡しても、あなたのブランドは自動的にすべての出力を形成する制約レイヤーとなります。
今これが重要である理由
機械が読み取れるブランドガイドラインが選択肢ではなく必須となるよう、3つの要因が収束しました。
1. AIツールがコードとコピーの大部分を生成するようになった
Cursor、GitHub Copilot、Claude、v0、Bolt、Lovable — 開発者やマーケターはAIの助けを借りて、これまで以上に迅速に成果物をリリースしています。しかし、これらのツールはあなたが教えない限り、あなたのブランドについて何も知りません。すべてのセッション、すべてのプロンプトで、あなたはカラーパレットを再説明しています。それはワークフローではなく — スピードに対する税金のようなものです。
リポジトリにある単一のbrand-guidelines.mdは、その税金を永久に排除します。
2. Googleがdesign-mdを標準として推進している
GoogleがStitchのような製品を通じてフォーマット仕様をリリースすると、エコシステムはそれに注目します。Figmaプラグイン、VS Code拡張機能、AIコンポーネントジェネレーターはすでに、プロジェクトルートにDESIGN.mdを探し始めています。今日のうちにファイルを正しく設定しておけば、明日のツールは移行も手直しもなく、そのまま機能するでしょう。
3. AIのスピードでのブランド一貫性には、機械が読み取れるルールが必要
もしあなたのチームが月に50件のブログ記事、週に20種類の広告バリエーション、そしてスプリントごとに新しいランディングページを生成するなら、GoogleドライブにあるPDFは役に立ちません。ブランドルールは、生成が行われる場所 — リポジトリ内、プロンプトコンテキスト内、ツールのメモリ内 — に存在する必要があります。
PDF vs. brand-guidelines.md: 比較表
| Dimension | Brand PDF | brand-guidelines.md |
|---|---|---|
| AIによる読み取り | ❌ OCRが必要；構造が失われる | ✅ すべてのLLMによってネイティブに解析される |
| リポジトリに存在 | ❌ Drive/Notion/Dropboxに置かれる | ✅ コードとともにバージョン管理される |
| 常に最新 | ❌ 手動更新、バージョン混同 | ✅ git diffで変更点が正確にわかる |
| オンボーディング速度 | ⏱ 読む・吸収するのに30分以上 | ⏱ 5分でスキャン；AIが即座に利用 |
| 自動的に強制 | ❌ 人間によるレビューに依存 | ✅ AIがすべての生成にルールを適用 |
| 人間による読み取り | ✅ きれいだが情報過多 | ✅ 明確なMarkdown、スキミングしやすい |
| 更新コスト | 💸 エージェンシーへの委託料またはデザインに時間 | ✍️ どんなエディタでもテキストファイルを編集 |
PDFはステークホルダーへのプレゼンテーションにはまだ有効です。しかし、AIツールが生成を行う日々の作業においては、プレーンテキストが決定的に優位に立ちます。
Google Stitchでbrand-guidelines.mdを使用する方法
Google Stitchはあなたのbrand-guidelines.mdを読み取り、それを使ってUI生成を制約します。一般的なMaterialコンポーネントを生成する代わりに、あなたのカラーシステム、タイポグラフィ、スペーシング、コンポーネントの慣例に合ったUIを出力します。
ワークフローは3つのステップです。
- ファイルをアップロードまたは配置する。
brand-guidelines.mdをプロジェクトルートにドロップするか、Stitchインターフェースに直接アップロードします。 - 自然にプロンプトを出す。 必要なものを尋ねます：「3つの階層とハイライトされた人気プランを持つ価格セクションを生成して。」
- ブランドに沿った出力を得る。 Stitchはあなたの色、タイプ階層、ボタンのスタイル、スペーシングを自動的に適用します。基本的なことにはデザインレビューは不要です。
結果として、ブランドに近づくだけでなく、通常は午後の大半を費やす修正作業を省けるため、リリースが高速化されます。
Cursor、Copilot、AIコーディングツールでの使用法
DESIGN.md（またはbrand-guidelines.md）をリポジトリのルートに置き、プロンプトで参照します。
Cursor:
@DESIGN.md Generate a hero section for the homepage.
Use the primary CTA style, heading typography, and colour system from the file.
GitHub Copilot (workspace mode):
#file:DESIGN.md Build a testimonial card grid component
using the card guidelines and spacing system defined here.
Claude / ChatGPT (paste or attach the file):
Here are my brand guidelines [attached: brand-guidelines.md].
Write three homepage headline options that match the brand voice
and speak to ICP 1 (Growth Marketing Manager).
v0 / Bolt / Lovable: brand-guidelines.mdをプロジェクトファイルとしてアップロードするか、関連するセクションをプロンプトに貼り付けます。これらのツールは、すべての生成にあなたの色、タイプ、コンポーネントの仕様を適用します。
その効果：ブランドガイドラインを一度も読んだことのない開発者でも、最初のプロンプトからブランドに沿ったコードを生成できます。制約はワークフローに組み込まれており — レビューサイクルやSlackメッセージを通じて強制されることはありません。
ビジュアルを超えて：ファイル内の戦略がすべてを変える理由
ほとんどのデザインシステムファイルは、色とフォントで止まります。Branding5のbrand-guidelines.mdは、より深く掘り下げ — その深さこそが、AIの出力を「見た目が正しい」から「感覚的に正しい」へと変えるものです。
ブランドの基盤は、AIにブランドがなぜそのような選択をするのかを伝えます。AIがあなたが非技術系のマーケターをターゲットとする賢者のアーキタイプであることを知っていれば、単に適切なボタンの色を選ぶだけでなく — 誇張や息苦しさのない、明確で自信に満ちたコピーを作成します。
理想の顧客プロファイルは、AIに関連性の高いメッセージを生成するためのオーディエンスコンテキストを提供します。マーケティングVP向けのヘッドラインは、グロースマーケティングマネージャーをターゲットとするものとは大きく異なります。ファイルにICPsがない場合、AIは推測しますが、それらがあればターゲットを絞ることができます。
具体的な例（良い例と悪い例）を含むボイスとトーンのガイドラインは、コピーの品質にとって最も効果的なセクションです。うまく書かれた「すべきこと／すべきでないこと」の例は、抽象的なボイスの説明を百語聞かせるよりも、AIにはるかに多くのことを教えます。
すべきこと／すべきでないことは厳格な制約として機能します。「1つのコンポーネントで3色以上を使用しない」や「すべてのセクションに必ずCTAを含める」といったルールは、AIが文字通り、毎回遵守できます。曖昧さも、逸脱もありません。
Branding5があなたのファイルを生成する方法
Branding5でブランド分析を完了すると、brand-guidelines.mdがダッシュボードからダウンロードできるようになります。舞台裏で何が起きているかをご紹介します。
- あなたのブランド戦略がファイルに反映される。 ポジショニング、アーキタイプ、ICPs、競合分析、トーンオブボイス — Branding5で構築したすべてが、構造化されたMarkdown出力に直接流れ込みます。
- 視覚的な仕様はあなたのポジショニングから導き出される。 色、タイポグラフィ、コンポーネントの慣例は、一般的なテンプレートから引用されるのではなく、あなたのブランド個性に合わせて生成されます。
- 出力はdesign-md仕様に準拠している。 Stitchおよび互換性のあるツールがネイティブに解析します。変換や再フォーマットは不要です。
- すぐに使用可能。 リポジトリにドロップしたり、AIツールに添付したり、チームと共有したりできます。初日から、1つのファイルで、あらゆるツールに対応します。
Branding5で費やす30分間は、以下を生成します。
- ステークホルダーや投資家向けの戦略PDF
- マーケティングチーム向けのメッセージングフレームワーク
- エンジニアリングおよびデザインチームが使用するすべてのAIツール用のbrand-guidelines.md
コピーライティング不要。手動でのフォーマット不要。Markdownの専門知識も不要です。
始めるにあたって：5分で完了するチェックリスト
すでにブランド戦略をお持ちですか？5分でAI対応のブランドシステムを構築する方法をご紹介します。
- ファイルを生成する。 Branding5でブランド分析を実行し、ダッシュボードから
brand-guidelines.mdをダウンロードします。 - リポジトリのルートに配置する。 チームが開発者向けの慣例を好む場合は
DESIGN.mdと名付けるか、明確にするためにbrand-guidelines.mdのままにします。 - チームに伝える。 1行のメッセージを共有します：「当社のブランドガイドラインは現在、プロジェクトルートの
DESIGN.mdにあります。すべてのAIプロンプトで参照してください。」 - すべてのAIセッションで参照する。 Cursorでは
@DESIGN.mdを使用し、ClaudeまたはChatGPTでは添付し、v0またはBoltではアップロードします。 - 常に最新の状態に保つ。 ブランドが進化したら、ファイルを更新してコミットします。Gitが変更を追跡します。すべてのツールが即座にそれを認識します。
これで終わりです。オンボーディング資料も、デザインレビューのボトルネックもありません。Slackで「うちのブランドカラーは何？」と聞かれることももうありません。
まとめ
AIツールはあなたのコードを書き、コピーを生成し、コンポーネントを構築しています。唯一の問題は、それがブランドに沿って行われているのか — それともAIがその場で作り出しているのか、ということです。
brand-guidelines.mdは、その問いに一度答えます。そして、すべての生成において、すべてのツールを通じて、チームのすべての人が使用するたびに、自動的に再び答えます。
GoogleのStitchフォーマットは、機械が読み取れるブランドガイドラインを標準化しています。DESIGN.mdは、開発者がプロジェクトルートで見つけることを期待するファイルになりつつあります。今これを取り入れるブランドは、より迅速にリリースし、一貫性を保ち、的を外したAI出力を修正する時間を少なくすることができるでしょう。
あなたのブランド戦略はすでにBranding5にあります。brand-guidelines.mdはワンクリックで手に入ります。
よくある質問
DESIGN.mdとbrand-guidelines.mdの違いは何ですか？
両者は同じフォーマットです。DESIGN.mdは開発者コミュニティでよく使われる略称で、README.mdのような命名規則を反映しています。brand-guidelines.mdはより説明的で、視覚的な仕様だけでなく、ブランド戦略（ポジショニング、ボイス、ICPs）が含まれていることを示唆しています。チームが好む方の名前を使用してください。AIツールはどちらも同じように解析します。
ファイルを作成または編集するためにMarkdownを知る必要がありますか？
いいえ、必要ありません。Branding5はあなたのブランド分析からファイルを自動的に生成します。後で手動で編集したい場合でも、Markdownはシンプルな書式（見出しには#、リストには-、太字には**）を使ったプレーンテキストに過ぎません。誰でも2分で基本を学ぶことができます。
どのAIツールがdesign-md / DESIGN.mdをサポートしていますか？
Google Stitchはネイティブで読み込みます。Cursor、GitHub Copilot、Windsurf、Claude、ChatGPT、v0、Bolt、Lovableはすべて、ファイルを参照または添付すれば機能します。プレーンなMarkdownであるため、どのLLM搭載ツールも解析してそれに従うことができます — プラグインや統合は必要ありません。
brand-guidelines.mdはどの程度詳細であるべきですか？
曖昧さをなくすのに十分な詳細さが必要です。最低限、使用ルールを含むカラーパレット、タイポグラフィの仕様、ボタン/カード/フォームの慣例、そして例を含むボイスガイドラインを含めてください。すべきこと／すべきでないことが具体的であるほど、AIの出力は一貫性のあるものになります。Branding5はデフォルトで包括的なファイルを生成しますが、不要なセクションはいつでも削除できます。
ブランドの進化に合わせてファイルを同期するにはどうすればよいですか？
他のソースファイルと同様に扱ってください：編集し、コミットし、プッシュします。Gitに存在するため、チームはいつ何が変更されたかを正確に確認できます。Branding5でブランド分析を再実行すれば、更新されたバージョンをダウンロードして古いファイルを置き換えることができます。エージェンシーへの委託料も、数ヶ月にわたる改訂サイクルも不要です。
brand-guidelines.mdは、ブログ記事や広告コピーの作成など、コード以外のタスクにも使用できますか？
もちろんです。Claude、ChatGPT、またはその他のライティングアシスタントにプロンプトを出す際、ファイルを添付（またはブランドボイスとICPsのセクションを貼り付け）してください。ボイスガイドライン、トーンの例、およびオーディエンスの詳細は、単にコードだけでなく、AIが生成するコピーの品質を向上させるように特別に設計されています。
あなたのbrand-guidelines.mdを入手する
Branding5でブランド分析を実行し、Google Stitch、Cursor、Copilot、およびあなたのすべてのAIツールスタックに対応したdesign-md準拠のbrand-guidelines.md（DESIGN.md）をダウンロードしてください。