MENU

Bolt.newの使い方|アプリを公開するまでの手順を公式ドキュメントで整理する

Bolt.newの使い方|アプリを公開するまでの手順を公式ドキュメントで整理する
先に結論

Bolt.newの使い方は、チャット欄に作りたいものを書く・プレビューを見て直す・公開ボタンを押す、の3段階に整理できます。

最初のプロンプトを送ってから動くアプリが出てくるまで、公式のクイックスタートはおよそ5分を見込んでいます。

クレジットカードの登録は要らず、GoogleかGitHubかメールアドレスがあれば始められます。

公開はPublishのボタンを押すだけで、無料プランでも bolt.host のアドレスが付きます。

公開ボタンを押す操作自体はトークンを消費しませんが、公開をプロンプトで頼むと消費します。

この記事は2026年9月21日にBolt.newの公式サイト(公式ヘルプ/公式ドキュメント)を確認した時点の記載にもとづいています。

目次

Bolt.newの使い方は「書く・直す・出す」の3段階で終わる

Bolt.newの操作は、覚えることが多そうに見えて、実際の骨格は3つしかありません。

作りたいものを文章で書き、出てきた画面を見て直し、公開ボタンを押す、という順番です。

この3つの間に入る操作は、すべて「直す」の枝分かれだと考えると迷いません。

段階やること使う場所
書く作りたいものを文章で入力してBuild nowを押すトップページのチャット欄
直すプレビューを見ながら追加のプロンプトを送るプロジェクト内のチャット欄
直す(画面)Selectツールで要素を指してから頼むプレビュー枠
直す(コード)コードビューで文字やラベルを直接書き換えるコードビュー
戻すバージョン履歴から前の版を復元するプロジェクト名のメニュー
出すPublishを押して公開し、以降はUpdateで反映する右上のPublishメニュー

このうちコードビューでの編集とバージョン履歴の復元は、トークンを1つも使いません

料金はトークンの消費で決まるため、この2つを知っているかどうかで費用が変わります。

逆に言えば、公開もバージョンの復元もプロンプトで頼むとトークンが減ります。

同じ結果になる操作が2通りあるとき、ボタンの側を選ぶのがBolt.newの基本の作法です。

この作法は、公式のベストプラクティスにも節約の第一手として載っています。

Bolt.newを使い始める前に用意するもの

準備物は驚くほど少なく、パソコンへのインストールは1つもありません。

Bolt.newを始めるのに必要なもの
  • ブラウザ=ChromeまたはChromium系(Opera・Brave・Edge・Vivaldiなど)
  • アカウント=Google・GitHub・メールアドレスのいずれかで登録
  • 時間=公式のクイックスタートは10〜15分を想定
  • 支払い情報=登録の時点では不要

登録のあとに簡単なアンケートが挟まりますが、入力はすぐ終わります。

開発環境を作る作業が無いので、準備の段階でつまずく余地がほとんどありません

なお、公式のクイックスタートを最後まで通すと300,000トークン近くを使います。

これは無料プランの1日の上限と同じ量なので、試す日は他の作業を詰め込まないほうが安全です。

Bolt.newの使い方|最初のプロンプトでアプリを作るまで

ここからは、公式のクイックスタートの流れをそのまま手順に落とします。

例として使われているのは、動物の種類と名前の傾向を選ぶとペットの名前を提案するアプリです。

STEP
Bolt.newのトップページを開く

ブラウザで bolt.new を開きます。

トップページの中央にチャット欄が置かれています。

STEP
作りたいものを文章で書いてBuild nowを押す

チャット欄に、作りたいアプリの中身を日本語または英語で書きます。

画面に出したい機能は、この1通目でまとめて伝えます。

書き終えたらBuild nowのボタンを押します。

STEP
アカウントを作る

Google・GitHub・メールアドレスのいずれかでサインインまたは新規登録をします。

この時点でクレジットカードの入力は求められません。

続いて表示される簡単なアンケートに答えます。

STEP
ビルドが終わるのを待つ

公式のクイックスタートは、この待ち時間をおよそ5分と案内しています。

ログインやお気に入り保存のようにデータの保存がある機能を頼むと、データベースの用意が挟まるぶん時間が伸びます。

データベースを使わないアプリなら、これより早く組み上がります。

STEP
プレビューで動かしてみる

画面右側のプレビュー枠で、できあがったアプリをその場で操作します。

ボタンを押す、項目を選ぶ、結果を出す、という一連の流れが動くかを見ます。

ここで動いていれば、すでに公開できる状態のアプリが手元にあります

ビルドの直後は、トークンをどれだけ使ったかを確認しておくと後が楽になります。

プロフィールのアイコンからSettingsを開き、AccountのSubscription & Tokensで残量が見られます。

同じAccountのGeneralにある Display token usage in chat を有効にすると、チャット欄の上に残量が常に出ます。

手順の全文はBolt QuickStart guide(Bolt.new 公式ヘルプ)にあります。

Bolt.newで結果が変わるプロンプトの書き方

Bolt.newの出来は、コードの知識よりも、やりたいことをどれだけ明確に言葉にできたかで決まります。

公式のベストプラクティスは、プロンプトを設計図にたとえています。

設計図がはっきりしているほど、あとからの作り直しが減ります。

Bolt.newのプロンプトで効くこと
  • 最初にアプリの構成を伝える=使う技術やフレームワークの指定から入る
  • 機能は1つずつ足す=1通のプロンプトに要求を詰め込みすぎない
  • 変えるものと変えないものをはっきり書く=対象のファイルや関数を名指しする
  • 文脈を定期的に片付ける=覚えておく必要のない情報は消す
  • 常識を期待しない=省略した部分は伝わらない前提で書く

文章を練る作業そのものをBolt.newに手伝わせる機能もあります

チャット欄の左下にあるプラスのアイコンから Enhance prompt を選ぶと、追加の質問が出ます。

その質問に答えると、答えを織り込んだプロンプトの案が生成され、そのまま編集できます。

公式のヘルプは、同じ題材でも素のプロンプトと強化したプロンプトでは仕上がりの密度が変わると整理しています。

書き方の詳細はPrompt effectively(Bolt.new 公式ヘルプ)にまとまっています。

プロジェクトごとに毎回同じ前提を書くのが面倒になったら、Knowledgeという機能が使えます。

Knowledgeは、Bolt.newが返答のたびに参照する常設の指示です。

設定できる階層は3つあり、アカウント全体・プロジェクト単位・チーム単位で別々に指定できます。

アカウントに設定したものは自分のすべてのプロジェクトに、チームに設定したものはそのチームで作るすべてのプロジェクトへ適用されます。

口調や着目点や振る舞いの癖を毎回書き直す手間が、ここでまとめて消えます。

Bolt.newに触らせたくない場所を指定する方法

プロジェクトが育つほど、直してほしくない場所まで書き換えられる事故が起きやすくなります。

Bolt.newには、AIの視線を絞り込む操作が3つ用意されています。

やりたいこと操作
特定のファイルだけを見させるコードビューでファイルを右クリックしてTarget fileを選ぶ
触らせたくないファイルを守る右クリックしてLock fileを選ぶ
フォルダごと守る右クリックしてLock allを選ぶ
特定の箇所について相談するコードを選択してAsk Boltを押す

コードビューは画面中央上部のコードのアイコンから開きます

Ask Boltのボタンが出ないときは、選択した状態で右クリックをすると現れます。

選択した範囲はプロンプト欄に紐づくので、どこの話かを文章で説明する手間が省けます。

Bolt.newのPlan Modeで作る前に相談する

Plan Modeは、コードを1行も書き換えずにBolt.newと相談するための会話モードです。

プロジェクトの全体を読んだうえで答えるため、話が具体的になります。

建てる前に図面を詰める作業なので、結果としてトークンの消費が減ります。

Plan Modeが向いている相談
  • 不具合の原因を一緒に探す
  • 使うライブラリやAPIを選ぶ
  • 機能を入れるかどうかを決める
  • デザインの改善案を出させる
  • 外部APIの仕様を読んで組み込み方を決める
  • あとで実行する実装計画を作らせる

Plan Modeは必要に応じてWebを検索し、参照した情報源を回答の先頭に並べます。

学習した時点の古い知識ではなく、その時点の情報で答えさせられる点が実務では有効です

回答の末尾には、そのまま次の行動に移れるボタンが出ることがあります。

Implement this plan を押すとBuild Modeへ切り替わり、話した内容がそのまま実装に移ります。

トップページではプロンプトを送る前にPlanを押し、プロジェクトの中ではチャット欄の右下のPlanを押します。

有効になっているあいだ、Planの表示は青く光ります。

詳しい挙動はPlan Mode(Bolt.new 公式ヘルプ)に整理されています。

Bolt.newのエージェントを仕事で使い分ける

Bolt.newの中で動くAIは、StandardとMaxの2つから選べます。

どのモデルを当てるかはBolt.new側が決めるため、利用者はモデル名を覚える必要がありません。

エージェント選ぶ場面トークンの使い方
Standard小〜中規模のアプリ、UIの調整、やることが決まっている作業速くて効率がよい。普段使いの既定
Max大規模なアプリ、複雑に絡んだ機能、リファクタリング、答えの見えない課題深く考えるぶん多く使う

無料プランで選べるのはStandardだけで、Maxは有料プランに上げると現れます

簡単な作業にMaxを当てると、必要以上のトークンを使ってしまいます。

逆に複雑な作業をStandardに任せると、やり直しのプロンプトが増えて結局は高く付きます。

切り替えは、トップページではチャット欄下のドロップダウン、プロジェクト内ではチャット欄の左下から行います。

選んだエージェントはプロジェクトごとに記憶され、次に開いたときも同じものが使われます。

Bolt.newの画面上で直す2つの方法

できあがった画面を直すとき、チャットに文章を書く以外の道が2つあります。

Selectツールで要素を指す

チャット欄のSelectのアイコンを押してから、プレビューの中の直したい部分をクリックします。

すると、その要素がプロンプトに紐づいた状態になります。

あとは「このタイトルをPetPickに変えて」のように短く頼むだけで済みます。

どこの話かを文章で説明しなくてよくなるので、プロンプトが短くなりトークンも減ります

コードビューで直接書き換える

画面中央上部のコードのアイコンを押すと、プロジェクトのファイルがそのまま開きます。

検索のアイコンから文字列を探し、該当の行を書き換えてSaveを押します。

目のアイコンを押すとプレビューに戻り、変更が反映されているかを確認できます。

この編集ではトークンが1つも減りません

ただしコードビューでの変更はバージョン履歴の対象外なので、戻す操作が効きません。

コードに慣れていないうちは、文言やラベルの書き換えに留めておくのが安全です。

壊してしまった場合は、Bolt.newに直してもらうプロンプトを投げることになります。

その修正にはトークンが要るので、節約のつもりが逆に高く付くこともあります。

コードビューは、目で追える範囲の文字を直す道具として使うのが無難です。

Bolt.newのバージョン履歴で前の状態に戻す

Bolt.newは、プロンプトが1回処理されるたびに、その時点のプロジェクトを自動で保存します。

方向を間違えたときは、プロンプトで直そうとするより履歴から戻すほうが速くて安いです。

STEP
プロジェクト名をクリックする

画面の左上にあるプロジェクト名を押します。

開いたメニューから Version history を選びます。

STEP
戻したい版を選ぶ

一覧から戻したい時点の版を選びます。

選ぶとその版のプレビューが開きます。

STEP
復元を確定する

画面右上の Restore this version を押します。

確認の表示で Restore version を押すと復元が完了します。

この復元にトークンは使われません

失敗の後始末が料金に跳ね返らない設計になっているので、迷ったら戻す判断でかまいません。

ただし前述のとおり、コードビューで直接書き換えた内容は履歴に含まれません。

Bolt.newの使い方|公開して公開後に更新するまで

できあがったアプリを人に見せる段階は、ボタン2回で終わります。

STEP
右上のPublishを押す

画面の右上にある Publish を押します。

公開の設定メニューが開きます。

有料プランでは、ここで公開範囲を全体公開か限定公開かで選べます。

STEP
もう一度Publishを押す

メニューの中の Publish をもう一度押します。

無料プランの公開サイトはすべて全体公開になります。

STEP
デプロイが終わるのを待つ

公開の処理はおよそ1分で終わります。

終わるとチャット欄にサイトのリンクが出ます。

STEP
リンクを開いて確認する

チャットに出たリンクを押すと、新しいタブで公開されたサイトが開きます。

アドレスは bolt.host で終わる無料のドメインです。

このアドレスは、あとから Edit domain の鉛筆アイコンで変更できます

STEP
公開後の変更はUpdateで反映する

公開したあとにプロジェクトを直しても、公開中のサイトには自動では反映されません。

反映させたいときは、Publishメニューの Update を押します。

この仕組みのおかげで、作りかけの状態が公開サイトに出てしまう事故が起きません。

公開をやめたいときは、同じメニューの Unpublish を2回押します。

独自ドメインを付けている場合は、先にドメインの接続を外してから操作します。

有料プランでは、公開の前にセキュリティの監査をこのメニューから走らせられます。

見つかった問題はBolt.newが自動で修正します

公開まわりの全手順はPublish your project(Bolt.new 公式ヘルプ)にあります。

公開の操作ができるのは、プロジェクトの持ち主と共同オーナーの権限を持つ人だけです。

編集者として招かれた人やチームのメンバーは、公開されたサイトを見ることはできます。

ただし公開すること自体や、公開範囲の変更はできません。

限定公開にしたサイトへ人を入れる方法は2通りあります。

1つは相手のメールアドレスを入れて招待する方法で、招待が未承諾のあいだは保留の表示が出ます。

もう1つは信頼するドメインを登録する方法で、そのドメインで終わるメールアドレスを持つ人が自動的に閲覧できます。

社内の全員に見せたいときは、ドメインごと登録したほうが手数が少なく済みます。

Bolt.newで独自ドメインを使うときの流れ

独自ドメインは有料プランだけの機能で、無料プランでは使えません。

道は2つあり、Bolt.newの中で新しく買うか、すでに持っているドメインを接続します。

どちらもプロジェクトの設定画面から操作でき、外部の管理画面を開く必要はありません。

買ったドメインの一覧は、アカウント設定のCloudの項目にまとまって表示されます。

一覧には、そのドメインがどのプロジェクトに紐づいているか、未割り当てかも並びます

注意したいのは、独自ドメインを付けたサイトは限定公開にできない点です。

限定公開に切り替えたいときは、先にドメインの接続を外します。

料金プランを無料に落とすと、独自ドメインへの再公開ができなくなります。

すでに公開済みのサイトは動き続けますが、そこから先の更新は止まります。

ドメインの扱いはDomains(Bolt.new 公式ヘルプ)に整理されています。

Bolt.newの使い方でトークンを減らす工夫

Bolt.newの費用はトークンの消費量で決まるので、使い方の工夫がそのまま節約になります。

公式のベストプラクティスが挙げている手は、どれも今日から試せるものです。

Bolt.newのトークンを減らす手
  • 作る前にPlan Modeで計画を詰める=作り直しを減らす
  • 作業の重さに合わせてエージェントを選ぶ
  • ボタンでできることはボタンで済ませる=公開もバージョン復元もプロンプトで頼まない
  • 機能は1つずつ足す=土台ができてから次へ進む
  • コネクタは必要なプロジェクトでだけ有効にする
  • 自動修正のボタンを連打しない=1回ごとにトークンが減る
  • エラー処理とログを先に厚くする=原因が特定しやすくなる
  • 使っていないファイルを片付けてプロジェクトを小さく保つ

トークンの大半は、Bolt.newがプロジェクトのファイルを読んで同期する処理に使われます

つまりプロジェクトが大きいほど、1通あたりの消費が増えていきます。

使っていないファイルを消し、大きなファイルを分割するだけでも消費量は下がります。

節約の詳細はMaximize token efficiency(Bolt.new 公式ヘルプ)にまとまっています。

同じくブラウザで動くAI開発ツールの操作はLovableの使い方でも整理しています。

Bolt.newの使い方でつまずいたときの対処

公式のFAQが挙げている、詰まりやすい場面とその対処を並べます。

起きること対処
頼んだことが全部は実装されない要求を分割して1つずつ頼む。またはPlan Modeで方針を決めてから実装させる
前に伝えたことを忘れるそれまでの会話を要約させ、プロジェクトを複製して会話履歴をリセットする
プレビューが表示されないMacは Cmd + Shift + R、Windowsは Ctrl + Shift + R でハードリロードする
それでも表示されないプロジェクトを新しいタブで開き直す
タブを閉じてしまった左のサイドバーのProjectsから作ったプロジェクトの一覧に戻る

頼んだことが全部は実装されない現象は、1通のプロンプトに要求を詰め込みすぎたときに起きます

変更は1つずつ行い、動いたことを確かめてから次へ進むのが確実です。

ブラウザのタブを閉じても作業内容は消えないので、慌てて作り直す必要はありません。

エラーの自動修正のボタンは、押すたびにトークンが減ります。

2回目で直ることもありますが、当たるまで押し続けるやり方は費用が膨らみます。

何度か試しても直らないときは、Plan Modeに切り替えて原因を絞り込むほうが早いです。

エラーの繰り返しから抜けられないときの手として、ログを厚くする依頼も有効です。

関数の間や処理の節目に詳しいログを入れさせると、次に同じエラーが起きたときの情報量が増えます。

Bolt.newの使い方によくある質問

Bolt.newの使い方を覚えるのにコードの知識は必要ですか?

必要ありませんが、コードビューを触れる人は文言の修正などをトークンを使わずに済ませられます。

Bolt.newで公開したサイトを自分だけに見せることはできますか?

有料プランなら限定公開を選べて、招いた相手や指定したドメインのメールアドレスを持つ人だけが閲覧できます。

Bolt.newで公開したあとに直した内容はいつ反映されますか?

自動では反映されないため、PublishメニューのUpdateを押した時点で公開サイトに反映されます。

Bolt.newでスマートフォンのアプリを作るときの使い方は違いますか?

最初のプロンプトに「mobile app」の一語を入れるとExpo対応のプロジェクトとして組まれます。

Bolt.newで作ったものを公開するのにトークンは減りますか?

PublishやUpdateのボタンを押す操作では減りませんが、公開をプロンプトで頼むと減ります。

Bolt.newの使い方のまとめ

最後に、この記事で追った操作の流れを一列に並べ直します。

Bolt.newの使い方の要点
  • トップページのチャット欄に作りたいものを書いてBuild nowを押す
  • 5分ほどでアプリが組み上がり、プレビューで動かせる
  • 直すときはチャット・Selectツール・コードビューの3通りがある
  • 失敗したらバージョン履歴から戻す。復元にトークンは要らない
  • 公開はPublishを2回押すだけ。公開後の変更はUpdateで反映する
  • 独自ドメインは有料プランから。無料プランは bolt.host のアドレス
  • 節約はPlan Modeとボタン操作とプロジェクトの小型化で効く

操作の骨格は3段階しかないので、最初の1本を最後まで通せば全体像がつかめます

まず触ってみるならBolt.new トップページ(Bolt.new 公式)から始めて、手順の全文はBolt QuickStart guide(Bolt.new 公式ヘルプ)を横に置くのが早いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次