Claude Design
AI活用

Claude Designとは?できること・使い方・料金を解説|対話でデザインを生成できる

タグアイコン

公開 2026-10-03

資料や画面の見た目を整えたいのに、デザインの知識がなくて手が止まってしまうことはないでしょうか。Claude Designは、Claudeと会話しながら、プロトタイプ・スライド・1枚資料・LPなどのデザインを作れるAnthropicの機能です。2026年9月からはチャットやClaude Codeからも使えるようになりました。

この記事では、Claude Designでできることから、使い方や料金までを解説します。

Claude Designとは|会話でデザインを作るClaudeの機能

Claude Designは、作りたいものを言葉で伝えると、会話の横にあるキャンバスに実際に動くデザインを作ってくれる機能です。できあがったデザインは、会話で頼み直したり、キャンバス上で直接いじったりしながら仕上げていきます。

2026年4月16日(現地時間)、AnthropicのAnthropic Labsから、Claude Opus 4.7と同時に公開されました。同じ仕組みで作るものに、プレゼン資料を作るClaude Slides、文書を作るClaude Docsもあります。

2026年9月からチャットでも利用可能に

2026年9月16日、Claude Designはふだんの会話とアーティファクトタブから直接使えるようになりました。現在は、次の場所から使えます。

使う場所 始め方
Claudeの会話 デザインを依頼する。またはメッセージボックスで「出力」>「デザイン」を選ぶ
アーティファクトタブ デザインのテンプレートを選ぶ
Claude Code デザインを依頼する。または /design を使う(デスクトップ・ターミナル)
iOS・Androidのアプリ 会話でデザインを依頼し、アーティファクトタブで全画面表示する
claude.ai/design 専用の画面も引き続き使える

スマートフォンのアプリでは、デザインを依頼して結果を見ることはできますが、テンプレートから始めたり、キャンバスで編集したり、共有の設定を変えたりするには、ウェブ版かデスクトップ版を使う必要があります。

Claude Designでできること

Claude Designでは、作れるものの幅に加えて、自社のブランドに合わせることと、作ったものをほかのツールへ持ち出すことができます。

作れるもの

Claude Designで作れるものと、使う場面の例は次のとおりです。

作れるもの 使う場面の例
動くプロトタイプ・画面のモックアップ 新機能の画面案を会議で見せる
スライド・ピッチ資料 提案書、社内報告
1枚資料・LP キャンペーンの告知、サービスの紹介
ダッシュボード・社内ツールの画面 数値の見せ方や業務画面の案を固める

公式ヘルプには、「地域と製品ラインのフィルター付きで月間収益を表示するダッシュボードを作成してください」「ユーザーにコア機能を説明する4つの画面を含むモバイルアプリのオンボーディングフローを設計してください」といった依頼の例が載っています。

自社のデザインシステムを反映できる

Claude Designには、ブランドの色・フォント・部品などをまとめたデザインシステムを登録できます。登録しておくと、新しく作るデザインが自動でそのデザインシステムを引き継ぐため、毎回ブランドに合わせるよう指示する必要がなくなります。

デザインシステムは、GitHubのリポジトリ、デザインファイル、アップロードした資料、Claude Codeの /design-sync から取り込めます。Enterpriseプランでは、どのデザインシステムを公開するか、既定にするかを管理者が決められます。

書き出しと連携先

作ったデザインは、画面右上の「エクスポート」から、次の形式で書き出せます。

  • .zip
  • PDF
  • PPTX
  • Google Slides(claude.ai/designのみ)
  • 単体のHTML

ほかのツールに直接送ることもでき、公式ヘルプにはCanva、Miro、Gamma、HubSpot、Wix、Vercel、Netlifyなど15のツールが挙がっています。PowerPointで仕上げたいならPPTX、Canvaで編集したいならCanva、実装に進みたいならClaude Codeへの引き継ぎ、というように、作ったあとの使い道に合わせて選べます。

Claude Designの使い方

Claude Designは、会話で依頼して作り、3つの方法で直し、必要な相手と共有する、という流れで使います。

作り始める

  1. Claudeの会話でデザインを依頼する(アーティファクトタブのテンプレートから始めてもよい)
  2. 作りたいもの、並べ方、載せる内容、誰が使うかを伝える
  3. 会話の横のキャンバスに表示されたデザインを確認する

公式ヘルプによると、よい依頼には目標(作るもの)、レイアウト(並べ方)、コンテンツ(載せる情報)、対象者(誰が使うか)が含まれるとされています。情報が足りない場合は、Claudeから質問してきます。

最初から細かい指示を詰め込まず、全体の配置と内容から始めて、あとから動きや細部を足していくのがおすすめです。方向性が決まらないときは、2〜3案を出してもらって比べると早く決まります。

出典:Anthropicヘルプセンター「Claude Designを始める」

チャット・コメント・直接編集で直す

できあがったデザインは、3つの方法で直せます。直したい内容の大きさで使い分けましょう。

直し方 向いている変更
チャット 構成の変更、セクションの追加、全体の配色
インラインコメント 特定のボタンや見出しなど、一部分の修正
キャンバスでの直接編集 位置や大きさなど、見た目の微調整

直すときの依頼は具体的にしましょう。「なんだか違う」より「入力欄の間隔を8pxに詰めて」のほうが、意図どおりに直りやすくなります。

まったく別の案を試したいときは、今のデザインを保存してから依頼しましょう。

共有する

作ったデザインは、初期設定では自分だけが見られる状態です。共有するときは「共有」を選び、誰が開けるかと、相手が表示・コメント・編集のどれをできるかを選びます。

Claude Designの料金と使えるプラン

Claude Designに別の料金はかかりません。公式ヘルプでは、Pro・Max・Team・Enterpriseの各プランでベータ版として使えるとされています。Pro・Max・Teamは最初から使える状態で、Enterpriseは管理者が有効にすると使えます。

利用量は、Claudeのほかの機能やClaude Codeと同じ上限にカウントされます。以前はClaude Design専用の週ごとの枠がありましたが、現在はプラン共通の上限に含まれるようになりました。大きなコードベースを扱ったり、何度も作り直したりすると、そのぶん利用量が多くなります。

上限に達すると、上限がリセットされるまでClaude Designは使えません。使用クレジットを有効にしていれば、上限に達したあとも続けられます。各プランの料金は、Claudeの料金ページで確認してください。

Claude Design・Claude Code・Figma・Canvaの違い

Claude Designは、言葉で伝えたアイデアをすばやく形にするための機能です。ほかのツールとは、次のように役割が分かれます。

ツール 主な役割 Claude Designとの関係
Claude Code コードを書いて実装する /design でデザインを作る、/design-sync でデザインシステムを共有する、作ったデザインを引き継いで実装する
Canva テンプレートを使って素材を作る・編集する Claude Designの書き出し先の1つ
Figma デザイナーが細部まで作り込む 用途が重なる部分はあるが、置き換えるものではない

Claude Codeとは、デザインから実装までをつなげて使えます。Claude Designで作った画面をClaude Codeに引き継げば、スクリーンショットから作り直す手間がかかりません。

FigmaやCanvaをすでに使っている場合も、すぐに置き換える必要はありません。画面の案や資料のたたき台をClaude Designで早く作り、細部の作り込みや量産はこれまでのツールで行う、という使い分けができます。

Claude Designを使うときの注意点

Claude Designはベータ版のため、公式ヘルプには次の制限が挙がっています。

  • インラインコメントが表示されないことがある
  • 大きなコードベースで動作が重くなる
  • 複数人での同時編集は基本的な機能のみ
  • バージョン履歴は未実装
  • デザインシステムの取り込みの品質は元の資料次第

インラインコメントが表示されないときは、コメントの表示に切り替えると見られます。デザインシステムは、スタイル・フォント・部品をそろえた完全なものを取り込むほど、生成されるデザインがブランドに合いやすくなります。

作ったデザインに入る数値や文言は、社外に出す前に人が確認してください。また、Enterpriseプランでは、管理者が有効にしないとClaude Designを使えません。

まとめ:Claude Designはふだんの会話で試せるデザイン機能

Claude Designは、Claudeと会話しながらプロトタイプ・スライド・1枚資料・LPを作れる機能です。2026年9月16日からは、ふだんの会話、アーティファクトタブ、Claude Codeから使えるようになりました。公式ヘルプではPro・Max・Team・Enterpriseでベータ版として提供され、利用量はClaudeのほかの機能と共通の上限にカウントされます。

まずはClaudeの会話で、手元の企画メモから1枚資料を作ってみましょう。

この記事の監修者

小杉 啓太

小杉 啓太

監修

株式会社みずかげ製作所 代表取締役

慶應義塾大学理工学部にてCNNによる画像分類を研究。エンジニアリング視点を持ったWebマーケターとして、SEO戦略立案から1,000本以上の記事校閲・編集まで幅広く経験。 ClaudeやCodexによる高度なWeb開発や、n8n・Google Workspace Studioを活用した最新の業務自動化ノウハウを武器に、IT・マーケティング分野の専門的で信頼性の高いコンテンツ監修を手掛ける。

専門領域 JDLA G検定 2020 #3

関連記事