DESIGN.md：あなたのブランドに欠けていた仕様書
▲ DESIGN.md：頭の中に散らばっている設計判断を、リポジトリのルートに収める
TL;DR：ウェブサイトを持つすべての人は DESIGN.md を書くべきです。リポジトリのルートに置くプレーンな Markdown ファイルで、色、タイポグラフィ、余白、アニメーション、ブランドボイス、そしてすべての設計判断の「なぜ」を記録します。デザイナーの専有物ではありません。クリエイターにとっては半年後の自分も読めるブランド仕様書、協力者（外注、エンジニア、AI アシスタント）にとってはスタイルを壊さないための唯一の真実の源です。vista.tw 用に書いたばかりの一例を題材に、なぜ重要か、何が入っているか、どう書くかを解説します。
ウェブサイトを持ち、美意識もある。でも仕様書はありますか？
まず告白します。昨日まで、vista.tw のデザインシステムは次の三か所にしか存在しませんでした。
- 私の頭の中
src/styles/global.cssの先頭コメント：日本的ミニマリズム × 温かい文学風 × マガジン質感CLAUDE.mdに散らばっているルール：ダークテーマ禁止、記事画像は角丸なし、「批次」と書く（「批量」ではなく）
これは暗黙のシステムです。すべての判断が同じ頭の中にあるから機能する。しかし、このシステムが他人に読まれるべき瞬間、AI アシスタントに守られるべき瞬間、半年後の記憶があいまいな自分に解釈されるべき瞬間が来ると、一気に崩壊します。
問題は私が上手にやれていないことではありません。書き留めていないことです。
デザインシステムの本質は「一式のビジュアル」ではなく、「明文化された一連の判断」です。美しいビジュアルがあってもシステムはない、ということもありえます。派手ではないビジュアルでも強いシステムはある、ということもありえます。違いは、次に入ってきた人があなたがなぜそうしたかを読めるかどうかです。
DESIGN.md とは何か
一言で言えば、リポジトリのルートに置く Markdown ファイルで、視覚言語と設計判断を完全に記録するものです。
これは次のものではありません。
- ❌ Figma ファイル（それはビジュアルのソースで、仕様書ではない）
- ❌ Notion ページ（コードとすぐに乖離する）
- ❌ スタイルガイド PDF（静的で古びて誰も読まない）
これは次のものです。
- ✅ コードと一緒にバージョン管理されるプレーンテキスト
- ✅ README.md と同じレベルの第一級ドキュメント
- ✅ 人間が読める、AI が読める、diff が読める
- ✅ Decisions Log を持ち、履歴が見える
ブランドの「法律条文」のようなものと考えてください。すべてのルールに理由があり、すべての例外が記録され、すべての変更にタイムスタンプが残ります。
なぜ必要なのか（三つのリアルなシナリオ）
シナリオ 1：半年後のあなたは、なぜこの赤を選んだか思い出せない
今は #d13a3a があなたのブランドレッドだと知っています。しかし半年後は？二年後は？新しい名刺、ポスター、ブランド拡張を作るとき、もう少し明るい赤の方がよかったのでは、と疑い始めます。
DESIGN.md がなければ、毎回ゼロから判断することになります。そして毎回の判断は少しずつドリフトし、最終的にブランドは「たぶん赤い何か」という曖昧な塊になります。
DESIGN.md があれば、ファイルを開いて次のように書かれています。
--color-accent: #d13a3a— ブランドレッド（リンク、CTA、強調）Why：温かい紙色の背景に載せる書店レッド。インディペンデント出版と文学系書店の視覚伝統を参照。これより明るいと警告色になり、暗いと温度を失う。
もう迷わなくなります。
シナリオ 2：外注先や協力者が作るものが、まったくあなたのスタイルではない
彼らが怠けているわけではありません。あなたのスタイルを知らないだけです。
あなたのスタイルはあなたの頭の中にあります。相手はあなたの既存コンテンツからリバースエンジニアリングするしかない。彼は記事で赤の CTA を見て、赤は装飾だと思います。セリフ体を見て、Lobster に変えていいと思います（やめてください）。余白を見て、広告で埋めていいと思います。
DESIGN.md はあらゆる協力者に渡す契約書です。暗黙のルールをすべて明文化する。彼がそれに従う。あなたは毎回校正で口論しなくて済む。
シナリオ 3：AI 時代——あなたの AI アシスタントはあなたの好みを知る必要がある
これは 2026 年で最もユニークで、最も過小評価されている理由です。
いまやどのクリエイターのスタックにも Claude Code、Cursor、Lovable、あるいは類似の AI アシスタント が入っています。新しいページ、新しいコンポーネント、新しいランディングを作ってほしいと頼んだとき、AI は何をするでしょうか？
それは「よくあるウェブサイトのデザイン」をデフォルトで提案します。紫のグラデーション、アイコン付き三列フィーチャーグリッド、すべてセンタリング、丸いボタン、大量の絵文字。これが AI slop の姿です。
そう指示しない限り。「DESIGN.md を読んでから作業して」と。
私は vista.tw の CLAUDE.md にこの一節を追加しました：
Design System: Always read
DESIGN.mdbefore making any visual or UI decisions. All font choices, colors, spacing, and aesthetic direction are defined there. The authoritative source of tokens issrc/styles/global.css. Do not deviate without explicit user approval.
それ以降、Claude Code は作業開始時に必ず DESIGN.md を読みます。もう紫のグラデーションを提案してきません。
これは AI で自分の専門性を増幅する鍵となる技法です。AI のデフォルト値と戦うのではなく、自分のデフォルト値を明文化して、AI にあなたの基準で実行させるのです。
私の DESIGN.md は何が書かれているか
完全なファイルは github.com/iamvista/vista-official-site/blob/main/DESIGN.md にあります。396 行、18 章。価値は長さではなく、カバレッジにあります。
Product Context（プロダクト文脈）
- vista.tw とは：Vista Cheng（鄭緯筌）の個人公式サイトとデジタル基地。
1,979+ 本のブログ記事、18,000+ のニュースレター購読者、200+ 回の企業講演
- 読者：繁体字中国語圏の知識労働者、クリエイター、コンテンツマーケター
- プロダクトタイプ：パーソナルブランド主導のエディトリアルブログ
+ リードマグネット + ワークショップ導線
- 領域：コンテンツ制作 × AI 応用 × パーソナルブランド
- 多言語：繁体字中国語（主）、英語、日本語この節は重要です。後続のすべての設計判断に文脈の根を与えます。何かを決めるとき、いつでも戻って問えます。この判断はどの読者層のためか？エディトリアルブログというプロダクトタイプに合うか？
Aesthetic Direction（美学方向性）
- 一行方向：日本的ミニマリズム × 温かい文学風 × マガジン質感
- ムード：厚みのある紙の雑誌のような感じ。派手でなく、冷たくなく、
重みがあり、静かに読めるが距離は感じない
- 装飾レベル：intentional——タイポグラフィが主役
- アンチパターン（明示的に避ける）：
- ダークテーマ（CLAUDE.md で明示禁止）
- 紫、ネオン、レインボーグラデーション
- 丸いカートゥーン感（border-radius 控えめ）
- AI slop：三列アイコングリッド、全センタリング、バブルボタンアンチパターンが最も役立つ部分です。読者に「何をしてはいけないか」を直接伝えるほうが、「何をすべきか」を伝えるよりスタイルドリフトを防げます。「紫のグラデーションを使わない」というルール一つがどれほど救ってくれるか、驚くはずです。
Color（色彩）
| Token | 値 | 用途 |
|------------------|----------|---------------------------|
| --color-bg | #f9f5f1 | 温かい紙色の背景 |
| --color-primary | #2c2c2c | 黒灰の主要テキスト |
| --color-accent | #d13a3a | ブランドレッド（リンク・CTA）|
| --color-border | #e8e2da | 主ボーダー色 |すべての色には次の三つがあります。
- トークン名（
--color-accent）——コードではトークンを使い、直接 hex を書かない - セマンティック用途（リンク、CTA、強調）——同じ赤が背景色として使われるのを防ぐ
- コントラストチェック（私のファイルには WCAG 比率も記載：
#2c2c2con#f9f5f1= 13.4:1）
Decisions Log（決定ログ）
最も推奨する章です。
| 日付 | 決定 | 理由 |
|-------------|-------------------------------------|-------------------------------|
| 2026-02-24 | タグ正規化：1,104 → ~50 コアタグ | AEO トピッククラスター戦略 |
| 2026-04-13 | ホームページ再設計：三路分岐 Hero | 認知負荷を下げる |
| 2026-04-13 | ブログ本文の字級 18/17 → 19/18 | 中国語長文の快適さ |一年後、あなた自身や協力者が「なぜこうしたのか？」と問うとき、記憶を探る必要はありません。決定ログを読むだけです。
これが DESIGN.md をリポジトリと一緒にバージョン管理しなければならない理由でもあります。すべての変更にはコミットメッセージがあり、すべての決定には履歴があります。
自分のものを作る方法（5 ステップ）
ステップ 1：デザイントークンを見つける
サイトのメイン CSS ファイルを開き、ハードコードされた色、字級、余白をすべて見つけます。既に CSS 変数（--color-accent: #d13a3a;）になっているなら一歩進んでいます。まだ hex が散らばっているなら、一晩かけて :root 変数に整理してください。
システムがなければドキュメントも書けません。DESIGN.md は既存システムの鏡であって、発明ではありません。
ステップ 2：Product Context を書く
ここを飛ばしてはいけません。五文で。
- このサイトは何か？
- 誰が読むのか？
- どの領域か？
- どのタイプ（ブログ／ツール／EC／コミュニティ）か？
- 言語や地域の制約は？
文脈のない設計判断は漂流物です。
ステップ 3：Aesthetic Direction を書く（アンチパターンを含む）
一行で美学方向を書きます。私のは「日本的ミニマリズム × 温かい文学風 × マガジン質感」です。次に、明確に「やらない」アンチパターンを少なくとも三つ挙げます。
アンチパターンは正のルールより効果的です。スタイルドリフトの 90% を防げます。
ステップ 4：色、タイポ、スペーシングのトークン表を整える
Markdown の表で並べます。
- トークン名（
--color-accent） - 値（
#d13a3a） - 用途（リンク、CTA、強調）
- 任意：コントラストチェック、使用例
タイポは：ファミリー名、ロード戦略（Google Fonts / fontsource / セルフホスト）、ウェイト、完全なスケール。
スペーシングは：base unit（通常 4px か 8px）、完全なスケール、使用シーン。
ステップ 5：Decisions Log を作り、空のまま育てる
過去を遡って埋める必要はありません。今日から始めてください——重要な設計判断を下すたびに、30 秒かけて Decisions Log に一行追加します。
一年後、自分に感謝するでしょう。
AI に守らせる
これが 2026 年で最も重要な一歩です——DESIGN.md を AI ワークフローに接続すること。
Claude Code / Cursor ユーザーへ
CLAUDE.md（または .cursorrules、AGENTS.md）の先頭に次を追加：
## Design System
Always read `DESIGN.md` before making any visual or UI decisions.
All font choices, colors, spacing, and aesthetic direction are defined there.
Do not deviate without explicit user approval.
In QA mode, flag any code that doesn't match DESIGN.md.それ以降、すべての AI セッションが開始時に DESIGN.md を読みます。あなたの時間は「AI のデフォルト値を修正する」から「一度書いて一生守る」へ変わります。
ChatGPT / Claude ウェブ版ユーザーへ
DESIGN.md の内容を Custom GPT か Project knowledge に貼り付けるか、対話開始時に毎回貼り付ける。効果は同じです。
外注協力者へ
DESIGN.md のリンクをオンボーディング資料に入れる。作業開始前に読んで確認してもらう。これであなたはスタイル審査員からブランド守護者に変わります——原稿を書き直す必要はなく、DESIGN.md のどのルールが破られたかを指すだけです。
なぜこのタイミングが重要なのか
五年前、デザインシステムは大企業の贅沢品でした——IBM Carbon、Material Design、Ant Design 規模の組織だけが真剣に取り組んでいました。
三年前、スタートアップの基本装備になりました——リモートワークが口頭伝承を壊したからです。
2026 年、すべてのクリエイターの生存装備になります——AI はすでに十分強く、視覚判断の 90% をデフォルトで代行するほどです。あなたが DESIGN.md を書かなければ、AI がそのデフォルトで決めてしまいます。
AI 時代において、デザインシステムはデザイナーの専有物ではなく、自分のテイストを守りたいすべての人の必要装備です。
今日から始められる
Figma は不要。コンサルタントも不要。完璧なタイミングを待つ必要もない。必要なのは：
- リポジトリのルートに
DESIGN.mdを作る - 一時間で Product Context + Aesthetic Direction + コアトークン三表を書く
- main にコミット
CLAUDE.md（または AI ルールファイル）に「DESIGN.md を読め」を追加- 次に何か変えるとき、Decisions Log を更新
このフローの費用対効果は途方もないです。一時間で、永久にブランドを守るインフラが手に入ります。
私の DESIGN.md 全文 は GitHub にあります。コピーして、改変して、あなたのものにしてください。これが Markdown の魅力です——特定ツールの資産ではなく、誰でも開いて読んで書き換えられるテキストなのです。
頭の中の設計判断を、リポジトリのルートに移しましょう。未来の自分、協力者、AI アシスタントが、同じ仕様書を読めるように。
これが 2026 年のパーソナルブランドの最低装備です。
関連記事
- AI 時代のパーソナルブランド完全ガイド
- AI でコンテンツ生産ラインを構築：1 本の記事を 6 種類のアウトプットに
- Claude Code はエンジニア専用ではない：知識労働者のための 5 つの実戦用法
📖 深入探索相關主題
