Bolt.newの使い方入門2026――ブラウザだけでフルスタックWebアプリを作る方法
公開: 2026年04月22日
Bolt.newはStackBlitzが開発したブラウザベースのAI開発環境です。プロンプトを入力するだけでReact・Vue・Node.jsなどのフルスタックアプリを生成し、そのままブラウザ上で実行・編集・デプロイまで完結できます。ローカル環境のセットアップが一切不要な点が最大の特徴です。
Bolt.newの特徴
- インストール不要: ブラウザだけで開発環境が立ち上がる（StackBlitz WebContainers技術）
- 幅広い技術スタック: React・Vue・Svelte・Astro・Node.js・Pythonに対応
- ワンクリックデプロイ: Netlify・Vercelへ直接デプロイ可能
- GitHubエクスポート: 生成したコードをリポジトリにプッシュ可能
- npm パッケージ対応: ブラウザ内でnpm installが動く
料金プラン
| プラン | 料金 | トークン数 |
|---|---|---|
| Free | $0 | 150,000トークン/日 |
| Pro | $20/月 | 10,000,000トークン/月 |
| Teams | $30/月/人 | チーム共有クレジット |
始め方
- bolt.new にアクセス
- GitHubアカウントでサインイン（推奨）またはメール登録
- 画面中央のテキストボックスに作りたいアプリの説明を入力
- AIが数十秒でコードを生成し、右側にプレビューが表示される
最初のアプリを作ってみよう
以下のようなプロンプトから試してみましょう：
ReactとTailwindCSSで、シンプルなToDoアプリを作って。 タスクの追加・削除・完了チェックができて、 完了タスクは取り消し線で表示する。
生成後はコードエディタが開き、直接編集することも可能です。「このボタンの色を変えて」「フォームにバリデーションを追加して」と追加の指示を出すこともできます。
Netlifyへデプロイする
- 右上の「Deploy」ボタンをクリック
- 「Netlify」を選択してNetlifyアカウントでログイン
- 自動でビルド・デプロイが実行され、URLが発行される
Vercelへのデプロイも同様の手順で可能です。
GitHubへエクスポートする
- 右上メニューから「Export to GitHub」を選択
- リポジトリ名を入力して確認
- 自分のGitHubアカウントにリポジトリが作成される
エクスポート後はVSCodeなどで開いてローカル開発に移行できます。
Lovable・v0との違い
- Bolt.new: 技術スタックの選択肢が最も広い。バックエンドもブラウザ内で動かせる
- Lovable: Supabaseとの統合が強く、フルスタックSaaSに向いている
- v0: Next.js+shadcn/uiのUIコンポーネント生成に特化。Vercel連携が最強
まとめ
Bolt.newは「環境構築なしにとにかく動くものを作りたい」という用途に最適です。無料プランで1日150kトークン使えるので、まずは試してみましょう。バイブコーディングツール比較記事やコード生成AI比較表もあわせてご覧ください。