技術 約10分で読めます

AnthropicがClaude Designを発表、Opus 4.7で生成するプロトタイプとスライド

Claude Anthropic Claude Code Canva デザイン
いけさん目次

AnthropicがついにFigma/Canvaの領域に踏み込んできた。

2026年4月17日、Anthropic LabsブランドでClaude Designをリサーチプレビュー公開。
プロンプトと対話で、プロトタイプ・スライド・ワンページャー・マーケティング素材までを生成する、新しいビジュアル制作プロダクトである。

Hacker Newsで520ポイントまで上がっていたので、感度が高い層は注目していた。
発表直後にFigmaの株価が下げた、という報道まで出ている。

ただし今はまだリサーチプレビュー。
「数年磨き込まれた正式版のFigma/Canva」対「出たばかりのClaude Design」という非対称な勝負で、機能数で置き換えを狙える段階ではない。
だからこそ、実務で結局いつ何を開くかという判断軸が一番欲しい情報になる。

この記事ではClaude Designの中身を押さえた上で、Figma/Canvaとの機能比較と、「どういう場面でどれを選ぶか」を具体的なシナリオ単位で整理する。

使い分けの早見

長い話に入る前に、使い分けの結論から。

  • 新規プロダクトUIを起こして、そのまま実装まで走りたい → Claude Design
  • 既存プロダクトのデザインシステムを継続メンテ → Figma
  • SNSバナー・チラシ・社内報・非エンジニアが作るプレゼン → Canva
  • ピッチデッキや社内プレゼンをプロンプトで量産したい → Claude Design
  • コードベースの実装済みUIを「再デザイン」したい → Claude Design
  • 複数デザイナーで同じアートボードを同時編集 → Figma
  • 外部デザイナー・代理店とFigmaファイルで納品し合う → Figma
  • 3D・シェーダー・音声つきのリッチなプロトタイプ → Claude Design

迷うのは「既存プロダクトの改修」と「新規プロトタイプ」の境目。
既存コードベースから逆引きでデザインシステムを抽出してくれる動作はClaude Designの独自機能で、ここに用がなければFigma/Canvaで十分という判断になる。

以下で中身と判断軸の詳細を掘る。

Claude Opus 4.7を土台にしたビジュアル生成

Claude Designの中身は、先日リリースされたClaude Opus 4.7を土台にしている。
Opus 4.7はSWE-bench Verifiedで87.6%、自己検証つきxhighエフォートが入った最新モデルで、コード生成能力とビジョンを強化したバージョン。

テキストでの指示からまず初稿を生成し、そこから4つの経路で詰めていく。

  • チャットによる対話で全体方向を調整する
  • 特定要素にインラインコメントを付けて部分指示を出す
  • テキスト部分を直接編集する
  • Claudeが生成するカスタム調整スライダーで色・余白・レイアウトをリアルタイムに動かす

「Claudeが生成する調整スライダー」が他のAIツールと違うところ。
デザインの文脈に応じて操作UIそのものをClaude側が構成してくる挙動で、Figmaのプロパティパネルをその場で組み立てるイメージに近い。

コードベースを読んでデザインシステムを作る

実務で効いてきそうなのはオンボーディングフェーズの設計システム構築。

Claude Designは最初にチームのコードベースと既存デザインファイルを読み込んで、色・タイポグラフィ・コンポーネント定義をデザインシステムとして抽出する。
以降に生成する全プロジェクトへ自動で適用されるので、毎回ブランドガイドラインを貼り付け直す必要がない。

The New Stackの検証では「きれいなコードベースほどきれいな出力になる」と書かれていて、実装側のリポジトリ品質がそのままデザイン出力の品質に跳ね返ってくる形。
デザインシステムをコード側に持っているチーム（Tailwind config、design-tokens JSON、CSS variables、Storybookなど）にとっては相性が良い。

逆に言うと、散らかったCSSと !important の山から綺麗なデザインシステムが出てくることはない。
この辺りは割と正直に書いてあって好感を持てる。

入口と出口の設計

入力ソースの選択肢が広い。

入力ソース用途
テキストプロンプトゼロからの方向性探索
DOCX/PPTX/XLSX既存資料からのリデザイン
コードベースデザインシステム抽出
Web取り込みツール参考サイトの要素キャプチャ
参考画像・スケッチ手描きワイヤーの清書

出口も複数用意されている。
組織スコープの共有URL、閲覧専用リンク、編集権限つきグループ会話、フォルダ保存、Canva・PDF・PPTX・スタンドアロンHTMLへのエクスポートが可能。

AnthropicはCanvaとの提携も発表していて、Claude Design側で作ったドラフトをCanvaの共同編集可能なドキュメントとして引き取れる。
Canva内製のAIよりClaudeを優先させた、という位置付け。

Figma / Canva / Claude Design の機能比較

一番気になるのが既存ツールとの差分。
同じ「デザイン制作プロダクト」でも前提も操作モデルもかなり違う。
軸ごとに並べて、どこで勝敗が決まっているかを見やすくした。

項目FigmaCanvaClaude Design
提供形態正式版（数年成熟）正式版リサーチプレビュー
主な対象プロダクトデザイナー・UIエンジニア非デザイナー・マーケ・SNS運用エンジニア・PM・スタートアップ初期
入力白紙キャンバス＋コンポーネントテンプレート＋素材ライブラリプロンプト＋コード＋ドキュメント
編集モデルベクター直接編集・オートレイアウトテンプレート穴埋め対話＋インライン指示＋動的スライダー
コラボマルチプレイヤー同時編集共有・コメント・チーム権限共有URL・編集権限つきグループ会話
コンポーネント管理Variants / Libraries / Tokensブランドキットコードベースから自動抽出
実装ハンドオフDev Mode / MCP / Figma-to-codeコードエクスポートなしClaude Code直結（ハンドオフバンドル）
3D・シェーダー・インタラクションプラグイン頼み非対応コード駆動でネイティブ対応
素材・ストックプラグイン経由大規模ストック内蔵生成中心（ストックなし）
学習コスト高め（プロツール寄り）低いプロンプトを書けるなら低い
得意な成果物プロダクトUI、デザインシステムSNSバナー、チラシ、資料一般プロトタイプ、コード駆動デモ、スライド

機能数でいえばFigmaが圧倒的で、ベクター編集・Variants・Auto Layout・Dev Modeといった「デザイナーが毎日触る作業領域」はここに集約されている。
Canvaはテンプレートとストック素材の物量が武器で、専任デザイナーがいないチームの実務を回している。
Claude Designは逆に、プロトタイプ制作を「コードを書けるAI」の延長として組み直した新しい入口で、コードベースの読み込みとClaude Codeへの直結という、他2つには無い2点で独自性を出している。

Claude Designに今ないもの

リサーチプレビュー側の弱みも明示しておく。
ここを飲めないチームはFigma/Canvaを維持する判断になる。

領域Claude Designに欠けている点
ベクター編集ピクセル単位のベジェ操作・ペンツール相当はなく、対話で代替するのでデザイナーの手触りは落ちる
共同編集「同じアートボードを2人がリアルタイムに動かす」モデルではなく、URL共有＋グループ会話ベース
コンポーネント運用Variants / Libraries を継続メンテする従来フローではなく、コード側を正とする設計
ストック素材Canvaの画像・アイコン・フォント相当のアセットライブラリは内蔵されない
安定性リサーチプレビューなので仕様変更・UI変更・停止のリスクを織り込む必要がある
納品物の互換性.fig など既存エコシステムのファイル形式では出ない

Opus 4.7のビジョン能力とコード生成能力をそのままデザイン工程へ持ち込んだ、と考えると位置付けが分かりやすい。
裏を返すと「デザイナーが職業的に積み上げてきた作業領域」にはまだ十分踏み込んでいない。

シナリオ別の選び方

機能差を踏まえて、現場で出てきそうな場面ごとに整理する。

1人〜少人数でMVPを一気に起こしたい
Claude Designが合う。
コードベース起点でプロトタイプが出て、そのままClaude Codeに渡して実装に落とせる。
Figmaで絵を描いてコードに書き起こすステップを省略できるし、画面遷移や軽いインタラクションまでプロンプトで組める。

既存プロダクトのデザインシステムを運用中
Figmaのまま。
Variants・Libraries・Tokensの継続メンテはFigmaのコア機能で、Claude Designにこの運用モデルはまだない。
Figma上のデザインシステムが実装側のdesign-tokensと双方向同期しているなら、そのフローを壊してまで乗り換える理由はない。

ピッチデッキ・社内プレゼンをAIで量産
Claude Designが強い。
プロンプトで複数案を並行探索でき、PPTX/PDFに書き出せる。
テキストを直接編集できるので細部の詰めも効く。
CanvaのAIと比べて、自社のコードベースを食わせて「実物のUIテイストに寄せた資料」にできるのが差分。

SNSバナー・チラシ・社内報・日常のクリエイティブ
Canvaが速い。
テンプレートとストック素材の物量でスピードが出る領域で、Claude Designはストックを持っていない。
Canva側もAnthropic提携で生成AIが入るが、テンプレート穴埋め型で片が付く用途はCanvaに残る。

3Dシーン・シェーダー・音声つきのリッチデモ
Claude Design一択。
コード駆動でネイティブに扱える数少ないデザインツールで、FigmaもCanvaもここは得意でない。
スタンドアロンHTMLで出せるため、そのままWebに公開できる。

外部デザイナー・代理店と協業
Figmaが無難。
業界標準としてFigmaファイルが前提になることが多く、Claude Designの共有URLは受け手の運用フローに乗りにくい。
Claude Designで初期探索、Figmaで仕上げ、というハイブリッド運用は現実的。

コードベースから逆引きでデザインを整えたい
Claude Designの独壇場。
既存コードを読んでデザインシステムを抽出する動きは現状これだけで、FigmaとCanvaには無い。
リファクタのついでにUIの一貫性を見直したい、という用途で特に効く。

デザイナーが毎日ベクター編集する
Figmaのまま。
ペンツール・ベジェ操作・細かいオートレイアウトはClaude Designの対話モデルでは代替しきれない。
この領域で乗り換えを考える段階ではない。

雑に一言でまとめると、Figmaの代替ではなく「コードとデザインの境界を薄くしたい開発者向けのエントリポイント」という立ち位置。
毎日デザイナーが触るキャンバスはFigmaのまま、エンジニアがプロトタイプを起こしたりドキュメントをスライドに落としたい時にClaude Designを呼ぶ、という使い分けが現実解に見える。

SNSクリエイティブはCanva、プロダクト本体はFigma、プロトタイプと社内プレゼンはClaude Design、という用途別の住み分けで当面は十分回る。

Claude Codeへのハンドオフ

Anthropicがこのプロダクトで狙っている本命はここ。

デザインが固まったら「ハンドオフバンドル」としてパッケージ化され、そのままClaude Codeに渡してフロントエンド実装に流し込める。
探索→プロトタイプ→本番コードまでをAnthropic製品の中で閉じる設計になっている。

flowchart LR
    A[テキスト/ドキュメント<br/>コードベース] --> B[Claude Design<br/>プロトタイプ生成]
    B --> C[デザインシステム<br/>自動適用]
    C --> D{成果物の出口}
    D --> E[Canva連携]
    D --> F[PDF/PPTX/HTML]
    D --> G[ハンドオフバンドル]
    G --> H[Claude Code<br/>実装コード生成]

Figmaの「Dev Mode + MCPサーバー + Claude Code」というフローを、Anthropic側から逆方向に塞ぎに来た形。
Figma側も既にClaude Codeとの連携を出しているので、この領域の取り合いは当面続く。

使える対象と料金

既存プランに内包される形で提供される。

プラン利用可否
Claude Pro含まれる
Claude Max含まれる
Claude Team含まれる
Claude Enterprise組織設定で有効化

プラン内の利用上限の枠を消費する形で、超過分は追加購入可能。
Enterprise組織ではOrganization settingsからの有効化が必要で、個別ユーザーが勝手に企業データを読み込ませないようガードがかかっている。

想定ユースケース

Anthropicが挙げている用途。

  • コード不要でテストできるインタラクティブプロトタイプ
  • プロダクトマネージャー向けのワイヤーフレーム・モックアップ
  • 複数方向での並行デザイン探索
  • ピッチデッキ・プレゼン資料
  • マーケティングコラテラル・ランディングページ
  • 音声・動画・シェーダー・3Dを含むコード駆動プロトタイプ