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