AI-translated from English; not yet reviewed by a fluent editor.

# Claude Code 用に所有者が承認した DESIGN.md を作成する

> 承認済みのブランド判断から視覚仕様を作り、Claude Code による小規模な2件の編集で使い、差分と描画結果を確認します。

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

AI コーディングエージェントが視覚的な参照に従えるかどうかは、その参照内の判断がどれだけ明確かに左右されます。自分が所有するプロジェクトに承認済みのブランド規則があるなら、確認可能な1つの `DESIGN.md` ファイルにまとめ、Claude Code で小さな編集を2件行い、自分で確認できます。成果物は承認済みの仕様です。2件の編集で分かるのは、その具体的な成果物で仕様が役立ったかどうかであり、今後の編集結果を保証するものではありません。

これは文書に基づく手順です。BIG CHANGE は2026年10月20日に、固定リビジョンのデザインファイル集と Anthropic の Claude Code マニュアルを確認しました。Claude Code の実行、2つの成果物の編集や描画、費用やデザイン品質の測定は行っていません。

## 主な変化

- **変わること：** 所有者は承認済みの判断から版管理された視覚仕様を作り、範囲を限定した編集の前に、その正確なファイルを Claude Code に渡せます。
- **重要な理由：** 確認済みの単一の参照元により、色、書体、レイアウトの規則を2つの実際の改訂結果と比較できます。どちらの結果を受け入れるかは所有者が判断します。
- **注意点：** 編集のたびに事前の全体読み取りが必要です。プロジェクト内にファイルがあること、パスへの言及、Claude の説明だけでは、読み込まれたことや従ったことの証明になりません。

## 始める前に

自分が所有し編集を許可されたプロジェクト、描画できる既存の小さな成果物2つ、復元できる作業コピーまたはバージョン管理の保存点が必要です。2つのページでも、ページとプレゼンテーションでも構いませんが、それぞれの実際の編集・描画手順を把握している必要があります。各成果物について、限定した視覚変更を1つ選びます。現在の文章、リンク、動作するインタラクションを比較用に残してください。

所有者が承認した色の値**とその用途**、ライセンスまたは使用許可のある書体と代替書体、ロゴと画像の使用規則、対象読者、寸法、アクセシビリティ要件を集めます。実際の承認記録を使うか、未決定の項目を所有者に決めてもらいます。企業の公開サイトや他人のデザイン分析は、自分のプロジェクトで値や素材を使う許可にはなりません。所有者による素材の承認も、モデル提供者への送信許可を自動的に意味しません。

利用条件を満たすアカウントまたは提供者で [Claude Code](https://code.claude.com/docs/en/quickstart) を設定し、非公開のコード、文章、素材を開示する前に、そのアカウントの[データ利用規約](https://code.claude.com/docs/en/data-usage)と[ツール権限](https://code.claude.com/docs/en/permissions)を確認します。ローカル保存のプロジェクトでも、内容をモデルサービスへ送る場合があります。誰が資料を見られるか、どのツールがファイルを読んだり変更したりできるか、各項目を送信してよいかを確認してください。[費用の案内](https://code.claude.com/docs/en/costs)はアカウントと提供者によって異なり、このガイドではセッションの定額料金を提示できません。

必要なら、[固定リビジョンの Awesome DESIGN.md 集](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)をファイルの章構成の参考にできます。これは公開サイトの分析であり、所有者承認済みのブランドマニュアルではありません。承認済みの判断から直接ファイルを作って構いません。リポジトリの文章をコピーする場合は、[MIT の著作権・許諾表示](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)を残してください。この表示は、他サイトの商標、フォントファイル、画像の権利を付与しません。

## 所有者が承認する参照ファイルを作る

1. 所有するプロジェクトに `brand-reference/DESIGN.md` を作成します。承認記録に基づいて、この最小構成を埋めてください。角括弧内は所有者が提供すべき情報であり、推奨するブランドではありません。所有者が判断するまでは項目を `UNRESOLVED` のままにします。不足を埋めるために Claude に値を創作させないでください。

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

2. 記入した各行を所有者の元の判断と照合し、書体や画像の使用権も確認します。古いプロジェクトのスタイルと現在の承認規則が衝突する場合は、所有者と解決してください。この正確なファイルの承認を得て、バージョンを記録します。未決定の値に依存する編集は保留します。承認済みファイルと2つの開始時点の成果物を、バージョン管理または復元可能な別のコピーに保存します。

## 範囲を限定した2件の編集で使う

3. 所有するプロジェクトで、確認済みのアカウントと権限を使って Claude Code セッションを開始します。`brand-reference/DESIGN.md` と1つ目の成果物の正確なパスを渡します。まず参照と成果物を**すべて**読み、編集前に停止するよう Claude に依頼します。実際のファイル読み取り・ツール結果で、パスが正しく内容が完全かを確認してください。拒否された読み取り、途中で切れた結果、パスへの言及、口頭の要約だけでは不十分です。Anthropic は[プロジェクト指示ファイル](https://code.claude.com/docs/en/memory)を別の設定方法として説明しています。任意の `DESIGN.md` が自動検出されると考えたり、`@` 参照が全バージョンで同じ動作をすると当てにしたりしないでください。
4. 全体の読み取りが確認できたら、承認済み規則だけを使い、1つ目の成果物に選んだ1件の視覚変更を依頼します。対象ファイルを限定し、文章、リンク、操作部品、無関係なコードを維持します。提案差分と、プロジェクトで既に使っている描画方法を示してもらいます。受け入れる前に、変更された全ファイルを確認します。未承認の色、書体、素材、依存関係、追加編集は拒否してください。
5. 1つ目の成果物を**そのプロジェクトの実際の手順**で描画します。プロジェクトに適したデスクトップとスマートフォンの大きさで、出力を承認済みファイルと元の成果物に比較します。変更ファイルのトークン値、読めるコントラスト、見出しと文字の階層、切れや横はみ出し、見えるフォーカス、キーボードと変更対象の操作、文章とリンクの維持を確認します。参照の版、成果物の改訂版、確認項目、修正を記録します。描画の説明は、描画された結果ではありません。
6. 2つ目でも正確なパスと `brand-reference/DESIGN.md` を改めて指定します。編集の**前に**もう一度全体を読み取るよう依頼し、そのツール結果を確認します。その後、1件の限定変更を依頼し、差分を確認し、2つ目の成果物独自の手順で描画して同じ確認を繰り返します。両方の改訂結果を**同じ承認済みファイルの版**と比較します。各規則を、従った、従っていない、所有者承認の改訂が必要、のいずれかで記録します。ずれを直し、参照が変わった場合は両方を再確認してください。

完了条件は、所有者が承認した版管理済み仕様、確認して描画した2つの改訂結果、規則に合った点と外れた点の簡単な記録です。戻せるように元の改訂版を保存します。読み取りに失敗したら、編集を依頼する前に正確なパス、権限、ファイルサイズや省略を確認します。仕様がプロジェクトのスタイルやアクセシビリティと衝突する場合は、所有者の判断を得て変更範囲を狭めます。描画できない成果物や確認できない操作があれば、確認可能になるまでその編集を受け入れないでください。将来ブランドが変われば、以前の出力を意識的に再審査する必要があります。

コミュニティのファイルを1つのページの参照にする別の作業については、[固定リビジョンの DESIGN.md ガイド](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide)をご覧ください。本ガイドの作業は、まず自分の仕様を作って承認することです。

## 出典と関連資料

- この[固定リビジョンの Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)には章構成の例があり、ファイルは公開サイトの分析を現状のまま提供するものと説明されています。出力品質に関する表現は、ここで試験した結果ではありません。[MIT ライセンス](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)はコピーしたリポジトリ資料に適用され、第三者の識別表示や素材には適用されません。
- Anthropic の[クイックスタート](https://code.claude.com/docs/en/quickstart)はアカウントとプロジェクトの設定を扱います。[一般的なワークフロー](https://code.claude.com/docs/en/common-workflows)と[プロジェクトメモリのマニュアル](https://code.claude.com/docs/en/memory)はファイルと指示の手順を説明していますが、この独立したファイルが読者のセッションで完全に読まれた証拠にはなりません。
- Anthropic の[権限](https://code.claude.com/docs/en/permissions)、[データ利用](https://code.claude.com/docs/en/data-usage)、[費用](https://code.claude.com/docs/en/costs)の各マニュアルは、制御とアカウントに応じた条件を説明します。本ガイドで実際の編集、完全なローカル処理、固定請求額、品質向上が観測されたことは示しません。

## Sources

- [固定リビジョンの Awesome DESIGN.md README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 固定リビジョンのコミュニティ集とデザイン参照の章例です。公開サイトを分析し、ファイルを現状のまま提供します。出力品質や即時利用に関する宣伝文句は、この所有者の結果や登場ブランドの承認を裏付けません。承認済みの企画受付資料には完全な非公開ソースの保存と独立検証があります。
- [Awesome DESIGN.md MIT ライセンス](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — リポジトリの文章または重要な部分をコピーした場合、固定リビジョンの著作権・許諾表示を添付し続ける必要があります。この表示自体は、掲載サイトの名称、商標、ロゴ、独自フォント、画像に対する権利を付与しません。
- [Claude Code クイックスタート](https://code.claude.com/docs/en/quickstart) — 公式のアカウント・提供者、ログイン、プロジェクトの前提条件です。BIG CHANGE は本ガイドのためにインストール、アクセス、Claude セッションを試していません。
- [Claude Code 一般的なワークフロー](https://code.claude.com/docs/en/common-workflows) — 公式のプロジェクトファイル操作と変更確認の手順です。本ガイドでは、版に依存するファイル参照の省略記法に頼らず、成果物ごとの全体読み取りの観測と実際の差分を要求します。
- [Claude Code プロジェクトメモリ](https://code.claude.com/docs/en/memory) — プロジェクト指示と任意のインポートを設定として説明します。独立した brand-reference/DESIGN.md が自動で読み込まれることや、読者のどちらかの編集がそれに従ったことを証明しません。
- [Claude Code 権限](https://code.claude.com/docs/en/permissions) — 公式のツール権限制御です。所有者によるブランド内容の承認や Claude への指示は、実際のファイル・ツール権限や非公開資料を送信する許可とは別です。
- [Claude Code データ利用](https://code.claude.com/docs/en/data-usage) — アカウントと提供者に応じた処理と保持です。ローカルのプロジェクトは、完全なローカルモデルセッションの証拠にはなりません。非公開内容を提供する前に読者自身が権利を確認する必要があります。
- [Claude Code 費用](https://code.claude.com/docs/en/costs) — 公式のアカウント・提供者に応じた使用量と請求の案内です。この手順の固定価格、無料枠、時間短縮、作業費用は測定していません。
- [BIG CHANGE：固定リビジョンの DESIGN.md 参照を Claude Code で1ページに使う](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — 既存ページに固定リビジョンのコミュニティ参照を適用する関連資料です。所有者専用の承認済み仕様を作成するものではなく、本ガイドの新しい手順の出典でも「In this story」の続報でもありません。