Claude Designを使うと、Claudeとの会話を通じてデザイン、インタラクティブプロトタイプ、ワンページャー、その他のビジュアルワークを作成できます。Claude Codeやアーティファクトタブを含むClaudeとのあらゆる会話で使用でき、キャンバス上での編集やデザインシステムのインポートなど、すべての機能が含まれています。プレゼンテーションを作成するには、Claude Slidesを使用してください。このガイドでは、最初のデザインを作成し、反復し、ツールを最大限に活用する方法を説明します。
Claude Designはベータ版としてPro、Max、Team、Enterpriseプランで利用可能です。Freeプランでは利用できません。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は実際のデザインシステムコンポーネントで構築し、独自の出力をデザインシステムに対してチェックし、表示される前に修正を加えます。
大規模なチームの場合、カスタムロール内のClaude Design Admin権限により、管理者は標準システムを承認し、編集をロックダウンして、作業が常に会社のガイドラインと一致するようにできます。
デザインシステムをアーティファクトに移行する
新しく統合されたClaude Designには、改良されたデザインシステム機能があり、設定 > デザインシステムで管理できます。
既存のデザインシステムを取り込むには、サイドバーの下部にある「デザイン」タブを開き、バナーの「チームデザインシステムを移行」をクリックします。各デザインシステムはClaudeがClaude Codeを含むあらゆる会話で使用できるアーティファクトになります。移行されたシステムは完璧ではないため、各システムにはバナーが表示されます。「Claudeにクリーンアップさせる」をクリックすると、Claudeがガイド、トークン、コンポーネントを整理します。
プロジェクトにコンテキストを追加する
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に送信
設計は共有するまでプライベートです：
エンタープライズプラン：リンクを持つ組織内の誰とでも共有することもできます。組織の所有者が組織設定 > アーティファクトで外部共有をオンにしない限り、リンクは組織内に留まります。
Pro、Max、Teamプラン：リンクを持つ誰とでも共有することもできます。Claudeアカウントが必要です。
使用状況と価格
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 アプリでは、デザインをリクエストして Artifacts タブで表示できます。キャンバス上での編集と共有設定の変更には、Claude ウェブまたはデスクトップが必要です。
複数人による編集: 2 人以上がデザインプロジェクトを同時に編集することはまだ基本的な機能であり、確実に動作しない場合があります。
デザインシステムのインポート: デザインシステムのインポートは、そのソースと同じくらい優れています。散らかったコードベースまたは不完全なファイルは出力に表示されます。
バージョン履歴: Claude Design にはまだバージョン履歴がありません。