はじめに
こんにちは！！！私は、今年の11月10日にKOBE豚饅娘コンテストでグランプリをいただき、第14代目KOBE豚饅娘になりました。
ハッカソン？って思った方がいらっしゃるかと思いますが、いわゆるミスコンってやつです。つまり、ミスコンで1人だけハッカソンをしたのです。
私は神戸在住で、神戸には有名な豚饅屋さんが多く存在しています。
その中でも老祥記・四興樓・三宮一貫樓が「発起人」と呼ばれており、その発起人が毎年11月11日の「豚饅の日」から開催されるKOBE豚饅サミットを主催していて、そのイベントの前夜祭に行われるコンテストがKOBE豚饅娘コンテストです。
そのコンテストで、神戸豚饅マップというWebアプリを開発して発表したところ、見事グランプリをいただきました。（2回目：ハッカソンではない）
私は今KAGで働いているのですが、そこでは主にAI駆動開発にチームで取り組んでいて、その中でもSDD（仕様駆動開発）で開発しています。そこで得た知見を活かして、cc-sddを使って神戸豚饅MAPを5時間弱と爆速でプロトタイプを作りました。
今回はこの神戸豚饅MAPをコンテストで発表できる形に持っていくまでの爆速開発フローをご紹介します。
ちなみに、神戸豚饅MAPはプロトタイプ版から、ビジュアルデザインを少しリッチにして「なんちゃって正式版」にアプデしました✨
爆速のために、cc-sddを使いこなす
cc-sddとは、仕様駆動開発で使われるツールの１つです。使い方はリポジトリを貼っておきます。日本語があるので導入ハードルは低めです。
いろんな生成AIサービスで使えるようです。
Claude Code / Cursor IDE / Gemini CLI / Codex CLI / GitHub Copilot / Qwen Code / Windsurf
導入ハードルは比較的簡単ですが、思った通りに作るにはコツ？感覚？があるので、まずは感覚を掴むためにもcc-sddを使って簡単なものを何個か作ってみるのがおすすめです。
要件定義（requirement）はアイデア整理タイム
神戸にはいろんな豚饅屋さんがあるけど、みんなが知ってるのは有名店ばかり。味もお店によって全然違う。十豚饅十色。コンテストでこのことを伝えたい！と漠然と考えていました。
最初は、「お店によって特徴の比較ができるような、なんかマップみたいなやつ」くらいにイメージしていました。
これを、cc-sddの要件定義（requirement）で漠然とそう伝えると、初期段階ではなかなか壮大なものを出してきます。例えば
- 神戸全域の豚饅屋さんを表示
- 流石に量が多い（神戸全域で30店舗以上あった。そんなにあったのか）
- 新鮮なデータを反映させるために、毎日最新情報を取得＆保存して分析
- DBを作る前提っぽい書き方で、プロトタイプにそんな機能はいらん
漠然としたまま生成されたドキュメントには、違和感を感じるポイントがたくさんあります。それをどんどん修正して、何を作るべきか整理していきました。
最終的に、コンテスト応募までに作るのは以下のように整理しました。
漠然と私が考えていることを実現するには、最低限「三宮・元町周辺の店舗をMAP上に表示すること」と「各店舗の特徴がわかること」と「店舗ごとの比較ができること」の3点という整理にしました。
また、cc-sddでは、作りたい機能ごとにspec（仕様）をドキュメントにまとめていくのですが、今回は「MAP上に店舗を表示する」と「店舗ごとの分析・比較」で機能が違うのでspecを分けることにしました。
まとめてやってもいいのですが、どこかでハマってしまって手戻りするリスク軽減のためにも、分割できるspecは分割するのがおすすめです。
設計（design）はどう実現するかイメージを膨らませる
要件定義が終わると、cc-sddでも設計（design）フェーズに入ります。要件定義→設計という流れは、AI駆動でなくても一般的プロジェクトにおいては違和感のない流れですね。
とはいえ今回はマインドとしてはプロトタイプなので裏側はだいぶ雑です。
ただ、コストは絶対にかけないという誓いがあったので、お金と時間がかかりそうなものはゴリゴリと削っていきます。
実務だとここが一番気合いを入れるところなのですが、今回は個人で試すプロトタイプなのであまり時間はかけませんでした。特に言うことなし。
ドキドキ実装タイム
cc-sddでは、設計が終わるとサブタスク分けをしてくれます。このサブタスク分けの流れで、AIに実装してもらいます。
この実装、なんと一瞬で終わりました！！！！！！！！！！！
...と言いたいところでしたが、AIでどうにもできない、人の手でやらないといけないところでしっかりハマりました。
そう、Google Mapです。MAPを表示するのにAPIキーを取得してこないといけないのですが、このGUI上での操作で実装時間のほとんどを溶かしました。
そして2つのspecを実装した直後のものが以下です。
UI調整（バイブコーディング）
約5ヶ月前までデザイナーをしていた私としては、AIが作ったUIのままでは終われません。
とはいえそこまでUI調整に時間をかける余力がなかったので、
- トンマナ・カラーパレット
- 豚饅のロゴ作成
- MAPの画面内での領域を最大にする
この3点にだけ絞って調整しました。ロゴ作成は自分でやりましたが、それ以外は私の指示でAIが修正してくれました。
要件定義するほどでもない、リファクタくらいの気持ちだったのでcc-sddはここでは使っていません。
調整後、コンテストで発表したものは以下です。
なんちゃって正式版にアプデ
今回この記事を作成するのに合わせて、なんちゃって正式版にアプデしました。
変更点は主にビジュアルデザインです。（なので、ここでもcc-sddは使っていない）
1年間KOBE豚饅娘として活動する材料の1ついろんな技術を試す実験台として少しずつアプデしていく予定です。そこで、まずはイケてる見た目からということで私と相方をポップで可愛いイラストにしてみました。カラーとフォントもちょっとレトロで中華な感じに。
イラストとロゴ作成にもAIを使おうとしましたが、結局自力でやりました。実装を楽する代わりにこういうクリエイティブに時間を使えることができたとポジティブに捉えます。
しっかり可愛いOGP画像も設定しました。
まとめ
ミスコンでcc-sddを使ってKOBE豚饅MAPを作って発表したら、グランプリを獲ってKOBE豚饅娘になりました。
生成AIのおかげで、身近にある課題に対して自分でサクッと作って検証できる時代になり、どうやって作るかのHOWよりも、何を作りたいかのWHATに時間の大半を使えるようになったのが個人的には本当に嬉しいです。
生成AIがなければ、少なくともGoogleマップにピンを表示するだけでもかなりドキュメントを自分で読み込まないといけないですからね。
ガッツリ機能開発したい時はcc-sdd、UIなどの微調整はバイブコーディングで直接生成AIに指示。この使い分けがちょうど良さそうです。
これからもどんどんクリエイティブなことをしていきます！