アイデアを「触れるプロトタイプ」に:Claude DesignのUX・プロダクトデザイン活用ガイド
「この機能、作る価値あるかな?」——エンジニアリングのリソースを投入する前に、アイデアを触れる形にして確かめたい。そんなプロダクトデザイナーとPMのために、Anthropic Labsが提供しているのがClaude Designです。公式チュートリアルに、コンセプトから動くプロトタイプ、さらにClaude Codeへの実装引き継ぎまでのワークフローがまとまっていたので、整理します。
4つのプロダクトデザイン・ワークフロー
① 機能の高速プロトタイピング。最も一般的な使い方です。機能のアイデアを、1つの会話の中でインタラクティブなプロトタイプに変えられます。プロンプト例を見ると粒度が分かります。
「SaaSアプリの新しい設定ページをデザインして。アカウント・請求・通知・連携のセクション、サイドバーナビ付き、各セクションは展開可能に」 「新規ユーザーのオンボーディングフローを。データソース接続 → 最初のダッシュボード設定 → チームメイト招待を案内する5画面」 「フィルタ、ファセット付き検索結果、クリックで右からスライドインする詳細パネルを持つ検索体験をプロトタイプして」
② デザインレビューとステークホルダー調整。関係者は「見て触れるもの」があるほうが判断しやすいもの。Claude Designは十分に速いので、2〜3案を生成して並べて見せることができます。「プロフィールページのレイアウトを3種類——カード型、左サイドバー型、上部タブ型で」「このチェックアウトフローを1ページ完結型とマルチステップウィザード型の2バージョンで、デザインレビューで比較できるように」。
③ ユーザーフローのマッピング。単一画面ではなく、ジャーニー全体をプロトタイプ化できます。「無料プランから有料プランへのアップグレードフローを。アップグレード訴求が出るダッシュボードから、プラン比較ページ、決済フォーム、確認画面、プレミアム機能が解放されたダッシュボードまで」。
④ 社内ツールと管理画面。管理ダッシュボード、コンテンツモデレーション、オペレーション用ワークフロー——ピクセルの完璧さよりスピードが重要な領域は、Claude Designの得意分野です。「ユーザーアカウント管理パネルを。プラン種別とステータスでフィルタできる検索可能なテーブル、アカウント履歴の表示と権限変更ができる詳細ドロワー付き」といった具合です。
コードベース接続:ここから本領発揮
プロダクトチームにとって、Claude Designが大きく化けるのがコードベースの接続です。汎用的なプロトタイプではなく、自社の実際のコンポーネント・スタイリング・アーキテクチャを使ったデザインが生成されるようになります。
効果は3つ。
①プロトタイプが実在のコンポーネントで作られる——引き継ぎ時に「良いデザインだけど、うちにそのコンポーネントないよ」が起きない。
②アーキテクチャの一貫性——CSS Modules、Tailwind、styled-componentsなどのスタイリングパターン、スペーシング、カラーシステム、レイアウト慣習を分析し、新しいデザインが既存の出荷済みUIと揃う。
③引き継ぎの高速化——プロトタイプがすでに自社のパターンで組まれているため、「プロトタイプ」と「出荷可能なコード」の距離が劇的に縮まる。
接続はImportボタンから、GitHubインポートまたはローカルディレクトリの添付で行います。リンク後はコンポーネントを名前で参照できます——「ProductCardコンポーネントを使って」「設定ページと同じレイアウトパターンで」。Claudeはコンポーネント構造、スタイリングとテーマ、フレームワークのパターン(状態管理、フック、データフロー)、ファイル構成を理解します。
パフォーマンス上の注意もあります。巨大リポジトリのリンクはラグやブラウザの不安定化を招くため、モノレポや100人以上が開発するコードベースでは、リポジトリ全体ではなく関連コンポーネントを含むパッケージ/ディレクトリだけをリンクするのが推奨。Chromeは巨大なファイルツリーの添付が苦手なので、.gitフォルダやnode_modules/を含めないようフォルダ単位で添付します。
Claude Codeへのハンドオフ
プロトタイプが実装段階に進んだら、「Export」→「Hand off to Claude Code」。デザインファイル、チャット履歴、デザインの解釈方法をモデルに伝えるREADMEがバンドルされ、ローカルのClaude Code(または任意のコーディングエージェント)に貼るだけのプロンプトが発行されます。Claude Code Webへのハンドオフも選べます。
これが特に効くのはコードベースをリンクしている場合で、Claude Codeはプロトタイプが使ったコンポーネントとパターンをすでに理解しています。チュートリアルにはデザインリードの声として、デザイン意図を含めたハンドオフによってプロトタイプから本番実装への移行が非常にスムーズになった、という趣旨のコメントが紹介されています。
きれいにハンドオフする3つのコツ:
名前を明確に:デザイン会話の中でコンポーネントを特定の名前で呼んでいれば、その名前がハンドオフまで引き継がれる
判断をチャットに記録する:「全セクションを一覧できる必要があるからサイドバーではなくタブにした」のような理由付けが、そのまま実装時のコンテキストになる
エッジケースを先に出させる:引き継ぎ前に、空の状態・エラー状態・ローディング状態・データ量の違いをデザインでどう扱うかをClaudeに見せてもらう。エンジニアリングに渡る絵が完全になる
エンドツーエンドの流れ:8ステップ
チュートリアルの締めに、プロダクトチームがアイデアから実装まで使う流れが8ステップで示されています。
PMが新機能のプロンプトを書く(例:設定・フィルタ・一括操作を持つ通知センター)
Claudeが組織のデザインシステムとリンク済みコンポーネントで初期プロトタイプを生成
デザイナーがインラインコメントとチャットで反復——レイアウト調整、インタラクション改善、アクセシビリティ確認
PMがリンクを共有し、非同期のデザインレビューへ
チームで議論し、うまくいっていない箇所はClaudeが代替案を生成
デザインリードが、実在のコンポーネントとパターンが正しく使われているかを検証
Claude Codeへハンドオフ——プロトタイプ、デザイン判断、コードベースのコンテキストがエンジニアリングへ移動
エンジニアはゼロからではなく、プロトタイプを起点に実装を開始
まとめ
Claude Designの価値は「絵が速く描ける」ことではなく、プロトタイプと本番コードの断絶をなくすことにあります。コードベースを接続すれば最初から実在コンポーネントでデザインされ、ハンドオフではデザイン判断の理由ごとエンジニアに渡る——「デザイナーの意図をエンジニアが再解釈する」という伝統的なロスが構造的に消える設計です。エンジニアリソースの限られたチームこそ、「作る前に触って検証する」文化への入口として試す価値があると思います。
INNOOV株式会社について
この記事は、AtlassianやIntercomなどのSaaS導入支援と、AIを活用した業務プロセス改善を行うINNOOV株式会社がお届けしました。「自社でもこんな仕組みを作ってみたい」「ツール導入を相談したい」という方は、お気軽にお問い合わせください。