Claude Design 入門｜自然言語で pitch deck と mockup を生成する Anthropic の新プロダクト

プロダクト開発やスタートアップを進めていると、「pitch deck をサッと作りたい」「顧客に見せる one-pager が欲しい」「チームの議論用に mockup が必要」という場面によく出会います。ところが Figma や PowerPoint をゼロから開くと、レイアウトだけで 10 分では終わらず、見た目の調整が内容より時間を食うことも少なくありません。Anthropic が 2026 年 4 月 17 日にリリースした Claude Design は、まさにこの「アイデアから納品可能なフォーマットまで」のギャップを埋めることを狙ったプロダクトです。

本記事ではまず Claude Design とは何か、どのような出力ができて、どのようにエクスポートするかという中核機能を整理します。続いてサブスクリプションプランと公開範囲、Figma・Canva・v0・Lovable などとの立ち位置の違いを確認し、リリース当日に Figma 株価が 7% 下がった理由にも触れます。最後に Claude Design が向かないシーンと、スタンドアロン HTML を実際にエクスポートして感じた制約についても率直に書きます。

Claude Design とは

Claude Design (https://claude.ai/design) は Anthropic Labs が公開した新プロダクトで、Claude Opus 4.7 を搭載し、対話形式でビジュアルデザインと納品可能なドキュメントを共同制作します。自然言語で要件を伝える（例：「自社の B2B SaaS を紹介する 3 ページの pitch deck を作って。トーンは深めのブルーで、フォントはシンプルかつモダンに」）だけで、Claude Design が完成度の高いデザイン案を返してくれて、その後もテキスト指示でレイアウト・配色・文言を調整できます。

ここで誤解されやすい点を先に整理します。Claude Design は Figma のような「キャンバス型」の設計ツールでも、Canva のような「テンプレート型」のツールでもありません。どちらかと言えば「対話型デザインアシスタント」に近く、ワークフローの中心はコンポーネントをドラッグすることではなく、Claude に要件を説明することです。そのため学習コストはほぼゼロですが、ピクセル単位の精密さや手触りの制御は従来ツールほど強くありません。

プロダクトは現時点で research preview（リサーチプレビュー） です。Anthropic は「実験的プロダクト」と位置付けており、長期的なメンテナンスや機能の安定性は保証されません。この背景は Anthropic Labs の章で詳しく触れますが、どのシーンで使うかを判断するうえで頭に置いておく必要があります。

中核機能の全体像

5 種類の出力タイプ

Claude Design が公式にサポートしている出力は 5 種類で、アイデア発想から対外納品まで一般的なシーンをカバーしています。

実際に使ってみると、タイプの境界はそこまで厳密ではありません。3 ページの mockup がそのまま prototype の出発点になることもありますし、pitch deck と slides の違いは主にデフォルトの構造で、前者は「課題・解決策・市場・競合・チーム・Traction・Ask」という VC 向けの定番章立てが自動で入ります。このデフォルト骨格は、資料作成に慣れていない人ほど恩恵が大きい部分です。

5 種類のエクスポート形式

出力タイプはあくまで片側の話で、Claude Design の真価はエクスポート形式の豊富さにあります。一つのデザインを、異なる用途に応じた複数のフォーマットに出し分けられます。

なかでも スタンドアロン HTML と Claude Code handoff bundle は最も Anthropic らしい 2 つの選択肢です。スタンドアロン HTML はデザイン全体（フォント・画像・インタラクションを含む）を 1 つの HTML にパッケージし、リンクで共有したり、iframe に埋め込んだり、オフラインで保存したりできます。Claude Code handoff bundle はデザイン案を構造化された spec に変換し、Claude Code がそのまま読み込んで実装に入れる形にします。「デザインから実装まで」を一本の流れで繋ぐ設計です。

コードベースとデザインファイルを読み込んで design system を構築

Claude Design で最も差別化されている能力は、「チームのコードベースや既存のデザインファイルを読み込み、design system を自動生成して、以降の出力すべてに自動適用する」ことです。この設計が対応している痛みは明確で、多くのチームが新しい pitch deck や one-pager を作るときに最も面倒なのはレイアウトではなく、「既存ブランドのカラーパレット・フォント・ロゴと整合性を保つこと」だからです。

実装面では、Claude Design は渡したリソース（Tailwind config、CSS variables、公開済みのサイトなど）を分析し、そこからブランドカラー・フォント・余白ルール・コンポーネントスタイルを推論して design system として保存し、新しいアウトプットを作るたびに自動適用します。つまり最初にデータを一度食わせれば、以降のデザインは「自社らしい見た目」に揃い、毎回手でカラーパレットを指定する必要がなくなります。

注意： コードベースや社内のデザインファイルをクラウド AI プロダクトに渡す前に、会社のデータガバナンス方針を必ず確認してください。Anthropic はデータを訓練に使用しないと明言していますが、規制産業（金融・医療・政府）ではまず契約と法務の確認を通すことを推奨します。この点は後の「Claude Design が向かないシーン」でさらに展開します。

実例：Claude Design で作った紹介ページ

ここまで説明を重ねてきましたが、実物を見るのが一番早いです。下の iframe は、Claude Design で「Claude Design を紹介するスライド」を作り、HTML ページとして出力したものです。

この HTML ファイルを開いてみると、Claude Design のエクスポートは単なる静的ページではなく、self-contained bundle であることが分かります。すべての JavaScript・フォント・画像リソースが base64 でエンコードされたうえ gzip 圧縮され、同じ HTML ファイルに埋め込まれています。これのメリットは、デザイン全体をメールで送ったり、USB に保存したり、社内ネットワークで共有したりできる点です。外部 CDN やホスティングに依存しません。

代償としてファイルサイズは大きくなります。このサンプルは約 14 MB で、そのうち大部分は 200 を超える woff2 フォントファイルが占めています。iframe に埋め込む前に loading="lazy" を追加し、適切なフォールバックリンクを用意することを推奨するのもこのためです。モバイル回線のユーザーに対して「初回表示が 14 MB」というのは良い第一印象ではありません。

サブスクリプションプランと公開範囲

Claude Design は現在、Claude の Pro・Max・Team・Enterprise サブスクライバー向けに公開されており、無料プラン（Free tier）は対象外です。Anthropic のアナウンスでは、機能はリリース当日に「段階的にロールアウト」される旨が記載されていて、すでに課金済みでもすぐに見えるとは限らず、UI にエントリーポイントが現れるまで数時間かかることがあります。

プラン間で比較的重要な違いが 1 つあります。Enterprise プランはデフォルトでオフになっていて、組織の admin が手動で有効化してからでないとメンバーは使えません。この設計には納得できる理由があります。Enterprise には厳格なデータガバナンス要件が伴うことが多く、admin が新機能のデータフローを確認する前に全社員へ自動解放すると、コンプライアンス上のリスクを招くからです。これは B2B 顧客に対する Anthropic の定石で、Projects や Files などの機能でも同様の扱いが見られます。

料金については、Claude Design は現時点でサブスクリプションに含まれており追加料金はありませんが、Anthropic は将来にわたって無料であるとは約束していません。同種の AI プロダクト（ChatGPT の Canvas、Gemini の Deep Research など）は「初期は無料でユーザーを集め、後で独立アドオンに切り出す」パターンが定石なので、今は比較的お得に試せるタイミングです。

使用量枠とリセットサイクル

実務面で単独に触れておく価値がある話題が 1 つあります。Claude Design は Settings → Usage に独立した使用量枠を持っていて、通常の Claude チャットや Claude Code の枠とは別カウントになります。この仕様には 2 方向の意味があり、良いニュースとしては、Claude Design を走らせても日常のチャットや Claude Code の枠を食い潰さないこと、悪いニュースとしては、このデザイン専用の枠が単独でも簡単に底を突くことです。バックエンドで動いているのは Claude Opus 4.7 で、1 回の出力で複数ページ・複数回の推論が走るため、トークン消費のカーブが普段のチャットとはまるで別物になります。

確認方法

claude.ai にサインイン後、右上のメニューから Settings → Usage に進むと、専用の Claude Design 区画が表示され、今週の使用量と残り比率を確認できます。枠を使い切ると UI に次回のリセット時刻が直接提示され、それ以降も使い続けたい場合は Settings で Extra usage を有効にすると、週枠を超えた分は別途課金されます。

リセットサイクル：7 日のローリングウィンドウ（暦週ではない）

Anthropic の公式説明では recurring weekly allowance that resets every seven days と書かれています。つまり各アカウントごとに独立した 7 日間のローリングウィンドウであり、「毎週月曜リセット」のような暦週の締め方ではありません。例えば木曜の夜に枠を使い切った場合、翌月曜ではなく翌木曜の夜に満タンに戻ります。多くのサブスクリプションで馴染みのある周期的な締め方とは異なるため、重要な納品日を計画に入れるときはこの点を織り込んでおく必要があります。

プラン別の枠の比率

Anthropic はトークン数や回数の具体値を公開しておらず、プラン間の相対比率のみが示されています。

注意： 実際に使ってみると、Claude Design の枠は直感よりかなり速く燃えます。「試しに 30 分ほど触っただけで週の枠を使い切り、翌週までロックされた」というユーザー報告もあります。1 つの pitch deck 出力の裏では、十数ページ分のレイアウト・配色・フォント・アイコン・文言書き直しが並行で走っており、通常チャットの「数ターンのやり取り」とは消費モデルがまったく異なります。

より現実的な運用は、本当に成果物を納品するシーン（明日投資家に見せる pitch deck、今週顧客に出す one-pager）に Claude Design を取っておくことです。方向性が定まらないまま prompt を反復する探索フェーズは、枠をあっという間に吸い尽くします。どうしても重度に使う必要があれば、上位 Max へのアップグレードか、Settings で Extra usage を有効にして週枠を延長する選択肢を検討してください。

Figma・Canva・Google Stitch との立ち位置の違い

Claude Design は「設計ツール」と「AI 生成ツール」の両方にまたがるため、リリース後に最も多く聞かれた質問は「X と何が違うの？」でした。ここでは立ち位置が近いツールを一枚の表にまとめて比較します。

この表を並べると、Claude Design の差別化が見えやすくなります。コードは出力しない（v0 や Lovable と違う）一方で、PDF や PPTX というビジネスシーン向けファイルは出せる。キャンバス操作が中心ではない（Figma と違う）一方で、Figma にはない「自然言語で設計を改善する」フローを提供する。完全なテンプレート主導ではない（Canva と違う）が、Canva にはないコードベース読み込み能力を持つ、という具合です。

Claude Design vs Google Stitch

この表のなかで Claude Design と混同されやすいのが Google Stitch です。どちらもプロンプトでデザインを生成するのが中核で、URL やコードベースから design system を抽出できる点も共通しますが、基底の立ち位置はかなり違います。

Stitch の強みは「UI 画面のインタラクティブ prototype」です。複数の画面をクリック可能なフローに繋ぐ（stitch 自体が「繋ぎ合わせる」の意）ことができ、Voice Canvas で音声を使ってデザインを修正したり、Annotate で画面に直接注釈を書き込んで Gemini に読ませたりできます。想定シーンはアプリや Web 画面のデザインで、ワークフローは依然として「キャンバス」という隠喩を中心に回っています。

Claude Design は「複数の納品フォーマット」に全振りしています。pitch deck、slides、one-pager などをまとめて PDF、PPTX、スタンドアロン HTML に出力でき、インタラクションはほぼ対話のみでキャンバスはありません。想定シーンはインタラクティブ UI 設計ではなく、ビジネス文書と企画書の納品です。言い換えれば、Stitch は AI 版 Figma、Claude Design は AI 版 Keynote + Canva というイメージです。

アクセス面も実務的な選択の軸です。Stitch は stitch.withgoogle.com で無料公開されているのに対し、Claude Design は Claude Pro・Max・Team・Enterprise のサブスクリプションが必要です。まず「AI でデザインを生成するとはどういう体験か」を試したいだけなら Stitch が最も入りやすく、すでに Claude のサブスクリプションを契約していて用途が pitch deck や社内資料寄りなら Claude Design が最短です。

Claude Design vs Figma

Figma はこの 10 年、プロのデザインワークフローにおける source of truth でした。複数人のリアルタイム共同編集キャンバス、コンポーネントライブラリ、auto layout、design token、プラグインエコシステム — どのリンクも現場のデザイナーによって長期間検証されてきました。Claude Design はこれらの軸で直接競合しません。キャンバスも、コンポーネントシステムもなく、インタラクションモデルが根本的に別世界です。

実用的な判断軸は「この作業は『ゼロからの立ち上げ』か、『既存デザインの延長』か」です。Claude Design はゼロからが得意です。プロンプトを渡せば、レイアウト・配色・フォントが決まった初稿が一気に返ってきます。Figma は既存の延長が得意です。ブランドライブラリがある前提で、デザイナーがキャンバス上で 1 ピクセル単位まで正確にコントロールし、ブランド規約との整合性を担保します。ドラフト・pitch deck・社内資料は Claude Design が最速ですが、最終納品・マーケティング素材・ブランドの核心ページには依然として Figma が必要です。さらに、ワークショップ・共同デザイン・その場でのレビューのように、複数人が同じキャンバス上でドラッグやコメントを行う場面は、Claude Design にはキャンバスもリアルタイム共同編集もないため成立しません。ここは Figma や FigJam の主戦場のままです。

実務で相性がよいのはリレー方式です。Claude Design で初稿を作り、pixel-perfect の仕上げが必要なら、エクスポートを Figma に持ち込んで最終調整します。Claude Design のリリース後に Figma の株価が短期的には下落したものの、プロのデザインコミュニティが大きく動揺していない理由もここにあります。Figma 自身も 2025 年末に FigJam AI と Make を投入しており、「生成」のレイヤーで Claude Design に正面から挑むのではなく、既存のキャンバスワークフローに AI を組み込んで発想段階を速めるアプローチを取っています。

各ツールの固有の強み

それぞれのツールで最も代替困難な強みを抜き出すと、シーンから逆引きでツールを選びやすくなります。

• Claude Design：複数フォーマットの一括納品（PDF、PPTX、スタンドアロン HTML、Claude Code handoff bundle）に加え、コードベースを読み込んで design system を構築する能力。「1 つのコンテンツを複数の出力形態に展開する」pitch deck・one-pager・社内資料に最適。
• Google Stitch：インタラクティブ UI prototype、Voice Canvas の音声編集、Annotate による画面上での注釈。複数のアプリ画面をクリック可能なフローに繋ぐのが看板機能で、現時点では無料開放されているため、デザイナーがアプリや Web 画面の初期探索をする用途に向いています。
• Figma：複数人のリアルタイム共同編集キャンバス、コンポーネントライブラリ、design token、pixel-perfect な制御。プロデザインチームの source of truth であり、他ツールの出力も最終調整とブランド適合チェックのために Figma に戻ってくるケースが多い。
• Canva：膨大なテンプレートエコシステム（SNS 投稿、ポスター、名刺、プレゼン）。開けばすぐに数百種類の Instagram ストーリーテンプレートが使えます。非デザイナーに最も優しく、複数人での共同編集にも対応。SNS 素材の量産という位置付けは、いまだに AI ツールに置き換えられていない領域です。
• v0 / Lovable：デプロイ可能なフロントエンドやフルスタックコードをそのまま出力し、プロンプトから production URL まで一気通貫。「デザインは粗くても、すぐに動かしたい」MVP や landing page の開発に最適。

見方を変えると、これらのツールは排他的ではありません。同じプロダクトチームが、Figma でメインビジュアルを作り、Canva で SNS 投稿を量産し、Claude Design で投資家向け pitch deck を作り、Stitch でインタラクティブ prototype を探索し、v0 でフロントエンドコードを生成する、という組み合わせがあり得ます。Claude Design が切り込んでいるのは「複数フォーマットの納品文書」という特定のリンクであって、設計プロセス全体を飲み込もうとしているわけではありません。

実際にツールを選ぶときの実用的な指針は「今回のアウトプットをどこに送るか」です。メールまたは印刷なら PDF、PowerPoint や Keynote なら PPTX、エンジニア実装用なら handoff bundle、Web に iframe 埋め込みやオフライン配布ならスタンドアロン HTML。これらのシーンでは Claude Design が最短経路を提供し、それ以外のシーンでは Figma・Canva・Stitch がそれぞれの得意領域を続ける、というのが現時点の構図です。

Anthropic Labs の実験的プロダクト戦略

Claude Design は Anthropic Labs というブランドの下にぶら下がっており、これは注目に値するシグナルです。Anthropic Labs の位置付けは Google Labs に近く、新しいプロダクトコンセプトを素早く試すためのチャネルです。成功すれば正式なプロダクトラインに昇格（Claude Code は実験機能から独立プロダクトへ段階的に昇格した好例）、失敗するか他プロダクトに吸収される機能は静かにクローズされる、という運用です。

そのため Claude Design をコアワークフローに組み込むかどうかを判断するときは、「長期的な安定性は保証されないツール」として扱うことをおすすめします。これは否定的な意味ではありません。早期の試用で最新の能力を手にでき、プロダクトチームとのフィードバックループを築けるというメリットがあります。ただし、社内のビジネス資料ワークフローを全面的に Claude Design に移し、Figma を止めてしまうといった移行はリスクが高すぎます。

余談ですが、Anthropic 最近のプロダクトロードマップを見ると、Claude Code（開発者向け）、Claude Design（デザインとビジネス資料向け）、そしてそれ以前にリリースされた Computer Use / Browser Use（agent 操作向け）は、いずれも同じ大きな課題に取り組んでいます。「Claude にテキスト回答だけでなく、そのまま使える成果物を直接納品させるには」という課題です。Claude Design はこのラインのなかで、デザインとビジネス生産性の領域で最も目に見える一歩と言えます。

Claude Design が向かないシーン

ここまで書いてくると Claude Design の価値は伝わっていると思いますが、向かないシーンもいくつか率直に書いておきます。読み終えた後に期待値が高すぎるままにならないためです。

その 1：成熟した Figma ライブラリと design token が既にあるチーム。 このようなチームで Claude Design を導入する最大のリスクは、出力品質ではなく source of truth の分裂 です。もともとブランドルールはすべて Figma の shared library に集約されていたのに、Claude Design 側にも design system が生まれてしまう。両者が同期していないと混乱の原因になり、同期コストがレイアウト短縮のメリットを上回ることが少なくありません。

その 2：pixel-perfect な精度やブランド適合が厳しく求められるシーン。 自然言語プロンプトの精度は、コンポーネントを手でドラッグする精度とまだ開きがあります。最終的に印刷される、法的文書になる、ブランドガイドラインと一字一句合わせる必要がある、といった用途では、Claude Design で初稿を作り、プロツールで微調整して仕上げるのが安全です。

その 3：規制産業の社内データ。 金融・医療・政府などの強い規制を受ける業界で、社内のコードベースやデザインファイルを外部モデルに渡して design system を構築する前に、法務と情報セキュリティのレビューを通すことを推奨します。Anthropic はデータを訓練に使用しないとアナウンスしていますが、「データの保持期間」「地域を跨いだ転送の有無」「ベンダー側の人手レビューが許可されるか」などの詳細は、契約レベルで確認してから導入するべきです。

使う上で意識しておくべき制約

「向かないシーン」という戦略レベルの話に加えて、実際にエクスポートや統合を始めると見えてくる技術的な制約もあります。

スタンドアロン HTML のファイルサイズが大きい。 先ほどのサンプルは約 14 MB で、大半は 200 を超える埋め込み woff2 フォントに由来します。モバイル回線の環境（ブログの iframe、メール添付など）に配る場合は、初回読み込み時間を見積もったうえで、lazy load とフォールバックリンクを設計に含めておく必要があります。

PPTX エクスポートでアニメーションとインタラクションが失われる。 Claude Design が生成するページは HTML 環境では画面遷移アニメーションや hover エフェクトを持てますが、PPTX に出力するとほぼ静的ページに戻ります。顧客へのプレゼンに渡すなら、PPTX より PDF の方が安定した選択肢になることが多いです。

Claude Code handoff bundle はまだ磨き込み中。 コンセプトはデザイン案を Claude Code にそのまま渡して実装してもらう、というものですが、実際の統合品質はプロジェクトの既存構造に大きく依存します。ゼロから始める新規プロジェクトではスムーズですが、既存の大型プロジェクトでは spec を手で調整しないと動かないことがまだあります。

フォントは基本的に内蔵のみ。 現時点の出力は Claude Design 内蔵のフォントセットを使用しており、企業独自のブランドフォントを直接指定することはできません。フォントにこだわるブランドは、エクスポート後に Figma や Illustrator でフォントを再指定する必要があります。

まとめ

Claude Design が解決するのは「開発者・プロダクトマネージャー・起業家がアイデアを素早く納品ファイルに変えたい」という痛みで、プロのデザイナーのワークフローを置き換えるためのものではありません。したがって最適なシーンは、Figma や Sketch は重すぎるが、Google Docs や PowerPoint ではビジュアルが物足りない、という中間ゾーンです。例えば社内スライド、pitch deck の初稿、プロダクトの one-pager、ブログの挿絵、機能紹介ページなどが該当します。

もし手元に Claude Pro・Max・Team のサブスクリプションがあるなら、今週 30 分ほどかけて何か作ってみる価値があります。例えば現在手がけている side project を 1 枚の one-pager に落とす、会議サマリーを 1 本のスライドにまとめる、といった具合です。このプロセスを通じて「自然言語で納品可能な文書を生み出す」体験が直感的に掴めるので、後に日常ワークフローに組み込むか評価するときの判断が、かなり具体的になります。

一方、規制産業、成熟したデザインチーム、pixel-perfect が必要な業務では、焦って導入する必要はありません。Anthropic Labs のプロダクト動向を追い、Claude Design が research preview から正式なプロダクトラインに昇格し、エクスポート選択肢がより成熟してから評価する、というのがより手堅いペースです。