UI駆動開発

Transcript

1. A WORKING NOTE 2026 · SESSION 01 NON-AI TERRITORY IN SOFTWARE AIを用いた UI駆動開発 AI開発時代におけるソフトウェア開発の非 AI領域 SPEAKER AM9:21 UI-DRIVEN DEVELOPMENT · 23 SLIDES
2. CHAPTER · PREMISE 02 / 23 ソフトウェア開発は AIで自動化された ── と言われている TOOL · 01 Claude Code terminal · desktop opus-4.8 · fable-5 TOOL · 02 Codex terminal · desktop GPT-5.5 · 5.3-spark TOOL · 03 Cursor ide · terminal composer-2.5 TOOL · 04 Antigravity ide · terminal gemini-3.5-flash
3. — WAIT A MOMENT 本当に？ AIで作ったアプリ、 あなたは使い続けていますか。 CHAPTER · DOUBT 03 / 23
4. CHAPTER · REALITY 04 / 23 AIが解いたのは "Coding" だ け。 AI DOMAIN AIが得意 — ボイラープレート生成 — API実装、データ整形 — 既知パターンのリファクタ — 単体テストの書き散らし NON-AI DOMAIN 人間が握る — 課題の発見と切り出し — コンセプトと世界観 — UIの設計判断 — 体験のチューニング
5. DEFINITION 05 / 23 UI駆動開発 D E F I N I T I O N アプリの機能を 画面・ UI要素に結びつける。 デザインを確定させてから 機能の実装に入る方法 — 私が適当に命名しているだけなのでもっと良い名称があるかも PIPELINE ① アイデア → ② 競合 ③ こだわり → ④ 画面 ⑤ 機能　 　→ ⑥ コンセプト ⑦ UI試作 　→ ⑧ DS ⑨ プロト 　→ ⑩ ロジック ⑪ デバッグ
6. REVEAL 06 / 23 FINISHED BUILD 完成品 2 SCREENS 1 COLOR
7. STEP · 01 / 11 IDEA 07 / 23 アイデアの発掘 自分か、知人ひとりが 猛烈に困っていることから始める。 今回の種 · T H E S E E D 「水分を取らないと、作業効率は下がる。 でも集中してたら、うっかり忘れる」 QUOTE
8. STEP · 02 / 11 COMPETITORS 08 / 23 競合の解剖 似たアプリを片っ端から触り、 気持ち良くない点を全て列挙する。 P R I N C I P L E 比較表ではなく、 不快ログ。 DISCOMFORT LOG notes.md — 通知が攻撃的。スヌーズが効かない — 設定画面が三階層下にある — 起動するたびに広告全画面 — ホームに数字とグラフが詰めすぎ — 課金導線が10回ヒットする → "do not do" list
9. STEP · 03 / 11 CONSTRAINTS 09 / 23 こだわりの定義 — a self-imposed rule-set. the harder, the sharper. 01 画面遷移を 最小限に 02 機能を シンプルに保つ 03 見た目に こだわる 04 使う色は 一色だけ — HARDEST LOCK
10. STEP · 04 / 11 SCREENS 10 / 23 画面構成の決定 S C O P E 端末 : スマートフォン。 画面 : ホーム / 設定の二つだけ。 H O M E S E T T I N G S
11. STEP · 05 / 11 MAPPING 11 / 23 機能の割り当て TIP 要らないもの (−) を書くと、 AIに任せても勝手に生やさない。 S C R E E N · 0 1 / H O M E ホーム画面 +2 −2 + タイマーの Visualize + 開始 / リセット / 停止 − 一時停止 − 残り時間の数字表示 S C R E E N · 0 2 / S E T T I N G S 設定画面 +3 −0 + 設定項目 — Sound / Interval + Feedback 導線 + 課金の導線
12. STEP · 06 / 11 CONCEPT 12 / 23 コンセプトの言語化 水分補給 → 水・コップ → 縦長 = スマホ → スマホ自体がコップ？ ↓ 水が溜まる → 水たまり → 雨 ⇒ 画面に雨を降らせる 水位 = 経過時間。飲んだらコップが空。 — METAPHOR DECIDED. UI FOLLOWS.
13. STEP · 07 / 11 SKETCH 13 / 23 UIの試作 Figma… いやいや、 PowerPointで十分で すよ。 早く・汚く・たくさん描けるツール が正義。 美しさはこの後の工程に渡す。
14. ASIDE · REFERENCE COLLECT GOOD UI 14 / 23 閑話:UIの参考 H A B I T ストアを散歩し、刺さるア プリを見つけたら 全画面スクショ・録画で 保存。 — 真似ではなく、分解のために。
15. STEP · 08 / 11 DESIGN SYSTEM 15 / 23 デザインシステムの策定 試作とコンセプトを全部 AIに渡し、 DESIGN.mdを生成させる。 + 色とフォントは、絶対に自分でこだわる + 大規模なら Claude Design / v0 を併用 − フレームワーク既定値をそのまま採用しない DESIGN.md # Visual Identity - color · single accent #1E63E0 - type · Inter / JetBrains Mono - radius · 12 · 24 (no 16) # Motion - entrance · 320ms cubic-bezier(.2,0,0,1) - no looping ambient effects # Components - Button: full-width, height 56 - Sheet: bottom drag-down, 24 radius
16. WHY · DESIGN SYSTEM 16 / 23 なぜデザインシステムなのか A · W I T H O U T D S MISMATCH Start SETTINGS RESET ! 角丸が画面ごとに違う (4 / 12 / 22) ! 色の役割がブレる ! 操作の予測可能性が崩れる → 世界観が粉々になる B · W I T H D S COHESIVE ✓ 角丸 = 8px、唯一の値 ✓ 色 = 1色、役割が明確 ✓ 押せるものは、押せる顔をしている → 操作の予測可能性が上がる Start Settings Reset
17. STEP · 09 / 11 PROTOTYPE 17 / 23 プロトタイプの実装 UIとアニメーションのみ。 ロジックは最小限に留める。 Claude Design Antigravity v0 Cursor Figma Make R U L E O F T H U M B GPT系以外であれば、どれでも問題なし。 修正を容赦無く大量に送る姿勢が、何より大事。 REVISION COUNT 132 edits たった二画面のこのアプリで、 送信した修正指示の合計。
18. WHY · PROTOTYPE FIRST 18 / 23 見た目を決めてから実装 C O S T - P E R F O R M A N C E S T A C K FRONT Composer / Gemini / Claude / GLM + BACK GPT / Kimi → DIRECT BUILD idea → code → rework × N 手戻りが膨らみ、トークンが燃える。 PROTOTYPE FIRST idea → proto → build 手戻り最小。トークン節約。世界観も保たれる。 多段構成がコスパ最強
19. STEP · 10 / 11 LOGIC 19 / 23 ロジックの実装 — Claudeはツール使用、ちょっと苦手侍なので… ね。 LIGHT Antigravity 薄ロジックなら一本で完結 HEAVY · DEFAULT Codex App独自機能が強力 BUDGET+ Cursor Maxプランで真価 BUDGET++ Factory 大富豪向け、自動化が強い
20. ASIDE · COMMENTS-AS-SPEC 20 / 23 コメントが主役 仕様書は AIが読み忘れる。 Skillは明示的呼び出しが要る。 Hookは肥大化でコンテキスト圧迫。 → コードコメントに全部書く。 編集前に 強制的に 思想を読ませる。 timer.ts /** * 雨の水位タイマー · 中核ロジック * ──────────────────────────── * - 一時停止は禁止。水位は一方向に増える。 * - 数値表示は禁止。雨の高さで表現する。 * - 飲んだら即0。アニメは250ms以内。 * - リマインダはOSの通知に委ねる。 */ export function tickTimer(state) { if (state.full) return alert(); state.level += 0.01; }
21. STEP · 11 / 11 DEBUG 21 / 23 デバッグ テストを書く前に、 一週間、毎日使う。 手触りのバグは、テストでは絶対に出てこない。 TDD WITH AI 大富豪向け → トークンが秒で蒸発 WHEN YOU TEST Testing Trophy を渡す → よしなに書いてくれる MOBILE Codex / Antigravity に実用させる → 問題点を列挙してもらう
22. FINISHED · COMPLETE 22 / 23 完成。 これが UI駆動開発。 ロジック実装以降は放置できる仕組みを整えると尚良し。 L I F E S T Y L E T I P Pi Coding Agentはカスタマイズが豊富なので改造におすすめ 寝て起きたら成果物だけ確認するようなフローを目指そう
23. CLOSING · TAKEAWAYS 23 / 23 まとめ 01 AIが解いたのは Codingだけ 実装前段階、非 AI領域の凝り方で差が生まれる 02 先にデザイン、機能は後 画面と UIに機能を紐付けてから実装へ。 03 アプリの一貫性は何よりも重要 デザインシステム / プロトタイプを凝りまくって差を見せる 04 コード内コメントが本体に そのコードの意図や思想を的確なタイミングで教えられる