AI活用ツール・副業

Bolt.new入門2026｜ブラウザだけでフルスタックアプリを作る全手順

Q: プログラミング未経験でも使える？

使える。自然言語で指示するだけでアプリが生成されるので、コードを書く必要はない。ただし何を作りたいかを具体的に言語化する能力は必要。

Q: 無料プランで商用利用はできる？

できない。商用利用はTeamsプラン（$30/人/月）以上が必要。個人の学習や検証目的なら無料プランで十分。

Q: 日本語のプロンプトでも動く？

動く。ただしUIのラベルが英語になるケースがある。全てのテキストを日本語にしてと追加指示すれば修正される。

Q: CursorやGitHub Copilotとの違いは？

CursorやCopilotはコードを書く人の生産性を上げるツール、Bolt.newはコードを書かない人がアプリを作るツール。既にプログラミングができる人にはCursorの方が柔軟性が高い。

2026年4月8日読了時間: 約10分

Bolt.newとは - ブラウザで完結するAI開発環境
Bolt.newの仕組みとできること
Bolt.newの始め方 - 登録からデプロイまで
料金プラン比較 - 無料枠でどこまで使えるか
Lovable・v0との違い - どれを選ぶべきか
Bolt.newで失敗しないための実践テクニック
Bolt.newの限界と向かないケース
よくある質問
まとめ

「アプリを作りたいが、環境構築だけで挫折した」という声はエンジニア・非エンジニア問わず多い。Bolt.newはこの障壁をゼロにするツールだ。ブラウザを開いて自然言語で指示を出すだけで、フルスタックのWebアプリが動く状態で生成される。

2026年に入り、Vibe Codingと呼ばれる「AIに自然言語で指示してアプリを作る」開発スタイルが急速に広がっている。NTTドコモが社内ハッカソンに採用し、非エンジニアのCEOがSaaSプロダクトをリリースした事例も出てきた。Bolt.newはその代表格の一つ。無料プランもあるので、実際に触りながら読み進めてほしい。

Bolt.newとは - ブラウザで完結するAI開発環境

Bolt.newはStackBlitz社が開発したAI駆動のフルスタック開発プラットフォームだ。ブラウザ上で動作する独自技術「WebContainers」を基盤としており、ローカルにNode.jsやnpmをインストールする必要がない。

従来のAIコーディングツール（CursorやGitHub Copilot）との決定的な違いは、コードを書く支援ではなく、アプリそのものを丸ごと生成する点にある。

Bolt.newの位置づけ

「プロンプトを書くだけで、React + Tailwind + Supabaseのアプリが動く状態でブラウザに出現するツール」

StackBlitz社はWebContainersの技術で知られた企業で、VSCodeのブラウザ版であるStackBlitz IDEの実績がある。Bolt.newはその技術資産の上に構築されたプロダクトだ。

Bolt.newの仕組みとできること

WebContainersとは

通常のWeb開発では、ローカルマシンにNode.jsやPython、各種パッケージマネージャを入れてから作業を始める。WebContainersはこれらの実行環境をブラウザ内に再現する技術だ。サーバーサイドのコンテナ（Docker等）とは異なり、ユーザーのブラウザ内で完結するため、セキュリティ上のリスクも低い。

Bolt.newでできること

フルスタックアプリ生成: フロントエンド（React, Vue, Svelte, Astro等）+ バックエンド + データベースを一括生成
リアルタイムプレビュー: コード生成と同時にアプリが動作する状態で確認できる
npmパッケージの自動インストール: 必要なライブラリをAIが判断して自動で追加
ワンクリックデプロイ: Netlifyへの公開がボタン一つで完了
データベース統合: Supabase等のBaaSと連携し、認証やデータ永続化も対応
コード編集: 生成されたコードを直接エディタで修正可能

ここが見落としがちだが、Bolt.newは「ノーコードツール」ではない。裏側では実際のコード（React、TypeScript等）が生成されており、エクスポートして自分の環境で開発を続けることもできる。ノーコードツールにありがちなベンダーロックインのリスクが低い。

Bolt.newの始め方 - 登録からデプロイまで

Step 1: アカウント登録

bolt.newにアクセスし、Googleアカウントまたはメールアドレスで登録する。無料プランですぐに使い始められる。

Step 2: プロンプトでアプリを生成

トップページのテキストボックスに作りたいアプリの説明を入力する。日本語でも動作するが、英語の方が精度は高い傾向がある。

プロンプト例（日本語）

「タスク管理アプリを作ってください。ユーザー認証あり、タスクの追加・編集・削除ができて、期限が近いタスクは色で警告表示。React + Tailwind + Supabaseで構成してください」

数十秒待つと、左側にコードエディタ、右側にアプリのプレビューが表示される。この時点でアプリは実際に動作している状態だ。

Step 3: 修正指示を出す

生成されたアプリに不満があれば、チャットで追加の指示を出す。

修正プロンプト例

「ヘッダーの色を青に変えて」
「タスク一覧をドラッグ&ドロップで並べ替えられるようにして」
「ダークモード切り替えボタンを追加して」

修正のたびにトークンを消費する。無料プランでは月100万トークン（日15万トークン上限）なので、指示は具体的に出した方がトークンの無駄遣いを防げる。

Step 4: デプロイ

画面右上の「Deploy」ボタンからNetlifyにワンクリックでデプロイできる。独自ドメインの設定はProプラン以上が必要だ。

料金プラン比較 - 無料枠でどこまで使えるか

公式サイトの料金ページを確認し、2026年4月時点の最新情報をまとめた。

プラン	月額	トークン	主な特徴
Free	$0	100万/月（日15万上限）	基本機能、Boltブランド表示、商用利用不可
Pro	$25	1000万/月（日上限なし）	ブランド非表示、独自ドメイン、100MB Upload、トークン繰越
Teams	$30/人	1000万+/人	チーム管理、組織共有、商用利用可
Enterprise	要問合せ	カスタム	SSO、監査ログ、SLA、専任サポート

トークン消費の落とし穴

無料プランの100万トークンは「1つのアプリを作って数回修正」で消費しきるケースが多い。複雑な指示を一度に出すほどトークン消費が増える。まずは小さなアプリで試し、トークンの減り方を体感してからProプランを検討する方が無駄がない。

Proプランのトークン繰越は2025年7月から導入された機能で、未使用分が翌月まで持ち越せる。ただし有効期間は最大2か月なので、大量に貯め込む使い方はできない。

Lovable・v0との違い - どれを選ぶべきか

Vibe Codingツールは2026年に入って急増した。3つの主要サービスを実際に比較検証した結果、それぞれ得意領域が明確に分かれていた。

比較項目	Bolt.new	Lovable	v0（Vercel）
得意領域	フルスタックMVP	Supabase連携アプリ	UIコンポーネント
対応フレームワーク	React, Vue, Svelte, Astro等	React（固定）	React + shadcn/ui
バックエンド	各種BaaS連携	Supabase統合	なし（フロントのみ）
デプロイ	Netlify	ワンクリック	Vercel
コード品質	中〜高	中	高（最もクリーン）
無料枠	100万トークン/月	制限あり	制限あり
商用利用	Teamsプラン以上	有料プラン以上	有料プラン以上

目的別の選び方

「認証付きのWebアプリを最速で形にしたい」 → Lovable（Supabase統合が強い）
「React以外のフレームワークも試したい」 → Bolt.new（マルチフレームワーク対応）
「UIコンポーネントだけ生成したい」 → v0（コード品質が最も高い）
「とにかく無料で試したい」 → Bolt.new（無料枠が最も大きい）

Lovableは2か月で年間売上2000万ドル（ARR）に到達した急成長サービスだ。Supabaseとの統合が深く、認証・データベース・ストレージまで自然言語で構築できる点が強い。一方でフレームワークの選択肢がないのが制約になる。

v0はVercelが提供するUIコンポーネント生成ツール。バックエンドは持たないが、生成されるReact + shadcn/uiのコードは3つの中で最もクリーンだ。デザインシステムの構築やFigmaからのコード変換に向く。

Bolt.newで失敗しないための実践テクニック

1. プロンプトは「具体的 + 段階的」に

一度に全部を詰め込むとトークンを大量消費する上に、意図と違うアプリが生成される確率が上がる。

効率的なプロンプト戦略

まず骨格: 「Reactでタスク管理アプリ。タスクの追加・一覧表示のみ」
次にUI: 「ヘッダーを青に。カードレイアウトに変更」
最後に機能追加: 「Supabaseで認証を追加。ログインしたユーザーのタスクのみ表示」

2. フレームワークを明示する

Bolt.newは複数のフレームワークに対応しているが、指定しないとAIが勝手に選ぶ。技術スタックを明示した方が結果が安定する。

React + TypeScript + Tailwind CSSでブログサイトを作成。
ルーティングはReact Router v7を使用。
状態管理はZustand。

3. 生成コードは必ずエクスポートする

Bolt.new上でのみ動くアプリに依存するのはリスクがある。生成が終わったらGitHubにエクスポートし、ローカルでも動作確認しておくべきだ。Proプラン以上ならGitHub連携がスムーズに動く。

4. トークン消費を意識する

「元に戻して」「やっぱり前の方がよかった」という修正が最もトークンを浪費する。指示を出す前にテキストエディタに「現在の状態」を一行メモするだけで、無駄なロールバックが減る。

Bolt.newの限界と向かないケース

Bolt.newは万能ではない。向かないケースを先に把握しておく方が、後で余計な回り道をしなくて済む。

複雑なバックエンドロジック: 決済処理、リアルタイム通知、バッチ処理など、ビジネスロジックが複雑なアプリはBolt.newだけでは完結しない。生成されたコードを引き取って手動で拡張する必要がある
大規模アプリ: ファイル数が増えるとAIの把握範囲を超え、意図しない変更が入りやすくなる。目安として20画面を超えるアプリは分割を検討した方がよい
モバイルアプリ: Webアプリ専用。React Nativeには非対応のため、ネイティブアプリを作りたい場合は別のツールが必要だ
CI/CDとの統合: テスト自動化やデプロイパイプラインの構築には対応していない。本番運用に乗せるなら、エクスポート後に自前でCI/CDを組むことになる

Bolt.newの最適な使い方

MVP（最小限の動くプロダクト）の高速プロトタイピングに使い、検証が済んだら本格的な開発環境に移行する。「0→1」のフェーズに特化したツールと割り切るのが賢い。

よくある質問

プログラミング未経験でも使える？

使える。自然言語で指示するだけでアプリが生成されるので、コードを書く必要はない。ただし「何を作りたいか」を具体的に言語化する能力は必要だ。また、生成されたアプリの微調整にはHTML/CSSの基礎知識があると効率が上がる。

無料プランで商用利用はできる？

できない。商用利用はTeamsプラン（$30/人/月）以上が必要。個人の学習や検証目的なら無料プランで十分だ。

生成されたコードの著作権は？

有料プランで生成したコードの権利はユーザーに帰属する。エクスポートして自由に使える。

日本語のプロンプトでも動く？

動く。ただしUIのラベルやプレースホルダが英語になるケースがある。「全てのテキストを日本語にして」と追加で指示すれば修正される。

CursorやGitHub Copilotとの違いは？

CursorやCopilotは「コードを書く人の生産性を上げるツール」、Bolt.newは「コードを書かない人がアプリを作るツール」。既にプログラミングができる人にはCursorの方が柔軟性が高い。Bolt.newはゼロからアプリの形を作りたい場面で価値を発揮する。

まとめ

Bolt.newは「アイデアを最速でアプリにする」ことに特化したツールだ。環境構築ゼロ、自然言語で指示、ブラウザ内で即プレビュー。環境構築に慣れているエンジニアほど、最初のプレビュー表示で手が止まる。

一方で、複雑なバックエンドや大規模アプリには向かない。MVPの「0→1」に使い、検証が通ったら本格環境へ移行する。アイデアから動くものが出るまで数十分になる。それだけだ。

bolt.newを開いて「Todoアプリを作って」と日本語で打ち込む。それだけで10分後にはReactアプリが動いている。