Claude Designとは?Artifactsとの関係とできること

Claude Design、デザインを、形にする。寅次郎先生と記事の内容を表すイラスト。
確認日:2026年10月18日
アプリのバージョン:未確認(公式資料による確認)

Claude Designは、Artifactsで作れる成果物のうち、デザインを作るための機能です。Anthropicが開発・提供しています。その関係を先に整理してから、何ができるかを見ていきましょう。

ArtifactsとClaude Designの関係

Artifactは、Claudeが作る、あとから編集や共有ができる成果物です。文書、発表資料、画面のデザインなどが含まれます。左側の「Artifacts」タブは、作った成果物を探したり、テンプレートから新しく作ったりする場所です。

テンプレートには文書を作るDocs、発表資料を作るSlides、画面案や試作品を作るDesignがあります。

Claudeで作る成果物をArtifactと呼ぶ。Docs、Slides、Designは成果物の種類で、Artifactsタブから探したり新しく作ったりできる関係を示す図

たとえば「企画書を文章で作って」はDocs、「発表用の資料を作って」はSlidesの例です。「Webサイトの画面案を作って」と頼むならDesignを使います。どれもArtifactとして残る成果物です。

Claude Designで作れるもの

Claude Designの対象は、企画の内容を1枚で伝える案内資料や、Webサイトの画面案です。複数の画面をつないだ、クリックして動きを確かめられる試作品にも対応しています。

誰に見せる何を作りたいかClaudeに伝えると、会話の横に開くキャンバスに最初の案が表示される仕組みです。色や文字の決まりがある場合は、参考画像や既存のデザインを材料として渡せます。

会話とキャンバスで直す

全体の配置を変えたいときは、会話で「見出しを上に、説明をその下に置いて」と伝えられます。一部だけを直すなら、キャンバス上の要素にコメントを付けるか、文字や配置を直接編集する方法です。

完成したデザインは、PDFやHTMLなどに書き出せます。画面案を実際のソフトウェアにしたい場合は、Claude Codeへの引き継ぎも選べる仕組みです。

どこから使うか

Claudeの会話中に頼むほか、「Artifacts」タブでDesignを選ぶ、Claude Codeから作る方法があります。どこから始めても、できあがったデザインはArtifactです。

参考にした一次情報

当サイトが作成した本文はCC BY 4.0です。引用画像は対象外です。Claudeの記事の一覧へもどる