Bolt.newでプロンプトからサイトごと作る
v0がパーツ単位の生成に強いのに対し、Bolt.newは「サイト全体」をプロンプト一つで組み上げてくれるツールです。しかもブラウザ上で動作確認からファイル編集までが完結します。
Bolt.newができること
Bolt.newは、StackBlitz社が提供するAI開発ツールで、「〇〇業のコーポレートサイトを作って。ページはトップ、サービス紹介、会社概要、お問い合わせの4つ」といった具合に、サイト全体の構成をまとめてプロンプトで指示すると、ページ構成からナビゲーション、各セクションのコードまで一括で生成してくれます。v0が「パーツを積み上げる」アプローチだとすれば、Bolt.newは「まず全体を作ってから調整する」アプローチと言えます。
もう一つの大きな特徴は、ブラウザの中に開発環境そのものが内蔵されている点です。通常、コードを書いて動作確認するには、パソコンに専用のソフトをインストールする必要がありますが、Bolt.newはブラウザだけで「コードの生成→プレビュー→修正」のサイクルを完結できます。これにより、開発環境の構築でつまずくという、初心者が最初にぶつかりがちな壁を丸ごと回避できるのが大きな利点です。
生成後の修正もチャット形式で行えるため、「お問い合わせページにフォームを追加して」「全体の配色を落ち着いたトーンに変更して」といった指示を重ねながら、サイト全体を少しずつブラッシュアップしていくことができます。この「全体を見ながら会話で直していける」感覚は、実際に使ってみると、思っていた以上に直感的だと感じる人が多いはずです。
できること
複数ページにまたがるサイト構成をまとめて作りたい場合、v0よりもBolt.newの方が効率的なことが多く、この2つを「パーツの試作はv0、全体構成はBolt.new」という形で使い分けるディレクターも増えています。
実践のステップ
Bolt.newにアクセスしプロンプトを入力する
業種、目的、必要なページ構成を具体的に文章で入力します。STEP1〜6で整理した情報をそのまま活用しましょう。
生成されたサイト全体をプレビューで確認する
ページ構成、ナビゲーション、各セクションの内容をひと通り確認し、大きな方向性が合っているかチェックします。
チャットで細部を修正する
配色、文言、セクションの順番などを対話形式で調整していきます。
公開環境にデプロイする
Bolt.newは主要なホスティングサービスと連携しているため、完成したサイトをそのまま公開まで進めることができます。
メリット・デメリット
メリットは、サイト全体の構成をまとめて素早く形にできることと、ブラウザだけで開発から公開まで完結できる手軽さです。デメリットは、生成されるコードの品質にばらつきが出ることがあり、特に複雑な機能を求めた場合は期待通りに動かないケースもある点です。その場合は次のSTEP13で紹介するCursorのような、より細かくコードを制御できるツールと組み合わせるのが現実的な解決策になります。
気をつけたいポイント
- 複雑な機能（決済、会員機能など）を求める場合は、生成結果を過信せず必ず動作確認をしましょう。
- デプロイ先のサービスによっては料金が発生する場合があるため、事前に料金体系を確認しておきましょう。
- 生成されたコードの中身がまったく分からない状態で放置せず、最低限の構造は理解しておくと後々のトラブルに強くなります。
まとめ
Bolt.newは「サイト全体を一気に形にしたい」というニーズに応えるツールです。次のSTEP13では、より本格的にコードと向き合いたい方向けに、CursorやGitHub Copilotの活用法を紹介します。