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