Claude Design

画面には会話とキャンバスが並び、作りたいものを説明すると、Claude が会話の横のキャンバスに動作するデザインを生成します。アーティファクトを始めるときに選べるテンプレートの一つで、Claude Code との間で作業を同期したまま行き来できます。

参考資料は、プロジェクトの途中でいつでも添付できます。既存のデザイン、競合製品、ワイヤーフレーム、ビジュアルの参考になるもののスクリーンショットをアップロードできます。コードリポジトリをリンクすると、Claude が既存のコンポーネント、アーキテクチャ、スタイリングのパターンを把握します。情報が足りないときは、Claude から確認の質問をします。

デザインシステムは、Claude Code の /design-sync コマンドで、GitHub リポジトリ、デザインファイル、アップロードした素材、ローカルのコードベースから 1 つまたは複数取り込めます。/design-sync で取り込むと、Claude Design で作るものはすべて既存のコンポーネントから始まります。単体版の Claude Design で作ったデザインシステムも移行でき、移行したデザインシステムは、Claude Code を含むどのチャットでも Claude が使えます。

Claude Design と Claude Code の間は、作業を同期したまま行き来できます。デザインをソフトウェアにする段階になったら Claude Code に引き渡せます。Claude Code はスクリーンショットから作り直すのではなく、既存の作業の続きから進めます。

Claude Code では、デスクトップでもターミナルでも /design でデザインの作成・編集・同期ができます。/design を使うと、次の使い方ができます。

• デザインをコードベースに取り込む
• コードをライブのプロトタイプとして書き出す
• 最初から最後まで Claude に作らせる

プロジェクトを表示しているときに、右上の Export (書き出し) ボタンから書き出し形式を選べます。デザインの送り先には、Adobe Experience Manager、Adobe for Creativity、Adobe Journey Optimizer、Base44、Canva、Gamma、HubSpot、Hyperframes、Lovable、Miro、Netlify、Replit、v0、Vercel、Wix が含まれます。

デザインは、最初は作成者本人だけが見られる状態です。Share (共有) をクリックし、開ける人とその人ができる操作を選ぶと共有できます。共有された人は、閲覧、コメント、編集ができます。

Claude に、デザイン上の判断の説明、改善案の提案、アクセシビリティの観点からのレビューを頼めます。レビューの対象には、アクセシビリティ、コントラスト比、情報の階層、全般的な使いやすさが含まれます。今の作業を残したまま別の方向性を試したいときは、Claude に「Save what we have and try a completely different approach.」と伝えます。

エディタにも次の配慮があります。

• テキストの色を選ぶと、カラーピッカーが背景とのコントラストの良し悪しを示します。
• アートボードの中を移動すると、選択中の要素とその位置をエディタがスクリーンリーダーに伝えます。

キーボードでは次の操作ができます。

• F6 でエディタの次の領域へ、Shift+F6 で前の領域へ移動します。
• Tab でアートボードのタイトルまで進み、Space でアートボードを選択、Return でその中のレイヤーへ入ります。
• Option (Windows では Alt) を押しながら矢印キーを押すと、今いるレイヤーを移動します。
• Cmd+\ (Windows では Ctrl+\) でプロパティパネルを開き、フォーカスを移します。

デザイン作成の基本の流れは次のとおりです。

1. 会話、または Artifacts (アーティファクト) タブからデザインを始めます。
2. Claude に使わせたいデザインシステムを添付するか、取り込みます。
3. スクリーンショットやコードベースなど、関連するコンテキストを追加します。
4. 作りたいものを説明します。
5. Claude がキャンバスに生成したものを確認します。
6. チャットでの指示、キャンバス上での直接編集、インラインコメントのいずれかで仕上げていきます。
7. 結果に納得したら、書き出すか共有します。