Claude Designとは？料金と4つの始め方

Claude Designは、作りたいものを文章で伝えるだけで、Claudeがプロトタイプ・LP・スライド・1枚資料などのデザインを作ってくれる機能です。自社の色・フォント・コンポーネント（デザインシステム）を読み込ませておけば、ブランドに沿った形で出力され、チャットやコメント、キャンバス上の直接編集で仕上げられます。使えるのはPro（月20ドル、年払いなら月17ドル）・Max・Team・Enterpriseの有料プランで、別料金はかからず、プランの利用上限の中で使います。2026年9月16日からは普段の会話の中でも使えるようになり、「デザインを作って」と頼むか、メッセージ欄の「Output」から「Design」を選ぶだけで始められます。

Claude Designとは

Claude Designは、AnthropicのAnthropic Labsが2026年4月17日に発表したデザイン作成ツールです。発表時は「research preview」として、Claude Opus 4.7を使ってPro・Max・Team・Enterpriseの契約者に提供されました。現在は有料プランでベータとして提供されています。

画像を1枚生成する機能とは違い、Claude Designが作るのは、あとから編集でき、HTMLやPPTXとしても書き出せるデザインです。画面のプロトタイプや資料のように、あとから文言やレイアウトを直したり、実装に回したりする前提のものを作ります。写真やイラストそのものを作りたい場合は、Claudeで画像生成をする方法のほうが目的に合います。

2026年9月の統合で変わった点

2026年9月16日、AnthropicはClaude Coworkとチャットを1つのClaudeに統合しました。同時に文書作成のClaude Docsと、プレゼン資料作成のClaude Slidesが加わり、Claude Designも会話の中で使えるようになりました。それまでは主に専用の画面（claude.ai/design）で作業していましたが、今は普段の会話から直接デザインを頼めます。

この新しい体験はProとMaxから順に、Web・デスクトップ・モバイルのClaudeアプリへ展開されています。TeamとFreeは後に続く予定で、同じプランでも反映される時期はアカウントごとに異なります。会話内にまだ「Output」が出ていない場合でも、専用画面のclaude.ai/designは引き続き使えます。

Claude Designでできること

Claude Designの紹介ページと公式ヘルプで説明されている主な機能は次のとおりです。

文章からデザインを作る：プロトタイプ、LP、スライド、1枚資料、SNS用の画像、モックアップなどの初版をClaudeが作ります。
ブランドに沿って作る：GitHubのリポジトリ、デザインファイル、アップロードした資料からデザインシステム（色・タイポグラフィ・コンポーネント）を取り込み、以後のデザインに自動で反映します。Claudeは出力をデザインシステムと照らし合わせ、ずれを直してから表示します。
キャンバス上で直す：チャットでの指示、要素を指したコメント、テキストの直接編集、ドラッグやサイズ変更、余白や色を調整するスライダーで仕上げます。
共有する：共有相手ごとに閲覧・コメント・編集の権限を選べます。
書き出す・引き渡す：PDF、PPTX、単体のHTML、zipで書き出せるほか、Canvaなどのアプリへ送ったり、Claude Codeへ実装を引き渡したりできます。

料金と使えるプラン

Claude Designは単体では販売されておらず、Claudeの有料プランに含まれています。Claudeの料金ページでは、Pro以上の各プランに「Claude Design, Slides, Docs」が含まれ、Freeは対象外とされています。

プラン	料金（米ドル）	Claude Design
Free	0ドル	使えない
Pro	月20ドル（年払いは月17ドル）	使える（初期状態で有効）
Max	月100ドルから（5xと20xの2種類）	使える（初期状態で有効）
Team	1席月25ドル（年払いは月20ドル）	使える（初期状態で有効）
Enterprise	1席月20ドル（年契約）＋API料金での使用量	使える（管理者が有効にするまで無効）

利用量に専用の枠はなく、チャットやClaude Codeと同じプランの利用上限から消費します。発表時の案内では、上限に達しても追加利用（extra usage）を有効にすれば続けられるとされています。プランごとの違いはClaudeの料金プラン一覧、組織での契約はClaudeのチームプランの料金と契約で詳しく説明しています。

TeamとEnterpriseでは管理者の設定が関わります。管理者向けガイドによると、会話やArtifactsタブで使うには「Design」テンプレートを有効にし、専用画面のclaude.ai/designは「Organization settings > Claude Design」で別に有効にします。Teamは初期状態で有効、Enterpriseはオーナーが有効にするまで無効です。

Claude Designの使い方

4つの始め方

Claude Designは次の4か所から始められます。

会話の中で：「〇〇のLPのデザインを作って」と頼むか、メッセージ欄の「Output」から「Design」を選びます。
Artifactsタブで：Artifactsタブを開き、Designのテンプレートを選びます。
専用画面で：claude.ai/design でプロジェクトを作ります。従来どおりの画面で、デザインシステムの設定もここで行えます。
Claude Codeで：/design に作りたいものを添えて実行すると、編集できる複数のデザイン案（アートボード）がキャンバスとして公開されます。選んだ案をそのまま実装させることもできます（Claude Codeの2026年8月17〜21日の更新情報。v2.1.234以降が必要です）。

iOS・Androidのアプリでも、会話でデザインを頼んだり、Artifactsタブで全画面表示したりできます。ただし、テンプレートからの作成、編集、共有設定の変更はWeb版かデスクトップ版で行います（Artifactsのヘルプ）。

作成から仕上げまでの流れ

デザインシステムを用意する：自社のブランドで作りたい場合は先に登録します。設定は「Settings > Design systems」か専用画面から行い、Reactなどのコンポーネントライブラリのリポジトリ、PowerPointやPDFの資料、スクリーンショット、ロゴ・配色などの素材を読み込ませます。抽出された内容を確認し、「Published」をオンにすると組織全体で使えます（デザインシステムの設定ガイド）。
資料を添えて依頼する：参考にしたい画面のスクリーンショットや既存の資料を添え、目的・レイアウト・載せる内容・見せる相手を具体的に書きます。
出力を確認して直す：全体の雰囲気を変えたいときはチャット、特定のボタンや見出しを直したいときはコメント、細かな位置や色はキャンバスでの直接編集とスライダー、というように使い分けます。
共有・書き出す：「Share」から相手と権限を選んで共有するか、PDF・PPTX・HTMLなどで書き出します。

デザインシステムを登録しないままでも使えますが、その場合は汎用的なデザインになります。管理者向けガイドでも、組織で広く使い始める前にデザインシステムを整えておくことが勧められています。

書き出し形式とClaude Codeへの引き渡し

公式ヘルプに記載されている書き出し先は次のとおりです。

ファイル：zip、PDF、PPTX、単体のHTML
外部アプリ：Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel、Wix
Claude Code：「Send to local coding agent」（手元のClaude Code）または「Send to Claude Code Web」

Claude Codeへ引き渡すと、デザインファイル・チャットの履歴・READMEがまとめて渡され、エンジニアはデザインの意図を読み直さずに実装へ進めます。逆方向には、Claude Codeで /design-sync を使うと、手元のコードベースからデザインシステムをClaude Designへ取り込めます。コードとデザインの両方を同じコンポーネントで揃えたいチームに向いた仕組みです。

Claude Slides・Claude Docsとの違い

2026年9月に加わったClaude SlidesとClaude Docsは、Claude Designと同じく会話の中で作る成果物（アーティファクト）のテンプレートです。

テンプレート	向いているもの
Claude Design	画面のモックアップ、プロトタイプ、LP、1枚資料など、デザインシステムに沿ったビジュアル
Claude Slides	プレゼン資料。直接編集し、Claudeからそのまま発表したり、PowerPoint・PDFで書き出したりできます
Claude Docs	文書。Claudeやチームとリアルタイムで一緒に書く文書です

Claude Designでもスライドは作れますが、発表用の資料を作るならSlides、Webの画面やLPを形にするならDesign、と考えると選びやすくなります。3つとも有料プランのベータで、Enterpriseでは管理者が有効にするまで使えません。

FigmaやCanvaとの違いと使い分け

FigmaはデザイナーがチームでUIを設計・共同編集するためのツール、Canvaはテンプレートを使ってSNS画像・チラシ・資料などを作るためのツールです。Claude Designは、文章で頼むとClaudeが初版を組み立て、そこから対話で詰めていく点が大きく違います。

実務では、次のように役割を分けると迷いにくくなります。

Claude Design：企画の段階で、複数の案を短時間で形にして関係者と方向性を決めたいとき。デザイナーがいないチームが、動くプロトタイプを見せて議論したいとき。
Figma：本番のプロダクトのUIを細部まで設計し、コンポーネントを管理しながら継続的に更新していくとき。
Canva：テンプレートをもとに、販促物や資料を量産・微修正していくとき。

Claude DesignからはCanvaへ書き出せるため、初版をClaude Designで作り、仕上げや量産をCanvaで行う使い方もできます。なお、公式ヘルプの書き出し先にFigmaは挙がっていません。

使う前に知っておきたい制限

公式ヘルプでは、次のような既知の制限が挙げられています。

インラインコメントが保持されないことがあります。
大きなコードベースを読み込ませると動作が重くなることがあります。
バージョン履歴の機能はまだありません。
複数人での同時編集は安定していません。
モバイルアプリでは編集できません（閲覧とコメントのみ）。

ベータのため、仕様や対象プランは今後も変わる可能性があります。導入を決める前に、公式ヘルプの最新の記載を確認してください。

よくある質問

無料プランで使えますか

料金ページの比較表では、FreeプランはClaude Designの対象外です。無料のトライアル枠についての公式の案内もありません。試すにはProなどの有料プランの契約が必要です。

デスクトップアプリでも使えますか

使えます。2026年9月の統合で、Web・デスクトップ・モバイルのClaudeアプリの会話から使えるようになっています（Pro・Maxから順に展開）。デスクトップアプリの導入はClaude Desktopの機能と導入方法で説明しています。

別料金はかかりますか

かかりません。プランの利用上限の中で使い、チャットやClaude Codeと同じ枠を消費します。たくさん使う場合は、上位のMaxへの変更か追加利用を検討してください。

まとめ

Claude Designは、文章で頼むだけでプロトタイプやLP、1枚資料の初版を作り、デザインシステムに沿って仕上げられる機能です。Pro・Max・Team・Enterpriseの有料プランに含まれ、別料金はかかりません。2026年9月16日からは普段の会話の「Output」から「Design」を選ぶだけで始められ、Claude Codeの /design からも使えます。まずは自分のプランで使えるかを確かめ、作りたい画面や資料を1つ頼んでみるところから始めてみてください。