環境構築は不可能、と思い込んでいないか。
Bolt.newなら、その常識は通用しない。ブラウザを開いて、プロンプトを入力するだけで、フルスタックのWebアプリが動く。ローカル環境。Node.js。npmも不要。これが本当だ。
2025年11月、僕が初めてBolt.newを試したとき、「TODOアプリを作ってください」と入力して3秒。フロントエンド。バックエンド。スタイルが完成。Cursorで1時間かけていた作業が、3秒で完了した。衝撃だった。
- Bolt.newはStackBlitzが提供するAIアプリ開発ツール
- 登録からアプリ完成まで、全手順を実演
- プロンプトのコツ(良い例・悪い例)
- リアルタイム編集で細かい修正する方法
- Netlifyへのワンクリックデプロイ
- Lovable・Windsurf との使い分け基準
Bolt.new とは|StackBlitzが提供するAIアプリ開発ツール
Bolt.newはStackBlitz社のサービス。フルスタックのWebアプリを、ブラウザだけで開発できる。
Bolt.newの3つの特徴
特徴1:ブラウザ完結。インストール不要。特徴2:フルスタック対応(React + Node.js + DB)。特徴3:デプロイワンクリック(Netlify連携)。
従来なら「Node.jsインストール→npmセットアップ→ローカルサーバー起動→デバッグ」。Bolt.newなら、全部ブラウザ上。バックエンド機能もブラウザで実行。これが「次世代の開発」だ。
実際に開発完結
フロントエンド(React)。バックエンド(Express)。データベース(SQLite)。全てがブラウザ上で動く。ローカル環境に一切ダウンロードされない。安全。速い。
Bolt.newで必要なもの|登録から最初の一歩
アカウント登録方法(無料 / 有料の違い)
無料プランで開始可能。bolt.new のトップページで「Sign Up」。メールアドレスのみで登録。Googleアカウントでも OK。確認メール1クリック。2分で完了。
ブラウザで bolt.new を開く。右上「Sign Up」をクリック。
メールアドレス入力 or Googleアカウント選択。
メール受信(数秒)。リンククリック。パスワード設定(不要な場合もある)。
準備完了。これだけ。
動作環境とブラウザ対応
Chrome。Firefox。Safari。Edge。全ブラウザ対応。解像度は1024px以上推奨。スマートフォンは「プレビュー確認」のみ。開発画面は PC 推奨。
Bolt.newの使い方|4ステップで完成までの流れ
Step1. プロジェクト作成とプロンプト入力
「New Project」をクリック。説明文入力:「React の TODO アプリ。タスク追加・削除・完了機能。Bootstrap で整える」。「Create」クリック。
これだけ。プロンプトが詳細なほど、AIは正確に理解する。曖昧だと、やり直しが増える。
Step2. AIが生成したコードをプレビュー確認
右側にリアルタイムプレビュー。「Add Task」ボタンが動く。入力欄で新規タスク追加。完了。この時点で、すでに機能するアプリが存在する。
| 確認項目 | 良い状態 | 修正が必要 |
|---|---|---|
| ボタンが動く | クリックで反応 | 反応なし |
| 入力欄がある | テキスト入力可 | 入力不可 |
| デザイン | ある程度整っている | 崩れている |
| エラー表示 | コンソールに出ない | 赤いエラー表示 |
Step3. リアルタイム編集で細かい修正
チャット欄に「ボタンを大きく、背景をピンク色に」と入力。1秒。修正完了。リアルタイムプレビューが変化。「タスク削除ボタンを赤色に」。また1秒。完成形に近づく。
複数回修正が当たり前。「デザインをもっとシンプルに」「フォントサイズを大きく」「スペース を増やして」。5回程度の修正で、ほぼ完璧な見た目。
Step4. Netlifyへワンクリックデプロイ
左上「Deploy」ボタン。「Deploy to Netlify」選択。Netlifyアカウント連携(初回のみ)。自動でGit連携。URL生成。完了。
この時点で、世界中からアクセス可能。Share可能。仕事の成果物として、すぐに提出できる。
プロンプトのコツ|AIに伝わる指示の書き方
具体的な要件を明確に伝える
悪い例:「ECサイトを作ってください」。AIは何を作るか迷う。商品数。支払い方法。ログイン機能。判断がつかない。
良い例:「商品一覧ページ(グリッドレイアウト4列)、カートシステム(商品追加時に確認ダイアログ)、決済ページ(Stripe連携必須)」。明確。実装の順序まで見える。
デザイン・色・レイアウトを指定する
悪い例:「可愛いランディングページ」。「可愛い」は人によって違う。
良い例:「ピンク系(RGB: 255, 192, 203)を基調とした、高級コスメ向けランディングページ。ヘッダーに大きく商品画像。下部に料金表(3列×4行)」。
ダメなプロンプト
- 「SNS機能をつけて」
- 「管理画面を作ってください」
- 「いい感じのデザイン」
- 「いくつか機能を追加
良いプロンプト
- 「ユーザー登録(メール+パスワード)→投稿作成(テキスト+画像)→フィード表示(新着順)→いいね機能(クリックで色が赤に)」
- 「ユーザー管理、商品マスタ管理、売上レポートの3ページ(左メニューで切り替え)」
- 「全体背景 #f5f5f5、ボタン カラー #ff6b9d、フォント sans-serif」
- 「ステップ1: トップページ完成。ステップ2: 認証機能。ステップ3: データベース連携」
複数回の修正で理想に近づける
1回で完璧を求めない。修正は当たり前。「ボタンサイズを 20px 大きく」「テーブルに罫線を」「フッターを追加」。5回程度の修正で、プロ品質に。
実践例|実際に作ってみた事例
シンプルな TODO アプリの製作フロー
所要時間:15分。
「Reactの TODOアプリ。タスク入力欄とボタン。完了したタスクに打消し線。削除ボタン付き。色は暖色系(オレンジ)。フォントは大きく。」
生成:5秒。修正1:「ボタンをもっと大きく」→3秒。修正2:「タスク削除ボタンを赤色に」→3秒。修正3:「フッターに 『created by 〇〇』 と入れて」→5秒。デプロイ:2秒。完成。
料金・在庫管理サイトの開発例
所要時間:45分。
複雑度が上がると修正も増える。「商品管理ページ(名前、価格、在庫数を表形式で表示)」→「在庫が少ないものは黄色でハイライト」→「削除ボタンを右列に」→「データベースに保存(リロードしても残る)」→「CSV出力機能」。
この程度なら、Bolt.newで 45分で完成。Cursorで一から書くなら、3時間かかる案件だ。生産性は4倍以上。
Bolt.new の料金|無料と有料プランの選び方
無料プランの制限(トークン制限)
無料プラン:月 10 プロジェクト。トークン制限あり。複雑な実装は失敗する可能性。デプロイ回数無制限。
Pro プランへのアップグレード判断基準
Pro月額 $15。プロジェクト無制限。トークン制限撤廃。複雑な実装も安心。
判断基準:副業で月 3万円以上稼いでいるなら、Proにしろ。トークン制限で何度も失敗するより、月 $15 投資するほうが効率がいい。
Bolt.new vs Lovable / Windsurf|ツール比較
| ツール | 得意 | 不得意 | 料金 |
|---|---|---|---|
| Bolt.new | フルスタック、デプロイ簡単 | 複雑なビジネスロジック | $15/月 |
| Lovable | デザイン重視、UI美しい | バックエンド実装 | $15/月 |
| Windsurf | 複数ファイル修正、カスタマイズ | デプロイが手動 | 無料 |
各ツールの得意分野
Bolt.new:Webアプリを「すぐに公開したい」なら最強。Lovable:デザイン重視のランディングページ。Windsurf:複数ファイル修正で細かいカスタマイズ。
自分に合ったツール選択
速度重視:Bolt.new。デザイン重視:Lovable。自由度重視:Windsurf。正解は「3つとも試す」。インストール・登録は5分。無料から始められる。
よくある質問と注意点
デプロイ後の編集は可能か
可能。Netlify上のコードをBolt.newで再度編集できる(Git連携)。本番環境で修正も可能だが、テスト環境を作ったほうが安全。
商用利用・販売は可能か
可能。Bolt.newで作ったアプリは、自由に販売・配布できる。ただし、Bolt.newのブランド表記は要確認。
セキュリティ面の懸念事項
Bolt.newはStackBlitz社のセキュアなサーバーで動く。個人情報を扱う場合は、データベースを外部(Firebase等)に移すのが推奨。ブラウザ上の開発なので、ローカル環境より安全。
- Bolt.new = StackBlitz が提供するブラウザ上のAIアプリ開発ツール
- 登録から完成まで 15 分。環境構築ゼロ
- フルスタック対応(React + Node.js + DB)
- プロンプトは「具体的な要件」「色・サイズ数字」を明記
- 複数回修正が当たり前。5回程度で完成形に
- Netlifyへワンクリックデプロイ。世界に公開まで 2秒
- Lovable(デザイン)Windsurf(カスタマイズ)と使い分け
Bolt.newの最大の強みは「スピード」だ。アイデアから公開まで、1時間以内。従来なら 1週間かかる案件が、1日で完成。この生産性差は、副業の稼ぎにそのまま反映される。今すぐ試す価値がある。