Bolt.new プロンプトの書き方7選
この記事でわかること
- Bolt.new プロンプトの書き方を、非エンジニアでも再現できる型で理解できます。
- 初回プロンプト、修正プロンプト、デプロイ前チェックの使い分けがわかります。
- Lovable、Replit、Cursor、v0との違いを踏まえ、Bolt.newを選ぶべき場面を判断できます。
結論（先に結論を述べる）
Bolt.new プロンプトの書き方で最も大切なのは、いきなり短文で「家計簿アプリを作って」と頼むのではなく、目的、利用者、画面、機能、データ、デザイン、制約を1つの設計書のように伝えることです。
Bolt.newは、StackBlitzのWebContainers技術を使い、ブラウザ上でコード生成、実行、編集、デプロイまで進められるAIアプリビルダーです。公式GitHubでも、npmツールの実行、Node.jsサーバー、外部API連携、チャットからのデプロイに対応する点が説明されています。つまり、Bolt.new 使い方のコツは「AIに作業を丸投げする」ことではなく、「AIが迷わない材料を渡す」ことです。
2026年時点では、Bolt.newは無料で始められますが、AIトークンには制限があります。無駄な修正を減らすためにも、最初のプロンプト品質が重要です。Bolt.new 初心者ほど、この記事の型をそのまま使うのが近道です。
{{internal_link:Bolt.new 始め方}}
本題
1. Bolt.new プロンプトの基本形
Bolt.new プロンプトの書き方は、次の7要素で考えると安定します。
- 目的：何のためのアプリか
- 利用者：誰が使うのか
- 主要機能：最初に必要な機能は何か
- 画面構成：トップ、一覧、詳細、設定など
- データ：保存する項目、ログインの有無
- デザイン：色、雰囲気、レスポンシブ対応
- 技術条件：Next.js、React、Supabase、Tailwind CSSなど
たとえば悪い例は「予約アプリを作って」です。これでは、飲食店予約なのか、美容室予約なのか、社内会議室予約なのかが不明です。
良い例は次のようになります。
美容室向けの予約管理アプリを作ってください。利用者は店舗スタッフです。ReactとTailwind CSSで作成し、PCとスマホの両方で使いやすくしてください。画面は、予約一覧、予約作成、顧客詳細、設定の4つ。予約データには、顧客名、電話番号、メニュー、担当者、日時、メモ、ステータスを含めてください。最初はローカル状態で動くプロトタイプとして作り、あとでSupabaseに接続しやすい構成にしてください。
このように書くと、Bolt.newは画面、データ、UIの優先順位を判断しやすくなります。
2. 実際の操作手順
Bolt.new ブラウザ アプリ生成の流れはシンプルです。スクリーンショットの代替説明として、画面上で何を見ればよいかも補足します。
- bolt.newにアクセスし、ログインします。
- 中央の入力欄に、作りたいアプリの説明を貼り付けます。
- 必要に応じて、入力欄付近のプロンプト改善アイコンを使い、内容を整理します。
- 生成が始まると、左側または中央にチャット、右側にプレビュー、別エリアにファイル構成やターミナルが表示されます。
- プレビューで画面を確認し、崩れている箇所や不足機能をチャットで修正依頼します。
- 問題が減ったら、デプロイボタンまたは連携メニューから公開作業に進みます。
Bolt.new 使い方で重要なのは、1回で完成を狙わないことです。最初は「動く骨組み」、次に「機能追加」、最後に「デザイン調整」と分けると失敗が減ります。
{{internal_link:Bolt.new 無料プランの使い方}}
3. 初回プロンプトで入れるべき情報
Bolt.new プロンプトの書き方では、初回プロンプトが最も重要です。初回で曖昧なまま進めると、後から画面構成やデータ構造を直すことになり、トークンを消費します。
おすすめのテンプレートは次の形です。
あなたは優秀なフルスタックエンジニアです。以下の条件でWebアプリを作ってください。
目的：
利用者：
主要機能：
画面構成：
保存するデータ：
デザイン方針：
技術スタック：
制約：
まずは動作するMVPを作り、不要に複雑な実装は避けてください。
MVPとは、最小限の実用版という意味です。Bolt.new 初心者は、決済、通知、複雑な権限管理を最初から全部入れようとしがちですが、まずは主要な1画面から始める方が成功率は高くなります。
4. 修正プロンプトのコツ
生成後の修正では、「全部いい感じに直して」ではなく、対象、問題、期待結果を指定します。
予約一覧画面だけを修正してください。現在はカード同士の余白が狭く、スマホで読みにくいです。各カードに十分な余白を入れ、顧客名、日時、ステータスが一目でわかるレイアウトにしてください。他の画面のデザインや機能は変更しないでください。
ポイントは「他の画面は変更しない」と書くことです。AIアプリビルダーは、良かれと思って広範囲を変更する場合があります。Bolt.new プロンプトの書き方では、変更範囲を狭く指定するほど安定します。
5. デプロイ前チェックの頼み方
公開前には、Bolt.newに自己点検を依頼しましょう。
このアプリを公開する前に、エラー、未使用コード、レスポンシブ表示、フォーム入力チェック、空データ時の表示を確認してください。問題があれば一覧で説明し、修正してよい箇所から順番に対応してください。
Supabaseなどの外部サービスを使う場合は、APIキーや環境変数を直接プロンプトに貼らないよう注意してください。環境変数とは、アプリの外側で安全に管理する設定値のことです。
プロンプト実例集
実例1：タスク管理アプリ
React、TypeScript、Tailwind CSSで、個人向けタスク管理アプリを作ってください。利用者はフリーランスです。機能は、タスク追加、期限設定、優先度、完了チェック、検索、今日やることの表示です。画面はダッシュボード中心にし、左側にフィルター、右側にタスク一覧を配置してください。スマホでは1カラムにしてください。まずはローカル状態で動くMVPとして実装してください。
実例2：Supabase対応の会員アプリ
Next.js、Supabase、Tailwind CSSで、会員制の学習記録アプリを作ってください。ログイン後、ユーザーは学習日、教材名、学習時間、メモを登録できます。画面はログイン、ダッシュボード、記録追加、月別集計の4つです。Supabaseのテーブル設計も提案し、必要な環境変数名を説明してください。セキュリティ上、実際のAPIキーはコードに直書きしないでください。
実例3：店舗向けランディングページ
小規模カフェ向けのランディングページを作ってください。ReactとTailwind CSSを使い、ファーストビュー、メニュー、店舗情報、アクセス、予約導線を含めてください。デザインは白を基調に、アクセントカラーは深い緑。スマホ表示を最優先し、営業時間と住所がすぐ見つかる構成にしてください。画像は仮のプレースホルダーで構いません。
実例4：既存画面の改善
現在のダッシュボード画面を改善してください。目的は、売上、予約数、未対応問い合わせを一目で確認できるようにすることです。上部に3つの指標カード、その下に予約一覧、右側に問い合わせリストを配置してください。既存のデータ構造は変更せず、見た目と情報設計だけを改善してください。
{{internal_link:Bolt.new Supabase連携}}
他のAIビルダーとの比較
| ツール | 得意なこと | 非エンジニア向け度 | 開発スタイル | Bolt.newとの違い |
|---|---|---|---|---|
| Bolt.new | ブラウザでフルスタックアプリ生成、実行、修正、デプロイ | 高い | プロンプト中心 | 環境構築なしでNode.js系アプリを動かしやすい |
| Lovable | SaaS風アプリやUI付きWebアプリの高速生成 | 高い | プロンプト中心 | Supabase前提のアプリ設計と相性がよい場面が多い |
| Replit | 開発環境、ホスティング、共同編集 | 中〜高 | IDE中心 | 幅広い言語に対応し、学習や本格開発にも向く |
| Cursor | 既存コードの編集、リファクタリング、開発者支援 | 中 | エディタ中心 | 非エンジニアのゼロから生成より、開発者の作業効率化に強い |
| v0 | UI生成、Reactコンポーネント、画面デザイン | 高い | UI生成中心 | フルスタック全体より、見た目の初期案作成に強い |
Bolt.new プロンプトの書き方を覚える価値が高いのは、アプリの画面だけでなく、実行、エラー修正、デプロイまで同じ場所で進めやすいからです。一方で、複雑な業務システムや大規模な権限設計では、人間による設計レビューが必要です。
参考情報：Bolt.new公式、StackBlitzのbolt.new GitHub、StackBlitz Blog、Product Hunt、TechCrunch、The Vergeなどの公開情報をもとに、2026年時点の一般的な使い方として整理しています。
よくある質問（FAQ）
Q1: Bolt.new 初心者でもプロンプトだけでアプリを作れますか？
A1: はい、簡単なWebアプリやプロトタイプなら作れます。ただし、最初から完成品を狙うより、MVPを作ってから機能を追加する進め方が現実的です。Bolt.new プロンプトの書き方をテンプレート化すると、失敗が減ります。
Q2: Bolt.new 無料プランだけで十分ですか？
A2: 学習や小さな試作なら無料で始められます。ただし、無料利用にはトークン制限があります。何度も曖昧な修正を繰り返すと上限に達しやすいため、初回プロンプトを具体的に書くことが重要です。
Q3: Next.jsやSupabaseを知らなくても使えますか？
A3: 使えます。Next.jsはWebアプリを作るためのReact系フレームワーク、Supabaseはログインやデータベースを簡単に使えるサービスです。わからない場合は、プロンプトに「専門用語を補足しながら進めて」と書くとよいです。
Q4: Bolt.newとCursorはどちらを使うべきですか？
A4: ゼロからブラウザでアプリを作りたいならBolt.new、既にあるコードを本格的に編集したいならCursorが向いています。非エンジニアのBolt.new 始め方としては、まずBolt.newで試作し、必要に応じて開発者がCursorで整える流れも有効です。
おすすめサービス・ツール
この記事で紹介した内容を実践するために、以下のサービスがおすすめです。
※ 上記リンクからご利用いただくと、サイト運営の支援になります。
まとめ
Bolt.new プロンプトの書き方は、目的、利用者、機能、画面、データ、デザイン、技術条件を具体的に書くのが基本です。Bolt.newはブラウザだけでアプリ生成から実行、修正、デプロイまで進められるため、非エンジニアがアイデアを形にする入口として非常に使いやすいAIアプリビルダーです。
最初の一歩は、小さなMVPを作ることです。この記事のプロンプト例をコピーし、自分のアプリ名、利用者、機能に置き換えてBolt.newに貼り付けてください。その後、画面ごとに修正範囲を指定しながら改善すれば、無駄なトークン消費を抑えつつ、実用的なアプリに近づけられます。