Claude Design：ガイドと実践的な5つのシナリオ

Ailootの実用情報はドキュメントでご覧いただけます。

Claude Designとは何か、なぜ4月17日が注目されているのか？#

2026年4月17日、金曜日。AnthropicがClaude Designを公開しました。テキストでの説明を、実際に動作するランディングページ、投資家向けプレゼンテーション、モバイルアプリのプロトタイプに変えるツールです。「また一つ画像生成ツールが増えた」という話ではありません。これは、製品開発の初期段階からデザイナーを不要にしようとするAnthropicの初めての試みです。

24時間後、AdobeはFirefly-Claudeコネクターを発表し、プラットフォームパートナーとしての立場を打ち出しました。この動きが示すのは、Anthropicが製品競争に勝ったというより、パラダイムシフトを起こしたということです。デザインは生成されるものになり、既存の大手企業は流通を担うようになりつつあります。

この記事では、バイブコーダーの視点からClaude Designを検証します。何ができるのか、いくらかかるのか、デザインの経験がなくてもどう使えるのか、どんな実務に役立つのかを取り上げます。社内にデザイナーがいない状態で製品を作っている方に向けたガイドです。

Claude Designで作れるもの：6種類の成果物#

簡単に言えば、Claude Designは従来ならデザイナーが3〜5日かけて作っていたデザインを生成します。Anthropicによると、成果物は次の6種類です。

インターフェースは2つのパネルで構成されています。左側にClaudeとのチャット、右側にキャンバスのライブプレビューがあります。作業は、プロジェクトの設定、説明、確認、反復、エクスポートの5段階で進みます。プロンプトが曖昧だとClaudeが追加質問をするため、生成ツールというより人と一緒に作業する感覚に近いプロセスです。

入力として受け付けるもの：

1. テキストプロンプト（主な使用方法）。
2. スクリーンショット、画像、既存の素材。
3. 文書：DOCX、PPTX、XLSX。
4. コードベース—リポジトリのリンクまたはローカルフォルダーのインポート。
5. URLで指定する既存ウェブサイトのキャプチャ。

エクスポート形式：

1. PDF。
2. PPTX（PowerPoint）。
3. 単体HTMLファイル—すぐにページとしてアップロードできます。
4. Canvaへの転送—完全に編集できるプロジェクトとして開きます。
5. Claude Code向けパッケージ—開発に必要なデザインの意図をすべて含みます。
6. 組織内でリンクを共有。

Claude Designができないこと（事前に明確にしておきたい点）：

• コードベースの編集やコマンドの実行はできません。それはClaude Codeの役割です。
• .figファイルのインポートやエクスポートはできません。Figmaとのネイティブ連携はありません。
• FigmaやCanvaの代わりにはなりません。
• 操作ログも管理者向けレポートもないため、コンプライアンス要件のある大企業には適しません。
• 動画の組み込みエクスポート機能はありません。アニメーションを保存するには画面録画が必要です。

Claude DesignとFigma、Lovable、v0、Canvaの違い#

ここで紹介する方法では、これら5つのツールをそれぞれ異なる作業に使います。2026年5月時点での比較は次のとおりです。

Claude Designが他のツールより優れている点：

1. コードベースからデザインシステムを作成。 リポジトリからコンポーネント一式を自動抽出できる競合ツールはありません。v0はFigmaからインポートできますが、コードからはできません。
2. Claude Codeとの閉ループ。 デザインの意図が維持されます。LovableやBoltでは一つのツール内で完結しますが、そこでのデザインはコードの副産物です。
3. 一つのコンテキストから複数の成果物を作成。 一つのブランドから、ランディングページ、プレゼンテーション、メールキャンペーン、SNS用クリエイティブを作れます。他のツールはこのうち一つしか作れません。
4. インターフェースを覚える必要がない。 Figmaのように操作方法を学ぶ必要がありません。「デザイン経験のない創業者やプロダクトマネージャー」というAnthropicが想定する利用者にとって、これは重要です。

Claude Designの弱点：

1. データベースやサーバーとの完全な連携がない。 LovableやBoltならデータベース、認証、公開機能を備えたアプリが動作します。Claude Designが提供するのはフロントエンドだけです。同じ結果を得るには、Claude Design → Claude Code → Vercelなどのホスト → 手動で決済システムを追加、という手順になります。一つではなく3つのツールが必要です。
2. .figファイルがない。 デザイナーはスクリーンショットか再構築以外の方法では、出力をFigmaに取り込めません。
3. 無料プランがない。 競合にはすべて無料プランがあります。Claude DesignはPro以上で利用できます。
4. 仕上げの品質。 最終的な本番品質の仕上げでは、依然としてFigmaが優位です。Claude Designは初稿向けです。
5. 簡易なプロトタイプを作る速さ。 最小限のプロトタイプならBoltのほうが速く、数秒でブラウザー上に表示できます。

Claude Designは別の作業のためのツールです。デザイナーなしで初稿を作り、その後は別の人に引き継ぐことを想定しています。

Claude Designの料金とアクセスの確認方法#

プランと利用条件：

初回クレジットは一度だけ付与されます。一般的なプロンプト20回分のパッケージで、2026年7月17日まで有効です。Claude Designが自分に合うか判断するために、2〜3件のプロジェクトを作るには十分です。

インターフェースのボタンは英語のみです。

コードベースからデザインシステムを接続する方法#

Claude Designの主な競争優位性は、すでに何かを作っている人にとっての利点です。リポジトリからデザインシステムを自動抽出できるツールは他にありません。Second Brainの考え方に似ています。自分のブランドをClaudeに説明するのではなく、ソースへのリンクを渡し、Claudeに自動で理解させます。

設定の5つの手順：

1. claude.ai/designでClaude Designを開き、新しいプロジェクトを作成します。
2. 初期設定でデザインシステムのソースを選択します。 利用できるソースは、ブランドガイドライン、フロントエンドのコードベース、過去のプレゼンテーションやスタイルガイド、URLで指定した公開ウェブサイト、Figmaファイルです。
3. リポジトリを選んだ場合は、GitHubのリンクを指定します。Claudeはフロントエンドのフォルダーをダウンロードし、テーマ設定、スタイル変数、既存コンポーネント、タイポグラフィを分析します。
4. 公開ウェブサイトを選んだ場合は、URLを指定します。Claudeがページ構造をキャプチャし、色、フォント、ボタンやカードのパターンを抽出します。
5. 抽出されたコンポーネント一式を確認します。 Claudeは抽出したパレット、フォント、基本コンポーネントを表示します。保存前に編集できます。

それ以降、Claude Design内で作成するすべての新規プロジェクトに、デザインシステムが自動的に引き継がれます。つまり、今日生成するランディングページは、現在のウェブサイトと同じ見た目になります。

デザインシステムを再確認するプロンプト：

このプロジェクトで有効なデザインシステムを表示してください：カラーパレット、タイポグラフィ、
基本コンポーネント、スペーシングパターン、角丸。現在のライブ
ウェブサイト [URL] と比較して、異なる点を指摘してください。

ここで紹介する方法では、プロジェクト内で3〜4回反復するたびに、この確認を行います。Anthropicは発表の中で、数回反復するとClaudeがデザインシステムを忘れ、デフォルトのパターンに戻ることがあると率直に警告しています。設定したコンポーネントに立ち戻るよう、定期的にプロンプトで促すのが対処法です。これは本質的にClaude Codeで行うのと同じコンテキストエンジニアリングです。コンテキストを暗黙のままにせず、明示的に管理します。

シナリオ1：製品ローンチ向けランディングページ#

ここで紹介する体験談では、Claude Designで新しい実験を始めたときの最初の成果物はランディングページでした。以前はデザイナーへの依頼に1日かけ、その後1週間にわたって反復していました。今はプロンプトを一つ送って、1時間修正すればHTMLが完成します。

プロンプトのテンプレート：

[製品名、1文での説明]のランディングページを作成してください。
ビジュアルの方向性：[参考ブランド1]と[参考ブランド2]を組み合わせ、
[形容詞]で[形容詞]なトーンにします。構成：価値提案を1つ示すヒーロー、
3つのメリットセクション、先行アクセス登録フォーム、5問のFAQ、フッター。
私のデザインシステムを使ってください。

得られるもの： スタイルが埋め込まれた単体HTMLファイルです。自分のウェブサイトのページとして、または任意のホスト上の個別プロジェクトとしてアップロードできます。

Claudeの後に通常確認・修正する点：

• ヒーローに載せる具体的なコピー。Claudeは構成づくりが得意ですが、製品の意味を理解するのは得意ではありません。
• 画像。Claudeはプレースホルダーを挿入します。私は自分の画像に差し替えるか、別のツールで生成します。
• 指標と数値。必ず実際の数値を使います。「顧客の80%が〜」などと捏造してはいけません。

削減できる時間： 一般的なローンチ用ランディングページなら、デザイナーの作業を6〜8時間、フロントエンド開発を1日分削減できます。Claude Designが初稿を作るのに40〜60分、その後の反復に1時間かかります。

シナリオ2：投資家またはパートナー向けプレゼンテーション#

プレゼンテーションは、2つ目の主なシナリオです。投資家向け資料、アクセラレーターへの応募書類、パートナーとの打ち合わせに使えます。

プロンプトのテンプレート：

[会社]のSeries A向けプレゼンテーションを10枚で作成してください。
[誰に]向けて[何を]構築し、[主要指標]を達成しています。対象：
初期段階のB2B SaaS投資家。トーン：自信があり、親しみやすく、誇張なし。スライドの
順序：タイトル、課題、解決策、実績（指標を目立たせる）、
製品デモ、市場規模、ビジネスモデル、競合、チーム、依頼事項。

得られるもの： PPTXファイルとCanvaへの転送です。Canvaでは完全に編集でき、共同作業も可能なプロジェクトとして開きます。

所要時間： 手作業で作る場合と比べて6〜10時間を削減できます。特に、デザインシステムに沿って大きな見出しとすっきりしたレイアウトを使う、タイポグラフィ重視のスライドで効果を発揮します。

注意点： Claude Designが生成するのは静的なスライドです。アニメーションが必要なら、Canvaに移してそこでアニメーションを付けるか、Figmaを使ってください。

シナリオ3：クリック可能なモバイルアプリのプロトタイプ#

実用的なシナリオは、開発者に費用を払う前にモバイルアプリの仮説をテストすることです。

プロンプトのテンプレート：

[製品]のモバイルアプリ向けに、インタラクティブなオンボーディングのプロトタイプを
構築してください。シナリオは3つ：空の状態、ユーザーの最初の操作、そして
気づきの瞬間。MazeまたはUseberryでの非モデレートユーザーテストに
使えるよう、要素をクリック可能にしてください。

得られるもの： プロトタイプへのリンクです。そのままMazeに送信して、5〜10人のユーザーによるテストを行えます。

確認する点：

• 画面の寸法。ClaudeがiOS/Androidに適したアスペクト比を使っているか確認してください。
• シナリオの深さ。Claudeは複雑な分岐を1画面にまとめてしまうことがあります。その場合は「各分岐を別々の画面として表示してください」とプロンプトで伝えます。
• 状態。空、エラー、読み込みの各状態は、指示しないと作成されません。

削減できる時間： FigmaとProtoPieで手作業する場合に比べて1〜2スプリントです。

シナリオ4：5つの1ページサイトを使うマーケティングキャンペーン#

有料広告を運用する人向けのシナリオです。同じフォームと一貫した計測方法を使い、5つの価値提案を比較します。

プロンプトのテンプレート：

異なる価値提案をテストするため、ブランドに沿った1ページサイトを5種類作成してください：
[選択肢1、選択肢2、選択肢3、選択肢4、選択肢5]。
それぞれに固有の見出し、ビジュアル画像、
[同じ実際のフォームURL]につながるCTAボタンを備えたヒーローを含めてください。
各ページを単体で使えるHTMLとして書き出してください。
デザイン確認用のPDFプレビューとCanvaフォルダーも出力してください。
5ページすべてでCTAの行き先と計測イベントを統一してください。

得られるもの： HTMLページの下書き5つ、PDFプレビュー5つ、Canvaのプロジェクトフォルダーです。プレビューはデザインの承認に使えますが、ページやコンバージョン計測の動作を証明するものではありません。

集客を始める前に：

1. 選んだホストで各HTMLページを固有のURLに公開するか、Claude Codeに渡して既存サイトへ実装します。
2. 仮の内容を差し替え、すべてのCTAを確認します。共有フォームから無害なテスト情報を送信し、予定した宛先に届くことを確かめます。
3. 各ページに別々のキャンペーンまたはバリエーションのラベルを付けます。訪問、CTAクリック、フォーム送信成功を別々に記録し、各案で同じ利用者の行動を比較します。
4. 公開URLをデスクトップとモバイルで開き、テストイベントの記録を確認してから、予定した集客テストを始めます。

用途： 有料広告、メールキャンペーン、SNSテスト。クリック率は訪問あたりのCTAクリック、コンバージョン率は訪問あたりの送信成功で比較します。PDFやCanvaだけの確認はデザインレビューであり、この実地テストにはなりません。

注意点： Claude Designは素材の中から画像を自動で選びます。特定の写真が必要なら、あらかじめアップロードしてください。

シナリオ5：Resend、Mailchimp、またはSendsay向けメールキャンペーン#

一斉メールキャンペーンには、スタイルを埋め込んだHTMLテンプレートが必要です。これは、フロントエンド開発者がいないマーケターにとって技術的な悩みの種です。

プロンプトのテンプレート：

[キャンペーンのテーマ]のHTMLメールテンプレートを作成してください。デザイン：ダークテーマ、
ブランドの主要アクセントカラー、ブランドフォント。構成：小見出し、
見出し、3段落、行動喚起ボタン、署名。スタンドアロンのHTMLファイルとして
エクスポートしてください。スタイルを埋め込み、外部依存を含めないでください。

得られるもの： Resend、Mailchimp、Sendsay、Unisenderにそのまま貼り付けられるHTMLファイルです。

通常確認・修正する点：

• 幅。メールクライアントでは固定幅600pxが推奨されます。
• 画像。リンクを、オンラインでホストした自分の素材へのリンクに差し替えます。
• プレーンテキスト版。Claude Designは生成しないため、自分で作成します。

削減できる時間： テンプレート1つにつきレイアウト作業を2〜3時間削減できます。

Claude Codeへの引き継ぎ：閉ループ#

ここで紹介する方法では、この機能が、Figmaを使っている場合でもClaude Designを選ぶ理由になります。他のデザインツールが引き渡すのは画像かFigmaファイルです。その後、開発者がそれを見て、自分なりに解釈しながら実装します。その際、デザインの意図の30〜40%が失われます。

Claude Designは、ビジュアルだけでなく、次の内容を含むパッケージを提供します。

• コンポーネントの構成（論理的にどう関連しているか）。
• デザイン判断の背景にあるロジック（なぜこの余白なのか、この角丸なのか、この階層なのか）。
• レスポンシブの基準点—画面サイズごとにブロックをどの位置に固定するか。
• マジックナンバーではなく、名前の付いたスタイル値。

Claude Codeはこのパッケージを直接開き、意図を維持したコードを書きます。レイアウトに画像を再現するだけでなく、デザインのロジックを実装します。この仕組みはプロジェクトのCLAUDE.mdと連携します。CLAUDE.mdのルールが正確であるほど、Claude Codeが元の意図から「逸脱」しにくくなります。

ワークフロー：

1. Claude Designでデザインを完成させ、「Export to Claude Code」をクリックします。
2. Claude Codeでプロジェクトを開き、パッケージIDを貼り付けて「このデザインを src/components/ に実装してください」とプロンプトを送ります。
3. Claude Codeがパッケージを読み取り、パターンを把握して、現在の技術スタック（Next.js + Tailwind、Vue、Svelteなど）に合わせたコンポーネントを書きます。
4. その後はClaude Codeでコードを変更するか、Claude Designで新たなデザインの反復を行って、再び引き継ぎます。

重要な点：これは「AIがフロントエンドを書く」ということではありません。「デザインとコードが一つの文書になる」ということです。Claude Designでセクション間の余白を変更すると、Claude Codeは次の反復で、それが一度限りの修正ではなく新しいパターンだと理解します。

競合ツールにない機能：

• Lovable / Bolt—デザインはコードの副産物です。デザインシステムを変更する場合、プロンプト全体を書き直す必要があります。
• v0—Reactコンポーネントは提供しますが、デザインの意図を含むパッケージはありません。その後はデザインではなくコードを扱います。
• Figma + Cursor—プラグインはありますが、デザイン判断の背景にあるロジックは引き継がれず、ビジュアルのみが渡されます。

Anthropicの「エージェント＋キャンバス」戦略でClaude Designを活用する独自の連携機能です。

うまく動かないこと：アーキテクチャ上の弱点#

Anthropicは率直に、これはプレビュー版だと説明しています。まだ動作しない機能もあります。

アーキテクチャ上の弱点：

• 操作ログがないため、コンプライアンス要件のある大企業にとって問題になります。
• データ保持要件がないため、規制対象データには使用できません。
• 実験的なデザイン（音声、動画、3D）は実験的と明記されており、動作しない可能性があります。
• 動画の組み込みエクスポート機能はありません。アニメーションを保存するには画面録画が必要です。

Claudeの動作上の癖（Designに限らず、すべてのツールに共通）：

• 数回反復すると要件を忘れ、デフォルトのパターンに戻ります。
• 明確に構成された作業（パターンの繰り返し）は得意ですが、自由度の高い作業（新しい方向性の提案）は苦手です。
• 明示された目標に従うよりも、慣れたパターンに「固執」することがあります。

対処法は、3〜4回反復するたびに、デザインシステムに立ち戻るようリマインドするプロンプトを使うことです。致命的な問題ではありませんが、習慣的に行う必要があります。

Figma、Lovable、Canvaを使い続けるべき場合#

ここで紹介する方法では、5つのツールをそれぞれ異なる作業に使います。それぞれを使う場面を率直に整理します。

Claude Designを使う場合：

• デザインの経験がない創業者、プロダクトマネージャー、マーケター。
• プレゼンテーション、ランディングページ、モックアップの初稿を、1日ではなく1時間で作りたい場合。
• Claudeが利用できるコードベースやブランドガイドラインがすでにある場合。
• デザイナーや開発者に引き継いで、仕上げる予定がある場合。
• Claude Codeでコードを書いており、「デザイン → 開発」の閉ループを作りたい場合。

Figmaを使う場合：

• デザイナーとして最終的な仕上げを行う場合。
• 開発者への引き継ぎを重視してチームで作業する場合。
• プラグイン、開発者モード、厳密なバージョン管理が必要な場合。
• 本番運用に使える完成デザインが必要な場合。

LovableまたはBoltを使う場合：

• 一つのプロンプトから、データベース、認証、公開機能を備えた製品を動かしたい場合。
• デザインの仕上がりより速さを優先できる場合。
• 無料プランが重要な場合。

Canvaを使う場合：

• 既製テンプレートからマーケティング資料を作りたい場合。
• ライブラリの素材を組み合わせる作業で、創造的な生成を必要としない場合。
• 印刷物、SNS、動画を一つの製品で扱いたい場合。

v0を使う場合：

• フロントエンドを開発しており、コピー＆ペーストできる既製コンポーネントが必要な場合。
• すでにNext.js / Vercelのエコシステムを使っている場合。
• Figmaから直接インポートしたい場合。

ここで紹介する一般的な手順では、Claude Designでランディングページの初稿を作成 → Claude Codeでsrc/app/に移す → コードを編集 → タイポグラフィを仕上げるならFigmaへ → SNS向けアニメーションが必要ならCanvaへ、と進みます。

Claude Designは万能を目指しているわけではありません。最初の一歩となり、その後に何をすべきか理解できることを目指しています。

Ailootに移動。