# Claude Design：ガイドと実践的な5つのシナリオ > 機能、料金、デザインシステム、ランディングページ、プレゼンテーション、プロトタイプ、HTMLメール。エクスポート、制限事項、成果物をClaude Codeに引き継ぐ方法。 Source: https://ailoot.ai/blog/ja/claude-design-guide/ Canonical: https://ailoot.ai/blog/ja/claude-design-guide/ Language: ja Publisher: Ailoot (https://ailoot.ai/) Translation: guide-058 Revision: sha256-f2b0e1658832d7d7340fa37423c4f8c9a419d234908c8884dc86dabeaf5b3a75 [Ailootの実用情報はドキュメントでご覧いただけます](https://ailoot.ai/docs/)。 ## Claude Designとは何か、なぜ4月17日が注目されているのか？
重要なポイント Claude Designは、テキストプロンプトからクリック可能なプロトタイプ、ランディングページ、プレゼンテーション、マーケティング資料を組み立てるAnthropicのツールです。2026年4月17日に、Claude Opus 4.7を基盤として公開されました。これはAnthropic初の「エージェント＋キャンバス」パラダイムに基づく製品です。左にチャット、右にライブキャンバスを配置しています。
2026年4月17日、金曜日。Anthropicが[Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs)を公開しました。テキストでの説明を、実際に動作するランディングページ、投資家向けプレゼンテーション、モバイルアプリのプロトタイプに変えるツールです。「また一つ画像生成ツールが増えた」という話ではありません。これは、製品開発の初期段階からデザイナーを不要にしようとするAnthropicの初めての試みです。 24時間後、AdobeはFirefly-Claudeコネクターを発表し、プラットフォームパートナーとしての立場を打ち出しました。この動きが示すのは、Anthropicが製品競争に勝ったというより、パラダイムシフトを起こしたということです。デザインは生成されるものになり、既存の大手企業は流通を担うようになりつつあります。 この記事では、バイブコーダーの視点からClaude Designを検証します。何ができるのか、いくらかかるのか、デザインの経験がなくてもどう使えるのか、どんな実務に役立つのかを取り上げます。社内にデザイナーがいない状態で製品を作っている方に向けたガイドです。 ## Claude Designで作れるもの：6種類の成果物
重要なポイント AnthropicはClaude Designで作れる一般的な成果物として、リアルなプロトタイプ、モックアップ、複数のデザイン案、プレゼンテーション、マーケティング資料、AIを組み込んだ実験的なデザインの6種類を挙げています。テキスト、スクリーンショット、DOCX/PPTX/XLSX文書、コードベース、ウェブサイトのリンクを入力できます。PDF、PPTX、単体HTML、編集可能なCanvaプロジェクト、デザインの意図を含むClaude Code向けパッケージとしてエクスポートできます。
簡単に言えば、Claude Designは従来ならデザイナーが3〜5日かけて作っていたデザインを生成します。Anthropicによると、成果物は次の6種類です。 | 種類 | 内容 | 使用場面 | |----|----|----| | リアルなプロトタイプ | ユーザーテスト用のクリック可能なモックアップ | 開発者に費用を払う前に仮説をテストするとき | | ワイヤーフレームとモックアップ | 開発に引き継ぐための仕様 | 開発者に仕様を渡す必要があるとき | | 複数のデザイン案 | 複数のコンセプトを一度に作成 | 3〜4案から選ぶとき | | プレゼンテーション | PPTXまたはCanvaにエクスポートできるスライド | 投資家向けピッチ、アクセラレーターへの応募 | | マーケティング資料 | ランディングページ、バナー、投稿 | 有料広告やメールキャンペーンを始めるとき | | 実験的なデザイン | 音声、動画、3D、組み込みAIを使ったプロトタイプ | 実験的機能。動作しない可能性があります | インターフェースは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の違い
重要なポイント Claude Designが最も得意とするのは、コードベースからコンポーネント一式を自動抽出し、デザインの意図を失わずにClaude Codeへ引き継ぐことです。データベースやサーバーとの完全な連携ではLovableやBoltに劣ります（データ保存、認証、ワンクリック公開がありません）。仕上げの完成度ではFigmaに劣り、印刷物やSNS向けの既製テンプレートではCanvaに劣ります。主な競争優位性は、Claude Codeを介して「一つのウィンドウでデザインし、次のウィンドウでコードを書く」という閉ループを実現することです。
ここで紹介する方法では、これら5つのツールをそれぞれ異なる作業に使います。2026年5月時点での比較は次のとおりです。 | ツール | できること | 最低料金 | 強み | 弱み | |----|----|----|----|----| | **Claude Design** | プロトタイプ、スライド、ランディングページ、マーケティング | 月額\$20（Pro） | コードベースからのデザインシステム作成＋Claude Code連携＋Canvaへの転送 | データベースやサーバーとの完全な連携なし、`.fig`なし、無料プランなし | | **Lovable** | データベースと認証機能を備えた完全なアプリ | \$0（1日5クレジット）/ Proは\$25 | 「1つのプロンプトでプロトタイプ」—データベースと認証がすぐ使える | デザインの出力品質は劣る | | **v0（Vercel）** | Reactおよびフロントエンド向けの既製コンポーネント | \$0 / Premiumは\$20 | Figmaインポート、React/Tailwindコード、Next.jsへのコピー＆ペースト | プレゼンテーションや完成済みランディングページは作成できない | | **Bolt.new** | 完全なアプリ、最速のプロトタイプ | \$0（100万トークン）/ Proは\$25 | 最速のビルド、ワンクリック公開 | ブランディング、タイポグラフィ、仕上げの品質は劣る | | **Figma** | 調査から開発者への引き継ぎまでのデザイン | \$0（チームあたり3ファイル）/ 1シートあたり\$16 | 豊富な機能、プラグイン、開発者モード | デザイン経験のない人には学習のハードルが高い。Claude DesignレベルのAIはない | | **Canva** | マーケティング、プレゼンテーション、ソーシャルメディア | \$0 / Proは\$15 | 膨大なテンプレートライブラリ、印刷用のワークフローが整っている | 製品UIのプロトタイプは作れない | **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のProから始める必要があります。一般的なプロンプト約20回分に相当する初回クレジットは、2026年7月17日まで利用できます。2〜3件のプロジェクトでツールを試すには十分な量です。
プランと利用条件： | プラン | 利用可否 | 制限 | |----|----|----| | Free | 利用不可 | \- | | Pro（\$20/月） | 利用可能 | ユーザーごとに週単位の上限 | | Max | 利用可能 | 拡張された上限 | | Team | 利用可能 | 共有プールではなく、ユーザーごとの上限 | | Enterprise | 利用可能、ただし初期設定では無効 | 管理者がOrganization Settings → Capabilities → Anthropic Labsから有効化 | 初回クレジットは一度だけ付与されます。一般的なプロンプト20回分のパッケージで、2026年7月17日まで有効です。Claude Designが自分に合うか判断するために、2〜3件のプロジェクトを作るには十分です。 インターフェースのボタンは英語のみです。 ## コードベースからデザインシステムを接続する方法
重要なポイント バイブコーダーにとってClaude Designの最大の特徴は、既存のフロントエンドコードからコンポーネント一式を自動で抽出できることです。色、タイポグラフィ、コンポーネント、余白のパターン、角丸が、すべての新規プロジェクトに自動適用されます。[Second Brain](https://ailoot.ai/blog/ja/claude-code-second-brain/)をClaude Codeで使うのと同じ考え方です。プロジェクトのコンテキストを多く連携させるほど、幻覚が少なくなります。デザインシステムを連携しない場合、出力はAnthropicの言葉を借りると「機能的だがありきたり」になります。
Claude Designの主な競争優位性は、すでに何かを作っている人にとっての利点です。リポジトリからデザインシステムを自動抽出できるツールは他にありません。[Second Brain](https://ailoot.ai/blog/ja/claude-code-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で行うのと同じ[コンテキストエンジニアリング](https://ailoot.ai/blog/ja/context-engineering/)です。コンテキストを暗黙のままにせず、明示的に管理します。 ## シナリオ1：製品ローンチ向けランディングページ
重要なポイント 社内にデザイナーがいない起業家にとって、ランディングページ作成は最も一般的なシナリオです。Claude Designは単体HTMLファイルを出力するため、すぐにページとしてアップロードできます。一般的な1ページサイトなら、デザイナーの作業を6〜8時間、フロントエンド開発を1日分削減できます。初稿に40〜60分、その後の修正に1時間かかります。詳しいプロンプトのテンプレート、Claudeが得意な作業、手動で編集する必要がある部分を以下に紹介します。
ここで紹介する体験談では、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：投資家またはパートナー向けプレゼンテーション
重要なポイント Claude Designで10枚のプレゼンテーションを作るのにかかる時間は1時間です。2〜3日かける必要はありません。PPTXまたはCanvaにエクスポートし、コピー、指標、細部を手作業で仕上げます。Anthropicは発表で、他のツールでは20回以上必要なプロンプトがClaude Designなら2回で済むと強調しています。以下に、Series A向けの詳しいテンプレートと注意点を紹介します。
プレゼンテーションは、2つ目の主なシナリオです。投資家向け資料、アクセラレーターへの応募書類、パートナーとの打ち合わせに使えます。 **プロンプトのテンプレート：** ``` [会社]のSeries A向けプレゼンテーションを10枚で作成してください。 [誰に]向けて[何を]構築し、[主要指標]を達成しています。対象： 初期段階のB2B SaaS投資家。トーン：自信があり、親しみやすく、誇張なし。スライドの 順序：タイトル、課題、解決策、実績（指標を目立たせる）、 製品デモ、市場規模、ビジネスモデル、競合、チーム、依頼事項。 ``` **得られるもの：** PPTXファイルとCanvaへの転送です。Canvaでは完全に編集でき、共同作業も可能なプロジェクトとして開きます。 **所要時間：** 手作業で作る場合と比べて6〜10時間を削減できます。特に、デザインシステムに沿って大きな見出しとすっきりしたレイアウトを使う、タイポグラフィ重視のスライドで効果を発揮します。 **注意点：** Claude Designが生成するのは静的なスライドです。アニメーションが必要なら、Canvaに移してそこでアニメーションを付けるか、Figmaを使ってください。 ## シナリオ3：クリック可能なモバイルアプリのプロトタイプ
重要なポイント デザイナーとProtoPieなどの別ツールが必要だった非モデレートユーザーテスト用のプロトタイプを作成できます。Claude Designは、画面間をクリックして移動できるリンクを提供します。Anthropicの発表で引用されている顧客は、ブリーフ、モックアップ、レビューにかかっていた1週間分の作業が、今ではClaudeとの一度の会話で済むと説明しています。以下に詳しいプロンプトのテンプレートと、手作業で確認する項目を紹介します。
実用的なシナリオは、開発者に費用を払う前にモバイルアプリの仮説をテストすることです。

以前はブリーフ、モックアップ、レビューを繰り返すのに1週間かかっていた作業が、今ではClaudeとの一度の会話で済みます。

— Anthropic、https://www.anthropic.com/news/claude-design-anthropic-labs
**プロンプトのテンプレート：** ``` [製品]のモバイルアプリ向けに、インタラクティブなオンボーディングのプロトタイプを 構築してください。シナリオは3つ：空の状態、ユーザーの最初の操作、そして 気づきの瞬間。MazeまたはUseberryでの非モデレートユーザーテストに 使えるよう、要素をクリック可能にしてください。 ``` **得られるもの：** プロトタイプへのリンクです。そのままMazeに送信して、5〜10人のユーザーによるテストを行えます。 **確認する点：** - 画面の寸法。ClaudeがiOS/Androidに適したアスペクト比を使っているか確認してください。 - シナリオの深さ。Claudeは複雑な分岐を1画面にまとめてしまうことがあります。その場合は「各分岐を別々の画面として表示してください」とプロンプトで伝えます。 - 状態。空、エラー、読み込みの各状態は、指示しないと作成されません。 **削減できる時間：** FigmaとProtoPieで手作業する場合に比べて1〜2スプリントです。 ## シナリオ4：5つの1ページサイトを使うマーケティングキャンペーン
重要なポイント Claude Designでは、価値提案を比較するためのブランドに沿った5種類のデザインを作れます。PDFとCanvaの出力は確認用の資料です。実際のランディングページでテストするには、公開済みHTML、動作するCTAとフォーム、バリエーションごとの計測が必要です。ここで紹介するキャンペーンでは、デザイン段階の作業を4〜6時間削減できます。
有料広告を運用する人向けのシナリオです。同じフォームと一貫した計測方法を使い、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メールテンプレートは、Claude Designがとりわけ速さを発揮する一般的な技術作業です。スタイルが埋め込まれ、外部依存のない単体HTMLファイルとして、どのメールクライアントでも動作する状態で作成されます。一般的なテンプレートの構成は、小見出し、見出し、段落、行動喚起ボタン、署名です。Resend、Mailchimp、Sendsay、Unisenderにそのまま貼り付けられます。通常、手作業で編集する必要がある点は末尾で紹介します。
一斉メールキャンペーンには、スタイルを埋め込んだHTMLテンプレートが必要です。これは、フロントエンド開発者がいないマーケターにとって技術的な悩みの種です。 **プロンプトのテンプレート：** ``` [キャンペーンのテーマ]のHTMLメールテンプレートを作成してください。デザイン：ダークテーマ、 ブランドの主要アクセントカラー、ブランドフォント。構成：小見出し、 見出し、3段落、行動喚起ボタン、署名。スタンドアロンのHTMLファイルとして エクスポートしてください。スタイルを埋め込み、外部依存を含めないでください。 ``` **得られるもの：** Resend、Mailchimp、Sendsay、Unisenderにそのまま貼り付けられるHTMLファイルです。 **通常確認・修正する点：** - 幅。メールクライアントでは固定幅600pxが推奨されます。 - 画像。リンクを、オンラインでホストした自分の素材へのリンクに差し替えます。 - プレーンテキスト版。Claude Designは生成しないため、自分で作成します。 **削減できる時間：** テンプレート1つにつきレイアウト作業を2〜3時間削減できます。 ## Claude Codeへの引き継ぎ：閉ループ
重要なポイント Claude Codeでコードを書く人にとって、Claude Designの主な独自機能です。デザインは、デザインの意図を含むパッケージとしてエクスポートされます。内容はコンポーネント、パターン、デザイン判断の背景にあるロジック、レスポンシブの基準点です。Claude Codeは意味を失わずにコードへ適用します。Lovable、v0、Boltにはこの閉ループがありません。これらのツールでは、デザインはコードの副産物です。以下ではパッケージの内容、ワークフロー、競合ツールの制限を説明します。
ここで紹介する方法では、この機能が、Figmaを使っている場合でもClaude Designを選ぶ理由になります。他のデザインツールが引き渡すのは画像かFigmaファイルです。その後、開発者がそれを見て、自分なりに解釈しながら実装します。その際、デザインの意図の30〜40%が失われます。 Claude Designは、ビジュアルだけでなく、次の内容を含むパッケージを提供します。 - コンポーネントの構成（論理的にどう関連しているか）。 - デザイン判断の背景にあるロジック（なぜこの余白なのか、この角丸なのか、この階層なのか）。 - レスポンシブの基準点—画面サイズごとにブロックをどの位置に固定するか。 - マジックナンバーではなく、名前の付いたスタイル値。 Claude Codeはこのパッケージを直接開き、意図を維持したコードを書きます。レイアウトに画像を再現するだけでなく、デザインのロジックを実装します。この仕組みは[プロジェクトの`CLAUDE.md`](https://ailoot.ai/blog/ja/claude-md-template/)と連携します。`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を活用する独自の連携機能です。 ## うまく動かないこと：アーキテクチャ上の弱点
重要なポイント Claude Designはプレビュー版であり、本番運用に使える完成版ではありません。アーキテクチャ上の制限として、操作ログ、データ保持要件、動画の組み込みエクスポート機能がありません。動作上の癖として、数回反復するとClaudeがデザインシステムを忘れることがあります。これらにはすべて対処法があり、以下で説明します。
Anthropicは率直に、これはプレビュー版だと説明しています。まだ動作しない機能もあります。 **アーキテクチャ上の弱点：** - 操作ログがないため、コンプライアンス要件のある大企業にとって問題になります。 - データ保持要件がないため、規制対象データには使用できません。 - 実験的なデザイン（音声、動画、3D）は実験的と明記されており、動作しない可能性があります。 - 動画の組み込みエクスポート機能はありません。アニメーションを保存するには画面録画が必要です。 **Claudeの動作上の癖**（Designに限らず、すべてのツールに共通）： - 数回反復すると要件を忘れ、デフォルトのパターンに戻ります。 - 明確に構成された作業（パターンの繰り返し）は得意ですが、自由度の高い作業（新しい方向性の提案）は苦手です。 - 明示された目標に従うよりも、慣れたパターンに「固執」することがあります。 対処法は、3〜4回反復するたびに、デザインシステムに立ち戻るようリマインドするプロンプトを使うことです。致命的な問題ではありませんが、習慣的に行う必要があります。 ## Figma、Lovable、Canvaを使い続けるべき場合
重要なポイント Claude Designは万能のツールではありません。最終的な仕上げやプラグインが必要ならFigmaを使います。一つのプロンプトから、データベースと認証を備えた製品を動かしたいならLovableまたはBoltを使います。テンプレートを使ったマーケティング資料や印刷物にはCanvaを使います。Next.js / Vercelのエコシステムを使っていて、既製のReactコンポーネントが必要ならv0を使います。ここで紹介する一般的な手順は、Claude Designで初稿を作り、Claude Codeでコードに変換し、最終的な仕上げは最も都合のよいツールで行うことです。
ここで紹介する方法では、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は万能を目指しているわけではありません。最初の一歩となり、その後に何をすべきか理解できることを目指しています。
### 出典 - [Anthropic - Introducing Claude Design by Anthropic Labs](https://www.anthropic.com/news/claude-design-anthropic-labs) - [Lovableの料金](https://lovable.dev/pricing) - [Vercelのv0料金](https://v0.app/pricing) - [Boltのプランと料金](https://bolt.new/pricing) - [Figmaのプランと料金](https://www.figma.com/pricing/)
[Ailootに移動](https://ailoot.ai/)。 ## Claude Design：ガイドと実践的な5つのシナリオ：よくある質問 ### PDFを書き出すだけでランディングページのコンバージョンを測れますか？ いいえ。HTMLページを公開し、各CTAを実際のフォームにつないで、テスト送信と計測イベントを確認します。訪問、CTAクリック、送信成功を比較できるよう、各バリエーションに固有のラベルを付けてください。 ### デザインをClaude Codeに渡す前に何を確認しますか？ 使用中のデザインシステムを確認し、仮の画像や作り上げた数値を差し替え、必要な操作状態をチェックします。その後でデザイン一式を書き出し、既存プロジェクトに実装して、できあがった画面を改めて確認してください。 ## Ailoot · 企業とそのプロジェクト群 Ailootは、蓄積した運営経験、幅広い顧客基盤、安定したサービス、継続的なKPI管理を基盤としています。 企業とそのプロジェクト群：数百万の顧客、毎月数十億規模の売上。 Ailootはこの運営経験を、お客様の製品、エージェント、アプリケーション、自動化でAI機能を利用するためのAPIアクセスに活かしています。