Claude Designを始める

Claude Designを使うと、Claudeとチャットするだけで、デザイン、インタラクティブプロトタイプ、ワンページャー、その他のビジュアルワークを作成できます。アーティファクトの開始テンプレートの1つなので、任意のチャット、Claude Code、アーティファクトタブから使用でき、キャンバス上での編集とデザインシステムが含まれています。このガイドでは、最初のデザインを作成し、反復処理を行い、最大限に活用する方法を説明します。アーティファクトとは何か、および使用方法について詳しく学ぶ。

このガイドは、組織のデザインシステムが既に設定されていることを前提としているため、作成するすべてのものが自動的にブランドの色、タイポグラフィ、コンポーネントパターンを使用します。デザインシステム自体を設定または変更する必要があるデザインリードの場合は、Claude DesignでデザインシステムをセットアップするClaude Designでデザインシステムをセットアップするを参照してください。

Claudeでアーティファクトを作成する

Claude Designは会話とキャンバスをペアにします。必要なものを説明すると、Claudeは会話の横のキャンバスに動作するデザインを生成します。そこから、会話、インラインコメント、キャンバス上での直接編集を通じて反復処理を行い、完成させます。

典型的なフローは次のとおりです:

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はそれを任意のチャット(Claude Codeを含む)で使用できます。スタンドアロン版が2026年12月14日に終了する前に移行してください。スタンドアロンClaude DesignからClaudeへの移行で詳しく学ぶ。

Claudeに提供するコンテキストが多いほど、出力が良くなります。プロジェクト中のいつでも参考資料をアタッチできます。

優れた結果を得るためにデザイナーである必要はありません。構築しているもの、誰のためのものか、何が最も重要かについて具体的に説明してください。

良いプロンプトには、目標(構築しているもの)、レイアウト(物事をどのように配置するか)、コンテンツ(表示する情報)、オーディエンス(誰がそれを使用するか)が含まれます。Claudeは、より多くの情報が必要な場合は、明確化の質問もします。

うまく機能するプロンプトの例を次に示します:

最初の生成は出発点です。実際の価値は反復処理から生まれます。

チャットは、デザイン全体に影響する広範な変更に最適です:

Claudeに設計の決定を説明させたり、改善を提案させたり、アクセシビリティについてデザインをレビューさせることもできます。

インラインコメントを使用すると、キャンバスの特定の部分を直接クリックして、対象となる変更をリクエストできます。これはチャットで場所を説明するより高速です。

良いインラインコメントの例：

リッチレイアウトコントロールを使用して、要素をドラッグ、サイズ変更、配置することで、迅速なビジュアルおよび美的シフトを実現します。

コメントは対象となるコンポーネントレベルの変更（「このボタンを修正」、「この間隔を調整」）に使用します。チャットは構造的な変更、新しいセクション、または説明またはコンテキストが必要なものに使用します。直接編集は迅速なビジュアルおよび美的変更に使用します。

アーティファクトパネルの出入りおよびパネルのヘッダーからコメントするには、キーボードまたはスクリーンリーダーでアーティファクトを使用を参照してください。この記事では、フォーカスの意味、Macラップトップまたはサファリでの対応方法、およびテーブルがキーをどのように表示するかについても説明しています。

デザインはアートボードのキャンバスです。各アートボードはテキスト、図形、画像などのレイヤーを保持し、レイヤーはその内部に他のレイヤーを保持できます。

F6を押して次の領域に移動し、Shift+F6を押して前の領域に移動します。Cmd+F6（Windows上ではCtrl+F6）はF6の代わりに機能し、Shiftの有無は問いません。領域はトップバー、キャンバス、プロパティパネルです。何かが選択されていてプロパティパネルが閉じている場合、F6は選択範囲の上に浮かぶツールバーにも停止します。

アートボードのタイトルに到達するまでTabキーを押します。その名前には、アートボード1/7などの位置が含まれます。タイトルから、Spaceキーでアートボードを選択し、Returnキーでその内部のレイヤーに移動します。内部では：

テキストレイヤーを編集している場合、完了したらEscapeキーまたはTabキーを押します。移動すると、エディタはスクリーンリーダーに選択されたものとその位置（1/5など）を通知します。

アートボードを移動するには、それを選択し（タイトルでSpaceキー）、矢印キーを押します。1ピクセルずつ移動するか、Shiftキーで10ピクセル移動します。アートボード内では、矢印キーは別の機能を実行します。Shiftキーの有無に関わらず、次のレイヤーまたは前のレイヤーに移動し、レイヤー自体は移動しません。移動しているレイヤーを移動するには、Optionキー（Windows上ではAltキー）を押しながら矢印キーを押します。自由に配置されたレイヤーは1ピクセルずつ移動するか、Shiftキーで10ピクセル移動します。行、列、またはグリッドの一部であるレイヤーは、代わりに隣接するレイヤーと位置を交換します。上または左は前に移動し、下または右は後に移動します。エディタはスクリーンリーダーに移動の短い確認を送信します。

アートボードまたはレイヤーを選択した状態で、Cmd+D（Windows上ではCtrl+D）を押して複製し、DeleteキーまたはBackspaceキーを押して削除します。Cmd+Z（Windows上ではCtrl+Z）を押して元に戻します。エディタはこれらのそれぞれの短い確認をスクリーンリーダーに送信します。

選択範囲の上に浮かぶツールバーは、プロパティパネルが閉じている間のみ存在し、F6がそれに到達します。その中で、矢印キーはコントロール間を移動し、HomeキーとEndキーは最初と最後に移動し、Escapeキーはキャンバスに戻り、選択は保持されます。Tabキーで各コントロールにも到達できます。

Cmd+\（Windows上ではCtrl+\）でプロパティパネルを開き、フォーカスをそこに移動します。もう一度押すとパネルが閉じ、フォーカスはトップバーの「プロパティ」ボタンに戻ります。パネル内のカラー、フォント、その他のポップアップはそれらが開くときにフォーカスを取得し、Escapeキーでそれらを閉じます。テキストカラーを選択すると、カラーピッカーは背景に対するコントラストが良好か不良かを通知します。

プロパティパネルのレイヤーのリスト内：上矢印キーと下矢印キーは行間を移動し、右矢印キーは行を展開してその内部に移動し、左矢印キーはそれを折りたたんで移動し、Returnキーまたはスペースキーはキャンバス上のそのレイヤーを選択し、テキストレイヤーでもう一度Returnキーを押すと編集します。

現在の作業を失わずに別の方向を探索したい場合は、Claudeに「現在の内容を保存して、まったく異なるアプローチを試してください」と伝えてください。Claudeは現在のプロジェクトを保存し、保存場所を確認するので、会話内で以前のバージョンを簡単に参照できます。

デザインの準備ができたら、同僚と共有したり、他の場所で使用するためにエクスポートしたりできます。適切な形式は、ステークホルダーのフィードバックを得ているか、エンジニアリングに引き継いでいるか、グループに提示しているかなど、ユースケースによって異なります。

プロジェクトを表示しているときに、右上隅の「エクスポート」ボタンを使用して、以下のエクスポート形式から選択します。

デザインはデフォルトでプライベートです。共有するには、「共有」をクリックして、誰が開くことができるか、何ができるかを選択します。デザインを共有した人は、それを表示、コメント、または編集できます。アーティファクトの共有について詳しく学びます。

Claude Designは、Claudeの残りの部分と同じ使用制限にカウントされます。デザインアクティビティは、Claude Codeを含むClaudeでの他の作業と同じプールから引き出されるため、追跡する個別のClaude Design許容量はありません。大規模なコードベースまたは多くの反復を含む複雑なプロジェクトは、より多くの使用量を消費します。

使用制限に達した場合、制限がリセットされるまでClaude Designは利用できません。使用クレジットを有効にしている場合は、含まれている制限に達した後も作業を続けることができます。使用制限と長さの制限の仕組みについて詳しく学びます。

注意すべき点がいくつかあります: