Claude Designの使い方

通常のチャットとの違い

Claude Designは、Anthropic（アンソロピック：AI「Claude」を開発している米国の企業）の実験的製品チーム「Anthropic Labs」が2026年4月17日に公開したデザイン制作ツールです。2026年9月2日現在、ベータ版（正式版の前の試験提供）として提供されています。

違いは「作った後」にある

通常のチャットでも、プロンプト（AIへの指示文）を入力してスライドや簡単なツールを作成できます（アーティファクト機能）。作れるものの範囲も、計算の正確さも、Claude Designと変わりません。

違いは、作った「後」にあります。

どちらを選ぶか

• 通常のチャットが向く場面：計算ツールやクイズなど、動けばよいもの
• Claude Designが向く場面：チラシやレジュメなど、体裁を整えて配布するもの

利用条件

Claude Designを使うには、次の条件を満たす必要があります。（2026年9月2日時点）

• 有料プランのみ（Pro・Max・Team・Enterprise）。無料プランでは使えません
• Enterpriseプランでは既定でオフ。管理者が組織設定で有効にする必要があります
• Webブラウザ（claude.ai/design）またはデスクトップアプリのサイドバーから利用します
• スマートフォンアプリでは使えません

利用量は、通常のチャットやClaude Codeと共通の枠から消費されます。Claude Design専用の枠はありません。

Claude Designとは

まず、3つの言葉を整理します

説明によく出てくる「ワイヤーフレーム」「モックアップ」「プロトタイプ」は、制作の3段階を表す言葉です。家づくりに例えると次のようになります。

Claude Designで作成できるもの

1. 動くプロトタイプ（試作品）をつくる

色や文字の入った1枚絵の見本を、クリックすると実際に画面が切り替わる試作品に変えられます。

たとえば「申込ボタンを押す → 入力フォームが出る → 完了画面に進む」という一連の動きを、プログラミングなしで再現できます。デザイナーが、依頼主や利用者に「実際に触ってもらって感想を聞く」ために使う用途です。

2. ワイヤーフレーム・モックアップをつくる

まだ細かい見た目が決まっていない段階で「どんな画面が、どんな順番で出てくるか」だけをざっくり形にする使い方です。

企画担当者が頭の中の流れを目に見える形にし、そのままエンジニアやデザイナーに渡して続きを任せる、という橋渡しに使われます。

3. デザイン案を複数出して見比べる

「シンプルな案」「にぎやかな案」「落ち着いた案」といった方向性の違う案を、短時間でまとめて出してもらう使い方です。

従来は1案つくるだけで時間がかかるため、実際には2〜3案しか検討できませんでした。Claude Designに「別案も3つ見せて」と頼めば、比べながら選べます。

4. プレゼン資料・提案資料をつくる

箇条書きのメモや構成案を渡すだけで、表紙から本編まで一式そろったスライドが出力されます。

完成した資料は、PPTX（PowerPoint形式）で書き出せるほか、Canvaに送って続きを編集することもできます。

5. 宣伝・集客用の素材をつくる

Webの宣伝ページやSNS投稿画像、キャンペーン用のバナー（広告用の帯状の画像）などを作成できます。

6. 音声・動画・3Dを含む本格的な試作品をつくる

音が鳴る、動画が流れる、立体の図形が回る——といった通常なら開発者でないと作れない仕掛けも、指示だけで組み込めます。Claude Designが裏側でコードを書いてくれるため、利用者側がプログラミングを書く必要はありません。

基本操作の3ステップ

流れは「準備 → 作る → 出す」の3ステップです。

【ステップ1】準備する

画面左のメニューから、まずプロジェクトを作ります。「プロジェクト」とは、作業をまとめておく入れ物のことです。ノートを1冊用意するイメージで、ここに会話も生成物もまとめて保存されます。

続いて、必要に応じて2つのものを渡せます。どちらも任意です。何も渡さなくても作り始められます。

① デザインシステム（見た目のルール集）

組織で決めている色・書体・ボタンの形などをまとめたものです。「見出しは濃緑」「本文はゴシック体」といった決まりごとを指します。

一度渡しておくと、以後は毎回「色は緑で」と指定しなくても、自動的にその見た目で作られます。

② 参考資料

「こんな感じにして」と伝えたいときに添付します。

• 画面を撮った写真（スクリーンショット）
• これまで使っていたスライドやWord・Excelのファイル

言葉で説明するより、実物を見せたほうが早い場合に有効です。

【ステップ2】作って、直す

1. 画面左のチャット欄に、作りたいものを文章で入力します。例：「A4縦の講座案内チラシを作って」
2. 生成されたものが、画面右のキャンバス（作業スペース）に表示されます。ここで仕上がりを確認します。
3. 直したい点があれば、次の3つの方法で修正します。満足いくまで、確認と修正を繰り返します。

【ステップ3】書き出す・共有する

完成したら、画面右上の「Export」ボタンをクリックします。「エクスポート」とは「書き出し」のことです。

よく使う形式

• PDF … 印刷や配布に
• PPTX … PowerPointで開いて編集
• HTML … Webページとして使う
• ZIP … 一式まとめてダウンロード

他のツールに送る

Canva、Adobe、Miro、Vercel、Wix などに直接送れます。続きを他のツールで編集したいときに使います。

共有する

組織内向けのリンクを発行できます。相手ごとに3段階で権限を設定できます。

1. 閲覧のみ … 見るだけ
2. コメント可 … 意見を書き込める
3. 編集可 … 一緒に直せる

注意点

本格的なWebアプリは作れません

Claude Designで作れるのは、ブラウザの中で完結するものまでです。次のようなものは対象外です。

• ログイン（利用者ごとのアカウント管理）
• 入力したデータをサーバーに保存し、後から呼び出す仕組み
• 決済や外部サービスとの本格的な連携

これらが必要な場合は、Claude Code（AIコーディング支援ツール）へ引き継ぐ流れになります。Claude Designには、一式をまとめてClaude Codeに渡す機能が用意されています。

なお、この制限は通常のチャットでも同じです。「Claude Designだから作れない」わけではありません。

出てきたものは必ず検算する

そのほかの既知の制限

2026年9月2日時点で、公式に公表されている制限です。

• 画面に貼ったメモが表示されないことがある（コメント一覧からは確認可能）
• 複数人での同時編集はまだ不安定
• 大きなプログラムを読み込むと、ブラウザが重くなる場合がある

まとめ

• Claude Designは、会話だけでデザインの初稿を作るツール（2026年4月17日公開／2026年9月2日現在ベータ版）
• 使えるのは有料プランのみ。無料プランは対象外
• 流れは ①準備 → ②作って直す → ③書き出す の3ステップ
• 通常のチャットとの違いは「作れるもの」ではなく「直しやすさと配布のしやすさ」

まずは講座案内チラシなど、A4の1枚ものから試してみてください。

▲ ページ先頭へ戻る