概要
https://qiita.com/874wokiite/items/ede1d1b4b7a52a8d19ff
詳細内容
## 爆速！仕様駆動でプロトタイプ開発したら神戸豚饅娘グランプリ獲ったよ
https://qiita.com/874wokiite/items/ede1d1b4b7a52a8d19ff
AI駆動開発ツール「cc-sdd」を活用し、わずか5時間でWebアプリのプロトタイプを爆速開発することで、制作者がKOBE豚饅娘グランプリを獲得した事例を共有します。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:5/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 80/100 | **Annex Potential**: 83/100 | **Overall**: 80/100
**Topics**: [[AI駆動開発, 仕様駆動開発, プロトタイプ開発, 生成AIツール, Webアプリケーション開発]]
この記事では、著者が「cc-sdd」というAI駆動開発ツールを駆使し、わずか5時間弱でWebアプリのプロトタイプ「神戸豚饅MAP」を開発し、その成果が「KOBE豚饅娘コンテスト」でのグランプリ受賞に繋がった体験を紹介しています。この事例は、生成AIを活用した爆速開発の可能性を具体的に示しています。
著者は、通常チームで行うAI駆動開発（SDD）の知見を活かし、cc-sddを使って「神戸豚饅MAP」のプロトタイプを作成しました。このツールは、Claude CodeやGitHub Copilotなど様々な生成AIサービスと連携し、仕様駆動で開発を進めることができます。導入ハードルは低いものの、思った通りに開発するには「コツ」や「感覚」が必要だと筆者は指摘します。
開発フローは、まず「要件定義（requirement）」でアイデアを整理し、漠然とした要求から生成された壮大な初期ドキュメントを修正しながら、コンテストに必要な最低限の機能（三宮・元町周辺の店舗表示、各店舗の特徴、比較機能）に絞り込みました。筆者は、手戻りリスクを軽減するため、機能ごとに「spec（仕様）」を分割して定義することを推奨しています。
次に「設計（design）」フェーズを経て「実装」へと進みます。cc-sddは設計後にサブタスクを分け、AIが自動でコードを生成します。しかし、Google MapのAPIキー取得といったGUI操作はAIでは対応できず、この部分に多くの時間を費やしたと著者は語ります。実装後は、デザイナー経験のある筆者が「バイブコーディング」（直接生成AIに指示）を活用し、トンマナやカラーパレット、ロゴ作成、MAP表示領域の最適化などUI調整を迅速に行い、発表版を完成させました。
著者は、生成AIの活用により、身近な課題に対し「自分でサクッと作って検証できる時代になった」と述べ、開発における時間の使い方が「どうやって作るか（HOW）」から「何を作りたいか（WHAT）」へとシフトしたことの重要性を強調しています。ガッツリ機能開発にはcc-sddを、UI微調整にはバイブコーディングを使い分けるのが効果的であると結論付けています。