「プログラミングは未経験だけど、アイデアをアプリにしてみたい」「外注するほどではないが、業務ツールを自分で作りたい」——そんな人が今もっとも注目しているのがBolt.newです。
テキストで指示を入力するだけでフルスタックのWebアプリが生成され、そのままブラウザ上でプレビューできる。デプロイも数クリック。従来のノーコードツールとは一線を画す体験が、非エンジニアのビジネスパーソンやフリーランスの間で急速に広まっています。
ただし「簡単に作れる」という触れ込みの裏には、無料プランの制限、商用利用の壁、コードが崩れるつまずきなど、実際に使ってみないとわからない落とし穴もあります。この記事では、Bolt.newの使い方を手順ごとに解説しつつ、2026年時点での料金・制限・現実的な限界まで包み隠さず紹介します。
Bolt.newとは何か｜他のノーコードツールと何が違う
ブラウザ完結の「フルスタック」AI開発環境
Bolt.newは、StackBlitz社が提供するAI搭載のWebアプリ開発プラットフォームです。特徴はフロントエンド（見た目）とバックエンド（処理）の両方を、ブラウザ上だけで生成・実行・デプロイできる点にあります。
従来のノーコードツール（Bubble、Adalo等）はドラッグ＆ドロップで画面を組み立てる操作が中心でしたが、Bolt.newは自然言語のチャットで指示するスタイルです。「ユーザー登録ができるToDoアプリを作って」と入力するだけで、React・Node.jsベースのコードが自動生成されます。
Lovable・v0・Cursorとの使い分け
| ツール | 特徴 | 向いているケース |
|---|---|---|
| Bolt.new | フルスタック、ブラウザ完結、Netlifyデプロイ | バックエンドありのWebアプリを素早く試したい |
| Lovable | UI重視、Supabase連携が得意 | データベース連携のあるSaaSプロトタイプ |
| v0（Vercel） | UIコンポーネント生成特化 | 既存プロジェクトにUIを追加したい |
| Cursor | コードエディタにAIが統合 | ある程度コードが読めるエンジニア寄り |
Bolt.newの立ち位置は「非エンジニアがゼロからプロトタイプを作る」に最も特化している点です。ただし、本番環境で大規模に使うには後述するトークン制限と商用利用ルールに注意が必要です。
どんなものが作れるか（具体例）
- タスク管理ツール（ログイン・データ保存あり）
- カスタム計算ツール・料金シミュレーター
- 社内向け簡易フォーム・アンケートページ
- 商品一覧・ポートフォリオサイト
- ランディングページ（LP）
逆に、ネイティブアプリ（iOS/Android）やリアルタイム処理を多用するシステムは苦手です。
2026年版 料金プランと無料枠の実態
4つのプランと主な違い
| プラン | 月額 | 月間トークン | 商用利用 |
|---|---|---|---|
| Free（Personal） | 無料 | 100万トークン | 不可 |
| Pro | $25（約3,800円） | 1,300万トークン | 不可 |
| Teams | $30/メンバー | 1,300万トークン/人 | 可 |
| Enterprise | 要問い合わせ | カスタム | 可 |
（出典：Bolt.new公式サイト 2026年6月時点）
注目すべきポイントが2点あります。
まず、FreeプランとProプランは商用利用が認められていません。個人学習・プロトタイプ確認の用途なら問題ないですが、クライアント向けに制作・納品したり、収益化したサービスに使う場合はTeams以上が必要です。
次に、1日あたりのトークン上限があります。Freeプランは1日15万トークンが上限。1回のアプリ生成で数万トークンを消費するため、一日に何度も大きな改修をしていると上限に達します。
トークンはどれだけ使うか（試算）
- シンプルなLPを1から生成：約2〜5万トークン
- ToDoアプリ（ログイン機能あり）を生成：約8〜15万トークン
- 既存アプリへの機能追加（1回の指示）：約1〜3万トークン
Freeプランで「ちょっと試す」程度なら十分ですが、複数機能を持つアプリを1日で仕上げようとするとすぐ1日の上限に達します。継続的に使う場合はProプラン（$25/月）が現実的です。
Bolt.newの使い方｜アカウント登録からデプロイまでの全手順
ステップ1：アカウント登録（無料・クレジットカード不要）
- bolt.new にアクセスし「Get Started for free」をクリック
- メールアドレスまたはGitHubアカウントでサインアップ
- 確認メールのリンクをクリックして完了
クレジットカード登録は不要です。登録後すぐにFreeプランで利用できます。
ステップ2：プロンプトでアプリを生成する
画面中央のテキストボックスに作りたいアプリの説明を入力します。最初のプロンプトが品質を大きく左右するため、以下の要素を含めると精度が上がります。
- アプリの目的：何のためのツールか
- 主な機能：ログイン、データ保存、フォームなど
- デザインのイメージ：シンプル、モダン、企業向けなど
- 使用する技術（任意）：Reactを使いたい、Supabaseと連携したいなど
例：「顧客名・商品名・金額を入力できる見積書作成ツールをReactで作ってください。PDFでダウンロードできる機能も入れてください。シンプルでビジネス向けのデザインにしてください。」
ステップ3：チャットで修正・改善を重ねる
生成後は右側にプレビューが表示されます。気になる点はチャットで追加指示できます。
- 「ヘッダーの色を青に変えて」
- 「ボタンを押したとき確認ダイアログを出して」
- 「スマホ表示に対応させて」
ただし、大幅な仕様変更を後から追加すると、既存のコードと整合が取れなくなることがあります。大きな機能は最初のプロンプトに含めておくのがコツです。
ステップ4：Netlifyへワンクリックデプロイ
- 画面右上の「Deploy」ボタンをクリック
- Netlifyアカウントと連携（初回のみ）
- 数十秒でURLが発行される
生成されたURLをそのまま共有できます。独自ドメインはTeams以上のプランで利用可能です。
実際につまずいた3つのポイントと対処法
つまずき1：「既存コードが消えた」
Bolt.newで最も多い落とし穴が、追加の指示をしたら以前作った部分が消えてしまう問題です。これはAIが「全体を書き直す」判断をすることで起こります。
対処法：修正指示の前に「今のコードは変えないで、〇〇の部分だけ追加してください」と明示する。また、Bolt.newには「Revert（元に戻す）」機能があるため、消えた直後であれば1クリックで復元できます。
つまずき2：npmエラーでアプリが動かない
生成されたコードのnpmパッケージのバージョン不整合や依存関係エラーが発生することがあります。画面にエラーが出たときは「Fix Problem」ボタンを押すとAIが自動修正を試みます。
それでも解決しない場合の手順：
- エラーメッセージをそのままチャットに貼り付けて「このエラーを直してください」と伝える
- 「package.jsonの依存関係を最新の安定版に更新してください」と指示する
- 上記で解決しない場合は新規プロジェクトで再構築を検討する
つまずき3：トークンが足りなくなる（Freeプラン）
1日の途中でトークン上限に達すると、その日はそれ以上操作できません。翌日にリセットされるまで待つか、Proプランにアップグレードする必要があります。
Freeプランで長持ちさせるコツ：
- 最初のプロンプトを詳細に書いて「試行回数」を減らす
- 細かいデザイン調整はデプロイ後にCSSで直接編集する
- 機能単位でプロジェクトを分けず、1プロジェクトで完結させる
Bolt.newの現実的な限界｜これには使わないほうがいい
「こういう用途はBolt.newを選ぶな」チェックリスト
Bolt.newが苦手な用途を正直に挙げます。以下に当てはまるなら、別の選択肢を検討したほうが時間を無駄にしません。
- ✗ 本番の商用サービス（FreeプランまたはProプランで）：利用規約で商用利用が禁止。Teams（$30/月）以上が必要
- ✗ 複雑なデータベース設計が必要なシステム：Supabase連携はできるが、複雑なリレーション設計はミスが起きやすい
- ✗ 決済・個人情報を扱う本番アプリ：セキュリティの細かな設定をAI任せにするのはリスクが高い
- ✗ iOSアプリ・Androidアプリ：Bolt.newはWebアプリ専門。ネイティブアプリは作れない
- ✗ 大規模チームでの継続開発：コードが肥大化するとAIの制御が難しくなる
Bolt.newが本当に活きるシーン
- ◯ 社内向けの簡易ツール（外部公開しない業務補助ツール）
- ◯ 企画・提案前のプロトタイプ確認（「こういうイメージです」と見せる用）
- ◯ 個人が自分のために使うツール（商用でなければFree/Proで可）
- ◯ 開発経験者がスケルトンを素早く作り、そこからCursorで仕上げる
非エンジニアが「外注するほどではないが欲しい」という業務ツールを作る用途が、2026年現在もっともコスパが高い使い方です。AIコーディングを組み合わせた開発手法に興味がある方はAIコーディングの始め方｜初心者が無料で使えるツール4選も参考にしてください。
Bolt.newをさらに活用するためのコツ
GitHubと連携してコードを管理する
Bolt.newで生成したプロジェクトはGitHubリポジトリにエクスポートできます。エクスポートすることで、Cursorなどのエディタに取り込んで細かい修正ができるほか、バージョン管理も可能になります。
手順：左メニュー「Connect to GitHub」→ リポジトリ名を入力 → 「Push to GitHub」
プロンプトテンプレートを作っておく
Bolt.newはプロジェクトの冒頭プロンプト（System Prompt）をカスタマイズできます。「日本語でコメントを書いてください」「ReactとTailwind CSSを使ってください」など、毎回入力する共通の指示をテンプレート化しておくとトークン節約と品質安定につながります。
同じくAIを活用して業務を効率化する手法については、Claude vs Cursor vs GitHub Copilot｜AIコーディングツール徹底比較も読んでみてください。
ノーコード系の比較記事もチェック
「Bolt.newよりもっとDB設計の柔軟なツールが必要」と感じたら、AIノーコードでアプリ開発する方法とおすすめツール8選で他の選択肢と比較してみてください。
まとめ｜Bolt.newは「試作特化」のツールと割り切ると強力
Bolt.newは、コードを書かずにWebアプリのプロトタイプを素早く作るツールとして、2026年現在も有力な選択肢です。ただし、料金と利用規約には明確な制限があります。
改めて要点を整理します。
- 無料（Freeプラン）：月100万トークン、1日15万トークン上限。学習・個人利用のみ
- Proプラン（$25/月）：トークンが13倍になるが、商用利用は不可
- 商用利用するならTeams（$30/メンバー）以上
- よくあるつまずき：コードが消える・npmエラー・トークン不足は対処法あり
- 苦手な用途：本番商用サービス、複雑なDB、ネイティブアプリ
「まずは動くものを作って確認したい」「外注する前に形にしたい」という用途に限れば、Bolt.newは今すぐ使える強力なツールです。まずはFreeプランで試してみて、継続して使うかどうかを判断するのがおすすめです。
