Bolt.new の使い方:アイデアからデプロイまでのステップバイステップ
実際の初心者ビルドから再構築した Bolt.new 完全ウォークスルー — 最初のプロンプト、スクリーンショットでの反復、アナリティクス、Firebase による Google ログイン、デプロイまで。全ステップにスクリーンショット付き。
Bolt.new の要点
- 最初は大まかなアイデア+欲しい機能をいくつか — 「作業セッションを記録、タスク追加、セッション保存」。仕様書は要りません。1 分ほどで動くアプリが立ち上がります。
- 短いプロンプトで 1 機能ずつ反復:終了ボタン、アナリティクスタブ、円グラフ、ダークモード。外れたら言い換えて再送 — 2 度目でたいてい決まります。
- 変更は壊れることも。ボタンが動かなくなったらバグを平易に説明するか、直前の正常版への復元を依頼。ほとんどは 1 プロンプトで直ります。
- Google ログインには Firebase が必要:プロジェクト作成、Google プロバイダ有効化、firebaseConfig を Bolt に貼り付け、Firebase 設定でデプロイ済みドメインを承認。
Building an App from Scratch with Bolt.new
ソース動画:Brock Mesarich · AI for Non Techies16:02
スクリーンショットはソース動画からの引用で、タイムスタンプ付きクレジットを併記しています。本文は完全な文字起こしに基づく独自の解説で、事実は動画と一致しています。
本チュートリアルは文章で学びたい方向けの独立した図解版です。クリエイターを支援したい方は上記の AI for Non Techies チャンネルの動画をご覧ください。
Bolt.new でアプリを作る手順
- 1
アイデアを 1 つのプロンプトに
bolt.new を開き、大まかなアイデア+欲しい機能を書きます。完全な仕様書ではなく。例:「作業セッションを記録するアプリを作って。FocusFlow と呼ぶ。作業ブロックを記録し、セッション中に完了したタスクを追加し、セッションを保存する。どのタスクに時間を使っているか、何を委譲できるか知りたい」。冒頭の詳細すぎる指定は初回ビルドを遅くします。
bolt.new での最初の FocusFlow プロンプト。0:30 に視聴 - 2
初版が現れる — スクリーンショットで磨く
1 分ほどで Bolt がコードを書いて実行済み:タイマー、タスクフォーム、統計カード。気に入らない部分をスクリーンショットで添付し、「この部分をもっとシンプルに」と指示。視覚フィードバックはピクセル位置を言葉で説明するより遥かに効きます。
初回プレビューと、スクリーンショット添付の改善プロンプト。1:40 に視聴 - 3
タスクにカテゴリを追加
具体例とともにカテゴリ列を依頼します — admin、コンテンツ制作、財務、リサーチ、アプリ開発。Bolt はこれをボタングリッドにし、各タスクに色付きタグを付けます。これが後のアナリティクスを意味あるものにします。
8 カテゴリのボタングリッドと色付きタグ。2:30 に視聴 - 4
セッション終了ボタンを依頼
タイマーは動くのに何も保存されません。「セッションを終了できるようにして」とプロンプト。Bolt は SessionControls・SessionSummary コンポーネントを作成し、アプリに組み込み、セッション終了時に所要時間・完了タスク・最多カテゴリのサマリーを出します。
Bolt がセッション終了コンポーネントを計画・作成。3:00 に視聴 - 5
サマリーをダッシュボードに残す
デフォルトではセッション終了で別ページへ飛びます。このフローが嫌なら素直に言います。「終了時に別ページへ飛ぶのが嫌。通常のダッシュボードに表示して」。サマリーカードがメイン画面にインラインで現れます。
Session Complete カードがダッシュボードに戻る。4:00 に視聴 - 6
アナリティクスタブを追加
日ごとの全タスクと 1 日合計を一覧する Session Analytics タブを依頼。Bolt が Current Session の隣に追加し、完了セッションを展開するとタスク履歴が見られます。カテゴリタグがここで効き始めます。
Current Session の隣に追加された Analytics タブ。4:30 に視聴 - 7
タスクごとの時間を記録
分析には入力が要ります:タスクをデフォルトで完了扱いにし、カテゴリごとの所要時間入力を追加させます。Bolt は時・分の入力(後に 1 時間までのドラッグスライダーに変更)を追加し、数値をアナリティクスへ流し込みます。
所要時間の入力がタスクフォームに追加。6:00 に視聴 - 8
円グラフで時間を可視化
「全部の作業にどれだけ時間を使ったか円グラフで見せるアナリティクスを追加して」。最初のグラフは極端に大きい — 「少し小さくして」で 2 度目に修正。こうした小さな UI 修正こそ Bolt の得意分野です。
サイズ修正後の日次円グラフ。6:25 に視聴 - 9
平易な英語でリグレッションを修正
ビルド途中、変更は衝突します:ボタンが動かなくなる、遊びのカーソルトレイル効果がレイアウトを壊す。バグを平易に説明し、気に入らないものは削除を依頼、または Undo。Bolt 自身の修正リスト(今回は 6 項目)でたいてい一括修復します。
6 項目の修正リスト:タイマー修復とグロー効果の削除。9:30 に視聴 - 10
Google ログインを追加
本物のプロダクトにはアカウントが必要。「Google でサインインできるようにして」とプロンプト。Bolt は作業カード(package.json 更新、依存インストール、auth コンテキスト作成)と、Bolt の外で行う Firebase の手順を返してきます。
Bolt の Add Google Authentication 作業カード。11:00 に視聴 - 11
Firebase プロジェクトを作成
Bolt のリンクから Firebase コンソールを開き、新規プロジェクトを作成(名前を付け、アカウントを選択)。準備ができたらコンソールへ続行。無料の Spark プランで十分です。
Firebase プロジェクト準備完了 — コンソールへ続行。11:30 に視聴 - 12
サインイン方法で Google を有効化
コンソールで Build → Authentication → Sign-in method。Google プロバイダを有効にし、Email/Password も有効化して両方で登録できるように。Bolt のチェックリスト通りに設定が進みます。
Google が有効なサインインプロバイダに。12:00 に視聴 - 13
firebaseConfig を Bolt に貼り付け
Project settings → Your apps で Web アプリを登録し、firebaseConfig ブロックをコピー。Bolt のチェックリストが作った設定ファイルの貼り付け位置へ。Bolt に「Firebase 設定を追加した」と伝えると接線をすべて行い、サインアップボタンが動きます。
Bolt の設定ファイルへコピーする firebaseConfig。12:30 に視聴 - 14
デプロイ済みドメインを承認
Firebase が URL を信頼するまで、Google ログインは「ポップアップがブロックされました」で止まります。Bolt からアプリをデプロイし、Firebase → Authentication → Settings → Authorized domains に localhost・IDE ドメイン・デプロイ URL を追加(尋ねれば正確なドメインを教えてくれます)。
Firebase 設定の Authorized domains。14:00 に視聴 - 15
公開してサインイン
デプロイ URL を開き、Sign in から Google で続行 — ポップアップが動き、アバターが右上に現れ、サインアウトも機能します。コードを書かずに、本物のアカウントを持つデプロイ済みアプリの完成です。
デプロイ済み FocusFlow でサインイン成功。15:00 に視聴