Bolt.new完全ガイド2026｜AIフルスタックビルダーの全て

「プロンプトを打てばフルスタックアプリが動く」──2024年秋に登場したBolt.newは、わずか6ヶ月で年換算ARR 4,000万ドルを突破し、AIアプリビルダー市場の筆頭格に躍り出た。GitHubでオープンソース公開されているコアとStackBlitzのWebContainer技術を組み合わせ、ブラウザ一つでNode.jsフルスタック環境が完結する点が競合とは根本的に異なる。

同カテゴリのv0.dev（Vercel）がUI生成に特化しているのに対し、Bolt.newはバックエンド・DB・デプロイまで一貫して扱える。本記事ではBolt.newの仕組みから料金・実用パターン・失敗例まで、開発者・PMが判断に必要な情報をすべてまとめる。

Bolt.newとは──StackBlitz WebContainerが核心

Bolt.newはStackBlitz社が提供するAIフルスタックアプリビルダーだ。URLは bolt.new で、ブラウザを開くだけで使い始められる。ローカルへのNode.jsインストールもDockerも不要。

その秘密はWebContainerという技術にある。WebAssemblyとService Workerを組み合わせてブラウザのタブ内に完全なNode.jsランタイムを立ち上げるため、npm install も tsc コンパイルも実際にブラウザ内で動く。AIがコードを生成すると同時に実行され、エラーはリアルタイムでAIにフィードバックされ自動修正される。

# Bolt.newでできることの例（プロンプト例）
"Supabaseを使ったTodoアプリをNext.js + Tailwind CSSで作ってください。
CRUD操作・ユーザー認証・レスポンシブUI付きで。"

→ AIがファイル生成 → WebContainerで即実行 → ブラウザ内でプレビュー確認
→ エラーがあればAIが自動検出・修正 → Netlifyに1クリックデプロイ

2025年10月リリースのBolt v2では自律デバッグ機能が強化され、エラーループが98%削減されたと公式発表されている。同時に「Bolt Cloud」としてDB・認証・ファイルストレージ・エッジ関数・解析・ホスティングが統合された。

利用プラン──Free/Pro/Team/Enterprise

2026年5月時点の公式料金ページをもとにした4層構成は次のとおりだ。

プラン	月額	トークン/月	主な用途
Free	$0	100万（日次30万上限）	試用・小規模プロトタイプ
Pro	$20	1,000万	ホビー・個人開発
Pro 50	$50	2,600万	週複数回の業務利用
Pro 100	$100	5,500万	日常業務のメインツール
Pro 200	$200	1億2,000万	パワーユーザー・連続開発
Team	$30/人	チーム共有	チームテンプレート共有・管理
Enterprise	要問合せ	カスタム	SSO・監査ログ・優先サポート

2025年7月以降、未使用トークンは翌月まで繰越可能（1ヶ月分のみ）になった。複雑なアプリほどトークン消費が増えるため、重要プロジェクトにはPro 50以上が現実的な選択肢になる。

トークン消費の目安（概算）
- シンプルなLandingPage生成: ~2万トークン
- Todo CRUD + 認証あり: ~15万トークン
- フルスタックSaaS MVP: ~50〜100万トークン
→ Freeプランの1日30万上限はすぐ到達する

基本ワークフロー──プロンプトから本番デプロイまで

Bolt.newの基本フローは「プロンプト → 生成 → 編集 → デプロイ」の4ステップだ。各ステップでの操作を具体的なプロンプト例と共に示す。

Step 1: プロンプトで生成

【良いプロンプトの書き方】

◎ 良い例:
"React + Vite + Tailwind CSSで、ユーザーがタスクを追加・削除・完了できる
Todoアプリを作ってください。データはlocalStorageに保存し、
ダークモード切り替えボタンも付けてください。"

✕ 悪い例:
"Todoアプリ作って"（情報不足 → 何度もやり取りが必要になる）

ポイント:
- スタック（フレームワーク）を明示する
- 機能要件を箇条書きで書く
- データ永続化の方法を指定する

Step 2: リアルタイム実行・確認

生成が始まるとBolt.newの画面は左にコードエディタ、右にプレビュービューが表示される。WebContainerがNode.jsを起動し、実際にブラウザ内でアプリが動く。エラーが出るとAIが自動的にコンソールを確認して修正を試みる。

Step 3: インラインチャットで修正

生成後の修正プロンプト例:
"ヘッダーの色を青から白に変えて、ロゴを左揃えにしてください"
"フォームにバリデーションを追加して、メールアドレスの形式チェックも入れてください"
"ページ遷移にアニメーションを追加してください（fade-in）"

Step 4: Netlify/Vercelにデプロイ

# Bolt.newからNetlifyへ1クリックデプロイ
# UIボタンから実行可能。CLIを使う場合:
netlify deploy --prod --dir=dist

# Vercelの場合
vercel --prod

WebContainer実行環境──ブラウザ内Node.jsの仕組み

WebContainerはStackBlitzが開発した技術で、WebAssembly + Service Workerを使ってブラウザのサンドボックス内にNode.jsランタイムを完全実装したものだ。これにより：

• サーバーへのコード送信が不要（ローカル実行）
• ネットワークレイテンシなしでnpm installが動く
• AIがファイルシステム・パッケージマネージャー・ターミナル出力・ブラウザコンソールを直接参照できる
• 実際のエラーメッセージを見てリアルタイム修正できる

// WebContainerが内部でやっていること（概念コード）
const webcontainer = await WebContainer.boot();

// npm install がブラウザ内で動く
await webcontainer.spawn('npm', ['install']);

// サーバー起動もブラウザ内
const serverProcess = await webcontainer.spawn('npm', ['run', 'dev']);

// ポートが開いたらプレビューURLを取得
webcontainer.on('server-ready', (port, url) => {
  previewIframe.src = url; // ブラウザ内でプレビュー表示
});

フロントエンドフレームワーク対応

Bolt.newはv0.devやLovableより多くのフレームワークに対応している。

フレームワーク	対応状況	備考
React / Next.js	✅ フル対応	App Router対応
Vite + React	✅ フル対応	最速プロトタイプ向け
Astro	✅ フル対応	静的サイト・ブログ向け
Remix	✅ フル対応	フォーム重視アプリ向け
Vue 3	✅ フル対応	Vite構成
Svelte / SvelteKit	✅ フル対応	軽量アプリ向け
Angular	✅ フル対応	エンタープライズ向け
React Native / Expo	✅ 対応（v0/Lovableは非対応）	モバイルアプリ生成可能

v0.devとLovableはモバイル開発に非対応である。iOS/Androidアプリのプロトタイプが必要な場合はBolt.newが唯一の選択肢になる。

バックエンド対応──Express / Fastify / Supabase連携

Bolt.newの最大の強みはバックエンドをブラウザ内でそのまま動かせる点だ。v0.devが生成したコンポーネントを既存プロジェクトに組み込む作業が別途必要なのに対し、Bolt.newは一つの環境でAPIサーバーまで完結する。

// Bolt.newが生成するExpressサーバーの例
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());
app.use(express.json());

// ルート定義
app.get('/api/todos', async (req, res) => {
  const todos = await db.query('SELECT * FROM todos ORDER BY created_at DESC');
  res.json(todos.rows);
});

app.post('/api/todos', async (req, res) => {
  const { title } = req.body;
  const result = await db.query(
    'INSERT INTO todos (title, completed) VALUES ($1, false) RETURNING *',
    [title]
  );
  res.json(result.rows[0]);
});

app.listen(3001, () => console.log('API running on port 3001'));

// Supabase連携プロンプト例と生成コード
// プロンプト: "Supabaseを使って認証付きのメモアプリを作って"

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);

// 認証
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password',
});

// データ取得
const { data: notes } = await supabase
  .from('notes')
  .select('*')
  .eq('user_id', data.user.id);

DB統合──Postgres / SQLite / Supabase

Bolt v2（2025年10月〜）では「Bolt Cloud」として以下のDB・インフラが統合されている。

• 内蔵DB（SQLite互換）: Bolt Cloud環境内で即使用可能。ローカルプロトタイプ向け
• Supabase連携: 接続文字列を.envに設定するだけでPostgreSQL + 認証が使える
• PostgreSQL（外部）: Neon・Railway等の外部PostgreSQLサービスと接続可能
• Prisma ORM対応: スキーマ定義からマイグレーションまでBolt内で実行可能

// Bolt.newが生成するPrismaスキーマ例
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())
}

デプロイ──Netlify / Vercel連携

Bolt.newはNetlifyとの公式連携が最も深く、UIから1クリックでデプロイできる。Vercelへは手動または設定ファイル経由での連携が可能だ。

// vercel.json（Bolt.newが生成するVercel設定例）
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

2026年の更新で「Editable Netlify URLs」機能が追加され、再デプロイなしでサイトURLを変更できるようになった。また「Team Templates」でプロジェクト構造を組織内で統一できる。

v0.dev / Lovable との詳細比較

3ツールはそれぞれ異なる強みを持つ。用途に応じた使い分けが重要だ。

項目	Bolt.new	v0.dev	Lovable
運営元	StackBlitz	Vercel	Lovable（欧州）
実行環境	ブラウザ内WebContainer	なし（コード生成のみ）	クラウドサンドボックス
フロントエンド	React/Vue/Svelte/Angular/Astro等	React/Next.js中心	React中心
バックエンド	Express/Fastify対応	非対応（別途構築）	Supabase統合
DB統合	SQLite/Postgres/Supabase	なし	Supabase（強力）
モバイル	React Native/Expo対応	非対応	非対応
コード品質	動くが長大になりがち	シニアRC品質	動くが密結合傾向
Vercel連携	手動	ネイティブ統合	なし
GitHub Export	可能	可能	可能
セキュリティ認証	なし	なし	SOC2/ISO27001
無料プラン	あり（100万トークン/月）	あり（月200クレジット）	あり（限定）
有料プラン最安	$20/月	$20/月	$25/月

選択基準のまとめ:

• Bolt.new: フルスタック・複数フレームワーク・モバイルが必要、ブラウザ完結がほしい
• v0.dev: Vercelエコシステム内のUI生成、既存Next.jsプロジェクトへの組み込み
• Lovable: Supabase統合MVPを最速で動かしたい、セキュリティ要件あり

Cursor / Claude Code との連携パターン

Bolt.newで生成したコードをCursorやClaude Codeで磨くワークフローが、プロの使い方として定着している。役割分担は明確だ。

【Bolt → Cursor連携ワークフロー】

Phase 1（Bolt.newで「骨格生成」）
  - プロンプトでMVP生成（30分）
  - 動作確認・基本機能の確認
  - GitHubにエクスポート

Phase 2（Cursorで「品質向上」）
  - コードレビューと型付け強化
  - コンポーネント分割・リファクタ
  - テスト追加（Vitest/Jest）
  - パフォーマンス最適化

Phase 3（Claude Codeで「ロジック精査」）
  - 複雑なビジネスロジックの実装
  - セキュリティ脆弱性の検出・修正
  - APIインテグレーションの最適化

# BoltからGitHub経由でCursorに引き継ぐ手順
# 1. Bolt.new上でGitHubリポジトリにエクスポート
# 2. ローカルにクローン
git clone https://github.com/username/bolt-generated-app.git

# 3. Cursorで開く
cursor bolt-generated-app/

# 4. 依存関係確認
npm install

# 5. 型エラーを確認
npx tsc --noEmit

Claude Codeとの連携についてはMCPを使ったAIエージェント連携も参照されたい。

実用パターン10選

Bolt.newが実際にどのような場面で使われているかを具体的なプロンプトと共に示す。

【パターン1】SaaSランディングページ（15分）
"Next.jsでSaaSのランディングページを作って。ヘッダー・ヒーロー・機能紹介・料金・FAQ・フッターのセクション構成で。Tailwind CSS使用。"

【パターン2】管理ダッシュボード（30分）
"React + Recharts + shadcn/uiで売上ダッシュボードを作って。折れ線グラフ・棒グラフ・KPIカード4枚のレイアウト。モックデータで動かして。"

【パターン3】フォームとバリデーション（10分）
"React Hook Form + Zodでお問い合わせフォームを作って。名前・メール・件名・本文のフィールド。送信後に確認メッセージを表示。"

【パターン4】認証付きアプリ（45分）
"Next.js + NextAuth.js + Prisma + PostgreSQLでGitHub/Google認証付きのブックマーク管理アプリを作って。"

【パターン5】REST APIサーバー（20分）
"Express + TypeScript + Prismaで書籍管理のREST APIを作って。CRUD操作・ページネーション・バリデーション付き。"

【パターン6】リアルタイム機能（30分）
"Socket.ioを使ったシンプルなチャットアプリをReact + Node.jsで作って。ルーム機能とユーザー名設定付き。"

【パターン7】Stripe決済統合（40分）
"Next.js + Stripe Elements + Webhookで月額サブスクリプション機能を実装して。成功・失敗ページも含む。"

【パターン8】ファイルアップロード（25分）
"React + Expressでドラッグ&ドロップのファイルアップロード機能を作って。進捗バー・プレビュー表示付き。最大5MBの画像のみ受付。"

【パターン9】モバイルアプリプロト（60分 / Expo）
"React Native + Expoでシンプルな習慣トラッカーアプリを作って。チェックボックス・カレンダービュー・AsyncStorageで永続化。"

【パターン10】AIチャットUI（20分）
"Next.js + Vercel AI SDK + OpenAI APIを使ったチャットインターフェースを作って。ストリーミングレスポンス対応。"

失敗パターン4選──よくある落とし穴

Bolt.newを使い始めて陥りやすい失敗と対策を整理する。

失敗パターン	症状	対策
曖昧なプロンプト	Bolt.newが過剰な機能を追加、修正に大量トークン消費	スタック・機能・データ永続化を最初に明示
一度に全部頼む	生成が途中で止まる・品質が低下	機能を小分けにして段階的に生成
Freeプランでの大規模開発	1日30万トークンで上限ヒット・開発が止まる	MVP確認後にProプランに移行してから本格開発
生成コードをそのまま本番投入	型エラー・セキュリティ脆弱性・テストなし	必ずCursorまたはClaude Codeでレビュー後にデプロイ

【特に注意】長いセッションでのコンテキスト劣化

Bolt.newとのチャットが長くなると初期の指示が薄れ、
一貫性のないコードが生成されることがある。

対策:
- 200〜300回のやり取り前後で新しいチャットを開始
- 最初のプロンプトに「プロジェクト全体の方針」を含める
- 重要な設計決定はコメントとしてコードに残す

まとめ──Bolt.newを使うべき場面・使わない場面

Bolt.newは「フルスタックをブラウザ完結で生成したい」という需要に最も応えるツールだ。WebContainer技術により、バックエンドを含む複雑なアプリのプロトタイプが30〜60分で動く状態になる。

一方でコード品質はシニア開発者が書いたレベルには及ばないため、本番TypeScriptプロジェクトに適用する前にはCursorやClaude Codeでのレビューが前提になる。v0.devが「Vercelエコシステム内のUI部品生成」に特化しているのに対し、Bolt.newは「フルスタックのプロトタイプを一気に動かす」使い方に向いている。

プロトタイピング・MVP開発・デモ作成の場面でBolt.newを活用し、本番化フェーズでCursorやClaude Codeに引き渡す2段階ワークフローが、2026年現在の現実的な使い方だ。

---

あわせて読みたい（3大AIアプリビルダー比較シリーズ）:

• Lovable完全ガイド2026 — AIフルスタックNo-Codeアプリビルダー