Bolt.new でフルスタックWebアプリを30分で作る実践ガイド2026

この記事でわかること

  • Bolt.new で要件定義からデプロイ完了まで30分で進めるための具体的な手順
  • 失敗しないプロンプトの書き方とプロジェクト構成の決め方
  • 生成後のコード読み解きと最低限の手直し箇所

結論

中級開発者であれば、Bolt.new で「ToDo+認証+DB保存」程度のアプリは30分以内で公開URLまで到達できます。鍵はプロンプトの粒度・段階的な指示・デプロイ前のセルフチェックの3点です。

本題

ステップ1: 要件を3行で固める（5分）

Bolt.new に渡すプロンプトの質は、頭の中の要件がどれだけ整理されているかで決まります。本格的な仕様書は不要ですが、最低でも次の3行を紙に書いてからエディタを開きます。

  • 何を: 「個人用のタスク管理アプリ」
  • 誰が使う: 「自分1人、認証はGoogleログインのみ」
  • 譲れない技術: 「Next.js 14 + Supabase + Tailwind CSS」

この3行を曖昧にしたままプロンプトを書くと、AIがフレームワーク選定でブレて手戻りが発生します。

ステップ2: 初期プロンプトを投げる（5分）

プロンプトは「役割 → 技術スタック → 機能 → 受け入れ条件」の順で書きます。

あなたはNext.js + Supabaseに精通したフルスタックエンジニアです。
以下の要件で個人用タスク管理アプリを生成してください。

技術: Next.js 14 (App Router) / TypeScript / Supabase Auth + Postgres / Tailwind CSS
機能:
- Google認証でログイン
- ログイン後にタスク一覧（追加・完了・削除）
- 完了済みタスクは別タブで表示
受け入れ条件:
- 認証なしでアクセスしたらログインページへリダイレクト
- タスクのCRUDはRLSで自分のレコードのみ

このレベルまで書けば、Bolt.new は1ショットで動くスケルトンを返します。

ステップ3: プレビューで動作確認しながら追加指示（10分）

生成直後はプレビューが立ち上がるので、まず認証・CRUD・リダイレクトを手動で叩きます。動かない箇所は AI チャットに「○○の画面で△△を押すとXXエラー、修正して」と具体的に伝えるのがコツです。

修正指示の良い例: - 「ログアウトボタンをヘッダー右上に追加し、押下後に / にリダイレクト」 - 「タスク追加フォームに最小1文字のバリデーションを入れ、空送信時はトーストでエラー表示」

逆に「全体的にきれいにして」のような抽象指示はリファクタが暴走しやすいので避けます。

ステップ4: 環境変数とSupabase連携（5分）

Bolt.new はプロジェクト直下に .env.local のテンプレを作るので、Supabase ダッシュボードから取得した NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY を貼ります。RLSポリシーは AI が自動生成しますが、念のため Supabase の SQL Editor で select * from policies 相当のクエリを叩いて、自分の user_id 縛りになっているか目視確認します。

ステップ5: Vercelへデプロイ（5分）

右上の「Deploy」ボタンから Vercel 連携を選択。GitHub リポジトリ作成 → Vercel プロジェクト作成 → 環境変数を Vercel 側にもコピーまでが流れ作業です。デプロイ完了後、本番URLでもう一度ログイン〜タスク追加までスモークテストして終了。

失敗しないための3つの注意点

  1. デザイン指示は最後にまとめて: 機能が固まる前にUI調整を頼むと、機能修正のたびにデザインがブレます。
  2. データベーススキーマは1回確定させる: 途中で tasks テーブルにカラム追加するとマイグレーションが二重発行されることがあるので、初期プロンプトで列を出し切ります。
  3. Bolt.new の課金枠に注意: 無料枠のメッセージ数は意外とすぐ消費するので、関係ない雑談はせず、本番作業に集中します。

よくある質問（FAQ）

Q1: 30分で本当に公開URLまで行けますか？

A1: 個人用の小規模アプリ（CRUD + 認証 + 1〜2画面）なら可能です。マルチテナント対応や複雑な権限制御を入れる場合は1〜2時間見ておくのが安全です。

Q2: 生成されたコードを後から自分のローカルで触れますか？

A2: はい、Bolt.new は GitHub 連携で自分のリポジトリへエクスポートできるので、以後はローカルの VS Code や Cursor で続きを書けます。

Q3: TypeScript が苦手でも使えますか？

A3: 使えますが、エラー文の意味が分からないと直しづらいので、最低限「型エラーの読み方」は別途学習しておくと詰まりにくいです。

まとめ

中級者向けに Bolt.new で30分アプリを作る実践フローを示しました。プロンプト設計と段階的な指示が肝で、AI に任せきりにせず「動作確認→具体的な修正指示」を回すことが品質を担保するコツです。次は同じアプローチで Stripe 課金や PWA 化など、機能追加に挑戦してみてください。