CursorでWebアプリをバイブ開発する方法

TL;DR

Cursorに要件を口頭で伝え、要件定義、開発資料、進捗表、技術別の実装ルールを先に作らせてから、フェーズ単位で開発を進める。広告画像AIの例では、Next.js、Turso、Better Auth、Cloudflare R2、Polar、画像生成モデルを組み合わせ、認証や保存機能を順番に接続する。

Transcript

はい、どうもしです。え、今回の動画なん ですけど、AI駆動実況開発ということで 、私が普段ね、ま、Webブサービス開発 とかスマホアプリ開発で、ま、どのような 感じで、え、開発しているのか、バイブ コーディングしているのかっていう様子を ですね、今回皆さんにリアルタイムでお 届けしていこうかなという企画をちょっと 取っていこうと思います。もうすでに私 Webブサービス頭の中でありますので、 それをどのようにしてWebブサービスと して形にしていくのかっていう様子を、ま 、全てね、お届けできたらなと思います。 ま、なるべくノーカットで適々ちょっと 実況を入れながら、解説を入れながら、ま 、僕と一緒に作業してるような感じで動画 見ていただいても構いません。はい。なの でこの動画最後まで見ればアイ... Read More

Key Insights

• 要件定義は、サービス概要と採用技術を伝えた後、AIから不足事項を質問させ、その回答をMarkdownへ整理させる工程である。
• 開発資料は、要件定義だけでなく、フェーズ別タスクと進捗管理を含めてAI自身が参照しやすい形で用意すると、作業状況を追跡しやすい。
• 広告画像AIの初期機能は、日本語テキストからSNS向け広告を生成し、履歴確認、ダウンロード、AI編集へつなげる構成である。
• 技術構成は、Next.js App Router、Turso、Better Auth、Cloudflare R2、Polar、Nano Banana Proを組み合わせる案である。
• 認証設計は、Better AuthによるGoogle認証だけを採用し、新規登録者へ無料プランの5クレジットを付与する想定である。
• 実装ルールは、Next.jsとBetter Authのベストプラクティスを事前に調査して文書化し、開発時の参照基準として使うものである。
• デザイン選定は、複数のテーマを同条件で生成して比較し、サービスの用途に合う表現を採用する反復的な工程である。
• 開発体制は、話者によれば個人なら立ち上げ速度を優先しやすく、チームなら初動と引き換えに品質や長期保守を整えやすい。
• 🎬 このチャンネルの他の動画:
  • Claude Code Skillsを作成・活用する方法
  • AIでiOSアプリを収益化する方法
  • スマホからClaudeで業務を自動化する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Cursorでバイブコーディングを始める方法は？

最初にプロジェクトを作成し、作りたいサービス、採用技術、対象ユーザー、必要機能をCursorへ伝えます。その場で実装を始めさせず、不明点を質問させて回答を積み上げ、内容を要件定義ファイルへ保存させます。続いて開発資料と進捗表を作成し、フェーズ単位で実装を依頼します。

Q: AIとの要件定義では何を伝えるべきですか？

サービスの目的、生成対象、認証方法、無料枠、有料プラン、保存先、履歴機能、画面構成、対応言語を伝えます。広告画像AIの例では、SNS向け画像、日本語入力、Google認証、登録時の5クレジット、Cloudflare R2への保存、履歴確認とダウンロードを要件に含めています。

Q: 実装前にどのようなドキュメントを作るべきですか？

要件定義、フェーズ別のタスク一覧、進捗管理表、利用技術ごとのベストプラクティスを作ります。動画の手順では、docsディレクトリへMarkdownを配置し、Next.js App RouterとBetter Authの実装ルールも調査して残します。タスク完了時にはチェックを更新させ、未完了作業を明確にします。

Q: 広告画像AIにはどの技術を組み合わせますか？

フロントエンドとバックエンドにはNext.js App Router、データベースにはTurso、認証にはBetter Authを使用する構成です。画像はCloudflare R2へ保存し、決済にはPolar、広告画像の生成にはNano Banana Proを採用する案が示されています。Google認証のためにGoogle Cloud側の設定も行います。

Q: Google認証を実装する手順は？

Google Cloudでプロジェクトを作り、OAuth同意画面と認証情報を設定して、Better Authが指定するコールバックURIを登録します。取得した認証情報とBetter Authのシークレット、Tursoの接続情報は環境変数へ設定します。さらにTurso上へ認証に必要なスキーマを作成し、Googleログインを動作確認します。

Q: AIの作業待ち時間を有効活用する方法は？

AIが要件書やコードを生成している間に、実装で必要となる外部サービスを準備します。動画では、Tursoのデータベース作成、Google Cloudの認証プロジェクト、Better Authのシークレット、Polarの確認などを並行して進めています。秘密情報を扱う画面は公開せず、環境変数へ設定する前提です。

Q: AIでランディングページのデザインを決める方法は？

サービス概要を渡し、異なるデザインテーマを複数生成させて比較します。動画ではサイバー、プロ、ポップの3案を確認し、広告画像サービスとの相性を踏まえてポップを選んでいます。必要なら別テーマをさらに3つ追加し、各テーマでどのような画面が生成されるかという知見も蓄積します。

Q: ログイン前の導線はどのように設計すべきですか？

話者は、最初から認証ページへ移動させるより、作成できる広告画像のテンプレートを認証なしで見せる案を勧めています。利用者に生成結果を想像させ、作りたいという動機が生まれた後でGoogle認証を提示する設計です。ただし、登録率が上がるという見解は動画内の提案で、比較検証の結果は示されていません。

Q: 個人開発とチーム開発はどう使い分けますか？

話者の見解では、個人開発はレビューや運用ルールなどの制約が少なく、立ち上げ速度を優先しやすい方法です。一方、チーム開発は開始時の調整が増えるものの、テスト、レビュー、Git管理などを通じて品質と長期的な保守性を整えやすいとしています。目的に応じて速度と運用品質を比較します。

Summary & Key Takeaways

• 最初に作りたいサービスと利用技術を整理し、Cursorとの対話で要件を具体化する。広告画像AIでは、日本語入力からSNS向け画像を生成し、後からAI編集、履歴確認、ダウンロードができる構成を想定する。認証はGoogle、初回付与は5クレジット、有料版はサブスクリプションとし、画像保存にはCloudflare R2を選んでいる。

• 実装前には要件定義だけでなく、タスク進捗表、開発用資料、Next.js App RouterとBetter Authのベストプラクティスも作成する。AIにフェーズ単位で作業を依頼し、完了項目へチェックを入れさせることで、現在地と次の作業を把握する。AIの処理中には、Google Cloudの認証設定や外部サービスの準備を並行して進める。

• UIは一度の生成結果で決めず、サイバー、プロ、ポップなど複数のデザインテーマを比較する。話者は広告画像サービスとの相性からポップを採用し、好みのテーマごとに生成傾向を蓄積する方法を示す。認証導線では、最初からログインを求めず、生成可能な広告テンプレートを見せて利用意欲を高めてから認証へ進ませる案も提示している。