Claude Code セミナー デザイン編で「Claude Design × Claude Code × Figma で "見せて決める" 要件定義」について登壇しました
リテールアプリ共創部のるおんです。
2026/04/21 Claude Code セミナー デザイン編にて「"見せて決める"要件定義 — Claude Design × Claude Code × Figma」というタイトルで登壇しました。
登壇資料
概要
今回のセミナーでは、要件定義フェーズにおける AI ツールの組み合わせ をテーマにお話ししました。
具体的には、2026/04/17 に Research Preview として発表されたばかりの Claude Design と、Claude Code 、Figma の 3 つのツールを 役割で使い分ける ことで、顧客との要件定義を「言葉の空中戦」から「見せて決める」ものに変える、という内容です。
登壇では主に以下の内容をお話ししました。
- 要件定義の痛み（言葉だけの要件が空中戦になる問題）
- Claude Design / Claude Code / Figma の 3 つの役割
- 実演：架空のスペシャルティコーヒー店
Kumo Coffeeのモバイルオーダー 5 画面を、ふわっとした 1 行のプロンプトから Figma まで送るまで - 役割の変化（PM・エンジニアが 0 → 1、デザイナーが 1 → 10）
- 新規 / 既存プロジェクト別のコンテキスト投入の使いこなし
特にお伝えしたかったポイントは、AI を使いこなして空中戦にならない要件定義をしよう。ただし、大事なのはツールではなく、"その時の最新で効率化し続ける姿勢" である という点です。
先にまとめ
3 つのツールを役割で使い分けることで、要件定義の同じ会議の中で "動くプロトタイプ" と "Figma デザイン" まで到達できる 、というのが今回の主張です。
| フェーズ | ツール | 役割 |
|---|---|---|
| 発散 / 試作 | Claude Design | 自然言語から複数案のプロトタイプを生成 |
| 収束 / 実装 | Claude Code | Next.js / React で動くアプリにし、ホスティングして触ってもらう |
| 合意 / 磨き | Figma | 顧客と触りながら磨き込む共通の場、デザイナーとの協働の場 |
要件定義の痛みと理想
言葉で決めた要件は、ほぼ確実に空中戦になる
要件定義をやっていると、「思ってたのと違う」を 実装後 に言われるという経験、みなさんもあるのではないでしょうか。
- 顧客・PM・デザイナー・エンジニアが それぞれ別の絵 を脳内で描いている
- 議事録は文字。画面はまだ無い
- 認識ズレは、下流で必ず手戻り になる
以前「全てのコンテキストを集約し真の仕様駆動を実現。プロジェクト全体の開発を高速化する方法」でもお話ししましたが、AI 時代の開発では 上流工程 がますます重要になっています。コードはもはや速く書ける。ボトルネックは "何を作るか" の合意形成 に移っています。
見せて、触って、その場で決める
言葉で決まらないなら、最初から画面を出せばいい 。
- 動くプロトタイプ ：文字や言葉よりも、画面を触ったほうが速く正確に共有できる
- 同じ画面を全員で見る ：顧客・PM・デザイナー・エンジニアが同じ絵を指して話せる
- AI で実現可能になった ：「動く現物」を会議中に作って出せる速度に、いま来ている
ここで出番になるのが、Claude Design / Claude Code / Figma の 3 つです。
3 つの道具
Claude Design
- Launched: 2026.04.17
- Anthropic が出した 会話型のデザインスタジオ
- Claude Opus 4.7ベース
- Research Preview としてweb版で提供（登壇時点）
自然言語で要件を投げると、複数案のプロトタイプ をブラウザ上で生成してくれます。ブランド名・配色・メニュー項目まで Claude 側が勝手に決めてくれるため、ゼロ入力でも "それっぽいもの" が出てきます。
Claude Code
- Since: 2025.02
- ターミナル上で動く コーディングエージェント
- CLI / VS Code / JetBrains などから利用可能
Claude Design から受け取ったデザインを、Next.js / React の動くアプリ に落としてくれるのが今回の役割です。大規模コードの理解と修正が得意で、プロトタイプ実装だけでなく本番開発でも主力として使っています。
Figma
- Since: 2016
- ブラウザで動く デザインコラボツール
- 今回は 中間成果物の場 として位置づけ
Figma MCPが公開されたことで、ローカルで動いている UI をそのまま Figma に送信できる ようになりました。これにより、デザイナーはスクショや仕様書を起点に作業するのではなく、エンジニアが 0 → 1 したプロトタイプを起点に 1 → 10 を作る 動き方ができるようになります。
3 つの役割
| ツール | 役割 | 内容 |
|---|---|---|
| Claude Design | 発想 | 最初の発散。要件をデザインに落とす |
| Claude Code | プロトタイプ実装 | 実際に動くプロトタイプをつくる |
| Figma | 中間成果物 | デザイナーと磨き込み、顧客への最終成果物に |
ツール間の受け渡し
3 つを一本で繋げるのが、以下 2 つの受け渡し機能です。
| from → to | 受け渡し方法 |
|---|---|
| Claude Design → Claude Code | Handoff（デザイン URL + README の自動プロンプト化） |
| Claude Code → Figma | Figma MCP（.fig ファイルではなく、実行 UI のキャプチャ送信） |
実演：Kumo Coffee を 20 分で作る
登壇では、架空のスペシャルティコーヒー店 Kumo Coffee のモバイルオーダー 5 画面（Home / Detail / Cart / Payment / Status）を、ふわっと 1 行のプロンプト から Figma まで送るところをお見せしました。
STEP 01 : Claude Design へふわっと投げる
ブランドガイドラインもロゴも無し。渡したのはこれだけです。
スペシャルティコーヒー店の
モバイルオーダーアプリを作って。
Home / Detail / Cart / Payment / Status の
5 画面フローで。
結果、約 5 分で 3 パターン のプロトタイプが上がってきました。ブランド名 Kumo Coffee も、配色も、メニュー項目（シングルオリジン、エスプレッソ、カヌレなど）も Claude が勝手に決めてくれる のが面白いところです。
STEP 02 : Handoff to Claude Code
Claude Design 画面の Share ボタンから 「Handoff to Claude Code」 を押すと、プロンプトがクリップボードにコピーされます。中身はこんな感じです。
$ claude
# 貼り付けたプロンプト ↓
Fetch this design file, read its readme,
and implement the relevant aspects of the design.
https://api.anthropic.com/v1/design/h/xxxxx...xxxxx.html
Implement: このモバイルオーダーアプリのプロトタイプを作って欲しいので、
各ページを作成して欲しい。
Design URL とやってほしいこと が 1 つのプロンプトに収まっているので、ターミナルで claude にそのまま貼るだけで実装が始まります。
STEP 03 : Claude Code が Next.jsで動くアプリケーション化
Claude Code が受け取って、自動で Next.js プロジェクトを初期化します。App Router で画面ごとにルートが切られ、5 画面 + 共通コンポーネントで約 10〜15 分 でコードが出来上がりました。
kumo-coffee-prototype/
├── app/
│ ├── cart/
│ ├── detail/
│ ├── home/
│ ├── payment/
│ ├── status/
│ ├── layout.tsx
│ └── page.tsx
├── features/order/
├── AGENTS.md
├── CLAUDE.md
└── next.config.ts
そのまま npm run dev で立ち上がり、ブラウザで開けばすぐ触れるプロトタイプ になります。お客さんと画面共有しながら、タップして動かして、その場で違和感を拾える 状態です。
ちなみに、この時に生成された実装が想像以上にモダンでした。
STEP 04 : localhost → Figma
動いているプロトタイプを、今度は Figma に送ります。Claude Code に自然言語で指示するだけです。
http://localhost:3000/ を
Figma に送信してください
裏で Figma MCP の generate_figma_design が呼ばれ、実行 UI のキャプチャ が 編集可能な Figma レイヤー として新規フレームに配置されます。
Figma MCP セットアップの補足
何が変わったか
お客さんと「見せて決める」ができるようになった
一番大きな変化は、顧客との対話の質 です。
| # | ポイント | 内容 |
|---|---|---|
| 01 | 口頭で伝わらないものが、その場で絵になる | 「こういう感じ」を文章ではなく画面で確認。読み違いが起きない |
| 02 | 違和感は "触って" 初めて分かる | 動くプロトタイプなら、お客さん自身がタップして気づきを出せる |
| 03 | その場で直し、その場で再合意 | 「じゃあこうしましょう」を持ち帰らず、会議の中で確定できる |
Cacoo や Figma で静的なワイヤーフレームを作っていた頃と比べると、要件の解像度が一気に上がる 感覚があります。
役割の変化：0 → 1 と 1 → 10
もうひとつの大きな変化は、PM・エンジニア・デザイナーの役割の境界 です。
| 役割 | 変化 | 内容 |
|---|---|---|
| PM・エンジニア | 0 → 1 |
要求を AI に投げて、プロトタイプと Figma 送信までを自分で回す。ゼロから "形" を生み出すところまで踏み込める |
| デザイナー | 1 → 10 |
出てきた Figma をそのまま磨き込み、納品品質に仕上げる。白紙作業から解放され、磨き込みと判断に集中できる |
これまでデザイナーが担っていた "0 → 1 の白紙作業" を、AI が肩代わりしてくれるようになりました。その分、デザイナーは "1 → 10 の磨き込みと判断" に集中できます。
PM・エンジニア側も、「デザインはデザイナーにお願いするもの」という前提から一歩踏み込んで、たたき台を自分で出して議論の起点を作る 動き方ができるようになっています。
一番伝えたかったこと
今日の話を一言にすると、こうです。
AI を使いこなして、空中戦にならない要件定義をしよう。
ただし、今日紹介したツールは、半年後には古くなっているかもしれません 。Claude Design も発表 4 日前、Figma MCP もつい最近のもの。このブログが出る頃には、もっと良い組み合わせが出ている可能性も普通にあります。
だから大事なのは、特定のツール ではなく、その時の最新で効率化し続ける姿勢 だと思っています。
AI が変えたのはコードを書く速度だけではなく、"何を作るか" の合意形成のやり方 そのものです。ここに追従し続けられるかどうかで、この先のエンジニア / PM / デザイナーの仕事の形は大きく変わっていくんじゃないかと感じています。
おわりに
Claude Code セミナー デザイン編で登壇する機会をいただきありがとうございました。
登壇準備をしていた 4 日前 に Claude Design が発表され、急きょ構成を差し替えたのは焦りました。が、結果として「ついさっき出たばかりの機能を、実案件を想定した文脈で触って話す」という、セミナーとしては一番面白い形にできたのではないかと思っています。
AI × 要件定義 はまだまだ模索中の領域ですが、「画面を見せて決める」というアプローチが当たり前になる日は思ったより近いです。今回紹介した 3 ツールの使い分けが、みなさんのプロジェクトの参考になれば嬉しいです。
以上、どなたかの参考になれば幸いです。
お知らせ
クラスメソッドのリテールアプリ共創部 ビルドチーム ではエンジニアを募集しています。
Claude Code や Cursor などの AI エージェントを業務に組み込み、プロジェクトの立ち上げから本番開発までを高速に回しているチームです。AI 駆動開発・プリセールス・顧客折衝・要件定義までフルスタックに踏み込んでみたい方は、ぜひ以下をご覧ください。
参考
