Claude Designは「DESIGN.mdというブランド言語化ファイル」を1個用意するだけで、
ピッチデック・LP・SNS・iOSプロトタイプの4種類のデザインが会話だけで出てくる。
仕上がったデザインはZIPでClaude Codeに渡せて、
コード実装まで会話のまま走る。
2026年4月17日に研究プレビューで公開されたばかりだが、
Anthropic公式は「数時間ではなく数分でデッキが作れる」と言い切っている（出典: Anthropic公式チュートリアル）。
この記事は毎週ピッチデック・LP・SNS用の資料を手で作らされている創業者・PdM・マーケ兼任者向け（Claude Pro / Maxを契約していて、
Claude Codeを名前くらいは知っている前提）。
Claude Designって結局何が作れるの？
Anthropic公式の発表によれば、
Claude Designはテキストプロンプト・画像・DOCX/PPTX/XLSXドキュメントから生成を始められて、
出力先はCanva・PDF・PPTX・HTML・ZIPの5形式に対応している（出典: Anthropic公式）。
核心は「画像生成AIではない」という点。
海外メディアShiftBの解説によれば、
Claude Designは編集可能な構造を持ったデザインを出力するのであって、
1枚絵を吐くツールではない（出典: ShiftB）。
私はここが一番大事だと思っている。
Anthropic公式が公表している主な機能はこの通り。
- インラインコメント・カスタムスライダーで細部を会話的に調整
- チームのデザインシステムを自動適用（DESIGN.md）
- Claude Codeへの直接handoff機能
- 既存Webサイトのキャプチャから視覚要素を抽出
- マルチプレイヤー協業（複数メンバーが同時編集・チャット可能）
これだけだと「ふーん」で終わるので、画像生成AIとの違いを表で先に潰しておく。
画像生成AIとClaude Designの棲み分け
| 観点 | 画像生成AI（Nano Banana / GPT-image-2等） | Claude Design |
|---|---|---|
| 作るもの | 1枚絵・写真風・イラスト | スライド・LP・プロトタイプ・HTML |
| 修正方法 | プロンプトを書き直して再生成 | 会話・コメント・スライダーで部分修正 |
| ブランド統一 | 毎回プロンプトに書く | DESIGN.mdで1回設定すれば自動適用 |
| 出力形式 | PNG / JPG | PDF / PPTX / HTML / Canva / Claude Code連携 |
| 得意分野 | SNSサムネ・写真・イラスト | UI・営業資料・社内提案・モックアップ |
役割分担すると話がはやい。
SNSの一枚絵はNano Banana、
社内資料・LP・プロトタイプはClaude Design。
これで混乱は終わり。
なぜ今Claude Designに注目しているのか
私が注目している理由はシンプルで、
「ブランド言語化ファイル1個でデザインが連続で出る」設計が、
毎週資料地獄に追われる非デザイナーの痛点に直撃しているから。
具体的な数字で見るとこうなる。
- EdTech企業Brilliant: 最も複雑なページの制作で、他ツールでは20プロンプト以上かかっていたものが2プロンプトで完成（出典: buildfastwithai）
- DatadogのPMコメント: 「以前は1週間かかっていたブリーフ→モックアップ→レビューの往来が1つの会話で完結する」（出典: 同上）
- Anthropic公式が示す典型的な短縮事例として、20プロンプト→2プロンプト・1週間→1会話という10倍規模の圧縮が複数社で記録されている（出典: 同上）
20プロンプトが2プロンプト。
これは正直やばい。
1週間が1会話に縮まる粒度なので、
社内で資料担当が1人でも、
デザイナー数人分の出力に追いつける計算。
賛成側の声でいちばん刺さったのはAI/デザイン研究者Victor Dibiaの一言。
既存のCSSを読み込んで設計トークンを理解し、
デザイン言語を尊重した出力を生成する。
ターミナルベースのClaude Codeより視覚フィードバックループが高速。（出典: Victor Dibia newsletter）
「自社のCSSを食わせる→ブランドを理解する→出力もブランドに合う」。
この一連の流れが会話の中で閉じるなら、
デザイナー不在の会社でも資料の見た目が揃ってくる。
個人的にはこれが一番効くポイント。
DESIGN.mdって何を書くの？
Anthropic公式ヘルプによれば、
DESIGN.mdはMarkdown形式のテキストファイル。
YAMLヘッダーでデザイントークンを定義し、
その下にルールを書く構造（出典: Design AI Stack）。
公式ヘルプセンターと実践レポートで確認できた、書くべき8項目はこちら。
| 項目 | 書く内容 |
|---|---|
| 1. カラー | プライマリ・セカンダリ・アクセントカラーのコード（例: #1A73E8） |
| 2. タイポグラフィ | フォントファミリー・サイズ・ウェイト・行間 |
| 3. スペーシング | 余白の取り方・要素間隔ルール |
| 4. レイアウト | グリッド構成・カラム数 |
| 5. コンポーネント | ボタン・カード・フォームの形と色 |
| 6. モーション | アニメーションのスピードと動き方 |
| 7. ボイス（UIテキスト） | 口調ルール（敬語/カジュアル等） |
| 8. アンチパターン | 「これだけはやらない」リスト |
（出典: Anthropic公式ヘルプ）
面白いのは8番目のアンチパターン。
「やらないこと」を書けば書くほどブレが減る。
これは社内の暗黙ルールを言語化する作業そのもの。
DESIGN.mdをゼロから書きたくない人への抜け道
「8項目を全部1人で言語化するのは無理」という人のために、
Anthropic公式はブランド資産をアップロードすればClaudeが自動でDESIGN.mdを抽出する機能を用意している（出典: 公式ヘルプ）。
アップロード対応素材は次の通り。
- コードベース（Reactコンポーネントライブラリ等）
- プロトタイプ（スクリーンショット、デザインファイル）
- スライドデッキ（PPT/PDF）
- 個別アセット（ロゴ、カラーパレット、タイポグラフィサンプル）
つまり既存のピッチデックや会社サイトのスクショを投げ込むだけで、
土台のDESIGN.mdができる。
ここから手で微調整すればいい。
公式ヘルプが示すDESIGN.md導入手順
Anthropic公式ヘルプセンターの記述を再構成すると、
初回セットアップはこの3ステップで進む。
- STEP1:
claude.ai/designにアクセスし、組織設定でブランド資産をアップロードする（PPT、PDF、ロゴ画像、コードベース等）。Claudeが自動で素材を分析してDESIGN.mdの下書きを生成する。 - STEP2: 組織設定の「Open」→「Remix」を押すと、ClaudeとチャットしながらDESIGN.mdを共同編集できる。8項目のうち抜けがある箇所を口頭で埋めていくイメージ。
- STEP3: 「Published」トグルをオンにするとチーム全員に公開される。以降は新規セッションが自動でこのDESIGN.mdを読み込む。
ここで引っかかりやすいのは、
Enterprise契約だとデフォルトで機能がオフになっている点。
管理者が有効化しないとそもそもclaude.ai/designに入れない（出典: Anthropic公式）。
4つのユースケースで何が出てくるのか
DESIGN.mdが1個できると、
そこから派生して4種類のデザインが「同じブランド」のまま出てくる。
Anthropic公式チュートリアル・実測レポートを総合するとこんな感じ。
ユースケース1: ピッチデック・営業資料
Anthropic公式は「Anthropicチーム内で最も人気のあるユースケースの1つ。
数時間ではなく数分でデッキを作れる」と明言している（出典: 公式チュートリアル）。
具体的には、
既存のPPTXやXLSXを投げ込むと、
DESIGN.mdに沿った見た目で再構成される。
出力はPPTXとPDFで戻ってくる。
Datadogのケーススタディが代表例で、
「ブリーフ→モックアップ→レビューの1週間サイクルが1会話で完結」と報告されている。
ユースケース2: ランディングページ（LP）
buildfastwithaiのレポートによれば、
EdTech企業Brilliantが「最も複雑なページの制作プロンプト数が20+から2に削減」した（出典: buildfastwithai）。
HTMLとして直接出力できるので、
CMSに貼り付ければそのまま公開できる。
私はここが一番おいしいと思っている。
マーケ兼任者がLPを毎週いじっている現場では、
デザイナーへの依頼サイクルが消える。
ユースケース3: SNS投稿カルーセル
copyrocket.aiのRaman Singhの実測レポートによれば、
「5スライドInstagramカルーセル」を含む大型セッションが27分で完了している（出典: copyrocket.ai）。
複数枚で世界観を揃える作業に向く。
ユースケース4: モバイルアプリ・iOSプロトタイプ
copyrocket.aiの同じレポートでは「モバイルアプリフロー6画面」を含む生成が成功している。
プロトタイプ本体はHTMLとして出るので、
ブラウザでそのまま動かせる。
ユースケースの再現手順（公式チュートリアルより）
Anthropic公式のプレゼン用チュートリアルとプロトタイプ用チュートリアルを再構成すると、
4ユースケースのどれも以下の3ステップで進められる。
- STEP1: 素材を投げ込む。プレゼンならXLSX/DOCX、LPなら参考サイトのスクショ、SNSなら投稿テキスト、プロトタイプならワイヤーフレーム画像。チャット欄にドラッグ＆ドロップで添付する。
- STEP2: 1プロンプトで指示を出す。例: 「このXLSXを使ってシリーズB調達用の10スライドデッキを作って。trade-offスライドは比較表で」。ShiftBの日本語ガイドによれば、純日本語より「hero sectionを追加」のような日本語＋英語混在の方が精度が上がる傾向（出典: ShiftB）。
- STEP3: インラインコメント・スライダーで微調整。気に入らない要素を直接クリックして「ここを青系に」「タイトルを2行に」と会話で直す。完成したらPDF・PPTX・HTML・ZIPからエクスポート形式を選ぶ。
注意点として、
buildfastwithaiのレポートおよびAnthropic公式ヘルプの制限事項記述から、
日本語など非ラテン文字を含むPPTXエクスポートでは編集可能テキストではなく画像レイヤーとして書き出されるケースが確認されている（出典: buildfastwithai）。
日本語資料はPDFかHTMLで出すか、
出力後にPowerPointで再構築する前提で動いた方が安全。
Claude Codeへのhandoffで何が起きるのか
Claude Designの真の差別化はここにある、と私は見ている。
claudefa.stのhandoffガイドによれば、
ZIPでエクスポートするとClaude Code向けに以下のバンドルが渡される（出典: claudefa.st + claude-design-pm-toolkit）。
| ファイル | 中身 |
|---|---|
| design.html | スタンドアロンHTML+インラインCSS+JS（プロトタイプ本体） |
| screenshots/ | 各画面のPNGキャプチャ（視覚的参照用） |
| design-notes.md | PM注釈付きの設計判断メモ |
| README | 実装ガイド（フレームワーク・スタイリング・状態管理・テスト方針） |
| PROMPT.md | Claude Code向けの指示ファイル |
| + 設計トークン | キャンバスで実際に使った色コード・スペーシング値 |
| + コンポーネントツリー | 機械読み取り可能なスペック形式 |
claudefa.stはこのバンドルの設計思想をこう書いている。
The format is not a standards-committee compromise like design tokens in JSON. It's whatever works best between two models from the same lab.
（同じラボ発のモデル同士で最適な形式を使っている。
JSONのような標準化された妥協形式ではない。
）（出典: claudefa.st）
同じファミリーのモデル間通信なので、
ピクセルから意図を推測する必要がない。
コンポーネントツリー・トークン・レイアウト関係がすでに入っている。
これがFigma→開発者の従来フローと根本的に違う点。
READMEには「完了の定義」が含まれていて、
375px/768px/1280pxのレスポンシブ対応・アクセシビリティ監査・パフォーマンススコア90以上・i18n対応・reduced-motion対応まで指示されている（出典: claudefa.st）。
Claude Codeはこれを読んでから実装に入る。
handoffを実際にやる手順（実践レポートより）
claude-design-pm-toolkitとcopyrocket.aiの実践レポートを再構成すると、
デザイン→実装の流れはこの3ステップ。
- STEP1: Claude DesignのキャンバスでZIPエクスポートを選ぶ。上記7点セットが1つのZIPになって落ちてくる。手元のパソコンに保存する。
- STEP2: Claude CodeのCLIで該当フォルダに移動し、ZIPを解凍。
claudeを起動して「READMEとPROMPT.mdを読んで実装を始めて」と指示する。Victor Dibiaのレポートによれば、GitHub風CSSを食わせた上での実装は約45分で本番運用可能なレベルに到達した（出典: Victor Dibia newsletter）。 - STEP3: 完成したコードをGitHubにプッシュして動作確認。design-notes.mdに書かれた設計判断は、後からチームメンバーがレビューする際の根拠として残る。
copyrocket.aiが報告しているちょっとした抜け道として、
エクスポートしたZIP内のSKILL.mdとREADME.mdをClaude Codeに直接読み込ませると、
Claude Designの週次枠ではなく通常のClaude Code枠でデザイン生成を継続できるパターンがある（出典: copyrocket.ai）。
料金がきつい人には覚えておく価値あり。
DESIGN.mdをゼロから書きたくない人へ：VoltAgentの公開集
「自社のブランドを8項目に分解して書け」と言われても、
最初の1行で詰まる人は多い。
そこで使えるのがVoltAgent/awesome-claude-designというGitHubリポジトリ。
2026年4月30日時点のGitHub APIで取得した数字で見るとこうなっている（出典: GitHub - VoltAgent/awesome-claude-design）。
| 項目 | 数値 |
|---|---|
| スター数 | 約1,852（2026-04-30時点・GitHub API） |
| フォーク数 | 207（同時点） |
| Open Issues | 1件 |
| ライセンス | MIT |
| 収録DESIGN.mdの種類 | 68種類 |
| カバー業界 | AI/LLM・開発ツール・FinTech・Eコマース・メディア・自動車ブランド |
| 収録例 | ChatGPT風・Stripe風・Apple風・Spotify風など |
注意したいのは、
これは各社の本物のブランドガイドラインではなく「インスピレーション集」という点。
「Stripeっぽい雰囲気のDESIGN.md」をベースに、
自社の色とフォントだけ差し替える使い方が正解。
MITライセンスなので商用流用も可。
VoltAgent公開集の使い方（READMEより再構成）
- STEP1: VoltAgent/awesome-claude-designのGitHubページで自社に近い業界のDESIGN.mdを選ぶ（FinTechならStripe風、メディアなら該当業界のサンプル）。「Raw」ボタンで生のMarkdownをコピーする。
- STEP2: 手元のテキスト編集アプリで色コード・フォント名・ボイス（口調）の3点だけ自社用に書き換える。8項目全部を最初から作るより、これなら15分で済む。
- STEP3: Claude Designの組織設定でアップロードして「Published」トグルをオン。即座にチーム全員のセッションで適用される。
関連リポジトリのVoltAgent/awesome-design-mdでは、
Claude Code skillとしてパッケージ化する案がIssue #90で議論されている。
今後はもっと使い回しやすくなる流れ。
料金は？週次枠は何回もつ？
ここがClaude Designで一番引っかかる部分。
Anthropic公式は「Claude Designはチャットや通常のClaude/Claude Codeとは独立した使用量追跡・課金システムを持つ」と明言している（原文: "Claude Design is priced and metered independently from the rest of Claude"、
出典: 公式ヘルプ）。
つまり「Claude Proを契約してるから無限に使える」とはならない。
Claude Designには週次クォータが別建てで存在し、
毎週リセットされる。
| プラン | 月額 | Claude Design週次枠の目安 | 向いているユーザー |
|---|---|---|---|
| Pro | $20 | 1セッション〜数プロンプトで上限到達の報告多数 | 単発利用・検証 |
| Max 5x | $100 | 27分のフル稼働で枠100%消費の報告あり | PMや週複数回の資料作成 |
| Max 20x | $200 | Proの20倍相当 | デザイナー・クリエイティブ専門 |
| Team Standard | $25/ユーザー/月 | 標準枠（ユーザー個別管理） | 5〜150名チーム |
| Team Premium | $125/ユーザー/月 | 拡張枠（ユーザー個別管理） | デザイナー混在チーム |
| Enterprise | 要相談 | 柔軟設定。2026年7月17日まで初回クレジット約20プロンプト分 | 大規模組織 |
（出典: Uravation料金解説 + 公式ヘルプ）
海外の実測レポートを並べると、週次枠の消え方がよく分かる。
- copyrocket.ai（Raman Singh）: Max 5xプランで4〜5プロンプト・27分の作業（LP×2・モバイルフロー6画面・20秒動画・10スライドデッキ・5スライドカルーセル）で週次割り当ての90%を消費（出典: copyrocket.ai）
- vibecoding.app: Proプランで2回のフルデザインセッションで週次上限の58%を消費（出典: vibecoding.app）
- UX Planet: Proユーザーは「30分〜1時間で週次枠を使い切る」との報告（出典: UX Planet）
- デザイナーRoger Wong: 「BuildOpsのデザインシステム作成中に『extra usage』警告。このツールはtoken hungryだ」（出典: rogerwong.me）
個人的にはこの数字を見て「Pro契約だけで運用するのは現実的でない」と判断している。
週1回の資料作成でも上限張り付き。
Max 5x（$100）が事実上のスタートラインと読むのが妥当。
追加購入は可能で、
超過時の実例として「Hi-Fiランディングページ$3・モバイルアプリフロー$2・20秒動画$4・10スライドデッキ$7」という記録が残っている（出典: copyrocket.ai）。
批判・懸念点はどこにある？
賛成側ばかり書くとフェアじゃないので、批判側を集約する。
1. 出力が似通って見える問題
r/ClaudeAIコミュニティでは「どのアプリも全く同じに見える。
同じセリフ体フォント、
同じ点滅ステータスドット、
同じ色のアクセントバー」「ボタンやカードのcontainer soupに見える」という評価が広がっている（出典: The Neuron Daily）。
Hacker Newsでも「低コストで明白なものは大量生産できるが、
本物のオーサーシップに対するプレミアム層は縮小する」とのコメント（出典: Hacker News）。
つまりDESIGN.mdをちゃんと書かないと「全部Claude Design顔」になる。
VoltAgent公開集をそのまま使うだけだと、
似たような見た目の量産に加担することになる。
2. 真のドラッグ&ドロップ非対応
copyrocket.aiの指摘によれば、
「キャンバス上で要素を自由に動かす操作ができない。
スタイル編集は強力だが要素の位置変更は不可」（出典: copyrocket.ai）。
Figma的な自由配置を期待すると裏切られる。
3. マルチプレイヤーの差別化が弱い
vibecoding.appはマルチプレイヤー機能について「Figmaとの最大の差別化要因であるリアルタイム協同編集の完成度はまだ低い」と指摘（出典: vibecoding.app）。
4. 研究プレビュー特有の不安定さ
vibecoding.appいわく「Feature set will change. Expect rough edges, sudden limit changes（機能セットは変わる。
荒削りな部分や突然の上限変更に備えろ）」。
本番業務にいきなり乗せるのは危険。
5. 日本語特有の不具合
buildfastwithaiの制限事項レポートおよびAnthropic公式ヘルプの注意書きから、
日本語など非ラテン文字を含むPPTXエクスポートでは画像レイヤーとして書き出され編集ができない問題と、
長セッションでインラインコメントが消える事象が確認されている（出典: buildfastwithai）。
日本語ユーザーは要注意。
これからのデザイン格差はどこで決まるのか
ここからは私の見解。
Claude Designで明確に変わったのは「センスのある人がデザインする時代」から「ブランドを言語化できる人が勝つ時代」へのシフト。
8項目（カラー・タイポ・スペーシング・レイアウト・コンポーネント・モーション・ボイス・アンチパターン）を文字で書き切れる人材が、
社内で重宝される。
これまでデザイナーが暗黙知で抱えていたブランドルールが、
DESIGN.mdというテキストファイルに集約される。
社内ドキュメンテーション能力がそのままデザイン力になる感じ。
逆に言えば、
「センスはあるが言語化できない」タイプは差をつけられる。
AIが量産する平均的なデザインの上を行くには、
DESIGN.mdに書ききれない「ここだけは譲れない違和感」を持っている人が強い。
私は当面、
4/18のClaude Design発表記事 → 4/23のCode+Design GTM Playbook → 4/28のHyperFrames動画記事 → 本記事の流れでクラスタを組んで、
Claude Designの動向を追っていく予定。
FAQ
Q1. Claude DesignとClaude Codeは何が違うの？
Claude Designは「見た目の生成（スライド・LP・プロトタイプ）」に特化したツール。
Claude Codeは「コードの実装」に特化したCLIツール。
Claude DesignでZIPエクスポートしたデザインをClaude Codeに渡すと、
実装まで会話で進められる。
Anthropic公式が用意しているhandoffバンドルにはdesign.html / screenshots/ / design-notes.md / README / PROMPT.mdが含まれる（出典: claudefa.st）。
Q2. FigmaとClaude Designはどっちを選ぶべき？
2026年4月時点で両者は直接連携していない（公式発表なし）。
住み分けで言うと、
Figmaはデザイナーが手で精密に組む用途、
Claude Designは非デザイナーが会話で量産する用途。
リアルタイム協同編集の完成度はFigmaが上（出典: vibecoding.app）。
両方持っておいて使い分けるのが現実解。
Q3. Claude Pro（$20）だけで使い続けられる？
海外の実測レポート複数で「Pro単独では1〜2セッションで週次上限到達」と報告されている（出典: copyrocket.ai / vibecoding.app / UX Planet）。
週1回の資料作成でも厳しい。
Max 5x（$100）が事実上のスタートラインと読むのが妥当。
Q4. 何プロンプトで何が作れるかの目安は？
copyrocket.aiの実測によれば、
Max 5xで4〜5プロンプト・27分の作業で「LP×2・モバイルフロー6画面・20秒動画・10スライドデッキ・5スライドカルーセル」を生成し、
週次枠の90%を消費（出典: copyrocket.ai）。
Brilliantの事例では「20プロンプト→2プロンプト」への圧縮が報告されている（出典: buildfastwithai）。
Q5. 日本語で使える？
UI言語は英語・日本語含む12言語に対応している（出典: 公式ヘルプ）。
ただしShiftBによれば日本語＋英語混在のプロンプト（例: 「hero sectionを追加」）の方が精度が高い傾向。
buildfastwithaiの制限事項では日本語など非ラテン文字を含むPPTXエクスポートで編集不可の画像として出力される問題が報告されている（出典: buildfastwithai）。
日本語資料はPDFかHTMLで出すのが安全。
Q6. 自社のDESIGN.mdをゼロから書く時間がない
2つの抜け道がある。
1つ目はAnthropic公式の「ブランド資産アップロード→自動抽出」機能。
既存PPTやロゴ画像を投げ込むとClaudeが下書きを作る（出典: 公式ヘルプ）。
2つ目はVoltAgent/awesome-claude-design（68種類・MITライセンス）から自社業界に近いサンプルを取って色とフォントだけ差し替える方法（出典: GitHub）。
このページに出てきた言葉
- DESIGN.md
- デザインのルールをまとめたMarkdownファイル。これ1個でClaudeがブランドに沿った絵を作る
- handoff
- デザインから実装担当者への引き渡し工程
- 研究プレビュー（research preview）
- Anthropicが実験段階で公開する形態。機能・制限が予告なく変更される
- YAMLヘッダー
- ファイル先頭に「キー: 値」形式で設定値を書く書式
- デザイントークン
- 色コード・余白サイズ等を変数化して管理する仕組み
- アンチパターン
- 「これだけはやらない」NG例
- レスポンシブ対応
- スマホ・タブレット・PCで表示が崩れない設計（375px/768px/1280px）
- i18n
- 多言語対応（internationalizationの略）
- reduced-motion
- アニメーションを抑える設定への対応
- SKILL.md
- Claudeに「このプロジェクトでこのスキルを使え」と指示するMarkdownファイル
参考リンク
- Anthropic公式 Claude Design発表
- 公式ヘルプ：始め方
- 公式ヘルプ：デザインシステム設定
- 公式ヘルプ：料金とプラン
- 公式チュートリアル：プレゼン・スライドデッキ
- 公式チュートリアル：プロトタイプ・UX
- VoltAgent/awesome-claude-design（68種DESIGN.md集）
- claudefa.st：handoffガイド
- claude-design-pm-toolkit（PM向けhandoffドキュメント）
- copyrocket.ai：Raman Singh実測レビュー
- Victor Dibia：研究者レビュー
- vibecoding.app：レビュー
- buildfastwithai：完全ガイド（Brilliant・Datadogケース）
- ShiftB：日本語ガイド
- Uravation：料金プラン日本語解説
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。