Specification
仕様の検討漏れ・未定義・矛盾 60
コードでは定義しないと画面が動かないため、未決定の項目が露出した。
04Build AI-Native
Figmaでは見えない仕様の穴を、コードで潰す
Claude Codeでプロトタイプを作り、Storybook上で画面と仕様を定義。PdM・エンジニアと触れるものを囲んで検証し、131件の仕様課題とUX改善を実装前に解決した。
詳しいプロセス、131件の内訳、導入条件はCADDi Tech Blogへ
CADDi Tech Blogで全文を読む
ウォークスルー6回
作成したStory49件
実装前に解決131件
01 — The Problem
画面は完成しても、意思決定は終わっていなかった
静的なデザインファイルでは、エラーの発火タイミング、Empty State、長い文字列、デフォルトの並び順などを決めなくても、完成した画面を作れます。未定義の仕様や既存実装との不整合が、実装フェーズまで持ち越されることが課題でした。
02 — The Approach
コードで仕様を定義し、触れるものを囲んで検証する
- 01
HTML Prototype
画面構成と情報の優先度を検証
- 02
Storybook
Reactと社内デザインシステムで、状態と操作を定義
- 03
UX Specification
MDXでカラム、ステータス、フィルター、スクロール、i18nなどを記述
- 04
Walkthrough
PdM・エンジニアと実務を再現し、実装前に判断を完了
03 — The Result
131件を、実装前に解決
約1.5か月で6回のウォークスルーを実施。31画面、49件のStory、39件のMDX画面仕様書を作成し、静的な画面では残っていた判断を実装前に完了させました。
Resolved before implementation
131件
仕様課題とUX改善を実装前に解決- Duration
- 約1.5か月
- Walkthrough
- 6回
- Screens
- 31画面
- Story
- 49件
- MDX Specification
- 39件
UX Improvement
UX改善 45
実際に操作しながら業務を再現し、静止画では気づけない違和感を検出した。
Implementation
実装誤り・既存実装との不整合 26
本番コードを参照することで、意図しない乖離を実装前に発見した。
04 — What Changed
デザインの成果物ではなく、意思決定の完了度を変えた
コードを書くこと自体が目的ではありません。画面・状態・操作・仕様を同じ場所で扱い、PdMとエンジニアが触れるものを囲んで検証することで、これまで実装フェーズまで残っていた判断を前工程へ移しました。
- 01曖昧な仕様を実装前に露出
- 02実務を再現したUX検証
- 03テスト・既存実装の観点をデザイン工程へ前倒し
Storybookは本番フロントエンドの代替ではなく、実装前の仕様とUX判断を揃えるための中間成果物として運用しました。
05 — Starting Point
境界を越えて、作業範囲を広げる
Gitもほぼ未経験の状態から、エンジニアの伴走とClaude Codeを活用し、コードベースの仕様設計へ移行。2か月で251 commits・177 filesまで作業範囲を広げました。