Claude Designは、Claudeと会話しながら、デザイン・インタラクティブなプロトタイプ・プレゼンテーションなどを作れる機能です。

現在はベータとして提供されており、公式によるとPro・Max・Team・Enterpriseのプランで利用できます。 ただしEnterpriseプランではデフォルトでオフとされています。

この記事の要点

  • 画面は左がチャット、右がキャンバス。会話で説明すると右に形が出てくる
  • デザインシステムを先に設定しておくと、ブランドの色・書体・部品が自動で適用される
  • Claude Codeに引き継げる。作ったものが実装に流れる

どこで使うか

公式によると、次の2か所で使えます。

  • Web：claude.ai/design
  • Claude Desktop：サイドバーから

ベータ提供のため、対応プランや利用場所は変更されることがあります。 最新は公式ヘルプでご確認ください。

画面の構成

2つのエリアで成り立っています。

位置役割
左：チャット作りたいものを説明する
右：キャンバスClaudeが生成したデザインが出る

チャットで説明すると、キャンバス上に動くデザインが生成されます。 そこから、会話で直したり、キャンバス上で直接編集したり、インラインでコメントを付けたりしながら詰めていきます。

「対話で作って、画面で直す」の両方ができるのが特徴です。文章の成果物を別窓で扱うアーティファクトと考え方は近く、それをデザイン向けに展開した形と捉えると分かりやすくなります。

使う流れ：7ステップ

公式に示されている典型的な流れです。

  1. プロジェクトを作る
  2. デザインシステムを添付またはインポートする（Claudeに使わせたいもの）
  3. 関連するコンテキストを追加する（スクリーンショット、コードベースなど）
  4. 作りたいものを説明する
  5. キャンバス上で、生成されたものを確認する
  6. 詰める（チャット／キャンバス上で直接編集／インラインコメント）
  7. エクスポートまたは共有する

2番目が要点です。 ここを飛ばすと、次に説明する問題が起きます。

デザインシステムを先に設定する

公式ヘルプでは、組織のデザインシステムがすでに設定されていることを前提とした説明がされています。設定されていれば、作るものすべてに、ブランドの色・タイポグラフィ・コンポーネントのパターンが自動的に適用されます。

逆に言えば、設定していないと、作るたびに見た目がばらつきます。

デザインシステムの設定そのものについては、公式に別の解説（「Set up your design system in Claude Design」）が用意されています。組織で使うなら、まずそちらを担当者が整えるのが順序です。

何を渡すと精度が上がるか

ステップ3の「コンテキスト」に何を入れるかで、出てくるものが変わります。公式では次のようなものを挙げています。

  • スクリーンショット
  • 画像・既存のアセット
  • 既存のデザイン
  • 競合製品のスクリーンショット
  • ワイヤーフレーム
  • ビジュアルのインスピレーション
  • 既存のスライドデッキや、再現したいデザインスタイルを含むドキュメント

「こういう感じで」を言葉で説明するより、実物を1つ渡すほうが速く伝わります。 これはデザインに限らず、AI全般に共通する原則です。

なお、競合のスクリーンショットや他社の素材を扱う場合は、権利関係にご注意ください。 参考として見るのと、そのまま流用するのは別です。

PR・おすすめValue AI Writer byGMO高品質なSEO記事を生成するAIライティングツール。公式サイトを見る

Claude Codeへの引き継ぎ

デザインで終わらないのが、この機能の特徴です。

公式によると、Claude DesignとClaude Codeの間を、作業を同期したまま行き来できます。 /design-sync を使うとデザインシステムを取り込めるとされています。

つまり、デザインが固まったら、スクリーンショットから作り直すのではなく、既存の作業から実装に進めるという流れです。Claude Code側の仕組みはClaude Codeとは？にまとめています。

誰に向いているか

向く向かない
プロトタイプを早く形にしたい最終的な仕上げまで任せたい
デザインシステムが整っている組織ブランドの方針がまだ定まっていない
実装まで見据えている印刷物など、Web以外の成果物
提案用のプレゼン資料を作りたい権利の確認が済んでいない素材を使う場面

プレゼンテーションも作れるとされているので、デザイナー以外にも使い道があります。資料作成そのものの考え方はAIでプレゼン資料を作る方法にまとめています。

デザイナー職の変化についてはWebデザイナーの仕事はAIでどう変わる？で扱っています。作る手数は増えますが、課題の定義と合意形成は残る——という構造は、この機能があっても変わりません。

使う前の確認

  • ベータ提供：仕様が変わる可能性があります。業務の本番フローに組み込む前に、その前提を共有しておいてください
  • Enterpriseはデフォルトでオフ：組織で使う場合、管理者側の設定が必要になることがあります
  • 素材の権利：渡すスクリーンショットや画像の扱いに注意してください
  • 機密の扱い：未公開の製品画面や社内資料を入れる場合、所属先のルールに従ってください

FAQ

Q. どのプランで使えますか？ A. ベータとしてPro・Max・Team・Enterpriseで利用できるとされています。Enterpriseではデフォルトでオフです。提供状況は変更されることがあるため、公式でご確認ください。

Q. どこから使いますか？ A. Webの claude.ai/design、またはClaude Desktopのサイドバーからです。

Q. デザインの知識がなくても使えますか？ A. 会話で作れるため、操作の敷居は低い機能です。ただしデザインシステムが整っていないと出来上がりがばらつくため、組織で使うなら先にそちらを整えるのが順序です。

Q. 作ったものをそのまま実装できますか？ A. Claude Codeへ引き継げます。 /design-sync でデザインシステムを取り込み、作業を同期したまま進められるとされています。

Q. プレゼン資料も作れますか？ A. 公式には、デザイン・インタラクティブなプロトタイプ・プレゼンテーションなどを作成できると説明されています。

Q. 競合のスクリーンショットを参考に渡してもいいですか？ A. 公式にはコンテキストとして挙げられていますが、成果物が既存のデザインに似すぎないよう注意してください。参考にするのと流用するのは別です。

まとめ

  • Claude Designは、会話でデザイン・プロトタイプ・プレゼンを作る機能（ベータ提供）
  • 対応はPro・Max・Team・Enterprise。Enterpriseはデフォルトでオフ
  • 画面は左チャット・右キャンバス。会話で作り、画面で直す
  • デザインシステムを先に設定しないと、見た目がばらつく
  • スクリーンショットや既存デザインを渡すと精度が上がる。権利には注意
  • Claude Codeへ引き継げる（/design-sync）。作り直しにならない

次に読む：Claude Codeとは？／Claudeのアーティファクトとは？

※本機能はベータ提供です。仕様・対応プラン・利用場所は変更されることがあります。最新の情報はClaudeの公式ヘルプセンターでご確認ください。

出典

  • Claude ヘルプセンター「Get started with Claude Design」（2026年7月26日確認）
  • Claude ヘルプセンター「Set up your design system in Claude Design」（2026年7月26日確認）

最終更新：2026年7月26日／fondantAI編集部