Claude Designを使ってみたいけど、「何ができるのかわからない」「使い方がわからない」という方は意外に多いのではないでしょうか。
この記事では、Claude Designの基本的な使い方から、デザインの作成・編集・書き出しまで、Claudeの公式サポートページ（ ClaudeSupport｜ClaudeDesignを始める ）を元に解説します。（2026年10月現在）
Claude Designとは？何ができるAIデザインツール？
Claude Designは、AIとの対話を通じて、Webサイトやプレゼン資料などのデザインを作成できるツールで、Free・Pro・Max・Team・Enterpriseの各プランで利用できます。
専門的なデザインソフトを細かく操作しなくても、作りたいものを文章で伝えながら、デザインの生成や修正を行うことができるのが特徴です。
利用環境はブラウザ版とデスクトップ版の両方に対応しており、ブラウザではClaude公式サイトにアクセスし、デスクトップ版ではClaudeアプリから利用できます。
なお、従来の独立したClaude Designのページ（claude.ai/design）は、2026年12月14日に終了する予定です。今後はClaudeのチャットやArtifactsなどから利用する方法が案内されています。
Claude Designで作れるもの
Claude Designでは、Webサイトのデザインやプレゼン資料、アプリの画面設計など、さまざまなデジタルコンテンツを作成できます。
具体的には、次のようなものが挙げられます。（2026年10月現在）
| 項目 | 日本語の意味 | 主な用途 |
|---|---|---|
| Docs | ドキュメント | 文書や情報を整理したコンテンツを作成する |
| Slides | スライド | プレゼンテーション用の資料を作成する |
| Design | デザイン | Webサイトやアプリの画面、ビジュアルなどを作成する |
| Dashboard | ダッシュボード | グラフや数値などをまとめて表示する画面を作成する |
なお、以前のスタンドアロン版Claude Designでは、白紙の「Blank」を含む14種類のテンプレートが用意されていました。
2026年12月14日に終了にスタンドアロン版終了以降は、Claude内の「Artifacts」からデザインを作成する形式に移行しています。
デザインシステムとは
デザインシステムとは、Webサイトやアプリなどのデザインに一貫性を持たせるためのルールや部品をまとめたものです。
たとえば、サイト全体で使用する色やフォント、余白の取り方、ボタンや入力フォームのデザインなどをあらかじめ決めておくことで、ページごとにデザインがバラバラになるのを防げます。
Claude Designでは、このデザインシステムを設定することが可能で、毎回細かなルールをプロンプトに書かなくても、共通のデザイン方針を踏まえた制作を進めやすくなります。
デザインシステムを作成する際は、GitHubのリポジトリや外部ツール、ロゴやフォントなどのブランド資料をもとに、デザインのルールを設定できます。
用途に応じて、以下の3つの方法から選択できます。
| テンプレート | 内容 |
|---|---|
| Sync from GitHub | GitHubのリポジトリを指定し、コードに含まれるデザイントークンやコンポーネントを取り込む |
| Build from connectors | 接続済みの外部ツールを利用して作成する。必要に応じて、Claudeから質問を受けながら進める |
| Upload brand files | ロゴ、フォント、デザインガイドライン、トークンファイルなどをアップロードし、それらをもとに作成する |
Claude Designでは、まだデザインのルールが決まっていない場合でも、質問を受けながらデザインシステムを作成できます。
Claude DesignとClaude Codeの違い
Claude DesignとClaude Codeは、どちらもAIを活用して制作を支援するツールですが、得意とする作業が異なります。
Claude Designは、Webサイトやアプリなどのデザインを作成・編集する作業に適しています。チャットで指示を出したり、キャンバス上で直接操作したりしながら、デザインを調整できます。
Claude Codeは、プログラムの作成や編集、機能の実装、動作確認など、コードを使った開発作業を支援するツールです。
両者の違いを整理すると、次のようになります。
| Claude Design | 比較項目 | Claude Code |
|---|---|---|
|
デザインの作成・編集 |
主な役割 |
文書や情報を整理したコンテンツを作成する |
|
レイアウト、配色、画面設計、 |
得意な |
プレゼンテーション用の資料を作成する |
|
Webサイトのデザイン、スライド、UIの設計など |
主な用途 |
Webサイトやアプリの画面、ビジュアルなどを作成する |
|
視覚的なデザイン |
作業の |
コードの作成・編集・開発 |
デザインの方向性を考えるならClaude Design、Webサイトやアプリの機能を実装するならClaude Code。
それぞれの得意分野を理解して使い分けることで、デザインの検討から実装まで、制作作業をスムーズに進められます。
デザインシステムを用意する
Claude DesignでWebサイトのデザインを作成する前に、デザインシステムの参考となるデータを用意します。
今回は、Figma Communityで公開されているデザインシステムを例に、準備の手順を解説します。
step
1Figma Communityを開く
Figma Community（Figma Community）を開いたら、ヘッダーの「デザインリソース」から「UIキット」を選択します。
step
2Figma Communityからデザインデータを選択する
表示されたUIキットの中から、任意のものを選択します。
今回は、「Simple Design System」を選択しました。
Figma Communityのライセンスについて
ファイルによってライセンスや利用条件が異なるため、使用する前に必ず確認しましょう。
特に、個人のクリエイターが公開している素材を利用する場合は、商用利用の可否やクレジット表記などの条件に注意が必要です。（ Figma Communityの著作権とライセンスについて ）
step
3デザインファイルを開く
デザインデータが開いたら「Figmaで開く」ボタンを押します。
「Figmaで開く」を押すとポップアップウィンドウで、以下の選択肢が表示される場合があります。
- 新しいファイルでUIキットを使用：新しいデザインファイルでUIキットを利用する方法
- このファイルのコピーを作成：UIキットのファイルを自分のアカウントに複製する方法
今回は、ファイルに含まれるデザインシステムの構成を確認し、Claude Designに読み込ませるため、「このファイルのコピーを作成」を選択します。
「このファイルのコピーを作成」を押すと、次のようなFigmaの画面が開きます。
これで、無事に自分のFigmaアカウントにデザインファイルをコピーできました。
step
4figデータをダウンロードする
デザインファイルが開いたら、
❶画面左上のロゴマークをクリックし、
❷ファイル ＞ ❸「ローカルコピーを保存」の順番で選択し、任意の場所にfigデータを保存します。
以上で、Claude Designに読み込ませるためのデザインデータの準備は完了です。
Claude Designでデザインを生成する
ここからは、Claude Designを使って実際にWebサイトのデザインを作成する手順を解説します。
デザインシステムの設定〜デザインの作成まで、順を追って紹介します。
step
1作りたいものに合ったテンプレートを選ぶ
❶Claudeを開き、❷Artifacts画面からClaude Designを選ぶと、Docs、Slides、Design、Dashboardという4種類の選択肢が表示されます。
step
2デザインシステムを作成する
「Design」のチャット画面に切り替わったら、
❶「デザインシステム」＞❷「デザインシステムを管理」の順に選択します。
次に、デザインシステムのポップアップウィンドウが開くので、画面右上の
❸「＋新しいデザインシステム」＞❹「Claudeを使用」の順に選択します。
チャット欄が開いたら、❺「ブランドファイルをアップロード」を選択し、任意のデータを添付します。
ボタンの説明にもあるように、ロゴ、フォント、ガイドライン、トークンファイルなどを指定することができます。
❻最後にチャット欄右下の「実行ボタン」をクリックします。（ここから数分待ちます。）
内容によっては、追加のコンポーネントを作成するかどうか確認される場合があります。画面の案内に従って、必要な項目を選択しましょう。
次のような画面が表示されたら、デザインシステムの作成は完了です。
完了時の画面は、作成内容によって異なる場合があります。今回の例では、次のような画面が表示されました。
step
3プロンプトを入力してデザインを生成する
デザインシステムの設定が完了したら、いよいよWebサイトのデザインを作成していきます。
デザインシステムを作成した時と同様に、❶Claudeを開き、❷Artifacts画面から、作成したいものをDocs、Slides、Design、Dashboardの4種類から選択します。
「Design」のチャット画面に切り替わったら、
❸「デザインシステムを選択」をクリックすると、先ほど登録したデザインシステムが表示されるので、❹登録した「デザインシステム」を選択し、❺下のチャット欄にプロンプトを入力します。
もし、添付したい画像やプラグインなどがある場合は、チャット欄左下の「＋」マークをクリックして添付するか、データをそのままドラッグすることでも添付可能です。
❻最後にチャット欄右下の「実行ボタン」をクリックします。
今回は、不動産代理店のコーポレートサイトを作成するために、キャッチコピーや原稿などを簡単にまとめたテキストデータ（.rtf形式）と数枚の写真を添付しました。
しばらく待つと、添付した原稿や写真をもとに右側の画面にデザインが生成されました。
これでClaude Designによるデザイン生成は完了です。
ここから、デザインを編集する場合は、レイアウトや配色、文章の見せ方など、後から調整できます。
Claude Designでデザインを編集する
Claude Designでは、最初に生成したデザインをそのまま使うだけでなく、画面右側の編集画面で直接修正を加えることも可能です。
編集画面には、デザインを修正するためさまざまな機能が用意されています。
ここでは、編集画面の基本的な見方から、デザインを修正する方法まで順番に解説します。
編集画面のメニューと基本操作
編集画面に表示される主なメニューとツールの役割を、簡単に紹介します。
左側にはデザインの修正に使用するツールが、右側にはデザインの表示に関するツールがまとめられています。
編集を行う場合は、主に左側のツールを使用して行います。
| メニュー名 | 機能・できること | |
 |
page（ページ） | ページを切り替えたり、追加する。 |
 |
Select（選択） | テキストや図形などの要素を選択し、移動や編集を行います。 |
 |
Hand（手のひら） | キャンバスの表示位置を移動します。 |
 |
Text（テキスト） | キャンバス上にテキストを追加します。 文字を打ち替える場合は、 Selectツールで文字を選択して打ち替える必要がある。 |
 |
Artboard （アートボード） |
デザインを配置するためのアートボードを作成します。 |
 |
Note（ノート） | キャンバス上にメモを追加します。 |
 |
Pencil／Pen （鉛筆・ペン） |
鉛筆・ペンツールを使って線や形を描きます。 |
 |
Rectangle／Oval ／Arrow／Line （図形・矢印・線） |
図形・矢印・線を追加します。 |
キャンバス上で直接デザインを編集する
文章や画像の配置、要素の大きさなど、気になる部分を画面上で確認しながら調整できるため、細かな修正を行いたいときに便利です。
例えば、次のような場面で活用できます。
- 文字や画像の位置を調整する： レイアウトのバランスを見ながら、要素の配置を整えます。
- 要素の大きさを変更する： 画像やパーツのサイズを調整し、全体の見た目を整えます。
- 細かなデザインを調整する： 画面上で気になる部分を確認しながら、必要な修正を加えます。
文字に修正を加える場合を見てみましょう。
selectツールで選択で該当の文字をダブルクリックすると、テキストに関するメニューバーが表示されるので、その場で文字を打ち替えたり文字の大きさを変えるなどの変更が可能です。
このように、編集したい要素をselectツールで選択し、表示される操作メニューや設定項目から変更を加えたり、
Show the property panel で数値などを直接細かく指定して修正することが可能です。
複数の要素にまたがるレイアウトの変更や、デザイン全体の方向性を変えたい場合は、次に紹介するチャット欄からClaudeに指示を出す方法も便利です。
チャットで指示を出してデザインを修正する
Claude Designでは、デザインを生成したあと、チャット欄から指示を出すことでもデザインを繰り返し修正できます。
例えば、次のような指示を出せます。
- 配色を変更する： 「全体的に青と白を基調とした配色に変更してください」
- レイアウトを変更する： 「メインビジュアルの下に、サービスの特徴を3つ並べてください」
- 文章を修正する： 「見出しを、より簡潔でわかりやすい表現に変更してください」
- 要素を追加する： 「ページの下部に、お問い合わせへの導線を追加してください」
試しに、メインビジュアルのデザインを変更してみます。以下のプロンプトをチャット欄に入力して実行してみましょう。
メインビジュアルの画像を、セクション全体に広がる背景画像に変更してください。
- 画像がメインビジュアルの領域全体を覆うように配置する
- 画像の縦横比を維持し、領域に合わせて自然にトリミングする
- メインビジュアルの高さは変更しない
以上の点を踏まえて、メインビジュアルのみを修正してください。
ご覧の通り、メインビジュアルのレイアウトが指示通り変更されましたね。
次は、特定の箇所を選択した状態で、チャット欄で指示を出すことでも局所的な修正を行う方法を見てみましょう。
例として、３つ並んだカードレイアウトの真ん中のカードを選択した状態で以下のプロンプトを入力して、実行してみます。
選択しているカードの右上に、「おすすめ」と書かれたバッジを追加してください。
- 背景色はオレンジ、文字色は白にする
- ほかのカードには変更を加えず、選択しているカードだけを修正する
既存のデザインに自然になじむように仕上げてください。
カードの真ん中に「おすすめ」アイコンを追加することができました。
このように、部分的に修正をする場合は、編集ツールを使って、全体的な修正を行う場合はチャットを使うなどの使い分けをすることで、効率的にデザインを修正することが可能です。
Claude Designで生成したデザインを確認する
Claude Designで作成したデザインは、編集画面の右側のデザインの表示に関するツールから行います。
| メニュー名 | 機能・できること | |
 |
Play an Artboard （アートボードのプレビュー） |
アートボードをプレビューするためのボタンです。実際の操作に近い画面に切り替わります。 |
|
Show the property panel （プロパティパネルの 表示） |
プロパティパネルの表示・非表示を切り替えるためのボタンです。選択した要素の設定や詳細な編集を行う際に使用します。 |
例えば、Webサイトのデザインを作成した場合、Play an Artboard を使えば、ボタンやメニューなどがどのように動作するかをプレビュー画面で確認できます。
一方、要素のサイズや配置など、具体的な数値を確認したい場合は、 Show the property panel を使用します。テキストや画像などの要素を選択すると、プロパティパネルに設定項目が表示され、数値を確認するだけでなく、その場で変更することも可能です。
（※確認・編集できる項目は、選択した要素によって異なります。）
このように、デザインの仕上がりや動作を確認したいときは「Play an Artboard」、要素の設定を確認・調整したいときは「Show the property panel」を使うとよいでしょう。
Claude Designで生成したデザインを書き出す
Claude Designで作成したデザインは、編集画面の「共有」ボタンから、さまざまな形式で書き出すことができます。
用途に応じてHTMLやPDF、PNGなどの形式を選べるため、Webページとして利用したり、資料として共有したり、画像として保存したりすることが可能です。
ここでは、書き出しメニューの表示方法から、各形式の特徴や使い分けまで解説します。
共有メニューから書き出す方法
編集画面の右上にある「共有」ボタンをクリックし、メニューが表示されたら、「共有」タブを選択してください。
「共有」タブでは、作成したデザインをほかの人に共有するための設定を行えます。
メールアドレスでユーザーを招待したり、アクセス権限を付与することができます。
※共有するまでは自分だけが閲覧できる状態です。
HTML / PDF / PNG形式で書き出す
Claude Designで作成したデザインは、HTML・PDF・PNGなどの形式で書き出すこともできます。
書き出すには、編集画面の「共有」ボタンをクリックし、「エクスポート」タブを開きます。
表示されたメニューから、保存したい形式を選択しましょう。
| 形式 | 特徴 |
| HTML形式 | ブラウザで表示できるWebページとして保存できます。Webサイトのデザインや、インタラクティブなプロトタイプを確認したい場合に適しています。 |
| PDF形式 | レイアウトを資料として共有したり、印刷したりしたい場合に便利です。 |
| PNG形式 | デザインを画像として保存できます。ブログ記事やプレゼンテーション資料に掲載したい場合などに活用できます。 |
その他の形式とアプリから書き出す
Claude Designでは、作成したデザインを外部サービスに引き継いで活用することもできます。
編集画面の「共有」ボタンから「その他の形式とアプリ」を開くと、Adobe Experience ManagerやCanva、Gamma、Miroなど、さまざまなサービスが一覧表示されます。
各サービスの右側には「接続」ボタンがあり、連携する際はここから設定を進めます。
この機能を利用すると、Claude Designで作成したデザインを、対応する外部サービスでの制作や編集、公開などの作業につなげられます。
利用したいサービスがある場合は、該当する「接続」ボタンから設定を確認してみましょう。
Claude Designに関するよくある質問（Q&A）
Claude Designを使い始めるにあたって、疑問に感じやすいポイントをQ&A形式でまとめました。
デザインシステムの必要性や、生成したデザインを実際の制作に活用する際の注意点など、知っておきたい内容を解説します。
Q1. Claude Designでデザインシステムはなぜ必要ですか？
A. デザインの一貫性を保ち、ブランドやサイト全体で統一感のあるデザインを作るためです。
デザインシステムには、色やフォント、コンポーネント、レイアウトなどのルールをまとめます。Claude Designにデザインシステムを読み込ませることで、それらのルールを新しいデザインにも適用できます。
デザインシステムがない場合でもデザインを生成できますが、既存のブランドやWebサイトに合わせたいときは、参考となるデザインやブランドガイドラインを用意すると、意図を伝えやすくなります。
初めて利用する場合は、既存のWebサイトやデザイン資料、ロゴ、カラーパレットなどを参考資料として用意する方法もあります。
参考：Claude Designでデザインシステムをセットアップする（Anthropic公式ヘルプ）
Q2. Claude Designで作成したデザインは、そのままWebサイトとして公開できますか？
A. デザインをHTML形式で書き出すことはできますが、実際のWebサイトとして公開する場合は、必要な動作や表示を確認することが大切です。
Claude Designでは、スタンドアロンHTML形式でデザインを書き出せます。ただし、書き出したデザインが、そのまま本番公開に必要なすべての機能を備えているとは限りません。
例えば、問い合わせフォームの送信処理やデータベースとの連携、セキュリティ対策などが必要なサイトでは、別途実装や設定が必要になる場合があります。
まずはHTMLを書き出してブラウザで表示を確認し、必要な機能や公開環境を整えてから運用するのがおすすめです。
参考：Claude Designを始める（Anthropic公式ヘルプ）
Q3. Claude Designで作成したデザインは、どのような形式で書き出せますか？
A. HTMLやPDF、PowerPoint形式（PPTX）などで書き出せるほか、外部サービスにデザインを引き継ぐこともできます。
書き出し形式によって用途が異なります。例えば、HTMLはブラウザでの表示やWeb制作、PDFは資料の共有、PPTXはプレゼンテーション資料としての利用に適しています。
また、公式ヘルプでは、ZIP形式でのダウンロードやGoogle Slidesへの書き出し、対応する外部サービスへの送信なども案内されています。実際に利用できる形式は、編集画面のエクスポートメニューで確認してください。
参考：Claude Designを始める（Anthropic公式ヘルプ）
Q4. Claude Designで作成したデザインを、ほかの人と共有できますか？
A. はい。共有設定を利用して、ほかの人にデザインを見てもらったり、編集してもらったりできます。
Claude Designでは、デザインを非公開にしたり、組織内でリンクを共有したり、同僚に編集権限を付与したりできます。チーム内でデザイン案を確認したり、フィードバックを受けたりする際に便利です。
ただし、共有する相手や権限の設定によって、閲覧や編集など、相手が行える操作は異なります。共有する前に、画面に表示される設定を確認しましょう。
参考：Introducing Claude Design（Anthropic公式発表・英語）
Q5. Claude Designは無料で使えますか？
A. Claude Designの利用可否や利用条件は、Claudeのプランや提供状況によって確認する必要があります。
Anthropicの公式ヘルプでは、Claude DesignをFree、Pro、Max、Team、Enterpriseの各プランで利用できると案内しています。ただし、利用上限や管理者による設定など、利用条件はプランによって異なる場合があります。
利用を始める前に、最新の公式ヘルプで対象プランや利用制限を確認しておきましょう。
参考：Claude Designを始める（Anthropic公式ヘルプ）
まとめ
Claude Designは、テキストで指示を出すことで、Webサイトやプレゼンテーションなどのデザインを生成できるAIデザインツールです。
最後に、主な機能を振り返ってみましょう。
| 項目 | できること |
|---|---|
| デザインシステムの準備 | 色やフォント、コンポーネントなどのルールを用意する |
| デザインの生成 | テキストで指示を出し、Webサイトやスライドなどを作成する |
| デザインの編集 | チャットやキャンバス、プロパティパネルからデザインを調整する |
| デザインの確認 | プレビューで仕上がりや動作を確認する |
| デザインの書き出し | HTML・PDF・PNGなどの形式で保存したり、外部サービスと連携したりする |
