Bolt.new（ボルトニュー）とは？使い方・デプロイが白画面になる原因・本番化まで【2026年版】

Bolt.newは、ブラウザだけでフルスタックのWebアプリを作れるAI開発ツールだ。

StackBlitzが開発した「WebContainers」という技術を使い、ブラウザの中に完全な開発環境を構築している。環境構築不要、チャットで指示するだけでアプリが生成され、Netlifyへのワンクリックデプロイまで完結する。

ただし、「デプロイしたら白画面になった」「認証が動かない」「修正を重ねたらおかしくなった」という報告が後を絶たない。使い始める前に、よく起きる問題とその対処法を知っておくと遠回りせずに済む。

Bolt.newとは

Bolt.newの特徴は他のVibe Codingツールと比べると明確だ。

Lovableと比べてBolt.newが優れているのは動作の速さだ。生成速度、プレビューの反応、どちらもBolt.newの方が速い。一方で、認証やデータベースはLovableのSupabase自動連携に比べると設定が手間かかる。

「とにかく今日中に形にしたい」「プロトタイプのデモが明日ある」——そういう場面でBolt.newは最も力を発揮する。Vibe Codingツール全体の選び方はVibe Coding完全ガイドで詳しく整理している。

始め方

1. bolt.new にアクセスし、GoogleアカウントまたはメールでサインアップReact、Vue、Svelte、Next.jsなど複数のフレームワークから選べる。迷ったら React + Vite か Next.js を選んでおけば間違いない。

2. テキストボックスに作りたいものを入力する。具体的なほど精度が上がる：

「フリーランスの案件管理ツールを作って。案件名・クライアント名・金額・ステータス（商談中/受注/納品/入金済み）を管理できる一覧画面と、ステータスごとのフィルター、今月の売上合計の表示が欲しい」

3. 生成されたアプリをプレビューパネルで確認しながら、修正指示を出していく

4. 公開準備ができたら右上の「Deploy」をクリック。Netlifyにデプロイされ、xxx.netlify.app のURLが発行される

料金プラン

無料枠はトークン（AIへの指示量）に制限がある。複雑なアプリを作ると1日で使い切ることもある。本格的に開発するならProプランが現実的だ。

デプロイが白画面になる——原因と対処

Bolt.newで一番多い問題だ。「Deployボタンを押したら公開できた、でもアクセスすると真っ白」というケースの原因は3パターンある。

環境変数が設定されていない

Bolt.newのプレビューでは動いていても、Netlifyにデプロイすると環境変数が引き継がれない。APIキーや接続文字列を使っているなら、Netlifyの管理画面（Site settings → Environment variables）で手動設定が必要だ。

確認方法： Netlifyのデプロイログを開く（Deploy → Deploy log）。process.env.XXXXX is undefined や Missing environment variable というエラーが出ていれば、これが原因だ。

ビルドエラーが起きている

ローカルのプレビュー（WebContainers上）では動いていても、Netlifyのビルドで失敗することがある。TypeScriptの型エラー、未インストールのパッケージ、インポートパスのミスなどが原因になる。

確認方法： Netlifyのデプロイログの末尾を確認する。Error や Failed という文字がないか探す。エラーメッセージをそのままBolt.newのチャットに貼り付けて「これを直して」と指示すれば、たいていの場合解決できる。

APIのエンドポイントがローカル向けのまま

開発中に localhost:3000 などのURLをハードコードしていると、本番環境で動かない。

確認方法： コード内で localhost を検索する。あれば環境変数に切り出す必要がある。

認証（ログイン機能）がバグる——対処法

認証はBolt.newで最も詰まりやすい部分だ。

Bolt.newが生成する認証コードは「見た目だけ」になりやすい。ログイン画面は表示される、フォームに入力できる、でも実際にはどこにもデータが保存されていない——というパターンがある。

推奨する対処法

認証は Supabase Auth か Clerk を使う。自前実装させると問題が起きやすい。

Supabase Authを使う場合の指示例：

「Supabase Authを使ってログイン・サインアップ機能を実装して。メールアドレスとパスワードで認証する。ログイン状態を管理して、未ログインユーザーはダッシュボードにアクセスできないようにして」

Clerkを使う場合：

「Clerk.comの認証を使って。環境変数に VITE_CLERK_PUBLISHABLE_KEY を設定するよう教えて」

どちらも実績のある外部サービスなので、自前実装より安定する。

コンテキストが崩壊する——対処法

修正を重ねるうちに、AIが以前の指示を忘れてしまう問題だ。「さっき直したバグが戻ってきた」「UIが崩れた」「新しい機能を追加したら別の機能が壊れた」という症状が出る。

原因は、AIのコンテキストウィンドウ（記憶できる量）に上限があることだ。修正を重ねるほど、AIに渡す情報量が増えてコンテキストが溢れる。

対処法

最も効果的なのは、新しいチャットで続きを始めることだ。現在のコードをGitHubにプッシュしておき、新しいセッションで「このリポジトリをベースに〜の機能を追加して」と指示する。

他の対処法：

• 一度に大きな変更を指示せず、小さな変更に分ける
• 動作確認ができた段階でこまめにGitHubにプッシュ（「Fix」ボタンを使う）
• 問題が起きたら /clear でコンテキストをリセットして、最小限の情報で再現する

Bolt.newで作ったアプリを本番化するには

Bolt.newで作れるのはプロトタイプだ。実際のユーザーに提供するには、追加の「本番化」作業が必要になる。

コードのエクスポートとバージョン管理

Bolt.newから「Export to GitHub」でソースコードをGitHubに保存できる。本番化を考えているなら、早めにこれをやっておく。コードが消えるリスクを防げるし、エンジニアに依頼するときに渡しやすくなる。

セキュリティ対策

• APIキー・シークレットが環境変数に入っているか（コードに直書きされていないか）
• ユーザー入力のバリデーションがサーバーサイドでも行われているか
• 認証が必要な機能に認証チェックがあるか

バックエンドの強化

• 本番用データベースの設定（無料枠のDatabaseで本番運用するのはリスクがある）
• APIのエラーハンドリング（失敗したときに何が起きるか）
• 大量アクセスへの対処

インフラ・運用

• エラー監視（Sentryを入れると本番で起きた問題を把握できる）
• バックアップ設定
• 管理画面の整備

「自力でやるか、プロに任せるか」の判断基準

自力でいいケース

• 社内ツールで使うユーザーが5人以下
• 個人の趣味プロジェクト
• 外部に公開しない（顧客データを扱わない）
• 本番化に1〜2ヶ月かけられる

プロに任せた方がいいケース

• 顧客にサービスとして提供する
• ユーザーの個人情報を扱う
• 決済機能がある
• デプロイや認証で1週間以上詰まっている
• 投資家やステークホルダーへのデモ期限がある

「Bolt.newのプレビューでは動くのに本番で動かない」という状態が1週間以上続いたら、プロに任せた方が早い領域に入っている可能性が高い。

よくある質問

Bolt.newとLovableはどちらがいいですか？

非エンジニアで認証・データ保存が必要なアプリを作るなら、Lovableの方が詰まりにくい。Supabaseとの自動連携があるため、認証まわりの実装がBolt.newより安定している。速さを重視するならBolt.new。「今日中にデモを作りたい」ならBolt.new、「ちゃんとしたMVPを作りたい」ならLovableを選ぶ基準で考えるとわかりやすい。

日本語でプロンプトを書いても大丈夫ですか？

大丈夫だ。日本語の指示で動作する。ただし、技術的な指示（フレームワーク名、関数名、エラーメッセージなど）は英語で書いた方が精度が上がることがある。

無料プランでどこまで使えますか？

簡単なプロトタイプを作る分には十分だが、複雑なアプリを作ったり、修正を何度も繰り返したりするとすぐにトークン上限に達する。本格的に使うならProプランを試した方がいい。

GitHubと連携できますか？

できる。「Export to GitHub」でリポジトリにプッシュできる。本番化を考えているなら、早めに連携しておくことを推奨する。コードが消えるリスクを防ぎ、エンジニアへの依頼も格段にスムーズになる。

Bolt.newで作ったアプリをNext.jsに移植できますか？

できる。Bolt.newからコードをエクスポートし、ローカル環境でNext.jsプロジェクトとして動かすことが可能だ。ただし、環境の差異で動かない部分が出てくることもある。Claude CodeやCursorを使って、エクスポートしたコードを修正していく作業が必要になる。

→ Bolt.newで作ったコードをCursorで拡張したり、Claude Codeで大規模リファクタリングする組み合わせも定番だ

Bolt.newで作ったプロダクトの「最後の30%」——セキュリティ強化、本番インフラ、認証の正しい実装——でお困りなら、AIのあとしまつに相談してほしい。Bolt.newのエクスポートコードを持ち込んで、本番公開まで一緒に進められる。