Anthropic LabsのClaude Designを使用すると、Claudeとの会話を通じてデザイン、インタラクティブプロトタイプ、プレゼンテーションなどを作成できます。このガイドでは、最初のプロジェクトの作成、デザインの反復、ツールの最大活用方法について説明します。
Anthropic LabsのClaude DesignはPro、Max、Team、およびEnterpriseプランの研究プレビューで利用可能になりました。この機能はEnterpriseプランではデフォルトでオフになっています。
このガイドは、組織のデザインシステムが既に設定されていることを前提としているため、作成するすべてのものがブランドの色、タイポグラフィ、コンポーネントパターンを自動的に使用します。デザインシステム自体を設定または変更する必要があるデザインリーダーの場合は、Claude DesignでデザインシステムをセットアップするClaude Designでデザインシステムをセットアップするを参照してください。
Claude Designの仕組み
Claude Designには2つの主要な領域があります。左側にはチャットインターフェース、右側にはキャンバスがあります。チャットで作成したいものを説明すると、Claudeがキャンバス上に機能するデザインを生成します。そこから反復します。会話とインラインコメントを通じて改善し、完成させます。
典型的なフローは次のとおりです。
プロジェクトを作成し、関連するコンテキスト（スクリーンショット、コードベース）を追加します。
構築したいものを説明します。
Claudeがキャンバス上で生成したものを確認します。
チャットメッセージとインラインコメントを使用して反復します。
結果に満足したら、エクスポートまたは共有します。
新しいプロジェクトを作成する
プロジェクトを作成すると、組織のデザインシステムが自動的に継承されます。ブランドアセットをアップロードしたり、何かを設定したりする必要はありません。ブランドの色、フォント、コンポーネントは既に配置されています。
プロジェクトにコンテキストを追加する
Claudeに提供するコンテキストが多いほど、出力が良くなります。プロジェクト中のいつでも参考資料を添付できます。
スクリーンショット、画像、または既存のアセット：既存のデザイン、競合製品、ワイヤーフレーム、またはビジュアルインスピレーションのスクリーンショットをアップロードします。複製したいデザインスタイルを含む既存のスライドデッキまたはドキュメントを添付することもできます。「このように見せて」というリクエストに役立ちます。
コードベースと既存のデザインファイル：コードリポジトリをリンクして、Claudeが既存のコンポーネント、アーキテクチャ、スタイリングパターンを理解できるようにします。これにより、プロトタイプが最初から本番環境に対応できるようになります。インポートは、既存の製品デザイン作業をアップロードする複数の方法もサポートしています。
効果的なプロンプトを作成する
優れた結果を得るためにデザイナーである必要はありません。構築しているもの、誰のためのものか、何が最も重要かについて具体的に説明してください。
優れたプロンプトには、目標（構築しているもの）、レイアウト（物事をどのように配置するか）、コンテンツ（表示する情報）、オーディエンス（誰がそれを使用するか）が含まれます。Claudeは、より多くの情報が必要な場合は明確化の質問もします。
うまく機能するプロンプトの例を次に示します。
「地域と製品ラインのフィルター付きで月間収益を表示するダッシュボードを作成します。」
「ユーザーに主要な機能を説明する4つの画面を含むモバイルアプリのオンボーディングフローを設計します。」
「ヒーローセクション、コード例、価格設定を含む新しいAPIプロダクト用のランディングページを構築します。」
「カテゴリに基づいて条件付き質問を含む顧客フィードバック収集フォームを作成します。」
「オペレーションチームがコンテンツ提出をレビューおよび承認するための内部ツールを設計します。」
デザインを反復する
最初の生成は出発点です。実際の価値は反復から生まれます。
チャットを使用する
チャットは、全体的なデザインに影響する広範な変更に最適です。
「色スキームをより暗く、よりミニマルにしてください。」
「ダッシュボードを再配置して、メトリクスが上の行にあり、チャートが下にあるようにします。」
「右側に設定パネルを追加します。」
「このページの2～3つの代替レイアウトを表示してください。」
Claudeにデザイン上の決定を説明させたり、改善を提案させたり、アクセシビリティについてデザインをレビューさせることもできます。
インラインコメントを使用する
インラインコメントを使用すると、キャンバスの特定の部分を直接クリックして、対象となる変更をリクエストできます。これはチャットで場所を説明するよりも高速です。
優れたインラインコメントの例：
「このボタンのパディングを大きくしてください。」
「これをラジオボタンの代わりにドロップダウンに変更します。」
「ここでプライマリブランドカラーを使用してください。」
「このセクションを折りたたみ可能にしてください。」
注：コメントが拾われていない場合は、フィードバックをチャットに直接貼り付けてください。これは、Claudeが読む前にコメントが消える可能性がある間欠的な問題の既知の回避策です。
チャットとコメントをいつ使用するか
コメントは、対象となるコンポーネントレベルの変更（「このボタンを修正」、「この間隔を調整」）に使用します。チャットは、構造的な変更、新しいセクション、美的シフト、または説明またはコンテキストが必要なものに使用します。
バージョンと改訂を管理する
現在の作業を失わずに別の方向を探索したい場合は、Claudeに「持っているものを保存して、まったく異なるアプローチを試してください」と伝えてください。Claudeは現在のプロジェクトを保存し、保存場所を確認するため、会話で以前の反復を簡単に参照できます。
エクスポートと共有
デザインの準備ができたら、同僚と共有するか、他の場所で使用するためにエクスポートできます。適切な形式は、ステークホルダーのフィードバックを取得しているか、エンジニアリングに引き継いでいるか、グループに提示しているかによって異なります。
プロジェクトを表示しているときに右上隅の「エクスポート」ボタンを使用して、次のエクスポート形式から選択します。
.zipとしてダウンロード
PDFとしてエクスポート
PPTXとしてエクスポート
Canvaに送信
スタンドアロンHTMLとしてエクスポート
Claude Codeに引き継ぐ
ローカルコーディングエージェントに送信
Claude Code Webに送信
共有可能なリンクを使用して、組織内でプロジェクトを共有することもできます。共有オプションには、表示のみ、コメント、編集アクセスが含まれます。
サブスクリプション使用量と価格設定
詳細については、Claude Designサブスクリプション使用量と価格設定を参照してください。
最良の結果を得るためのヒント
シンプルに始めて、複雑さを層状に追加します。コアレイアウトとコンテンツから始めて、インタラクション、エッジケース、ポーランドを追加します。Claudeは段階的なリクエストに対応します。
フィードバックで具体的にしてください。「これは正しく見えません」は対応するのが難しいです。「フォームフィールド間の間隔を8pxに縮めてください」はClaudeに正確に必要なものを与えます。
デザインシステムを参照してください。コンポーネントがブランドのシステムに存在することを知っている場合は、名前で言及してください。「プライマリボタンコンポーネントを使用」または「カードレイアウトパターンを適用」。
レスポンシブネスを早期に考慮してください。デザインがモバイル、タブレット、デスクトップで機能する必要があるか、それともそのうちの1つだけかを言及してください。
バリエーションをリクエストしてください。方向性が不確かな場合は、Claudeに2～3つのオプションを表示するよう依頼してください。代替案を比較する方が推測するよりもはるかに高速です。
Claudeにフィードバックをリクエストしてください。Claudeはアクセシビリティ、コントラスト比、情報階層、一般的な使いやすさについてデザインをレビューできます。ジェネレーターではなく、デザインコラボレーターとして扱ってください。
既知の制限事項
Claude DesignはAnthropicLabsの実験的プレビューとして利用可能です。注意すべき点がいくつかあります。
コメント永続性：インラインコメントは、Claudeが読む前に時々消えます。これを回避するには、コメントテキストをチャットに貼り付けてください。
コンパクトビューでのエラーを保存：コンパクトレイアウトモードはエラーを保存できます。これが発生した場合は、フルビューに切り替えて再試行してください。
大規模なコードベース：非常に大規模なリポジトリをリンクすると、ラグやブラウザの問題が発生する可能性があります。モノレポ全体ではなく、特定のサブディレクトリをリンクしてください。
チャットエラー：「チャットアップストリームエラー」が発生した場合は、同じプロジェクト内で新しいチャットタブを開始してみてください。