Cowork と Office

Claude Designの使い方⁠｜できること・使えるプラン・始め方

Claude Design（クロード デザイン）は、Claudeと話しながら、画面の試作、ランディングページ、1枚ものの資料、スライドなどの見た目の仕事を作るAnthropicの機能です。 いまは無料のFreeプランを含むすべてのプランで使え、ふだんの会話で「この提案書から1枚ものを作って」と頼むだけで始められます。別のアプリを入れる必要はありません。単体のサイト（claude.ai/design）は2026年12月14日で閉じ、そのあとは読むだけになります。

Claude Designは2026年4月17日に、Anthropic Labsの製品として有料プラン向けに研究段階の提供で始まりました。その後Claudeの中に組み込まれ、いまはアーティファクト（会話の横に開く成果物）のテンプレートの1つになっています。

内容は、2026年10月26日に公式のClaude Designの始め方、単体のClaude DesignからClaudeへの移り方、デザインシステムの設定の説明、アーティファクトの説明、アーティファクトの共有の説明、表示する言語の変え方、Claudeは画像を作れるかの説明、Claude Designの製品頁、ダウンロードの頁、Anthropicの発表と照らし合わせました。

Claudeに資料作りやブラウザ、Officeの作業を任せる使い方の全体は、Claude Coworkのまとめから読めます。

この記事の主な内容

1. Claude Designとは
2. 使えるプランと料金
3. 基本の使い方
4. 日本語での設定
5. 導入とインストール
6. デザインシステムを使う
7. 書き出しと共有
8. Claude Codeとの連携
9. 単体のclaude.ai/designを使っていた人へ
10. まだできないこと
11. よくある質問

Claude Designとは

Claude Designは、会話の横にキャンバス（作業の画面）を開いて使う機能です。作りたいものを伝えるとClaudeが最初の案をキャンバスに作り、会話、部分ごとのコメント、画面での直接の編集で仕上げます。Anthropicの発表に挙がっている使い道は次の通りです。

デザイナーでなくても使えるように作られています。足りない情報があれば、Claudeのほうから質問してきます。

画像生成との違い

Claude Designは、写真やイラストを1枚の絵として生み出す画像生成の道具ではありません。公式の説明でも、Claudeは画像生成の道具のようには写真やイラストを作らないとしています。

Claude Designが作るのは、文字、図形、ボタンなどを並べた画面、ページ、スライドです。ボタンを押せる試作にしたり、PowerPointやHTMLに書き出したりできます。手持ちの写真やロゴ、参考にしたい画面のスクリーンショットは、上げて手がかりとして渡せます。

使えるプランと料金

始め方の説明によると、Claude DesignはFree、Pro、Max、Team、Enterpriseのすべてのプランで使え、最初から入っています。Enterpriseでは2026年10月15日から最初から入る形になり、それより前でもオーナーが組織の設定で入れられました。

プランによって違うのは次の通りです。

Freeプランでの利用

Freeプランでも、会話からデザインを頼み、キャンバスで直し、書き出すところまで使えます。使えないのは、会社の色や部品をまとめたデザインシステムと、作ったデザインのリンクでの共有です。

Claude Designだけの料金はありません。使った分は、Claudeのほかの使い方と同じ使用量の枠から引かれ、Claude Codeなどとも同じ枠を分け合います。以前はClaude Designだけの週の枠がありましたが、いまはありません。大きなコードを読ませたり、何度も作り直したりすると、多く使います。

枠を使い切ると、枠が戻るまでClaude Designは使えません。追加の利用分（usage credits）を有効にしていれば、枠を超えても続けられます。プランごとの料金は、次の記事で比べています。

関連記事料金とプランClaudeとClaude Codeの料金とプラン比較｜Pro月$20・Max・Team、無料で使える？ClaudeとClaude Codeの料金を2026年10月26日の公式情報で比較。Free・Pro・Max・Team・Enterpriseの月額とプランの中身、日本円、API従量課金の違い、トークン上限、支払いと解約、困ったときの直し方を解説。

基本の使い方

公式の説明にある、ふつうの流れは次の通りです。

1. 会話かArtifactsのタブからデザインを始めます
2. 使いたいデザインシステムを付けます（Pro以上）
3. 参考の画面のスクリーンショットや資料など、手がかりを足します
4. 作りたいものを書きます
5. Claudeがキャンバスに作った案を見ます
6. 会話、コメント、画面での直接の編集で直します
7. できたら書き出すか共有します

始める場所は次の3つのどれでも構いません。

• 会話の中 「この提案書から1枚ものを作って」のように頼むか、入力欄の「Output」から「Design」を選ぶ
• Artifactsのタブ Designのテンプレートを選ぶ
• Claude Code 考えをデザインにするよう頼むか、/designを使う

どの場所でも、アーティファクトを使うための「コードの実行とファイルの作成」（新しい設定の画面では「Create and edit files」）の設定が入っている必要があります。Free、Pro、Maxでは「Settings > Capabilities」、TeamとEnterpriseでは組織の設定にあります。

試作を頼む

公式の説明では、作りたいもの、並べ方、載せる内容、誰が使うかの4つを書くと、よい結果になるとしています。説明に載っている頼み方の例を日本語にすると、次のようになります。

地域と商品の種類で絞り込める、月ごとの売上のダッシュボードを作ってください。

主な機能を4つの画面で紹介する、スマホのアプリの最初の案内の流れを作ってください。

新しいAPIの商品のランディングページを作ってください。一番上の見出しの部分、コードの例、料金の欄を入れてください。

方向に迷うときは「2つか3つの案を見せて」と頼むと、比べて選べます。スマホ、タブレット、パソコンのどれで見るかも、早めに伝えておくよう勧められています。いまの案を残して別の方向を試したいときは「いまの案を保存して、まったく違うやり方を試して」と頼むと、Claudeが保存した場所を教えてくれます。

直し方は、目的に合わせて使い分けます。

製品頁によると、Claudeが作る調整用のスライダーで、余白や色を細かく動かすこともできます。使いやすさ、文字と背景の見分けやすさ、情報の並びの点検を、Claudeに頼むこともできます。

スライドを作る

発表のスライドも、同じように話しながら作れます。大まかな筋書きや元になる資料を渡して「この内容で10枚のスライドにして」のように頼みます。アーティファクトの説明によると、スライドはArtifactsのタブの「Slides」のテンプレートからも始められます。

スライドはPowerPointやPDFで書き出せ、Googleスライドに直せる形で送ることもできます。デザインシステムがあれば、会社の色やフォントで作られます。PowerPointの中でClaudeを使う方法は、次の記事で説明しています。

関連記事Cowork と OfficeClaudeでスライド・パワポを作る方法｜Claude in PowerPointの使い方・料金Claudeでスライドやパワポを作る5つの方法と、PowerPointの中で使うClaude in PowerPoint（Claude for PowerPoint）の使い方を公式情報で解説。使えるプランと料金、対応するPowerPointの版（Windows、Mac、Web）、アドインのインストールとログイン、指示の例、できないこと、データの扱い、会社での配り方、Claudeでスライドを作るほかの方法までまとめます。

Claudeに作りたいものを伝える頼み方は、講座のレッスンでも練習できます。Claude Codeでランディングページを作るレッスンは、試作のあと本物のページにする流れの練習になります。

日本語での設定

Claude Designだけの言語の設定はありません。Claudeの画面を日本語にすれば、Claude Designもその中で使えます。公式の説明によると、Webとデスクトップアプリでの変え方は次の通りです。

1. 左下のプロフィールのアイコンを押します
2. 「Language」の欄を開きます
3. 「日本語」を選びます
4. 画面が自動で切り替わります

画面の言語を英語のままにしていても、Claudeは話しかけた言語で答えます。日本語で頼めば、日本語でやり取りできます。作るページやスライドの文字を日本語にしたいときは、頼むときに「文字はすべて日本語で」と書き添えておくと確実です（当サイトのすすめです）。

導入とインストール

Claude Designのために、別のアプリを入れる必要はありません。Claudeが使える場所なら、どこからでも始められます。アーティファクトの説明と始め方の説明によると、場所ごとにできることは次の通りです。

Macで使いたいときは、ブラウザでclaude.aiを開くか、ダウンロードの頁から「Download for macOS」でデスクトップアプリを入れます。Claudeの登録から始める人は、次の記事を先に読んでください。

関連記事Claude の始め方Claudeの使い方｜登録・日本語設定・無料でできること・上手な頼み方を初心者向けに解説Claudeの使い方を初心者向けに解説。アカウントの作り方、日本語の設定、画面の見方、無料と有料の違い、上手な頼み方、仕事での使い方、機能ごとの使い方、よくある失敗とFAQをまとめます。

デザインシステムを使う

デザインシステムは、会社の色、文字、部品、並べ方の決まりをまとめたものです。一度作れば、新しいデザインやスライドに自動で当てはめられます。設定の説明によると、Pro、Max、Team、Enterpriseでベータとして使え、Pro、Max、Teamでは最初から入っています。Enterpriseでは、オーナーが組織の設定で入れるまで使えません。

元になる資料は、次のどれか1つがあれば始められます。

• デザインシステムや部品をまとめたコード
• 会社の見た目が表れたスライドや文書
• ロゴ、色の一覧、フォントの決まりなどのブランドの資料

作り方は2つあります。

• 会話から 連携したアプリ、上げたファイル、Figmaのファイル、スライド、ロゴ、フォントから作るよう頼む。色やフォントなどブランドの決まりに向く
• Claude Codeから Reactの部品として作ってあるなら、/design-syncで部品と決まりを読み込む。製品の画面の決まりに向く

公式の説明では、色の一覧だけでなく、仕上がったランディングページのような本物の例を入れるほうが、会社の雰囲気が伝わるとしています。TeamとEnterpriseでは一度作れば、組織の全員の作業がそれを使います。作ったデザインシステムは「Settings > Customize > Design systems」で管理します。

書き出しと共有

できたデザインは、右上の「Export」から次の形で書き出せます。

• zip、PDF、PowerPoint、Googleスライド、単体のHTML
• Canva、Gamma、Miro、HubSpot、Vercel、Wix、Lovable、Netlify、Replit、v0、Adobeの各サービスなど、ほかのサービスに送る
• Claude Codeに渡す（手元のClaude Code、またはWeb版のClaude Code）

デザインは最初は自分だけが見られます。共有は「Share」から行い、見るだけ、コメントできる、直せる、の権限を選びます。2026年10月26日に公式のアーティファクトの共有の説明で確かめたところ、使える共有の仕方はプランで次のように違います。

• Free 作る、直す、書き出すはできるが、共有の仕方の表には載っていない。人に見せるときは書き出したファイルを渡す
• Pro、Max リンクを知っている人に見せる、メールで特定の人を招く（ベータ）
• Team、Enterprise 上の2つに加えて、組織の全員や組織の中の特定の人と共有する。リンクでの共有は、オーナーが組織の外への共有を許した場合に限る

共有の仕方は、アーティファクトの記事で詳しく説明しています。

関連記事claude.ai の機能Claude Artifactsとは？アーティファクトの使い方と公開・共有の仕方Claudeのアーティファクト（Artifacts）とは何かを公式情報で解説。公開と共有の仕方、Coworkのライブアーティファクトとの違い、Claude CodeのArtifactsとの違い、プランごとの違い、テンプレートと書き出しをまとめます。

Claude Codeとの連携

始め方の説明によると、Claude DesignとClaude Codeは、作業を同じに保ったまま行き来できます。

• /design-syncで、手元のデザインシステムをClaude Designに取り込む
• できたデザインをClaude Codeに渡すと、スクリーンショットから作り直すのではなく、続きから作る
• Claude Codeの/designで、デザインをコードに取り込む、コードを動く試作として出す、最初から最後まで作らせる

画面の案をClaude Designで固めてから、Claude Codeで本物のWebサイトやアプリにする、という流れが作れます。とても大きなコードを読ませるときは、ブラウザが重くならないよう、Claude Codeからつなぐよう勧められています。Claude Codeのことは、次の記事で説明しています。

関連記事とは・始める・学ぶClaude Code（クロードコード）とは？読み方・できること・始め方Claude Codeとは、Anthropic公式のAIコーディングエージェント。コード生成・修正・Git・テストを横断でき、対象プランまたはAPIで利用できます。

単体のclaude.ai/designを使っていた人へ

移り方の説明によると、変わることは次の通りです。

• 単体のサイトは2026年12月14日まで使え、そのあとは読むだけになり、新しいプロジェクトは作れない
• Claudeで新しく作るデザイン、デザインシステム、スライドは、アーティファクトとして作られる
• デザインシステムは閉じる前に移す。ClaudeのArtifactsのページで、案内の帯の「Move team design systems」を押す
• 1回の移動で、組織のすべてのデザインシステムが移る。始められるのはオーナーに限らず、Claude Designを使える人なら誰でもよい
• プロジェクトをClaudeに移す機能は、有料プランから順に提供中。移すと単体のサイトの元のほうは読むだけになり、元に戻せない
• 会話とコメントは移せず、閉じるまで単体のサイトに残る

移せなかったデザインシステムは、理由が一覧に出ます。大きすぎる場合は、要らないファイルを消してから、もう一度移します。

まだできないこと

始め方の説明に書かれている、いまの制限は次の通りです。

• 版の履歴はまだない
• 2人以上が同時に同じデザインを直すのは、まだ不安定なことがある
• 画面に付けたコメントが表示されないことがある。その場合は、コメントの一覧から見るか、会話に貼る
• スマホのアプリでは共有の設定を変えられない
• 「chat upstream error」が出たら、同じプロジェクトの中で新しい会話のタブを開き直す
• 取り込むデザインシステムの出来は、元の資料しだい。整っていないコードや足りないファイルは、そのまま出来に表れる

使用量の枠を使い切ると、枠が戻るまで使えない点にも気をつけてください。Claudeでできるほかの仕事の任せ方は、次の記事にまとめています。

関連記事Cowork と OfficeClaude Coworkとは？使い方・料金・できることを公式情報で解説Claude Coworkとは何かを公式情報で解説。できること、職種ごとの頼み方、料金とプラン、始め方、確認のモード、定期タスク、よくある失敗、Claude Codeとの違いまでまとめます。

よくある質問

Claude Designは無料で使えますか？

使えます。いまはFreeプランでも、会話から頼んで作り、直し、書き出せます。ただし、会社の色や部品をまとめたデザインシステムはPro以上のベータの機能で、リンクやメールでの共有もPro以上です。

Claude Designの料金はいくらですか？

Claude Designだけの料金はありません。プランの使用量の枠から使い、Claude Codeなどと同じ枠を分け合います。以前あったClaude Designだけの週の枠は、いまはありません。

claude.ai/designはなくなるのですか？

単体のサイトは2026年12月14日で閉じ、そのあとは読むだけになります。Claude Designそのものは、Claudeの中のアーティファクトのテンプレートとして続きます。デザインシステムは閉じる前に移してください。

Claude Designで画像そのものを生成できますか？

写真やイラストを1枚の絵として作る画像生成の道具ではありません。作るのは画面の試作、ページ、スライドなどです。手持ちの写真やロゴは、上げて手がかりとして渡せます。

Claude Designを日本語で使えますか？

使えます。左下のプロフィールのアイコンから「Language」で日本語を選ぶと、画面が日本語になります。設定が英語のままでも、日本語で頼めば日本語でやり取りできます。

Claude Designはインストールが必要ですか？

要りません。Webのclaude.ai、デスクトップアプリ、スマホのアプリ、Claude Codeのどこからでも始められます。デスクトップアプリを使いたいときは、公式のダウンロードの頁からmacOSかWindowsの版を入れます。

PowerPointやCanvaに書き出せますか？

できます。PowerPoint、PDF、Googleスライド、単体のHTML、zipで書き出せ、CanvaやMiroなどのサービスに送ることもできます。

Claude Designで作った画面を、そのままアプリにできますか？

Claude Codeに渡すと、デザインの続きからコードを作ります。Claude Codeの/designでデザインをコードに取り込むこともできます。