UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-

Transcript

1. Qiita Bash | DESIGN × AI NOTE UI生成の鍵は要件整理 デザインプロセスのエッセンスを プロンプト作成に取り入れよう

   都村 美帆 — Miho Tsumura

2. § はじめに BUT ON THE GROUND… SNSを開くと、 「AIでこんなにできる！」と驚きの声が毎日流れてくる。 @ai_native_pm ·

   6h AI Native PM Vibe Builder @vibe_builder · 2h @shipping_solo · 1d Shipping Solo P S V 30分で出来ました」 ダッシュボード一式、 「プロンプト3行で ぜんぶAIが書いた。」 コードも画面も 「一晩でMVP。 「AIにポン出しで アプリが丸ごと完成した 🔥 もうデザイナー要らない説」 ▸ ready on :3000 $ npm run dev ✓ 14 files written → generating components... → scaffolding routes... $ claude build --from spec.md • 💬 480 🔁 3.2k ♡ 22k 14.2k 💬 1.1k 🔁 6.8k ♡ 54k 38k 💬 212 🔁 1.4k ♡ 8.9k 91k

3. §0 はじめに BUT ON THE GROUND… SNSの例と実務で使えるレベルには大きな距離がある

4. § ABOUT THE SPEAKER 自己紹介 都村 美帆 / Miho Tsumura

   @tsumu_design JOB CERT. NOW SCOPE MAKES UIUX ／ サービスデザイン HCD-Net 人間中心設計専門家 デザイン × AI の現場実践 新規事業の立ち上げ支援／既存プロダクトのUI・UX改善 Figma プラグイン・日本語 WF キット・skill 開発

5. WFからUI、デザインシステムまで、 試したツール一覧 機密情報 § 実務導入の難しさ WHAT I TRIED UI TOOLS

   TESTED — 5+ Figma Make FM Stitch ST v0 v0 Claude Design CD Figma MCP × Claude Code MCP などなど… Figma Make×Figma MCP×Claude Code ワイヤーフレームキットを作成・公開

6. § 実務導入の難しさ WHY DIFFICULT “思っていたのとは違う” その理由の一例 INFO & FUNCTION ユーザーの特性・

   利用シーンとかけ離れた 情報設計 VISUAL QUALITY デザインシステムを無視 した一貫性のない トーン&コンポーネント BRAND & BUSINESS ブランド・ビジネス目標 に適さないライティング

7. § 実務導入の難しさ THE RATIO, FROM THE FIELD ツールを使い倒して感じた、人間とAI、労働比率の現実 HUMAN 70%

   AI 30% CONTEXT テークホルダーとの認識合わせやリリースできるレベルまで自分の手で修正すると 想定よりも膨大な手直しが必要 トータルの時間は確かに短くなっているかもしれないが劇的ではない

8. § 実務導入の難しさ ROOT CAUSE 本当の課題は、インプットの難解さ。 INPUTS DESIGN NEEDS デザイン業務のアウトプットには、 これだけのインプットが要る。

   競合情報 ペルソナ 行動シナリオ 価値シナリオ インタビュー結果 コンセプト To-Beシナリオ ビジネス要件 情報構造 制約条件 トーン&マナー …etc. インプットの品質を上げないと、 アウトプットの精度も上がらない。 PROGRESS Claude Design 、AI-DLC でヒアリングプロセス は、一歩前進。 STILL MISSING デザインプロセスを主戦場にする身には、 最低限のヒアリングに届いていない感触。 この膨大な情報を、過不足なくAIに渡す方法。 あるいは、足りない部分をAIから引き出す仕組み。 ——どちらも、まだ成熟していない。

9. § 実務導入の難しさ WHAT I TRIED UX ユーザーに何を聞けばいい？ とりあえずAIでポンだし リリース後にも問題頻発の恐れ 大事なことってなんだっけ

10. § 変わらない部分 AN HONEST ADMISSION AIの進化に関わらず、 要件定義・UX設計の必要性は変わらない AIに全てを任せるのではなく 変える部分と変わらない部分の線引き、 どこに人間のリソースを割くか見極めが重要

11. § 足りないピースを作る SHIPPED インプットの壁を超えるための試作 FigJam Markdown Converter Figjam上の情報を適切に構造化し、 AIに渡す橋渡しをするプラグイン Design

    Brief Generator UI作成に入る前の上流情報を、 AIと深め、まとめ上げる Skills プラグインの利用はこちら

12. § 最後に CLOSING AI駆動デザインプロセスへ 向けた挑戦・経験を 発信しています @tsumu_design