Claude Designの使い方 — 会話でデザインを作る基本操作
Claude Designはチャットとキャンバスの2画面で構成され、会話しながらデザインを作りこみます。最初のプロジェクト作成から反復・エクスポートまでの基本操作をまとめます。
Claude Designは何をする画面か
Claude Designは、会話を通じてデザイン・インタラクティブなプロトタイプ・プレゼン資料などを作る画面です。左側がチャット、右側がキャンバスの2ペイン構成で、チャットで要望を伝えるとキャンバスにデザインが生成されます。そこから会話・インラインコメント・キャンバス上の直接編集を組み合わせて、望む形に近づけていきます。
本記事は、組織のデザインシステムがすでに設定済みであることを前提にします。ブランドの色やコンポーネントを一から抽出・登録する側の手順は、Claude Designで自社のデザインシステムを設定する手順で扱っています。設定済みの環境では、作るものすべてに自動でブランドの配色・タイポグラフィー・コンポーネントパターンが反映されるので、本記事では素材の用意は不要です。
基本の流れ
Claude Designでの作業は、おおよそ次の順で進みます。
- プロジェクトを作成する
- 使うデザインシステムをアタッチ・インポートする
- 関連する文脈(スクリーンショット・コードベースなど)を加える
- 作りたいものを言葉で説明する
- キャンバスに生成された結果を確認する
- チャット・インラインコメント・直接編集で仕上げる
- エクスポート、または共有する
Claude DesignとClaude Codeを行き来する
Claude DesignとClaude Codeの間は、作業を同期させたまま行き来できます。Claude Code側では/design-syncコマンドでデザインシステムを取り込み、Claude Designで作るものすべてが既存コンポーネントを起点にするようにできます。逆に、デザインが実装に落とし込める段階まで固まったら、そのままClaude Codeに引き継ぎ、スクリーンショットからの再現ではなく既存の作業内容から続きを進められます。
Claude Code側から離れずに作業したい場合は、Claude Design用のMCPサーバーを接続する方法もあります。
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcpサーバーを追加したら、/design-loginでサインインします。接続後は、デザインをコードベースにインポートしたり、コードをライブなプロトタイプとしてエクスポートしたり、最初から最後までClaude Codeに作らせたりできます。コマンドの詳細な使い分けはClaude Code design-syncの使い方にまとめています。
最初のプロジェクトを作る
プロジェクトを作成すると、組織のデザインシステムを自動で継承します。ブランド資産をアップロードしたり、色やフォントを個別に設定したりする必要はありません。すでにブランドカラー・フォント・コンポーネントが用意された状態から始まります。
GitHubリポジトリ・デザインファイル・アップロードしたファイル・ローカルのコードベースから、1つまたは複数のデザインシステムを取り込むこともできます(Claude Code側の/design-syncコマンド経由)。Claude Designは実際のコンポーネントを使って組み立て、自分の出力を自社のデザインシステムと照合してから表示します。組織側でブランド基準がロックされている場合、プロジェクト作成者にできる調整の幅はその分だけ狭くなります。ロックの仕組み自体はClaude Designで自社のデザインシステムを設定する手順で扱っています。
文脈を加える
渡す情報が多いほど出力の質は上がります。プロジェクト作成後も、いつでも参考資料を追加できます。
- スクリーンショット・画像・既存アセット: 既存デザイン、競合製品、ワイヤーフレーム、参考にしたい画像をアップロードします。既存のスライド資料や文書を渡して、そのスタイルを再現させることもできます。「これに似た感じで」という依頼に向いています
- コードベース・既存デザインファイル: リポジトリをリンクすると、Claude Designが既存のコンポーネント・アーキテクチャ・スタイリングパターンを理解します。プロトタイプが最初から実装に近い状態になります
良いプロンプトの条件
デザイナーである必要はありません。何を作るか・誰のためか・何を重視するかを具体的に書けば十分です。良いプロンプトには、目的(何を作るか)・レイアウト(要素の配置)・内容(表示する情報)・想定読者(誰が使うか)が入っています。
「地域と製品ラインでフィルタできる、月次売上を示すダッシュボードを作って」
「コアの4機能をユーザーに順に伝える、4画面構成のモバイルアプリオンボーディングをデザインして」
「ヒーローセクション・コード例・料金を含む、新しいAPI製品のランディングページを作って」情報が足りない場合は、Claude Designの側から確認の質問が返ってきます。
チャット・インラインコメント・直接編集の使い分け
最初の生成結果は出発点にすぎません。そこからの磨き込みには3つの手段があり、目的によって向き不向きがあります。
| 手段 | 向いている変更 | 例 |
|---|---|---|
| チャット | 向いている変更デザイン全体に関わる大きな変更 | 例「配色をもっとダークでミニマルに」「2〜3パターンの代替レイアウトを見せて」 |
| インラインコメント | 向いている変更キャンバス上の特定箇所を狙った変更 | 例「このボタンの余白を大きく」「プライマリーブランドカラーをここに使って」 |
| キャンバス上の直接編集 | 向いている変更ドラッグ・リサイズ・整列などの視覚的な微調整 | 例要素の位置やサイズをその場で動かす |
チャットは構造の変更・新しいセクションの追加・説明が必要な変更に。インラインコメントはボタン1つの修正のような、コンポーネント単位のピンポイントな変更に向きます。Claude Designにデザインの判断理由を説明させたり、改善案を出させたり、アクセシビリティの観点でレビューさせたりもできます。
別方向を試したいとき
今の作業を残したまま別の方向性を試したいときは、「今の内容を保存して、まったく別のアプローチを試して」と伝えます。Claude Designは現在のプロジェクトを保存し、保存先を教えてくれるので、あとの会話で前のバージョンを参照しやすくなります。
エクスポートと共有
デザインが仕上がったら、プロジェクト画面右上の「Export」ボタンから出力形式を選びます。用途によって適した形式は変わります。
- zip形式でのダウンロード
- PDFエクスポート
- PPTXエクスポート
- Canvaへの送信
- スタンドアロンHTMLとしてのエクスポート
- Adobe・Base44・Canva・Gamma・Lovable・Miro・Replit・Vercel・Wixなど、既に使っているツールへの送信
- Claude Codeへのハンドオフ(ローカルのコーディングエージェント、またはClaude Code Webへ送信)
組織内では共有リンクでも渡せます。閲覧のみ・コメント可・編集可のいずれかを選べます。
利用量とプラン上限
Claude Designの利用量は、チャット・Claude Code・Coworkと共通の利用枠から消費されます。Claude Design専用の割り当ては無く、独立したカウントもありません。大きなコードベースを扱うプロジェクトや反復回数が多いプロジェクトほど、消費する利用量は増えます。利用上限に達するとClaude Designは上限がリセットされるまで使えなくなりますが、使用クレジットを有効にしている場合は上限到達後も作業を続けられます。
以前のClaude Designには、他の利用枠とは別に週単位の専用割り当てがありました。現在はその区分が廃止され、Claude Designでの活動もすべてプランの共通利用枠に統合されています。
ベータ版特有の制限
Claude Designはベータ提供中で、いくつか把握しておくべき制限があります。
- コメントの表示崩れ: インラインコメントがページ上に表示されないことがありますが、コメント一覧ビューを開けば内容自体は確認できます
- 大きなコードベース: 非常に大きなリポジトリをそのままリンクすると、動作が重くなったりブラウザが不安定になったりすることがあります。デザインシステムの同期にはClaude Code側の
/design-syncを使う経路のほうが安定します - チャットのエラー: 「chat upstream error」が出た場合は、同じプロジェクト内で新しいチャットタブを開き直すと解消することが多いです
- 利用可能な環境: WebとDesktopのみで、モバイルには対応していません
- 同時編集: 複数人が同じプロジェクトを同時に編集する機能はまだ基本的な段階で、確実に動くとは限りません
- デザインシステムの取り込み精度: 取り込み元のコードベースやファイルが整理されていないと、その乱れがそのまま出力に表れます
よくあるつまずき
- 「これじゃない」で終わらせる。抽象的なフィードバックは動きにくく、「フォーム項目間の余白を8pxに詰めて」のように具体的な指示にすると、Claude Designが正確に反映できます
- デザインシステムの名前を伝え忘れる。ブランドのコンポーネント名がわかっているなら、「プライマリーボタンコンポーネントを使って」のように名指しすると、狙ったパーツが使われやすくなります
- レスポンシブ対応を後回しにする。モバイル・タブレット・デスクトップのどれに対応させたいかは、早い段階で伝えておくと手戻りが減ります
- 最初の生成結果に固執する。方向性に迷ったら「2〜3パターン見せて」と頼み、比較してから決めるほうが早いことが多いです
まとめ
Claude Designの基本操作は、プロジェクト作成 → デザインシステムのアタッチ → 文脈の追加 → 生成 → チャット・コメント・直接編集での反復 → エクスポートという流れです。組織のデザインシステムがすでに設定されていれば、ブランド資産を意識せず、要望を言葉にすることに集中できます。Claude Codeとの行き来や/design-syncを使いこなせるようになると、デザインと実装の往復にかかる手間はさらに減ります。