- Published on
brand-guidelines.md: すべてのAIツールがブランドを理解するために必要な唯一のファイル
ブランドガイドラインには大金を投じました。それはGoogle Driveのどこかに置かれた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
これがその構成です。では、実際の出力がどのようなものかを見てみましょう。Oscar Stories（AIを活用した子供向け就寝時物語プラットフォームで、道化師のアーキタイプを持つ）のためにBranding5が生成したものです。
YAMLフロントマター — 機械可読なレイヤー
---
name: 'Oscar Stories'
website: 'https://www.oscarstories.com'
archetype: 'The Jester'
positioning_statement: >
For parents who want to transform bedtime into a joyful adventure,
Oscar Stories uses smart AI to craft personalized tales where your
child is the star.
usp: >
Instantly crafts unique, AI-powered tales where your child is the
playful hero, making bedtime magical, easier for parents, and
inspiring imagination and values every night.
voice:
tone: 'Friendly, imaginative, and encouraging...'
personality: 'Playful, imaginative, nurturing, innovative, and trustworthy.'
promise: 'Make bedtime a magical, bonding time...'
values:
- 'Joyful Connection'
- 'Trustworthy Innovation'
- 'Nurturing Education'
typography:
primary_font: 'Nunito Sans'
secondary_font: 'Lora'
colors:
primary: '#5e219c' # Midnight Plum
darker: '#332145'
---
ファイルの残りの内容
YAMLフロントマターの下には、AIがブランドに合った決定を下すために必要なすべての情報が、14,000語以上にわたる完全なファイルとして続いています。
- ブランドナラティブ： ポジショニングステートメント、ミッション、ビジョン、USP、そして「なぜそれを行うのか」というストーリー
- アーキタイプの詳細分析： 道化師の主要な特性、主要戦略、潜在的な落とし穴、および参考ブランド（Ben & Jerry's、M&M's、Old Spice）
- ビジュアルアイデンティティ： Hex、CMYK、HSL、およびホバーステートを含む完全なカラーシステム。ウェイトと使用規則を含むタイポグラフィ階層
- 理想的な顧客プロフィール： 人口統計、心理統計、課題、目標、および優先チャネルを含む完全なペルソナ（「思慮深い現代の親」）
- SWOT分析： 強み、弱み、機会、脅威、および全体的な戦略評価
- マーケティングコピー： 道化師のボイスで書かれた8つのヘッドライン、緊急性のある戦術を用いた5つのCTA、および完全なPASランディングページコピー
- コンテンツ戦略： 特定のタイトル、チャネル、および目的を含むHero/Hub/Hygieneコンテンツプラン
- マーケティングキャンペーン： AIDAフレームワークにマッピングされた認知、関心、および欲求のキャンペーン
Oscar Storiesチームに一度も会ったことのない開発者が、このファイルをCursorに読み込ませてランディングページを要求すれば、ブランドに合ったコピー（遊び心があり、想像力豊かで、説教じみていない）、適切な紫のパレット、そしてNunito Sansの見出しを得ることができます。ブリーフィングも、やり取りも不要です。
これが、機械可読なブランドガイドラインが実際にどのようなものかを示しています。PDFではありません。チームが使用するすべてのAIツールが読み込み、理解し、構築できる単一のファイルです。
なぜ今これが重要なのか
機械可読なブランドガイドラインが選択肢ではなく、緊急の必要事項となるよう、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 DriveのPDFは役に立ちません。ブランドルールは、生成が行われる場所、つまりリポジトリ内、プロンプトのコンテキスト内、ツールのメモリ内に存在する必要があります。
PDF vs. brand-guidelines.md: 比較表
| 側面 | ブランド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 (ワークスペースモード):
#file:DESIGN.md Build a testimonial card grid component
using the card guidelines and spacing system defined here.
Claude / ChatGPT (ファイルを貼り付けるか添付する):
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があなたが非技術系のマーケターをターゲットとする「賢者」のアーキタイプであることを知っていれば、正しいボタンの色を選ぶだけでなく、誇張されたり息苦しい表現ではなく、明確で自信に満ちたコピーを作成します。
**理想的な顧客プロフィール（ICPs）**は、AIに関連性の高いメッセージを生成するためのオーディエンスコンテキストを提供します。マーケティングVP向けのヘッドラインと、成長マーケティングマネージャーをターゲットにしたヘッドラインは大きく異なります。ファイルにICPsがなければ、AIは推測します。あれば、ターゲットを絞り込みます。
具体的な例（良い例と悪い例）を含むボイスとトーンのガイドラインは、コピーの品質にとって最も効果的なセクションです。よく書かれた「すべきこと／すべきでないこと」の例は、抽象的なボイスの説明を100語読むよりも、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のままにします。 - チームに伝えます。 一言メッセージを共有します：「私たちのブランドガイドラインは現在、プロジェクトルートの
DESIGN.mdにあります。すべてのAIプロンプトでこれを参照してください。」 - すべてのAIセッションで参照します。 Cursorでは
@DESIGN.mdを使用し、ClaudeやChatGPTでは添付し、v0やBoltではアップロードします。 - 常に更新します。 ブランドが進化したら、ファイルを更新してコミットします。Gitが変更を追跡し、すべてのツールが瞬時にそれを反映します。
これだけです。オンボーディング資料も不要。デザインレビューのボトルネックも不要。Slackで「うちのブランドカラーは何だっけ？」と尋ねることももうありません。
結論
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、または任意のライティングアシスタントにプロンプトを出す際、ファイルを添付するか（またはブランドボイスとICPセクションを貼り付けて）、使用してください。ボイスガイドライン、トーンの例、およびオーディエンスの詳細は、AI生成コードだけでなく、AI生成コピーの品質を向上させるために特別に設計されています。
brand-guidelines.mdを入手する
Branding5でブランド分析を実行し、Google Stitch、Cursor、Copilot、およびすべてのAIツールスタックに対応したdesign-md準拠のbrand-guidelines.md (DESIGN.md) をダウンロードしてください。