「見せて決める」要件定義 Claude Design × Claude Code × Figma

Claude Codeセミナー 初級編｜今からはじめるClaude Codeでの登壇内容です

https://classmethod.jp/seminar/260227-claude-code-webinar/

Transcript

1. 「見せて決める」要件定義 Claude Design × Claude Code × Figma 2026.04.21 Claude Code セミナー デザイン編 クラスメソッド株式会社 リテールアプリ共創部 高垣 龍平
3. 問いかけ 2 Question プロジェクトの最初、 顧客からもらった ふわっとした 要望 を、 あなたは、どう要件に落とし込みますか？ 議事録？ 箇条書き？ ホワイトボードの写真？ — その"最初の一歩"を、今日の主題にします。
4. 今日お話しすること 3 Agenda 01 課題と理想 02 3 つの道具 03 実演：要求 → デザイン → プロトタイプ → Figma 04 何が変わったか 05 使いこなしの Tips 06 まとめ
5. Section 01 課題と理想
6. 要件定義の痛み 5 The Problem 言葉で決めた要件は、 ほぼ確実に 空中戦 になる。 「思ってたのと違う」 を実装後に言われる。 顧客・PM・デザイナー・エンジニアが それぞれ別の絵を脳内で描いている 議事録は文字。画面はまだ無い 認識ズレは、下流で必ず手戻りになる
7. 理想 6 The Ideal 見せて、触って、 その場で決める。 01 動くプロトタイプ 文字や言葉よりも、画面を触ったほうが速く正 確に共有できる。 02 同じ画面を 全員で見る 顧客・PM・デザイナー・エンジニアが同じ絵 を指して話せる。 03 AI で 実現可能になった 「動く現物」を会議中に作って出せる速度に、 いま来ている。
8. 今日の結論 7 Today's Takeaway AIツール を活用して、 顧客に 魅せられるもの をその場で作る。 発散 / 試作 Claude Design 自然言語から複数案のプロトタイプを生成 収束 / 実装 Claude Code Next.js / React で動くアプリにする ホスティング して触ってもらう 合意 / 磨き Figma 顧客と触りながら磨き込む共通の場 デザイナー との協働の場
9. Section 02 3 つの道具
10. Claude Design とは 9 What is Claude Design Launched / 2026 . 04 . 17 Anthropic が出した 会話型の デザイ ンスタジオ。 Model Claude Opus 4.7 — 視覚認識強化 Plan Pro / Max / Team / Enterprise Status Research Preview URL claude.ai/design
11. Claude Code とは 10 What is Claude Code Since / 2025 . 02 ターミナル上で動く コーディング エージ ェント。 Model Claude Sonnet / Opus Interface CLI / VS Code / JetBrains Plan Pro / Max / Team / Enterprise Strength 大規模コード理解と修正 Terminal · ~/kumo-coffee-prototype
12. Figma とは 11 What is Figma Since / 2016 ブラウザで動く デザインコラボ ツール。 Role 合意形成と磨き込みの場 Users デザイナー / PM / エンジニア MCP Code to Canvas で連携 URL figma.com Figma · KumoCoffeeApp / モバイルオーダー
13. 3 つの役割 12 Their Roles 3 つのツールは、 それぞれ 違う役割 を担う。 Claude Design 発想 最初の発散。要件を デザインに落とす。 Claude Code プロトタイプ実装 実際に動くプロトタイプを つくる。 Figma 中間成果物 デザイナーと磨き込み、 顧客への最終成果物に。
14. 今回の発表について 13 Originally... 本当はこの 2 つだけの話の予定でした。 今回の元々の範囲 Claude Design 発想 最初の発散。要件を デ ザインに落とす。 Claude Code プロトタイプ実装 実際に動くプロトタイプを つ くる。 Figma 中間成果物 デザイナーと磨き込み、 顧 客への最終成果物に。 4 日前 Claude Design が 4月17日に発表され、 急きょ Claude Design まで含めた 3 点構成に。
15. 受け渡し 14 Handoff Between Tools ツール間の 受け渡し で、 発想からFigmaデザインまで一本で繋ぐ。 Handoff .fig ファイル Figma MCP Claude Design 発想 最初の発散。要件を デザインに落とす。 Claude Code プロトタイプ実装 実際に動くプロトタイプを つくる。 Figma 中間成果物 デザイナーと磨き込み、 顧客への最終成果物に。 ↑
16. Section 03 実演：要求 → デザイン → プロトタイプ → Figma
17. 実演のお題 16 Live Demo / Recorded Backup Kumo Coffee. 架空のスペシャルティコーヒー店の モバイルオーダー 5 画 面。 Home / Detail / Cart / Payment / Status — これを 「ふ わっと」指示するところから始める。 home detail cart payment status …
18. STEP 01 / Claude Design へ投げる 17 01 ふわっと、1 行で投げる。 ブランドガイドラインもロゴも無し。 「スペシャルティコー ヒー店のモバイルオーダー、5 画面」程度で十分。 Prompt スペシャルティコーヒー店の モバイルオーダーアプリを作って。 Home / Detail / Cart / Payment / Status の 5 画面フローで。 結果: ブランド名「Kumo Coffee」も、配色も、メニュー項目も Claude が勝手に決 めてくれる 。約 5 分で 3 パターン。 claude.ai/design — 3 options generated
19. STEP 02 / Handoff to Claude Code 18 02 ワンクリックで、 実装に渡る。 Claude Design 画面のShareボタンから「 Handoff to Claude Code 」 を押すと、プロンプトがコピーされる。そのままターミナルで claude に貼り付けて投げる。 Design URL と README、やってほしいことが1つのプロンプトに収まっている。 Claude Code 側は内容を Fetch して、そのまま実装を始める。 Terminal · claude にそのまま貼り付け $ claude # 貼り付けたプロンプト ↓ Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/xxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.html Implement: このモバイルオーダーアプリの プロトタイプを作って欲しいので、 各ページを作成して欲しい。
20. STEP 03 / Claude Code が Next.js 化 19 03 裏で、Next.js のコードに 落ちていく。 Claude Code が受け取って、自動で Next.js プロジェクトを初期化 。 App Router（app/）で画面ごとにルートが切られる。 5 画面 + 共通コンポーネントで、約 10〜15 分。 kumo-coffee-prototype/ ├── .claude/ ├── .next/ ├── app/ │ ├── cart/ │ ├── detail/ │ ├── home/ │ ├── payment/ │ ├── status/ │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── features/ order/ ├── node_modules/ ├── public/ ├── AGENTS.md ├── CLAUDE.md └── next.config.ts
21. STEP 03 / localhost:3000 で起動 20 03 実際に動く。 ブラウ ザで触れる。 Claude Code がそのまま npm run dev を立ち上げて、 ブラウザ で開けばすぐ触れるプロトタイプになる。 お客さんと画面共有しながら、タップして動かして、 その場で違和感を拾える 。 Browser http://localhost:3000 → Home / Detail / Cart / Payment / Status localhost:3000 · iPhone 12 Pro (390×844) で表示
22. STEP 04 / localhost → Figma 21 04 動いている UI を、 そ のまま Figma へ。 Claude Code に自然言語で送信指示。裏で Figma の MCP ( generate_figma_design) が呼ばれる。 Prompt to Claude Code http://localhost:3000/ を Figma に送信してください コードの貼り付けではなく、実行 UI のキャプチャ を編集可能な Figma レイヤーに 写像する。 Figma — new frame appeared (2314-2)
23. 補足 / Figma MCP セットアップ 22 Supplement · Setup Figma MCP を Claude Code に つなぐ 2 通りの方法。 Recommended 公式プラグイン MCP 設定 + 定番ワークフロー用 Agent Skills が入る。迷ったらこちら。 $ claude plugin install figma@claude-plugins-official Anthropic 公式プラグインマーケットプレイスから導入。 Manual 手動で MCP を追加 細かく制御したい人向け。ユーザースコープで全プロジェクトに効かせる。 $ claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp --scope user を外すと現プロジェクトのみ。 1 Claude Code を再起動 2 /mcp → figma → Authenticate 3 ブラウザで Allow access 4 Connected to figma が出れば OK 詳細は公式ドキュメント「Enabling the Remote MCP Server」を参照。 他クライアント (Codex / Cursor / VS Code) も同じサーバーに接続できる。
24. この後のフェーズ 23 Next Phase · To Production ここまでが要件定義。 この後、本番開発 が始まる。 要件定義フェーズ Claude Design 発想 Claude Code プロトタイプ実装 Figma 中間成果物 Handoff 本番開発フェーズ 01 本番リポジトリへの実装 Claude Code でデザインシステムの コンポーネントに置き換え実装。 02 リリース / 計測 本番投入し、実ユーザーの行動を 計測。次の要件定義へ還流。
25. Section 04 何が変わったか
26. お客さんと合わせる 25 Alignment with Customers 「見せて決める」が、 お客さんの前で できる ようになった。 プロトタイプや Figma デザインを一緒に開いて、 「ああでもない、こうでもない」 と話しながら 要件の認識を合わせられる。 01 口頭で伝わらないものが、その場で絵になる 「こういう感じ」を文章ではなく画面で確認。読み違いが起きない。 02 違和感は "触って" 初めて分かる 動くプロトタイプなら、お客さん自身がタップして気づきを出せる。 03 その場で直し、その場で再合意 「じゃあこうしましょう」を持ち帰らず、会議の中で確定できる。
27. 役割の変化 26 Role Shift PM・エンジニアが 0 → 1、 デザイナーが 1 → 10。 PM・エンジニア 0 → 1 要求を AI に投げて、プロトタイプと Figma への送信までを自分で回す 。 ゼロから "形" を生み出すところまで踏み込める。 デザイナー 1 → 10 出てきた Figma をそのまま磨き込み、納品品質に仕上げる。 白紙作業から 解放され、磨き込みと判断に集中できる。
28. Section 05 使いこなしの Tips
29. 使いこなしの Tips 28 Tips for Real Projects プロジェクトに合わせて、 コンテキスト を足す。 新規プロジェクト ブランドガイドラインを、 最初に食わせる。 入力なしだと Anthropic 臭（和モダン × セリフ体 × ウォーム） に寄る。自社の文脈を先に渡して、"Claude の提案" を "自社の 提案" に変える。 業界・ユースケース・ターゲット ブランドカラー / ロゴ / タイポグラフィ 参考になる既存サービスの URL 既存プロジェクト 既存コードベースや Figma ファイルを、渡す。 既存の UI 文法に寄せたい場合は、リポジトリや Figma ファイ ルごとコンテキストとして読み込ませる。既存に馴染む提案に なる。 既存リポジトリのコード Figma ファイル / デザインシステム 既存画面のスクショ
30. Section 06 まとめ
31. まとめ 30 Summary 今日の話を、 3 つ に畳む。 01 要件定義を、 "見せて決める" に。 言葉だけの要件は空中戦になる。 最初から動く画面で 議論することで、 顧客・PM・デザイナー・エンジニア の 目線が揃う。 02 3 つのツールを、 役割で組み合わせる。 Claude Design 発想 Claude Code プロトタイプ実装 Figma 中間成果物 ― 適材適所で切り分ける。 03 何が変わったか。 顧客・PM・デザイナー・エンジニアの 目線が最初から 揃う。 役割は "0 → 1" から "1 → 10" へ。 議論の中心 が、言葉から画面に移る。
32. 一番伝えたいこと 31 One Message AI を使いこなして、 空中戦にならない 要件定義をし よう。 ただし — 今日紹介したツールは、半年後には古くなっている かもしれません。 大事なのは 特定のツール ではなく、その時の最新で効 率化し続ける姿勢。
33. ご清聴ありがとうございました。