Bolt.newで爆速プロトタイプ！AIアプリ開発の始め方

Bolt.newとは何か？仕組みと特徴を理解する

ブラウザの中に「完全な開発環境」がある

Bolt.newは、StackBlitzが開発したブラウザ完結型のAIフルスタック開発プラットフォームです。最大の特徴は、WebAssembly技術（WebContainers）によってNode.jsランタイムをブラウザ内で直接実行できる点にあります。

通常のクラウドIDEは、コードをサーバーに送信して実行しますが、Bolt.newはブラウザのタブの中でNode.jsが動いています。これにより：

ネットワーク遅延がほぼゼロ（ローカルと同等の速さ）
サーバーコストが低い（ユーザー側で処理する）
プライバシーが守られやすい（コードがサーバーに送られない部分がある）

というメリットを実現しています。

AI部分はClaude（Anthropic）やGPT-4oなどのモデルを活用しており、ユーザーが自然言語で指示を入力すると、AIがコードを生成・修正・実行まで一気通貫で行います。

類似ツールとの違い

似たようなポジションのツールとして**v0（Vercel）**がありますが、両者には明確な違いがあります。

比較項目	Bolt.new	v0（Vercel）
生成範囲	フロント＋バックエンド＋DB	主にUIコンポーネント
実行環境	ブラウザ内でそのまま動作	コードをコピーして使う
デプロイ	Netlify等に直接デプロイ可能	Vercelへのエクスポート
対象ユーザー	幅広い（非エンジニアも含む）	主にReact開発者
料金体系	トークン消費ベース	メッセージ数ベース

Bolt.newは「ゼロからアプリを作って動かすまで」を完結させたい場合に向いており、v0は「既存プロジェクトに組み込むUIコンポーネントを素早く作りたい」場合に向いています。

アカウント作成から最初のアプリ起動まで

アカウントの作成

https://bolt.new にアクセスし、GitHubアカウントまたはメールアドレスでサインアップします。Googleアカウントでのログインも対応しています。

無料プランで使えること：

1日あたり一定量のトークン（AIへの指示に使われる）
プロジェクトの保存・共有
主要なフレームワーク（React、Vue、Svelte、Astro等）の選択

有料プランは月額$20〜から用意されており、トークン量の上限が大幅に増えます。本格的に使う場合はProプラン以上を検討してみてください。

最初のプロンプトを入力する

ログインするとシンプルな入力画面が表示されます。中央の大きなテキストボックスに、作りたいアプリの説明を日本語で入力してみましょう。

たとえば、以下のようなプロンプトから始められます：

シンプルなTodoアプリを作成してください。
要件：
- タスクの追加・削除・完了チェックができる
- タスクは「未完了」「完了済み」でフィルタリングできる
- データはlocalStorageに保存する
- UIはシンプルでモダンなデザイン（Tailwind CSS使用）
- フレームワークはReactを使用

Enterキーを押すか送信ボタンをクリックすると、AIがコードを生成し始めます。数十秒〜1分ほどで：

プロジェクトのファイル構成が自動生成される
依存パッケージが自動インストールされる
開発サーバーが起動してプレビューが表示される

という流れが完全自動で完了します。

画面の構成を把握する

Bolt.newの作業画面は大きく3つのエリアに分かれています。

左パネル（ファイルエクスプローラー）：生成されたファイル一覧。クリックで内容を確認・編集できる
中央パネル（コードエディタ）：ファイルの内容を直接編集できるエリア。シンタックスハイライト付き
右パネル（プレビュー）：実際にブラウザで動いているアプリのプレビュー。リアルタイムで反映される

下部のチャット欄から追加の指示を送ることで、AIが既存のコードを修正・拡張してくれます。

実践：ToDoアプリをステップアップしていく

最初のTodoアプリができたら、チャット欄を使って機能を追加していきましょう。このイテレーション（繰り返し改善）こそが、Bolt.newの真骨頂です。

ステップ1：UIを改善する

現在のUIを改善してください。
- ヘッダーにアプリ名「My Tasks」をおしゃれなフォントで表示
- タスク追加ボタンを青いグラデーションにする
- 完了済みタスクにはチェックマークと取り消し線を追加
- アニメーションを加えて、タスク追加時にフェードインするようにする

このように、デザインの変更も自然言語で指示できます。CSSやTailwindのクラス名を知らなくても、「青いグラデーション」「おしゃれなフォント」という言葉で伝わります。

ステップ2：バックエンド機能を追加する

Bolt.newはフロントエンドだけでなく、バックエンドAPIも生成できます。

Supabaseを使ってデータをクラウドに保存できるようにしてください。
- Supabaseのprojecturl と anon keyを環境変数で設定する
- todosテーブルを作成するSQLも表示してください
- ユーザーがページをリロードしてもデータが保持されるようにする

Bolt.newはデータベーススキーマのSQLまで提案してくれます。Supabaseの管理画面でそのSQLを実行し、接続情報を環境変数に設定するだけで、本格的なデータ永続化が実現します。

生成されるSQLの例は以下のようなものです：

-- Supabaseのクエリエディタで実行してください
CREATE TABLE IF NOT EXISTS todos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  text TEXT NOT NULL,
  completed BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Row Level Security（RLS）を有効化
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

-- すべてのユーザーが読み書きできるポリシー（開発用）
CREATE POLICY "Allow all operations" ON todos
  FOR ALL USING (true);

ステップ3：認証機能を追加する

Supabase Authを使ってメールアドレスとパスワードでのログイン機能を追加してください。
- ログイン・サインアップ画面を作成する
- ログアウトボタンをヘッダーに追加する
- 各ユーザーが自分のタスクだけを見られるようにRLSを設定するSQLも提示する

このように、認証→データ分離という本格的な機能も、自然言語の指示で実装できます。

Bolt.newを使いこなすための5つのポイント

1. 最初のプロンプトを丁寧に書く

Bolt.newの品質は最初のプロンプトで大きく決まります。「Todoアプリ作って」よりも、技術スタック・機能要件・デザインの方向性を最初から明示した方が、的確なコードが生成されます。

良いプロンプトの構成：

使いたいフレームワーク（React、Vue、Next.jsなど）
使いたいスタイリング手法（Tailwind CSS、CSS Modulesなど）
主な機能のリスト
データの保存先（localStorage、Supabase、Firebaseなど）
UIのテイスト（シンプル、マテリアル、ダークモードなど）

2. 一度に大きな変更を頼みすぎない

「全部まとめてやって」と指示すると、AIが混乱してコードが壊れることがあります。1回の指示で変更する範囲は1〜2機能に絞るのがコツです。

【NG例】
認証、データベース連携、ダークモード、CSVエクスポート、メール通知を全部追加して

【OK例】
まずSupabaseでのログイン機能だけ追加してください。
（完了後）次に、ダークモードの切り替えボタンを追加してください。

3. 「元に戻す」機能を活用する

Bolt.newには会話履歴を遡って以前の状態に戻せる機能があります。AIが誤った変更を加えてしまった場合は、該当のメッセージの隣にある「Restore checkpoint」ボタンで以前の状態に一発で戻せます。大きな変更を加える前に、チャット欄で「チェックポイントとして保存してください」と伝えておくと安心です。

4. コードを直接編集する

AIの生成コードが100%完璧でないこともあります。左パネルのファイルエクスプローラーから任意のファイルを開き、中央のエディタで直接編集することができます。少しのエラーであれば自分で修正し、大きな変更はAIに任せる、という使い分けが効率的です。

5. デプロイは「Deploy」ボタン一発

作成したアプリは右上の「Deploy」ボタンからNetlifyやVercelに直接デプロイできます（設定に応じて）。URLが発行されるので、そのままチームやクライアントに共有することが可能です。プレゼン用のデモを数分で準備する、というような使い方もできます。

料金とトークン消費の考え方

Bolt.newの料金はトークン消費ベースです。AIへの入力（プロンプト）と出力（生成コード）の両方でトークンが消費されます。

無料プランの制限：

1日あたり約15万〜20万トークン程度（変動あり）
プロジェクト数の上限あり

Proプラン（$20/月）：

月1,000万トークン
より高速なAIモデルへのアクセス

Teamプラン（$30/月〜）：

チームでのコラボレーション機能
トークンプールの共有

トークンを節約するコツはプロンプトを簡潔にすることと、大きなコードファイルを不必要にAIに渡さないことです。変更が必要なファイルや関数に絞って指示を出すと消費量を抑えられます。

こんな用途に最適：Bolt.newが活きるシーン

起業家・プロダクトマネージャー

アイデアの検証フェーズでは、完璧なコードより「動くデモ」が重要です。Bolt.newなら投資家へのプレゼン用デモを数時間で作れます。技術的な知識がなくても、プロダクトのビジョンを形にできる点が強みです。

フロントエンドエンジニア

新しいUIライブラリの試用や、クライアントへの提案用プロトタイプ作成に使えます。「shadcn/uiでこんなダッシュボードが作れます」というサンプルを、実際に動く状態でその場で見せられるのは大きな強みです。

デザイナー

Figmaでのデザインを「実際にブラウザで動く状態」にするためのハンドオフツールとして使えます。「このデザインをコードに」という指示に加えて、スクリーンショットや詳細な説明を添えると、デザインに近いUIが生成されます。

学習目的

プログラミングを学習中の方が、「動くものを作る」モチベーションを保つためにも有効です。まずBolt.newで動くアプリを作り、生成されたコードを読みながら「なぜこう書くのか」を学ぶ、というアプローチが効果的です。

Bolt.newの限界と注意点

公平に評価するために、現時点での制限も把握しておきましょう。

複雑な大規模プロジェクトは苦手 マイクロサービス構成や数万行規模のコードベースの管理は、Bolt.newの得意領域ではありません。プロトタイプから本番移行する際は、生成されたコードをGitHubにエクスポートし、Cursor等のローカル環境で管理する流れが現実的です。

トークン消費の予測が難しい 複雑な機能を追加するとトークンが急激に消費されます。無料プランで試す場合は、1セッションで作れる機能量に限りがあることを念頭に置いておきましょう。

生成コードの品質チェックは必須 AIが生成するコードは必ずしも最適ではありません。セキュリティ的に問題のある実装（APIキーのハードコードなど）が生成されることもあるため、本番運用前には必ずコードレビューを行ってください。特に認証・決済まわりは慎重に確認が必要です。

日本語プロンプトの精度 英語のプロンプトに比べると、日本語プロンプトは若干精度が落ちることがあります。重要な技術要件（フレームワーク名、ライブラリ名など）は英語で明記すると安定します。

まとめ：まず「動くもの」を作る習慣をつけよう

Bolt.newは「完璧なコードを書く」ためのツールではなく、「アイデアを素早く形にする」ためのツールです。

この記事で紹介した内容を整理すると：

Bolt.newはブラウザだけで完全動作するAIフルスタック開発環境
プロンプトの質が仕上がりを決める（技術スタック・機能・デザイン方針を最初に明示）
一度に大きな変更を頼まず、小さなイテレーションを積み重ねる
プロトタイプはBolt.new、本格開発はエクスポートしてローカル環境へ
生成コードは本番前に必ずレビュー

次のアクションとして、今すぐhttps://bolt.newにアクセスして、頭の中にあるアイデアを1つプロンプトにしてみてください。「完璧じゃなくていい、まず動かす」——そのマインドセットが、現代のプロダクト開発を加速させる第一歩です。

生成されたコードが気に入らなければ修正すればいいだけです。まずは5分だけ試してみましょう。きっと「こんなに簡単に作れるのか」という驚きを体験できるはずです。