2026年4月17日、AnthropicがAIデザインツール「Claude Design」をリリースしました。
リリース当日には、Figmaが7%・Adobeが2.7%・Wixが4.7%と、デザイン／Web制作系の株価が軒並み下落するほどのインパクトでした。
実際に触ってみた感想としては、現状ではめっちゃすごい！！！でもトークン量エグすぎて、本格運用はまだかなーという感じです！
そこも含めて、この記事では何ができるかや実際に触ってみた感想を解説していきます！
こちらも合わせてどうぞ！
Claude Designとは
ひとことで言うと、チャット形式でアプリやLPのデザインが作れるAIツール です。Anthropic社内の新部門 「Anthropic Labs」 発の初プロダクトで、2026年4月20日現在は リサーチプレビュー として提供されています。
AIに対話でデザインを作らせるツール自体は、v0、Lovable、Bolt、Stitchと、すでに選択肢がいろいろあります。それでもClaude Designが騒がれているのは、デザインからそのまま本番コードまで繋がる 点です。
モックで終わらず、Claude Codeへ1コマンドで渡せば、そのまま実装に入れます。「企画→プロトタイプ→実装」をAnthropicのスタックひとつで完結させる。これがClaude Designの、いちばん大きい違いです。
どこで使える？使えるプランは？
Claude Designは現在、Webブラウザ専用 です。デスクトップアプリ版やターミナル版はありません（Claude Codeとは別ツールです）。
Webブラウザ版のClaudeにアクセスして、左のメニューバーから開けます。
対応プランは以下のとおりです。
| プラン | 月額の目安 | Claude Design |
|---|---|---|
| Free | 無料 | ❌ 使えない |
| Pro | 20ドル〜 | ✅ 使える |
| Max | 100〜200ドル | ✅ 使える |
| Team | 25ドル／人〜 | ✅ 使える |
| Enterprise | 要問合せ | ✅ 使える |
無料プランは対象外なので、まだ触ったことがない人は Pro（月額20ドル）が最安の入り口 です。
Claude Designでできること
ざっくり、以下の流れを全部Claude側が引き受けてくれます。
- 「こういう画面が欲しい」と自然言語で伝える
- Claudeが 5〜15秒で初版を生成 してキャンバスに出す
- 会話・直接編集・インラインコメント・スライダーで 仕上げる
- PDF・PPTX・HTML・Canva・Claude Codeなどに エクスポート する
Figmaのように「ツールを選んで、矩形を引いて、塗りを指定して…」という手順は、一切いりません。チャットで指示すれば、もうできています。
もう少し具体的に、できることを3つの軸で整理します。
① 何を渡せるか（Context入力）
チャットの指示文に加えて、以下を全部読ませられます。
- スクリーンショット：参考にしたいUIや雰囲気を画像で渡す
- コードベース：GitHubリポジトリを読ませて、自社のコンポーネントで組ませる
- Figmaファイル：既存のデザインをドラッグで投入
- デザインシステム：色・タイポ・コンポーネントを事前に登録しておくと、以降のプロジェクトに自動適用
- 手描きスケッチ：napkinに描いたラフをそのまま添付できる
私が試したときも、雑な手描きナビ＋グラフを描いてドロップしたら、「こんなダッシュボードが欲しい」の意図をほぼ汲んでくれました。
② 生成したあとの調整機能が4種類
出したデザインを「ここだけ直して」と指示できるパターンが4つあります。
- チャット追加指示：「右のカードを2カラムに」のような構造変更
- インラインコメント：キャンバス上の要素をクリックして、その要素だけ直す
- 直接編集：テキストや色を手で書き換える（Figma感覚）
- カスタムスライダー：Claudeが「この要素動かすならスライダー出しました」と、勝手に調整UIを作ってくる
直接編集はFigmaに近い操作感です。テキストをダブルクリックで書き換え、色はカラーピッカーで選び、フォントはNoto Sans JPなどプルダウンから選択します。
③ エクスポート先が5種類
- PDF / PPTX / スタンドアロンHTML / ZIP
- Canva：Canva側で引き続きチームで共同編集できる（CanvaはClaude Designの公式連携パートナー）
- Claude Code：ワンコマンドで実装コードに変換
何が作れるのか
① プレゼン資料
まず、汎用的な使い方として一番有益なのはスライド作成ができることです。
しかもスピーカーノートの作成もしてくれます!
スライド作成する前に色々とヒアリングをしてくれるので、まず何をやりたいかざっくり伝えて、あとは質問に答えていくだけでスライドが完成します
実際に作成したスライドがこちらです
pptxとして出力できるのでそのまま編集も可能です
② アプリのプロトタイプ作成
アプリやLPの叩き台を作ることもできます
試しに私もマーケティング分析ツールのダッシュボードを作らせてみました。
サイドナビ・KPIカード・媒体別パフォーマンス・シミュレーションAIまで、「こういうSaaSが欲しい」と伝えただけで数分で出てきました。
面白いのは、いきなり生成するんじゃなくて、まずヒアリングから始まることです。
「メニュー構成はどうする？」「バリエーションは何パターン欲しい？」「軸は何で切る？」と、先方担当者みたいな質問が続きます。ここで適当に答えると、そのまま「普通のダッシュボード」が出てきます。私はこの段階で 「ROAS測定」「媒体別分解」「AIシミュレーション」の3軸が欲しい と具体的に伝えました。
結果、複数画面にまたがるナビゲーションも、ちゃんと繋がった状態で生成されます。最初のヒアリングでどれだけ具体的に答えるか が、仕上がりの8割を決めると感じました。
③ LP作成
LPの作成も、同じ流れで量産できます。
私は株価予測AIのLPを試しに作ってみました。プロダクト名、ターゲット層、トーン、言語を3分で答えて、次に「Hero画像、特徴3つ、使用シナリオ、料金表、FAQ、登録CTA」を選ぶ画面に進みます。答え終わると、もうLPが動いています。
LP内で動くアプリのモックも作ってくれており、驚きしかなかったです
③ そのまま本番コードへ
そして、ここが他のAIデザインツールと決定的に違う点です。Claude Codeへのハンドオフ 機能で、できあがったデザインをワンコマンドで本番コードに変換できます
つまり、「企画→プロトタイプ→実装」が、全部Anthropicの中で完結します。
今すぐ使う方法
対応プランは Section 1 にまとめた通りです。ここでは「ログインしてから、初キャンバスを出すまで」の最短ルートを見ていきます。
① 最初の画面
アクセスすると、左側に4つのタブが並んでいます。
| タブ | 作るもの |
|---|---|
| Prototype | アプリ・Webサイトの動くモック |
| Slide deck | スライド・ピッチデッキ |
| From template | テンプレからスタート |
| Other | LP・ワンページャーなど |
Prototype タブを選ぶと、次に Wireframe（ラフ）か High fidelity（本番ライク）の2択が出てきます。最初は「いったんラフで複数案出してもらう → 気に入った案を本番ライクに昇格」の流れが楽です。
右側の Examples タブを開くと、公式のプロンプト例が10種類ほど並んでいます。Use this prompt ボタンでそのまま流用できるので、最初の1発目はこれで体感するのがいちばん早いです。
② 最初のプロンプト例（コピペOK）
ピッチデッキ用
AIでSNS運用を自動化するSaaSのシードラウンド用ピッチデッキを
10枚で作って。課題・ソリューション・プロダクト画面・競合比較・
チーム・トラクション・市場規模・ビジネスモデル・Ask・ビジョンを含めて。
LP用
フリーランスデザイナー向けの請求書SaaSのLPを作って。
ダークモード、ヒーローにスクリーンショット、特徴3つ、
料金表、FAQ、登録CTAを含めて。
アプリUI用
読書記録アプリのモバイルUIを3画面で。
ホーム、本の詳細、読書ログ入力画面。
温かみのあるベージュ系のトーンで。
③ 生成後の4つの修正方法
初期デザインが生成されたら、そこからは以下の4つの修正方法で理想のデザインに近づけていきます
- チャットで追加指示：「右のカードを2カラムに」
- インラインコメント：キャンバス上の要素を直接クリックして指示
- 直接編集：テキストを選択して書き換え
- カスタムスライダー：Claudeが用意した調整UIで数値を動かす
④ 書き出し
完成したら、右上のExportからPDF / PPTX / HTML / Canva / 社内URL / Claude Codeへのハンドオフ から選べます。Canva連携は強力で、Canva側で引き続きチームで共同編集できます。
触る前に知っておきたい3つの落とし穴
ここからは、触る前に知っておくと事故らずに済む話です。
① トークン消費が激しい
Claude Designは通常のチャット1ターンよりも、圧倒的にトークンを食います。
実際に、私もダッシュボードとLP、スライド作成を1日で試したら、MAXプランでその週に使えるトークンをほぼ消費してしまいました
ただ、Claude Designは通常のチャットやClaude Codeとはトークン消費量が分かれているので、使いすぎても普段の利用には支障は出ません
② Undoで全消し事故
Undoボタンを「戻るボタン」と誤解して、全作業を失った報告があります。Claude Designの Undo は「1ステップ戻る」ではなく、セッション単位で巻き戻る 挙動のケースがあるようです。
真面目に作業する時は、こまめに PDFや Canva へ書き出して、外部に状態を逃がしておくのが一番安全です。
③ 放っておくと「Anthropicっぽい」見た目になる
ブランドの指示を出さないと、Claudeの標準的なテイストに寄っていきます。紺×白×サンセリフの、いかにも「テック企業のサイト」が量産されます。
最初に「このブランドのトーン」「このカラーパレット」「参考にしたい既存サイト」を指定するだけで、仕上がりが大きく変わります。
まとめ：今日踏み出す一歩
- Claude Designは2026年4月17日リリース、Opus 4.7搭載のAIデザインツール
- チャット形式でデッキ・プロトタイプ・LPが数秒で作れる
- 自社デザインシステムの自動適用＋Claude Codeへのハンドオフが決定的な差別化
- Pro以上なら今日から触れる
試し方はシンプルです。
- Claude Proにログイン
- claude.ai/design にアクセス
- 右の Examples タブから気になるプロンプトで
Use this prompt - 出てきた絵をTweaksで触る
Figmaの株価が落ちた意味は、30分触れば体感できます。最初は Examples の「Pitch Deck」か「Landing Page」を1つ選んで、Use this prompt をそのまま走らせてみてください。1回動かすだけで、デザインに対する自分の速度感が、確実にアップデートされるはずです。
こちらも合わせてどうぞ！