プロトタイプとUXのためのClaudeの活用

機能のアイデアは、人々がクリックして試せる状態になっていると判断しやすくなります。Claude Designでは、会話の中で機能を説明するだけで、Claudeがチームが開いて試せるプロトタイプを構築します。Claudeがあなたのデザインシステムを把握していれば、製品の実際のボタンやフォームなど、あなた自身のコンポーネントからプロトタイプを構築します。

1. デザインを開始する

Claudeを使って作業している場所であれば、どこからでもデザインを開始できます。

• どの会話からでも： ウェブ版またはデスクトップアプリで、プロトタイプ、モックアップ、または一連の画面を依頼します。
• サイドバーから： Artifactsを開き、Make something newの下にあるDesignを選択し、開いた会話で希望する内容を説明します。
• Claude Code内、リポジトリの中で： 同じように依頼します。この場合、セクション3で説明するように、Claudeは製品のコードも読み取ることができます。

デザインは会話の横に、パンやズームができるキャンバス上で開きます。各画面は独自のアートボードに配置されます。デザインはArtifactsの下に保存され、共有するまで他の人は開くことができません。

2. 機能をプロトタイプ化する

依頼できるプロトタイプの種類と、試せるプロンプトをいくつか紹介します。

新しい機能

画面、そのセクション、そしてそれらの動作を説明します。

• 「私たちのSaaSアプリ向けに、アカウント、請求、通知、連携のセクションを持つ新しい設定ページをデザインしてください。サイドバーナビゲーションを含め、各セクションを展開可能にしてください。」
• 「フィルター、ファセット検索結果、そして結果をクリックすると右からスライドインする詳細パネルを備えた検索体験をプロトタイプ化してください。クリック可能にしてください。」
• 「マネージャーがキュー内の提出されたリクエストをレビューし、コメントし、承認または却下できる承認ワークフローUIを構築してください。」

デザインレビュー用の代替案

それぞれのアプローチを独自のアートボードに依頼してください。そうすれば、あなたとレビュアーが並べて比較できます。

• 「ユーザープロフィールページの3つの異なるレイアウトを見せてください。1つはカードベース、1つは左サイドバー付き、1つは上部タブナビゲーション付きです。それぞれを独自のアートボードに配置してください。」
• 「このチェックアウトフローの2つのバージョンを別々のアートボードに作成してください。1つはシングルページ、もう1つはマルチステップで、デザインレビューで比較できるようにしてください。」

フロー全体

ジャーニーをステップごとに説明します。

「無料プランから有料プランへのアップグレードを希望するユーザーのフローを描いてください。アップグレードのプロンプトが表示されるダッシュボードから始まり、プラン比較ページ、支払いフォーム、確認画面、そしてプレミアム機能が解放された更新後のダッシュボードまでを含めてください。」

社内ツールと管理パネル

Claude Designは、管理パネルやモデレーションキューのような社内ツールに適しています。画面が洗練される前に、人々はプロトタイプをクリックして試し、各ステップが機能するかどうかを確認できます。

「ユーザーアカウントを管理するための管理パネルをデザインしてください。プランの種類とステータスでフィルターできる検索可能なテーブルと、アカウント履歴を表示し権限を変更できる詳細ドロワーを含めてください。」

Claudeは、実際の価格設定など、すべての事実を把握しているとは限りません。Claudeはあなたに尋ねるか、仮定を置くことがあります。デザインを共有する前に、必ずClaudeの作業内容を確認し、詳細をチェックしてください。Claudeの出力を評価する方法について詳しくは、教育レポート人々はどのようにClaudeの作業を確認しているかをお読みください。

3. 自分のコンポーネントで構築する

Claudeは、製品がすでに使用しているのと同じボタンやフォームなど、実際のコンポーネントを使ってプロトタイプを構築できます。そうすることで、プロトタイプはエンジニアが構築するものと一致します。あなたのコンポーネントがない場合、Claudeは見た目が似ているだけの独自バージョンを描きます。

次のいずれかの方法で、製品に一致するプロトタイプを得ることができます。

• デザインシステムを設定する（推奨）： デザインシステムは、色、タイポグラフィ、コンポーネントをClaude内の1か所にまとめます。組織がデフォルトを設定すると、チームが開始するあらゆるデザインにClaudeがそれを使用します。Claudeでデザインシステムを設定するを参照してください。
• リポジトリ内のClaude Codeから作業する： プロジェクト内のClaude Codeセッションからデザインを依頼します。Claudeはコードを読み取り、製品がすでに使用している色、タイポグラフィ、間隔を把握できます。これにはセットアップは不要です。

どちらを選んでも、次の習慣が役立ちます。

• プロンプトでコンポーネント名を指定する： 「ProductCardコンポーネントを使ってください」や「設定ページと同じレイアウトに従ってください」のように伝えると、Claudeはどれを使うべきか分かります。
• インターフェースのコードをClaudeに示す： 大規模なリポジトリでは、どのパッケージやフォルダにコンポーネントがあるかをClaudeに伝えます。
• コンポーネントを変更するには、Claudeに依頼する： 実際のコンポーネントは、コード内にあるのとまったく同じ形でアートボード上に表示されます。
• ライブラリが変更されたら更新する： コードから同期されたデザインシステムは、最後に同期した時点のコンポーネントのコピーを保持します。リリース後は再度同期してください。

4. アートボード上で調整する

デザインは自分で変更することも、Claudeにコメントを残すことも、会話の中で依頼することもできます。変更は行うたびに保存されるため、保存ボタンはありません。

• 手動で： 要素をクリックして選択し、テキストをダブルクリックして入力し直し、ドラッグして移動します。ツールバーを使って、テキスト、メモ、図形、新しいアートボードを追加します。Propertiesには、選択した要素の設定が表示されます。
• コメントで： 1つの要素を変更するには、コメントをオンにし、その要素をクリックし、希望する内容を書き、Send to Claudeにチェックを入れたままにします。Claudeが変更を行い、コメントスレッドで返信します。
• 依頼して： 新しい状態や別の代替案など、より大きな変更については、会話の中で依頼します。

例えば：「このページが空の状態、エラー状態、読み込み中の状態をどのように扱うかを見せてください。それぞれを現在のものの隣にある独自のアートボードに配置してください。」

5. チームでレビューする

Shareを使うと、誰がデザインを開けるか、そして閲覧、コメント、編集のどれができるかを選べます。招待する相手にはClaudeアカウントが必要です。各プランでのオプションについては、ヘルプセンターのアーティファクトを共有するを参照してください。

各人ができることは、付与するアクセス権によって異なります。

• 閲覧可能： デザインを開き、任意の要素をクリックしてサイズ、間隔、色を確認し、Playでクリック可能なアートボードを実行できます。何も変更することはできません。
• コメント可能： 上記に加えて、クリックした要素にコメントできます。
• 編集可能： 自分でデザインを変更し、キャンバスにメモを追加できます。組織内で編集権限を持つ人は、Claudeへのリクエストとしてコメントを送ることもできます。

編集権限を持つ人は同時にキャンバス上で作業でき、お互いの変更がリアルタイムで見えます。

TeamおよびEnterpriseプランでは、組織のオーナーが組織外への共有を許可するかどうかを決定します。リンクを開けない相手には、Exportを使用してください。エクスポートできるのは次の通りです。

• 1つのアートボードをPNG、PDF、またはHTML（.zip）ファイルとして
• プロトタイプ全体を1つのウェブページ（HTML）として、Share > Exportから
• すべてのアートボードを1つのPDFに

6. Claude Codeで続ける

Claude Codeは、Claude Designで作成されたプロトタイプを開くことができます。これにより、エンジニアはスクリーンショットからではなく、実際のアートボードとその中のコンポーネントから構築できます。

• Claude Codeでデザインした場合： 同じセッションにとどまり、Claudeに構築を依頼します。後で戻る場合は、Artifactsからデザインを開き、Shareの隣にあるボタンを使って、それを作成したセッションを再度開きます。
• 他の場所でデザインした場合： エンジニアにデザインの編集権限を付与します。Claude Code内、リポジトリの中で、エンジニアはデザインのリンクを貼り付け、Claudeに実装を依頼します。

構築を始める前に

いくつかのステップを踏むことで、デザインから構築しやすくなります。

• アートボードとコンポーネントに分かりやすい名前を付ける： Claude Codeはデザイン内のそれらの名前を読み取ります。
• 決定事項はその都度書き留める： サイドバーではなくタブを選んだ場合は、その理由をアートボード上のメモに書いておき、Claude Codeがそれを読み取れるようにします。
• まず空の状態、エラー状態、読み込み中の状態を依頼する： また、データが非常に少ない場合や、想定よりはるかに多い場合に画面がどう振る舞うかも尋ねてください。

7. アイデアから実装までの例

1. PMが機能を説明する、会話の中で。それはフィルタリングと一括操作を備えた通知センターです。
2. Claudeが最初のプロトタイプを構築する、組織のデザインシステムから。そしてデザイナーがアートボード上でそれを調整します。
3. PMがデザインを共有する、非同期レビューのために。そしてチームがプロトタイプを再生し、コメントします。
4. エンジニアがClaude Codeでデザインを開き、Claudeに実装を依頼します。

何かおかしいと感じたら

その他のリソース

• プレゼンテーション向けのClaudeでスライドとプレゼンテーションを作成する。
• デザインが自分のコンポーネントとタイポグラフィを使用するようにするためのClaudeでデザインシステムを設定する。
• デザインがチームとどのように共有・編集されるかについてのClaudeアーティファクトでチームと共同作業する。
• さらなるサポートとトラブルシューティングについては、ヘルプセンターをご覧ください。