Claude Designは、Anthropicの実験的なプロダクト部門Anthropic Labsが2026年4月17日に公開した、会話しながらプロトタイプやランディングページ、ワンページャーを作るツールです。9月16日に通常の会話へ統合され、10月8日にベータを終えて無料プランを含む全プランで使えるようになりました。一方で、最初に公開された単体版のclaude.ai/designは12月14日に終了します。この記事では2026年10月25日時点の公式ヘルプと発表をもとに、対象プランと料金、使い方、書き出し先、単体版からの移行手順、採用を見送るべき場面を整理します。
まとめ｜Claude Designの要点（2026年10月時点）
Claude Designは、Free・Pro・Max・Team・Enterpriseの全プランで使えます。専用の料金はなく、チャットやClaude Codeと同じ使用量枠から差し引かれます。Enterpriseでは10月15日から既定でオンになりました。ただし無料プランでは、作ったデザインをリンクで共有できません。
入口は、会話での依頼、アーティファクトタブのDesignテンプレート、Claude Codeの/design、iOS・Androidアプリの4つです。書き出しはZIP・PDF・PPTX・Googleスライド・単体HTMLの5形式で、Canvaやv0など15のツールへの送信と、Claude Codeへの引き継ぎにも対応します。Figmaへの書き出しは一覧にありません。版履歴もまだ無いため、デザインの正本と承認記録をFigmaで管理しているチームは、Claude Designを試作の段階に限って使うのが安全です。単体版を使っていた人は、12月14日までにデザインシステムとプロジェクトを会話側へ移し、チャットとコメントは手元に保存してください。
Claude Designの位置づけと2026年4月から12月までの変化
公開から半年で、提供形態が4回変わりました。春ごろの解説記事は対象プランや入口が今と違うので、日付を確かめてから読んでください。
| 日付 | 変更 |
|---|---|
| 2026年4月17日 | research previewとして公開（Claude Opus 4.7） |
| 2026年6月17日 | ベータ化・専用の週次枠を廃止して共通枠へ |
| 2026年9月16日 | 会話・アーティファクトタブへ統合 |
| 2026年10月8日 | ベータ終了・Freeを含む全プランで提供 |
| 2026年10月15日 | Enterpriseで既定オン |
| 2026年12月14日 | 単体版claude.ai/designが終了（予定） |
出典は4月17日の公開発表、6月17日の更新発表、9月16日の統合発表、10月8日のベータ終了の発表です。6月の発表によると、公開後の最初の1週間で100万人以上が使いました。10月8日の発表は、2つの版を並行して動かすと両方の修正が遅れることを、単体版を畳む理由に挙げています。会話とCoworkの統合の全体像はClaude Coworkの料金と従量課金｜使用量クレジットの設定・上限とCopilot Coworkとの違いで扱っています。
アーティファクト・Claude Slides・Claude Docsとの関係
アーティファクトは、Claudeが会話の横に作るドキュメントやアプリ、デザインの総称です。Claude Designはアーティファクトを作るときに選ぶテンプレートの1つで、キャンバス上の直接編集とデザインシステムの適用が加わります。同じ並びに、プレゼン資料用のClaude Slides、共同編集する文書用のClaude Docsがあり、10月8日からはデータ連携のDashboardsとアニメーション用のMotionもベータで加わりました。
9月16日以降、会議用の資料はClaude Slidesで作る設計です。Claude Designで作ったデザインもPPTXで書き出せますが、管理者ガイドは「プレゼンテーションには専用のツールClaude Slidesがある」と明記しています。PowerPointファイルをプログラムから作るならClaude Codeを使う方法もあり、Claude Codeでパワポ(PPTX)を自動生成する方法｜公式pptxスキルとpython-pptx・PptxGenJSの選び方【2026年10月】で比較しています。Claude Code側の作業を共有ページにする機能はClaude Codeがアーティファクトに対応｜作業を共有ページ化する新機能と利用条件を参照してください。
Claude Designで作れるものと読み込める素材
公式の発表と管理者ガイドが挙げている用途は次のとおりです。
- 操作できるプロトタイプ：静止画のモックアップを、クリックで画面が切り替わる試作品にする
- ワイヤーフレームとモックアップ：画面遷移を描き、Claude Codeへ実装を渡す
- ランディングページと1ページのマイクロサイト
- ワンページャーやSNS用画像などのマーケティング素材
出発点にできる素材は、文章の指示、スクリーンショットや画像、DOCX・PPTX・XLSXの文書、コードベースです。既存のスライドを渡して「この見た目に合わせて」と頼むこともできます。
画像生成・APIの扱い
Claude Designが作るのは、キャンバス上のアートボードに文字、図形、画像のレイヤーを組んだデザインです。写真やイラストを一から描く画像生成の機能は、利用ガイド（Get started with Claude Design）に載っていません。写真やロゴは自分でアップロードし、素材の量産はCanvaなど送信先のツールに任せる分担になります。
外部のプログラムからClaude Designを呼び出すAPIもありません。Claude Platformには、組織のClaude Designの利用状況（作成したプロジェクト数など）を取得するAnalytics APIがありますが、これは集計用で、デザインを作るAPIではありません。管理者ガイドも「アーティファクトはサードパーティのクラウドプラットフォームでは提供していない」としています。Amazon BedrockやGoogle Cloud経由のClaudeでは使えないということです。自動化したい場合はClaude Codeの/designから操作します。
使うモデルは会話と同じくモデル選択で切り替えられ、Fableモデルのヘルプは、Claude Designでも有料プランでFable 5とFable 5.1を利用できるとしています。無料プランでは使えません。ProとTeam標準席では通常の使用量枠に含まれず使用量クレジットで課金され、MaxとTeamプレミアム席では週の使用量枠の最大50%まで追加料金なしで使えます。Enterpriseでは、組織の既定モデルがClaude Designの新しい会話にも適用されます。
Claude Designの使い方｜入口と作成から共有までの流れ
Claude Designを使える場所
- 会話の中：「この提案書から1枚資料を作って」のように頼む。メッセージ欄で「出力 > デザイン」を選んでもよい
- アーティファクトタブ：Designテンプレートを選ぶ
- Claude Code：デザインを頼むか、
/designで作成・編集・同期する（デスクトップ版とターミナル） - iOS・Androidアプリ：会話で依頼し、アーティファクトタブで全画面表示して編集もできる。共有設定の変更だけはWeb版かデスクトップ版で行う
- claude.ai/design：単体版。12月14日まで使える
Claude Designの作成・共有の7ステップ
公式利用ガイドの「How Claude Design works」に沿った手順です。
- 会話かアーティファクトタブでデザインを始める
- 使うデザインシステムを添付するか取り込む
- スクリーンショットやコードベースなどの参考資料を足す
- 作りたいものを説明する
- キャンバスに生成されたデザインを確認する
- チャット、インラインコメント、キャンバス上の直接編集で直す
- 仕上がったら書き出すか共有する
プロンプトに入れる4要素と具体例
公式ヘルプは、プロンプトに目的（何を作るか）、レイアウト（どう並べるか）、中身（どんな情報を出すか）、利用者（誰が使うか）の4つを入れるよう勧めています。情報が足りなければ、Claudeのほうから質問が返ってきます。4要素を入れた指示の例です。
社内の経費申請を承認するマネージャー向けに、承認待ち一覧の画面を作ってください。
上段に件数と合計金額のカード、下段に申請者・金額・日付・ステータスの表を置きます。
表は金額の降順で、行をクリックすると右側に明細パネルが開くようにしてください。
PCのブラウザで使う前提で、スマートフォン対応は不要です。修正も対象と変更量を指定します。「なんか違う」では直す場所が伝わりません。「フォームの項目同士の間隔を8pxに詰めて」のように書きます。方向性に迷ったら2〜3案を並べて出させると早く決まり、アクセシビリティやコントラスト比のレビューもClaudeに頼めます。
チャット・インラインコメント・直接編集の使い分け
配色を全体的に暗くする、指標を上段に並べ替える、といった全体に関わる変更はチャットで頼みます。「このボタンの余白を広く」のように特定の部品だけ直すなら、キャンバスの該当箇所をクリックしてインラインコメントを残すほうが早く伝わります。位置や大きさの微調整は、要素をドラッグ、リサイズ、整列して自分で動かします。
版履歴はまだありません。別の方向を試す前に「今の状態を保存して、まったく違う案を試して」と頼むと、Claudeがプロジェクトを保存して保存先を示します。版履歴から過去の案を選んで復元することはできませんが、直前の編集にはUndoを使えます。
キーボード操作とショートカット
利用ガイドには、マウスを使わずに編集するためのキー操作が載っています。デザインはアートボードの並んだキャンバスで、F6でトップバー、キャンバス、プロパティパネルの間を移動し、Tabでアートボードの見出しへ進みます。よく使う操作は次のとおりです。
| 操作 | Mac | Windows |
|---|---|---|
| 次の領域・前の領域 | F6・Shift+F6 | F6・Shift+F6 |
| アートボードの中に入る | Return | Enter |
| 1階層上へ戻る | Shift+Return | Shift+Enter |
| レイヤーの移動・並べ替え | Option+矢印キー | Alt+矢印キー |
| 複製・削除 | Cmd+D・Delete | Ctrl+D・Delete |
| グループ化・解除 | Cmd+G・Cmd+Shift+G | Ctrl+G・Ctrl+Shift+G |
| プロパティパネルの開閉 | Cmd+\ | Ctrl+\ |
| レイアウトガイドの表示切替 | Shift+G | Shift+G |
注意点が2つあります。レイヤー一覧でDeleteを押すと、カーソルのある行ではなくキャンバスで選択中の要素が消えるため、先にその行でReturnを押して選択し直します。テキストレイヤーやアートボードを新しく置く操作はマウスかトラックパッドが必要なので、キーボードだけで作業するときはClaudeに追加を頼みます。
デザインシステムの設定｜ブランドに沿った出力にする準備
デザインシステムを設定すると、色、文字組み、コンポーネント、レイアウトのパターンが以後のデザインに自動で適用されます。設定せずに使っても動きますが、Claude Designの管理者ガイドは「機能はするが汎用的な出力になる」としており、チームで導入するなら先に済ませる作業です。作り方は2通りあります。
- チャットから：接続済みのアプリ、アップロードしたファイル、Figmaファイル、スライド、ロゴ、フォントを渡して作らせる。フォントや色のガイドラインを持つブランド向け
- Claude Codeから：React製のコンポーネントがあるなら
/design-syncでトークンとコンポーネントを直接読み込ませる。コードで管理しているプロダクトのUI向け
元の素材が雑だと、それが出力にそのまま表れます。利用ガイドも既知の制限に「取り込みの品質は元データを超えない」と書いています。色見本だけでなく完成したランディングページを渡すと、ブランドの雰囲気まで読み取らせやすくなります。1つの組織に複数のデザインシステムを持てるので、ブランドや事業部ごとに分けられます。/design-syncの前提条件や/designの引数はClaude DesignとClaude Codeの連携｜/design-syncと/designの使い分けと利用条件【2026年9月時点】で詳しく解説しています。
書き出し・共有・Claude CodeへのHandoff
プロジェクト右上の「Export」から、次の形式と送り先を選べます。
| 区分 | 形式・送り先 |
|---|---|
| ファイル | ZIP・PDF・PPTX・単体HTML |
| Googleスライド | 編集できる形式で書き出し |
| 外部ツール | Canva・Gamma・v0・Lovableなど15種 |
| Claude Code | 手元のエージェント・Web版Claude Code |
外部ツールの15種は、Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel、Wixです。一覧にFigmaはなく、Figmaファイルはデザインシステムを作るときの入力素材として使います。v0へ送って制作を続ける場合の料金はv0（Vercel）とは？料金・使い方・APIを2026年最新解説で確認できます。
Claude Codeへ渡すHandoffでは、スクリーンショットから作り直すのではなく、それまでの制作内容を引き継いで実装が進みます。画面ごとの操作とつまずきやすい点はClaude DesignとClaude CodeのHandoff実行手順｜つまずきやすい3場面と対処法にまとめています。
デザインは作成者本人だけが見られる状態で始まり、「Share」から相手と権限（閲覧・コメント・編集）を選びます。共有先にもClaudeアカウントが必要です。Team・Enterpriseの組織外共有には、管理者によるリンク共有またはメール招待の許可も必要です。共有のヘルプの対応表では、リンクを知っている人への共有とメール招待はPro以上、組織内の共有はTeam以上、グループ単位の共有はEnterpriseだけです。プレビューはAnthropicが運用する別ドメインのサンドボックス内で動き、プレビュー内のコードからClaudeのアカウントや編集画面には届きません。共有を外すと、相手は次にプレビューを開いた時点で閲覧できなくなります。
Claude Designの料金と使用量の上限
Claude Designだけの料金はありません。どのプランでも含まれており、チャットやClaude Codeと同じ使用量枠から差し引かれます。2026年10月25日時点のClaude公式の料金ページの価格は次のとおりです（米ドル・税別）。
| プラン | 月払い時の月額 | 年払い時の月額換算 | Claude Design |
|---|---|---|---|
| Free | $0 | – | 利用可（リンク共有なし） |
| Pro | $20 | 月$17相当（年$200） | 利用可 |
| Max | $100から | – | 利用可 |
| Team 標準席 | $25/席 | $20/席 | 既定でオン |
| Team プレミアム席 | $125/席 | $100/席 | 既定でオン |
| Enterprise | – | $20/席＋API料金 | 10月15日から既定でオン |
MaxはProの5倍か20倍の使用量を選びます。Teamは2〜150人向けで、プレミアム席は標準席の5倍の使用量です。Enterpriseは年払いのみで最低20席、席料金とは別に使ったぶんがAPI料金で課金されます。
上限に達すると、枠がリセットされるまでClaude Designは使えません。使用量クレジットを有効にしている場合だけ、上限を超えても続けられます。大きなコードベースを読み込ませたり修正を何度も重ねたりすると消費が増えるため、Claude Codeで実装しながら同じ日にデザインを何度もやり直すと、Claude Codeだけを使っていたときより早く上限に届きます。
単体版claude.ai/designの終了（12月14日）と移行手順
移行のヘルプ（Move from standalone Claude Design to Claude）によると、単体版は12月14日に終了し、それ以降は読み取り専用になって新しいプロジェクトを作れなくなります。移すものと残るものは次のとおりです。
- デザインシステム：Claudeの「Artifacts」ページで「Move team design systems」を押すと、組織の全デザインシステムが1回で移る。誰が始めてもよい。空のものと組み込みのスターターテーマから作ったものは移らない。プロジェクトの移行が使えるようになった組織では、デザインシステムもプロジェクトと同じ方法で移す
- プロジェクト：単体版でプロジェクトを開き、表示される確認画面から移す。個別移行は持ち主が行い、Team・Enterpriseでは組織のOwner・Primary Ownerによる一括移行もできる。移行後の単体版の元データは読み取り専用になり、編集可能な状態には戻せない。プロジェクトの移行は有料プランから順に提供中
- 移らないもの：Claudeとのチャット、プロジェクトとデザインシステムへのコメント。単体版の公開リンクも終了後は開けなくなる
チャットで決めた経緯やコメントでのやり取りを残したいなら、終了前に手元へ書き写すしかありません。プロジェクトのファイルは、単体版の「Share」から「Project HTML」を選び、「Project archive」のままExportするとZIPで保存でき、使用量も消費しません。
移行できない組織と保持期間の注意
Team・Enterpriseでは、組織設定の「Artifacts」がオフだと会話側でデザインを作れず、移行もできません。Enterpriseはデザインシステムの設定が既定でオフなので、オーナーが先にオンにしておきます。Zero Data Retention（ZDR）の組織はアーティファクトを有効にできないため移行できず、HIPAA対応構成の組織も現時点ではプロジェクトを移せません。ZDRの組織は終了前のダウンロードを案内されており、HIPAA対応構成では全プロジェクトの一括ダウンロードが使えないため、1件ずつZIPで保存します。顧客管理の暗号鍵（CMEK）を使う組織は、プロジェクトを1件ずつなら移せます。
見落としやすいのが保持期間です。カスタムデータ保持期間のヘルプによると、Enterpriseの保持期間は単体版には効きませんが、会話側へ移した時点でプロジェクトはアーティファクトになり、アーティファクトにかかる保持期間の対象になります。期間は移行日から数え始め、誰かが開くか編集するとそこから数え直します。誰も開かないまま期間が過ぎると、完全に削除される対象になります。保持期間を短く設定している組織は、移した直後に一覧を確かめ、残す必要のあるデザインの扱いを決めておきます。
Team・Enterpriseで有効化するときの設定
前提として、組織設定 > Capabilitiesの「Cloud code execution and file creation」と、組織設定 > アーティファクトの「Artifacts」をオンにしておきます。そのうえで、会話側と単体版は次の2つの設定で別々に有効化します。片方をオンにしても、もう片方はオンになりません。
- 会話とアーティファクトタブのClaude Design：組織設定 > アーティファクトでDesignテンプレートを有効にする。Teamは既定でオン、Enterpriseは10月15日から既定でオン
- 単体版claude.ai/design：組織設定 > Claude Designの「Enable for your organization」。12月14日の終了までの設定
会話側では、デザインシステムを組織全体へ共有する、組織の既定に設定する、全体共有のものを削除する、の3つはOwnerかPrimary Ownerだけが行えます。Enterpriseのカスタムロールにある「Claude Design Admin」権限は単体版だけに効く権限で、会話側のデザインシステムには効きません。誰がデザインシステムを作れるかは、ロールの「Artifacts」にある「Design systems」で絞ります。
管理者ガイドは、ブランドとプロダクトのデザイナー2〜4人でデザインシステムを作ってから、デザインチーム、プロダクトマネージャー、組織全体の順に広げる4段階の展開を勧めています。先に全社へ開放すると、ブランドに沿わない汎用的な出力が社内に出回ります。
データの扱いにも、チャットとは違う制約があります。アーティファクトの管理者ガイドによると、Claude Designはデータレジデンシーの要件に対応しておらず、単体版は監査ログの対象外です。管理画面の利用状況分析も単体版だけを数え、会話やアーティファクトタブで作ったデザインは含みません。
既知の制限と、Claude Designを主役にしないほうがよい場面
利用ガイドには、次の制限が挙がっています。
- 版履歴がない
- 2人以上の同時編集は初歩的な段階で、確実には動かない
- インラインコメントが画面に出ないことがある。コメント一覧では確認でき、Claudeに読まれないときはチャットに貼り直す
- 「chat upstream error」が出たら、同じプロジェクト内で新しいチャットタブを開く
- 非常に大きなリポジトリはブラウザで重くなる。Claude Codeからリンクし、同期は
/design-syncで行う
この制限から、採用の判断ははっきり分かれます。デザインの版管理と承認記録を監査の要件にしている組織や、デザイナー数人が同じ画面を同時に触る運用では、Claude Designを正本にすべきではありません。Figmaなど要件を満たすツールを正本に残し、Claude Designは案を広げる段階と、試作品を関係者に見せる段階に絞ります。データの保管地域を規程で決めている組織は、試作であっても対象データをClaude Designに入れないでください。正本を別ツールに置いても、入力したデータの保管場所は変わりません。FigmaのデザインをAIエージェントに渡す経路はFigma MCPサーバーの料金と上限｜無料枠・プラン別の呼び出し回数・接続手順、Figma自身のAI生成機能はFigma Makeの料金とAIクレジット｜残量の確認方法・プラン別上限・追加購入【2026年10月】で確認できます。
反対に効果が出やすいのは、デザイナーがいない、または少ないチームです。プロダクトマネージャーが仕様の画面を描いてClaude Codeへ渡す、マーケティング担当がランディングページの叩き台を作ってからデザイナーに仕上げを頼む、という使い方に向いています。試作の先で画面設計やデザインシステムの整備まで社外に任せたい場合は、UI/UXデザインの支援も選択肢になります。AIでデザインを進める考え方そのものはVibe Design（バイブデザイン）とは？Vibe Codingとの違い・進め方・ツール比較【2026年10月】、Google側の同種ツールはGoogle Stitch 2.0とは？Galileo AI買収からの進化と最新アップデート・新機能を時系列で解説が比較材料になります。
よくある質問
Claude Designは無料プランで使えますか？有料ですか？
無料プランで使えます。10月8日にベータを終え、Free・Pro・Max・Team・Enterpriseの全プランで提供されています。Claude Designだけの料金はなく、プランの使用量枠を消費します。ただし無料プランでは、作ったデザインをリンクやメールで他人と共有できません。
Claude DesignとArtifactsの違いは何ですか？
Artifactsは、Claudeが会話の横に作るドキュメントやアプリ、デザインの総称です。Claude Designは、そのアーティファクトを作るときに選ぶデザイン用のテンプレートで、キャンバス上の直接編集とデザインシステムの適用が使えます。
Claude Designでスライドは作れますか？
作れますが、2026年9月16日からはプレゼン資料用のClaude Slidesという別の入口があります。Claude Designで作ったデザインもPPTXやGoogleスライドに書き出せますが、会議用の資料を一から作るならClaude Slidesを使います。
Claude DesignからFigmaへ書き出せますか？
2026年10月25日時点の書き出し先にFigmaはありません。書き出し先はZIP・PDF・PPTX・Googleスライド・単体HTMLと、Canvaやv0など15のツールです。Figmaファイルは、デザインシステムを作るときの入力素材として読み込めます。
単体版claude.ai/designが終わると作ったデザインはどうなりますか？
12月14日以降は読み取り専用になり、しばらくして削除されます。移行済みでないプロジェクトは持ち主がファイルを直して会話側へ移せますが、チャットとコメントは移らず、公開リンクも開けなくなります。残したいものは終了前に移すかZIPで保存してください。
