Bolt.new 使い方｜30分でアプリ生成する完全ガイド【2026年版】

この記事でわかること

  • Bolt.newの基本操作：プロンプト1つでフルスタックアプリを自動生成できる仕組み
  • 実装レベルの使い方：React×TypeScript×Supabaseで実際のアプリ開発まで進める手順
  • 他ツールとの使い分け：Lovable・Replit・Cursor・v0との違いを理解して最適なツール選択ができる

結論：Bolt.newは「最速でMVP（最小限の実行可能製品）を作りたい人」向けのNo.1選択肢

Bolt.newはStackBlitzが提供するAIコード生成プラットフォームで、テキストプロンプトだけで本番レベルのフルスタックアプリを30分で作成できます。コーディング知識がなくても、自然言語で「〇〇な機能を持つアプリを作って」と指示するだけで、デモ環境で動作可能なアプリが完成します。

特にノーコードでスタートアップのMVPを検証したい、デザイナーがコード知識なしにプロトタイプを作りたい、学習用に動作するアプリサンプルが欲しいといった用途に最適です。

Bolt.newの基本的な使い方

1. Bolt.newへのアクセス と初期セットアップ

Bolt.newはブラウザだけで利用可能で、インストール不要です。

操作手順：

  1. https://bolt.new にアクセス
  2. ログイン画面で「Create Account」または「Sign in」を選択（Google/GitHub認証対応）
  3. メールアドレスまたはGoogleアカウントで登録
  4. ダッシュボードに進み「Create New Project」をクリック
  5. プロンプト入力エリアが表示される（チャット型のUI）

無料プラン vs 有料プラン：

  • 無料プラン：月5個のプロジェクト作成、基本的な生成機能
  • Pro プラン（月$20）：無制限プロジェクト、優先生成、APIアクセス

非エンジニア向けであれば、まずは無料プランで試験的に始めるのをお勧めします。

2. プロンプトエンジニアリング：的確な指示でアプリを生成

Bolt.newで高品質なアプリを生成するには、プロンプトの書き方が重要です。曖昧な指示では希望通りのアプリが生成されません。

プロンプト作成のベストプラクティス：

  • 目的を明確に：「〇〇を管理するアプリ」ではなく「ユーザーが日々の支出を記録・分析できるアプリ」
  • 具体的な機能一覧：ボタン、フォーム、グラフなど画面要素を明記
  • データベース要件：ユーザー認証が必要か、何を保存するのか
  • デザイン指定：「モダンで暗いテーマ」「スマートフォンメインの設計」など
  • 技術スタック指定：「Supabaseで認証」「Stripe決済対応」など

3. リアルタイムビルド：プロンプトを送信してアプリが自動生成

  1. プロンプト入力欄に詳細な要件を入力
  2. 「Generate」または「Send」をクリック
  3. リアルタイムで右側プレビューが更新（HTML/CSS/JavaScriptが自動生成）
  4. 表示されたアプリを試用し、不足機能があれば追加プロンプトで改善
  5. 満足したら「Export」からコード出力

重要：Bolt.newはコード生成であり、自動デプロイではありません。 生成されたコードはZIPダウンロードまたはGitHub連携で自分のリポジトリに落とし込み、Vercel/Netlifyなど好みのホスティングサービスにデプロイします。

4. コードの確認と編集

生成されたコードは以下の構成：

  • package.json：依存関係（React, TypeScript, Tailwind CSSなど）
  • src/App.jsx または src/App.tsx：メインコンポーネント
  • src/components/：UI パーツの再利用可能なコンポーネント
  • .env.example：Supabase キーなど環境変数のテンプレート

エディタ機能も搭載されているため、簡単な修正（色の変更、テキスト編集）はBolt.new内で完了できます。複雑な修正が必要な場合は、コードをダウンロードしてローカルのVS Codeで編集します。

5. デプロイと公開

ステップ：

  1. ローカルで npm install → npm run dev で動作確認
  2. Vercel/Netlify連携またはGitHub ActionsでCD（継続的デプロイ）を設定
  3. カスタムドメインを割り当て（GoDaddy/Cloudflareなど）
  4. Supabaseバックエンド（データベース/認証）を本番環境に切り替え
  5. HTTPS対応を確認して公開

{{internal_link:Supabase バックエンド構築ガイド}}

おすすめサービス・ツール

この記事で紹介した内容を実践するために、以下のサービスがおすすめです。

※ 上記リンクからご利用いただくと、サイト運営の支援になります。