Bolt.newとは？料金・使い方・対応フレームワークを実データで解説【2026年版】

Bolt.newは、プロンプトを入力するだけでフルスタックのWebアプリを生成し、そのままブラウザ上で編集・公開できるAI開発ツールです。開発元はブラウザ内Node.js実行環境「WebContainers」を手がけるStackBlitzで、ローカルに何もインストールせず動く点が既存のAIコード補助と大きく違います。一方で料金はコード量ではなく「トークン」で従量消費されるため、仕組みを理解せずに使うと想定外のコストになりやすい面もあります。この記事では定義・使い方・料金の実額・対応フレームワーク（Flutterで使えるのかを含む）・競合との違いを、2026年時点の一次情報に基づいて整理します。

まとめ：Bolt.newの要点

• 正体：StackBlitz製の生成AIアプリビルダー。プロンプト→フルスタックWebアプリ生成→ワンクリック公開までをブラウザ内で完結する。
• 技術基盤：ブラウザ内でNode.jsを動かすWebContainers。サーバーを借りずにビルド・実行・プレビューできる。
• AIモデル：AnthropicのClaude系を中核に据えたエージェント方式。自然言語の指示からコード生成・修正・デプロイまでAIが操作する。
• 料金：無料プランあり。有料はPro（月25ドル〜）、Teams（1人あたり月30ドル）、Enterpriseは個別見積もり。課金単位はトークンで、生成・修正のたびに消費する。
• 対応範囲：React・Next.js・Vue・SvelteなどJavaScript/TypeScript系が得意。モバイルはExpo＋React Native。FlutterはコードをAIが書けても実行プレビューは動かない。
• 向き不向き：プロトタイプや小規模Webアプリの高速立ち上げに強く、大規模・長期保守や非JS環境には不向き。

Bolt.newの定義と仕組み

Bolt.newは2024年10月にStackBlitzが公開したAIアプリ生成サービスです。ユーザーが「予約フォーム付きの店舗サイトを作って」といった自然言語を入力すると、AIがファイル構成・コード・依存パッケージを生成し、ブラウザ内でそのまま起動してプレビューまで見せます。生成後もチャットで「ボタンの色を変えて」「認証を追加して」と指示すれば差分を反映していく、対話中心の開発スタイルを取ります。これは自然言語で成果物を積み上げていくバイブコーディング（vibe coding）の代表的なツールに位置づけられます。

WebContainersが支える「ブラウザ完結」の意味

Bolt.newの核心はStackBlitzが開発したWebContainersです。これはNode.jsをブラウザ内（WebAssembly上）で動かす実行環境で、npmパッケージのインストールもサーバー起動もローカルPCやクラウドVMを使わずタブ内で完結します。従来のクラウドIDEがリモートサーバーを割り当てるのに対し、Bolt.newは手元のブラウザが実行環境そのものになるため、環境構築の待ち時間がなく、AIがファイルシステム・ターミナル・パッケージマネージャ・ブラウザコンソールまで直接操作できます。この「AIに開発環境全体を渡す」設計が、単なるコード生成ではなく起動・デプロイまで任せられる理由です。

採用しているAIモデル

Bolt.newはAnthropicのClaude系モデルを中核にしたエージェントで動作します。上位プランではより高性能なモデルや推論の深さを選べる構成が案内されており、複雑なアプリほど高性能モデルの方がエラーが少なく仕上がります。採用モデルはバージョンアップが速いため、現在どのモデルが既定かは公式のリリース情報で確認してください。AIが自律的にコードを書き実行・修正する動き方はAgentic Coding（エージェンティックコーディング）の考え方に沿います。

Bolt.newの使い方：作成から公開まで

利用開始に必要なのはアカウント登録だけで、ローカルへのインストールは不要です。メールアドレスまたはGoogleアカウントで登録し、トップのプロンプト欄に作りたいものを日本語で入力すれば生成が始まります。

最初のプロンプトから生成まで

プロンプトは目的を具体的に書くほど精度が上がります。「TODOアプリ」より「ログイン機能とSupabase保存付きのTODOアプリ、React＋Tailwindで」のように、フレームワーク・保存先・機能を明示するとやり直しが減ります。生成後はプレビュー画面で動作を確認し、チャットで修正指示を重ねて仕上げていきます。生成されたコードはエディタで直接編集でき、変更は即座にプレビューへ反映されます。

デプロイと外部サービス連携

完成したアプリはNetlify連携によりワンクリックで公開でき、独自ドメインの割り当ても可能です（StackBlitzは2025年3月時点で100万件超のデプロイを公表）。データベースと認証はSupabaseをそのまま組み込め、行レベルセキュリティまで含めて生成できます。コードはGitHubへ同期でき、Figmaのデザインを読み込んでコード化するインポートにも対応します。ブラウザで完結させつつ、外部の本番サービスへ橋渡しする導線が用意されている点が実用面の強みです。

トークンを無駄遣いしないコツ

Bolt.newは指示のたびにトークンを消費するため、曖昧な指示で何度もやり直すと消費が膨らみます。最初のプロンプトで要件をまとめて渡す、細かな文言修正はエディタで手で直す、大きな作り直しは新しいプロジェクトで始める、といった使い分けがコスト面で効きます。AIに任せきりにせず、生成コードのレビューを前提にする姿勢はCoding Agentツール全般の選び方とも共通します。

料金体系とトークン消費の実際

Bolt.newはフリーミアム型で、無料でも試せますが、実用ではトークン消費の理解が料金を左右します。2026年時点のプラン構成は次のとおりです（価格・トークン量は改定が速いため、契約前に公式料金ページで確認してください）。

トークン消費の対象

ここでいうトークンはAIモデルが処理する文字量の単位で、プロンプトの入力とAIが生成するコードの両方でカウントされます。したがって大きなアプリを一度に生成したり、長い会話履歴を抱えたまま修正を続けたりするほど消費が増えます。年払いにすると約10%の割引が案内されています。

追加課金を避ける使い方

料金の落とし穴はトークン上限の超過にあります。Bolt.newは上限を超えた分を従量で追加課金する仕組みのため、消費ペースを把握しないまま使うと名目のプラン料金を大きく上回りやすくなります。無料枠は1日30万トークンで日次リセットのため学習や小さな検証には足りますが、継続的にアプリを育てるなら早い段階で有料枠の消費ペースを把握しておくべきです。月額の名目価格だけで判断すると、実際の請求と乖離しやすい点に注意してください。

対応フレームワークとモバイル対応の範囲

Bolt.newが得意とするのはJavaScript/TypeScriptのエコシステムです。WebContainersがNode.jsを動かす仕組み上、Node系で動くスタックが素直に扱えます。

得意なスタック

フロントエンドはReact・Next.js・Vue・Svelte・Astro、バックエンドはNode.js・Express、認証・DBはSupabaseといった構成が扱えます。APIエンドポイントを含むフルスタック構成も一度の指示で生成でき、「bolt.new api」で検索される用途もこのフルスタック生成でカバーされます。逆に言えば、これらから外れるほど生成の安定度は下がります。

モバイルアプリはExpoとReact Native

ネイティブアプリ需要に対しては、2025年2月のExpo提携でスターターテンプレートとReact Nativeのコード生成に対応しました。iOS/Androidのネイティブアプリは、生成したReact NativeコードをExpo経由でビルド・実機確認する流れになります。Webアプリと同じ対話生成のままモバイルへ広げられるのが利点です。

Flutter対応の実態

「bolt.new flutter」で流入があるものの、実態は注意が必要です。Bolt.newはFlutter（Dart）のコードをAIに書かせること自体はできますが、WebContainersはNode.js環境のためDart SDKを持たず、生成したFlutterアプリをその場でプレビュー・実行できません。つまりFlutterはコードのたたき台生成には使えても、Bolt.new内で動かして仕上げる用途には向きません。モバイルをBolt.newで完結させたいなら、現状はReact Native＋Expoを選ぶのが実務的な結論です。

競合ツールとの違いと選び方

AIアプリ生成ツールは2026年時点で選択肢が増えています。代表的な競合との違いを整理します。

用途別の選び方

UIパーツをNext.js中心で量産したいならv0、非エンジニアがデザイン主導で作るならLovable、Python含む多言語やサーバー本格運用ならReplit、Googleクラウドに寄せるならFirebase Studioが噛み合います。Bolt.newが最も向くのは、生成したコードを自分でも編集しながらフルスタックWebアプリを素早く立ち上げ、Netlifyで公開まで一気に進めたいケースです。「生成物の中身をコードとして触りたいか」が選択の分岐点になります。

Bolt.newを避けるべきケース

強みが明確な一方、向かない場面もはっきりしています。導入前にここを見誤ると失敗します。

大規模で長期保守が前提の業務システムには不向きです。生成コードは動くものの設計の一貫性や保守性はレビュー前提で、規模が大きくなるほど人手の作り込みが必要になります。Node.js系から外れる技術スタック（Flutterのネイティブ実行、Java/.NETの本格バックエンド、機械学習パイプラインなど）も適合しません。また、トークン消費が読めないまま本番運用に乗せると、コスト管理が破綻しやすい点も避けるべき使い方です。プロトタイプ・社内ツール・小規模Webアプリの立ち上げに用途を絞るほど費用対効果が出ます。

オープンソース版「bolt.diy」という選択肢

StackBlitzはBolt.newのコア部分をオープンソース化した「bolt.diy」（旧oTToDev、stackblitz-labs管理）を公開しています。bolt.diyの特徴は、Claudeに固定されず、OpenAIやGoogle Gemini、ローカルLLMなど任意のモデルを差し替えて使える点です。自前のAPIキーで運用してトークン課金を避けたい、社内で動かして情報を外に出したくない、といった要件にはbolt.diyが選択肢になります。ホスティング版の手軽さを取るならBolt.new、モデル選択と自己ホストの自由度を取るならbolt.diy、という住み分けです。

よくある質問

Bolt.newは無料で使えますか？

無料プランがあり、1日約30万・月約100万トークンの範囲で試せます。学習や小さな検証には十分ですが、継続的にアプリを育てるならPro（月25ドル〜）以上が現実的です。

生成したコードは商用利用できますか？

生成コードはユーザーが編集・エクスポートして利用でき、GitHubへ同期して自社プロジェクトに組み込めます。ライセンスや権利の詳細は変更されうるため、商用の本番採用前に公式の利用規約を確認してください。

どのAIモデルが使われていますか？

AnthropicのClaude系を中核にしたエージェント方式で、上位プランではより高性能なモデルを選べます。採用モデルは更新が速いので、最新の対応状況は公式情報で確認するのが確実です。

日本語のプロンプトで使えますか？

日本語の指示で問題なく生成できます。ただし要件を具体的に書くほど精度が上がり、やり直しによるトークン消費も抑えられます。

Flutterアプリの開発に使えますか？

Flutterのコード生成はできますが、実行環境がNode.jsベースのためBolt.new内でのプレビュー・実行はできません。モバイルをBolt.newで完結させたい場合はReact Native＋Expoを選ぶのが実務的です。

関連記事

• バイブコーディングとは？語源・由来と意味・読み方を解説【2026年版】
• Coding Agentとは｜種類・主要ツール比較と選び方【2026】
• Agentic Coding（エージェンティックコーディング）とは？仕組み・活用事例・主要ツールを解説【2026年最新】
• ノーコードとは？ローコードとの違い・できること・限界を実務目線で解説