未分類

Claude Codeに設計書を渡したら、20分でアプリが完成した話

最近、「AI駆動」「バイブコーディング」といった言葉が流行り、プログラミングを始める人が多いと思います。

どんどんアプリ開発が楽になり、個人の生産性向上に繋げたいと思っている人も多いでしょう。

しかしここで落とし穴にはまってしまうのが、

  • 業務効率化アプリを作りたいけど、うまくいかず結局、手作業の時間が圧迫されるだけ
  • AIに任せてもうまくアプリを作れず頓挫する

こんな方が結構多いのではないかと思います。

私自身、今になってやっと簡単なアプリはつまずかずに作れるようになったものの、うまくいかないことが大半でした。

ここで私がなんとかうまくいき始めたコツと方法を紹介して、非エンジニアの方でもAIを利用して業務効率化できるよう、少しでもお役に立てればと思います。


はじめに

AI駆動開発、試したことはありますか。

「プロンプトを書けばコードが生えてくる」という話を聞いて、自分も試してみました。でも最初の3ヶ月は、正直まったくうまくいきませんでした。学習にもならない開発とデバッグの繰り返しで、時間を浪費してしまいました。

今回はその失敗と、何が変わって20分でアプリが完成したのか、その話を書きます。


最初の3ヶ月:プロンプトだけで開発しようとして詰んだ

最初にやっていたのは、AIのチャット画面に「〇〇というアプリを作って」と投げるだけの開発スタイルでした。

最初の数回はそれでも動いて、簡単なアプリは完成できました。コードが出てきて、コピペして、なんとなく動く。「これはいける」と思いました。

でも少し進むと、大変なことになってきました。

  • 機能を追加するたびに前の機能が壊れる
  • AIに修正を頼むと、別のバグが生まれる
  • そもそも何を作ろうとしていたのかがぼやけてくる
  • 「もう一回最初からやり直そう」を何度繰り返したかわかりません

一番しんどかったのは、要件を決めていないまま実装が進んでいくという状態でした。頭の中に「こういうものが作りたい」というイメージはあっても、それをAIに伝えられる形にする方法がわかりませんでした。

結果、プロンプトのたびに微妙に違うことを指示してしまい、AIはその都度それに答えようとするので、コードが一貫性のないものになっていってしまいました。

3ヶ月でできたものは、バグだらけで自分でも使いたくないものでした。


転換点:「実装の前に設計書」というシンプルな原則

何が変わったかというと、実装を始める前に設計書を作るようにした、それだけです。

「設計書なんてわからない」という方も多いと思います。自分もそうでしたし、作り方もわからずやる気にもなれませんでした。

でも、AIと一緒に作ればいいのです。それに気づいてからは、とんとん拍子に開発が進んでいきました。

実際にやったフローはこちらです。

Step 1:AIと一緒に設計書を作る

目的・要件・技術スタック・データベース設計・ロードマップを、AIと対話しながらMarkdownで書いていきます。自分が「なんとなくこういうものが欲しい」と話すと、AIが「それはこういうことですか?」と整理してくれます。

docs/
├── 01_purpose.md       # なぜ作るか
├── 02_requirements.md  # 何を作るか
├── 03_tech_stack.md    # どう作るか
├── 04_database.md      # データ設計
└── 06_roadmap.md       # 実装順序

設計書が完成した段階で、何を作るかが自分の中でも明確になっています

Step 2:新しいセッションで実装を始める

設計書が完成したら、AIのセッションを切ります。まっさらな新しいセッションを開いて、「この設計書を読んで実装してください」と渡します。

ここで全く新しくAIを起動して作らせることも、大事な作業でした。

設計書のない状態でのAIは「直前の会話の文脈」で動いています。途中から要件が変わっても気づきませんし、前の会話で決めたことを後半には忘れてしまいます。でも設計書があれば、AIはそれを参照してブレずに実装を進めてくれます。


作ったもの:Rewardo

今回作ったのは Rewardo というタスク管理アプリです。

「やるべきことはわかっているのに続かない」という問題を解決したかったからです。既存のTodoアプリにはタスクを管理する機能はありますが、続けるためのモチベーション設計が弱いと感じていました。

そこで、行動経済学の変動比率強化スケジュールを応用しました。スロットマシンやガチャが「いつ当たるかわからないから続けたくなる」のと同じ仕組みを、タスク完了に組み込みました。

仕組みはシンプルです。

タスクを完了するたびにカウントが増える
→ ランダムに設定された目標数に達したらご褒美が出る
→ 「次のタスクを終えたら出るかも」という期待感で続けられる

ご褒美の内容と「出やすさ(重み)」は自分で設定できます。「チョコを食べる」を重み3、「30分ゲームをする」を重み1にすれば、チョコが3倍出やすくなります。

NotionとAPIで連携していて、NotionのTodoをそのままタスク一覧に同期できます。完了チェックを入れるとNotion側にも反映されます。

技術スタック:

技術役割
Next.js 14 (App Router)フレームワーク
PGlite (WASM PostgreSQL)ブラウザ内DB(IndexedDB永続化)
dnd-kitドラッグ並び替え
canvas-confettiご褒美アニメーション
Notion APIタスク同期

設計書を渡してから実装完了まで20分

設計書5ファイルをClaude Codeに渡して「実装してください」と伝えます。

20分後、ビルドが通りました。

もちろんすべてが完璧に動くわけではなく、一つだけバグがありました。PGliteのクエリが返す値の型が実行時に想定と違うという軽微なバグです。ガッツリ開発をされる方でなければ気にならないレベルで、修正は数分で終わりました。

3ヶ月間バグと戦い続けた自分からすると、信じられない体験でした。


AI駆動開発で詰まっている人へ

「プロンプトを書けばなんでも作れる」というのは半分本当で、半分違います。

AIは優秀なエンジニアですが、何を作るかが曖昧だと、曖昧なものを作ってしまいます。指示が一貫していないと、一貫性のないコードを書いてしまいます。それは人間のエンジニアと同じです。

AIに実装を任せる前に、何を作るかを自分(とAI)で決める。

それだけで、AI駆動開発の体験は大きく変わります。設計書はAIと一緒に作ればいいので、一人で考える必要はありません。

「ガッツリ開発者になりたい」わけじゃなくても、使いたいものを自分で作れる。そういう方が増えたらいいなと思いながら、このアプリを作りました。


まとめ

  • 設計書なしのAI駆動開発は、要件が肥大化してバグ地獄になりやすいです
  • AIと一緒に設計書を作ることで、何を作るかが明確になります
  • 実装は新しいセッションで設計書を渡すだけで進められます
  • 設計書5ファイル → 実装20分でビルド成功