はじめに
AIを使ったコーディングは便利です。しかし一方で、「思った通りのコードが生成されない」「仕様を伝えるのに時間がかかる」といった課題を抱える人は少なくありません。
私たちのチームでも、Figma to Code の開発工程で AI を活用しようと試みる中で、AIの回答に振り回される場面が多々ありました。
そのため、今回、従来の開発プロセスを「仕様書駆動開発（仕様ベースでAIと対話する開発）」に切り替え、コーディングやテストの一部をAIに委ねる実験を行いました。
この取り組みの結果として、手戻りや認識齟齬を減らし、スピードアップにつながる手応えを得ることができました。
本記事では、この実験の背景と手順、仕様書やPBIの作り方、実際に得られた効果や気づきなどを紹介します。
なぜ仕様書駆動開発に取り組んだのか
Figma to Code の現場で起きていた課題
従来の開発プロセスは、Figmaで画面デザイン作成し、プラグインを使ってReactコンポーネントに変換後、手で実装する流れでした。
設計書などは作成せず、画面デザインから設計の意図をくみ取り、手で実装をしていましたがデザインから受け取れる機能仕様は実装者によって解釈がばらつく、レビュー時に意図のすり合わせが発生する、といった問題が日常的に起きていました。
AI活用の限界と「仕様の伝え方」の問題
また、AIを活用し始めた当初は、プロンプトでAIに細かく仕様を説明しており、伝達コストが高いという課題が残っていました。結果として、AIの回答を何度も修正・再生成する手戻りが発生してしまっていました。
AIはプロンプトで与えられた情報に忠実に従います。逆に言えば、仕様や制約が曖昧なままでは、出力も曖昧になります。
つまり、「仕様を明文化せずにAIに頼む」という状態は、人に“なんとなく伝える”のと同じであり、AIの潜在能力を活かしきれていなかったのです。
実験の概要（AIへの委譲範囲）
従来（AsIs）のプロセス
従来は、
「デザイン ⇒ React取り込み ⇒ 実装 ⇒ テスト ⇒ レビュー」
という流れで、仕様書は存在しないか、レビュー時に口頭補足で済ませるケースが多いものでした。
今回（Tobe）のプロセスとAIへの委譲範囲
今回の検証では、
という仮説を立てて作業を行いました。
まずは準備として、今まで作成してきたコードから「共通仕様」や「指示書・ルール」をリバースエンジニアリングでAIに作成してもらうことをしました。
その上で、作成したい画面や機能仕様をAIにプロンプトで伝え、補足情報として共通仕様や指示書をインプットすることで、アウトプットの精度を均一化するようにしました
共通仕様・ルールの整備
事前に準備した「共通仕様・ルール」であったり、AIに依頼するときのインプットについて、もう少し、詳しく説明します。
AIに既存のコードからリバースエンジニアリングしてもらった資料として以下のものがあります。
- コーディングルール
- データモデル設計
- 画面遷移図
- 入力チェック仕様
人がプロンプトで情報を与えて、AIに清書してもらった資料としては以下があります。
- Figma to Codeのお作法
- タスク実行ルール
これらを基本情報としてAIに渡すことで、アウトプットの精度が均一になり、プロンプトに長い前提条件を毎回書く必要がなくなりました。
タスク実行ルール（PBIの作り方）についても参考として記載しておきます。
仕様駆動でAIに作業を任せる手順
PBIの作成
AIとアジャイル開発を行っていくために、作業の基準となるPBIを作っていきます。
PBIは以下の章立てです。
- ユースケース
- 機能要件
- 受入条件
- 計画
ユースケースは人が手で記載し、残りの機能要件、受入条件、計画はAIに書いてもらうことにしました。
人のユースケース記載が終わるとこのような感じになります。
プロンプトを書いてAIに依頼
次はプロンプト作成ですが、ここまで準備ができているとプロンプトはほとんど指示は不要でテンプレートレベルのものを毎回記載するだけで済みます。
まずはPBIの確認
まずは、AIが作ってくれたPBIの内容から、想定した計画やコードを作ってもらえるか？を確認します。間違っている箇所があれば指摘して直してもらいますが、それほどやり取りは発生しません。
人がタスク実行ルールで、事前のプロジェクトの構成やルールなど予め理解をして作業するように指示することで、従来のプロンプトだけ渡す依頼とは異なり、精度がとても高くなりました。
作成してもらったPBI（参考）
以下はAIに作成してもらったPBIの一部です。
人がPBIとして作成する完了条件などより細かく、機能仕様として記載してもらっているので、テスト工程でのテストケース作成でも活躍してくれます。
あとは計画に沿って・・・
記事が長くなってしまうので割愛させてもらいますが、ここまでくれば計画に沿ってほぼ想定したコードが生成されます。
(＾ω＾;).｡oO（コメントとかも入れて人が書いたコードより綺麗だったりする）
実践してみて得られた効果と気づき
スピード面の変化（人力開発との比較）
チームの主観ではありますが、「人の手で開発した場合と比べて早いと思う」という声が多く上がりました。
特に、PBIや仕様書の入力が整っていると、AIの作業スピードは圧倒的です。従来の開発スタイルの情報を一度構造化してしまえば、繰り返し使える点も大きな利点でした。
手戻り削減と認識合わせのしやすさ
仕様書を起点としたことで、「意図が伝わっていない」「追加の説明が必要」といったやりとりが減少しました。
生成された結果をレビュー時も、仕様と実装の差分を見ればよいため、確認時間が短縮されました。
まとめ──AIに丸投げしない“進め方”の重要性
結論として、AI開発を効率化する鍵は、AIに仕事を丸投げすることではありません。
進め方のルールや合意ポイントを事前に整備し、仕様書を軸に開発を進めることで、AIを「チームの一員」としてコントロールできることが実践できました。
まずは小さな機能から、PBIと仕様書テンプレートを作ってAIに渡してみる。
それだけでも、対話コストの削減や開発のスピードアップを実感できるはずです。
設計、コーディング、テスト、レビューの工程をAIに委譲することで一部の作業を効率化しつつも、AIと仕様ベースで合意することで精度があげられないか？