最近Claudeに追加された「Claude Design」とは？
情報元1：Introducing Claude Design by Anthropic Labs
情報元2：Claude Designを始める | Anthropicヘルプセンター
Anthropic LabsのClaude Designを使用すると、Claudeとの会話を通じてデザイン、インタラクティブプロトタイプ、プレゼンテーションなどを作成できます。
Claude Support「Claude Designを始める」
“https://support.claude.com/ja/articles/14604416-claude-design%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B” より一部引用
2026年4月17日、「Claude Design」が発表されました。
現在のところ、ブラウザ版Claudeからはアクセスできますが、アプリ版からは利用することができません。加えて、有料プランユーザー（Pro、Max、Team、およびEnterpriseプラン）が対象のため、注意が必要です。
何ができる？
Claude Designは、AIとチャットしながらWebページ、アプリ、プレゼン用スライドなどのデザインを作る機能です。
デザインツールを細かく手で操作するというよりは、作りたいものをプロンプトで指示してClaudeに形にしてもらうようなイメージです。
具体的には、
1. プロジェクトを作成し、関連するコンテキスト（スクリーンショット、コードベース）を追加します。
2. 構築したいものを説明します。
3. Claudeがキャンバス上で生成したものを確認します。
4. チャットメッセージとインラインコメントを使用して反復します。
5. 結果に満足したら、エクスポートまたは共有します。
Claude Support「Claude Designを始める」
“https://support.claude.com/ja/articles/14604416-claude-design%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B” より一部引用
このような流れで進行します。
少々分かりづらいので簡潔に説明すると、「作る前に材料を渡す→作りたいものを伝える→出てきたものを見る→直す→指定したファイル形式で書き出す」という流れになります。
さっそく使ってみましょう
1. アクセス・準備
ブラウザでClaudeを開いて、左側メニューから「Design」を選択します。
Claude Designの画面は下画像のようになっており、基本的には左側の画面（チャット）で指示をして、右側でプレビューや完成品を見るようになります。
デザインを作る前に、左下の「Set up design system」を見てみましょう。
色々書いてありますが、この画面からあらかじめ共通のデザイン指示（コンテキスト）を与えることができます。
今回は試しに、前にも使った「デジタル庁デザインシステム」の.figファイルを資料として与えます。
（ちなみに、この画面でデザインを指定しなくてもデザインを作成することは可能です）
2. 実際に作成してもらう
色々選択できそうな項目がありますが、まずはチャット欄にプロンプトや資料を入力して、何か作ってもらいましょう。
今回は先日投稿した記事「AIチャットボットが、祖父母と孫の距離を縮められるか」の内容をもとに、解説スライドを作成してもらいます。
試作品1号が完成しました。
従来のHTMLスライドと比較すると、「量産型」感が減っている気がします（個人の感想です）。
もし追加でClaudeに編集してもらいたい場合は、左側のチャット欄から指示をしてもよいですし、編集したい部分を指定してコメントを入力する方法でも編集してもらうことができます。
「Comment」をクリックした後、範囲を指定して要望を伝えればOKです
ただ、色の変更や文字の大きさの変更といった軽微な編集であれば、「Edit」をクリックした後に編集したい部分を選択することで、細かく調整することができます。
3. 色々な形式で出力が可能
完成品は、画面右上の「Export」をクリックすれば、いろいろなファイル形式で出力できます。
一番下の項目を選択するとClaude Codeに接続できるので、WebサイトのデザインをClaude Designで作成して、中身をClaude Codeで仕上げる…といった役割分担も可能です。
加えて、Canvaにも送信することができるので、Claude Designで作成したコンテンツをCanvaで仕上げることもできます。
調剤薬局のイメージを反映したデザインも作成可能
先程ちらっと紹介しましたが、デザインには自分が指定したフォント・ロゴ・アセットを使うことができるので、調剤薬局のブランドイメージを反映したデザインを作成することが可能です。
ゆえに、社内研修資料、外部の勉強会用スライド、会社紹介用のスライド、地域の方々向けの広報誌などの作成にClaude Designを活用することで、業務効率化につながるかもしれません。
加えて、従来のHTMLスライドと比較すると「量産型」感が減っている気がする（個人の感想です）ことと、Claude Designの画面上で微修正もできることから、従来のAIデザイン生成ツールと比較すると、自分たちの個性も散りばめやすいと考えられます。
新しいAIデザイン生成ツールをお探しで、かつClaudeの有料サブスクリプションに登録されているという方は、是非いちどClaude Designを使ってみてください。
