Bolt.new完全入門ガイド
AIでWebサイトを一瞬で作る方法【2026年最新版】
公開日: 2026年2月22日
「Webサイトを作りたいけど、プログラミングなんて自分には無理」——そう思っていませんか？
2026年の今、AIに日本語で話しかけるだけで、本格的なWebサイトが完成する時代が来ています。そのための最も手軽なツールが「Bolt.new（ボルト・ニュー）」です。
Bolt.newは、StackBlitz社が開発したAI Web開発ツール。2024年10月のリリースからわずか2ヶ月で年間売上2,000万ドル（約30億円）を突破し、世界中で月間900万人以上が利用しています。プログラミング経験ゼロの方でも、ブラウザを開いてAIに指示を出すだけで、ポートフォリオ、ランディングページ、さらには業務ツールまで作れてしまうのです。
この記事では、Bolt.newの始め方をステップバイステップで解説し、プロンプト（指示文）の書き方のコツ、料金プラン、つまずきやすいポイントまで、初心者が知りたいことをすべてまとめました。
関連テーマを先に押さえるならVibe Coding入門ガイド・AIコーディング入門・Cursor AIコーディングガイドもあわせて読むと、AI開発ツールの全体像がつかめます。
要点まとめ（結論先出し）
- Bolt.newはブラウザだけで完結するAI Web開発ツール。プログラミング経験ゼロでもWebサイトが作れる
- 無料プランで月100万トークン使える。ポートフォリオやLPなら3〜5サイト分に相当
- 「作りたいものを日本語で説明→AIがコード生成→プレビューで確認→修正依頼」のサイクルで完成
- v0、Lovable、Replit Agentと比較して「最も手軽に始められ、最も速くMVPが完成する」のが強み
- プロンプトは「誰のため・何を載せるか・デザインの雰囲気」の3点を伝えるのがコツ
Bolt.newとは？——AIでWebサイトを作れるツール
Bolt.new（ボルト・ニュー）は、StackBlitz社が提供するAI搭載のWeb開発プラットフォームです。従来のWeb制作では、HTML・CSS・JavaScriptなどのプログラミング言語を学ぶ必要がありましたが、Bolt.newでは「こんなサイトを作りたい」と日本語で指示を出すだけでAIが自動的にコードを生成してくれます。
2024年10月3日にリリースされ、わずか1週間で年間売上100万ドルを突破。2025年1月には1億500万ドルの資金調達を完了し、企業評価額は7億ドル（約1,050億円）に達しました。AIのモデルにはAnthropicの「Claude」を採用しており、2025年10月の大型アップデート「Bolt V2」で、データベース・認証機能・Figma連携などが追加されました。
ブラウザだけで完結
StackBlitz独自のWebContainers技術により、Node.jsがブラウザ内で動作します。パソコンへのインストールや環境構築は一切不要。ブラウザを開いてURLにアクセスするだけで開発環境が整います。
AIに話しかけるだけでコード生成
チャット欄に「こんなサイトを作りたい」と日本語で入力するだけで、AIがHTML・CSS・JavaScriptのコードを自動生成。プログラミング言語を覚える必要はありません。
リアルタイムプレビュー
コードが生成されると同時に、画面右側にサイトの完成形がリアルタイムで表示されます。「思っていたのと違う」と思ったら、その場でAIに修正を依頼できます。
ワンクリックで公開
作ったサイトはBolt Hostingで即座にインターネット上に公開できます。ドメイン取得やサーバー設定といった面倒な作業は不要です。
複数フレームワーク対応
React、Next.js、Vue、Svelte、Astroなど主要なWebフレームワークに対応。初心者は意識する必要はありませんが、技術に詳しい方は好みの技術スタックを指定できます。
「Vibe Coding」という新しい開発スタイル
Bolt.newのように「AIに話しかけてコードを書いてもらう」スタイルは、2025年から「Vibe Coding（バイブコーディング）」と呼ばれ、テック業界で大きな話題になっています。プログラミングの知識がなくても、「こんな感じで」という雰囲気（Vibe）を伝えるだけで形にできる。その入口として最も手軽なツールがBolt.newです。
Bolt.newの画面構成
Bolt.newの画面は、大きく6つのエリアに分かれています。最初はチャットパネルとプレビューパネルだけ意識すればOKです。
💬チャットパネル
左〜中央に表示。ここにプロンプトを入力してAIと対話します。
📁ファイルツリー
左サイドバー。生成されたファイルとフォルダが一覧表示されます。右クリックでLock/Target設定が可能。
📝コードエディタ
中央エリア。VS Codeのような構文ハイライト付きエディタ。手動でのコード編集も可能です。
👁️プレビューパネル
右側に表示。作成中のサイトがリアルタイムで動的にプレビューされます。
⚡ターミナル
画面下部。ビルド出力やエラーログが表示されます。問題解決のヒントがここに出ます。
🚀デプロイボタン
画面上部。ワンクリックでBolt HostingまたはNetlifyに公開できます。
他ツールとの違い（比較表）
「AIでWebサイトを作るツール」は複数あります。それぞれ特徴が異なるので、自分に合ったツールを選ぶことが大切です。Bolt.newは「プログラミング経験ゼロの人が、最も速くWebサイトを公開できるツール」として際立っています。
| ツール | ターゲット | 強み | 無料枠 | 有料プラン |
|---|---|---|---|---|
| Bolt.new | 非エンジニア〜初心者 | ブラウザ完結、最速でMVP完成、多フレームワーク対応 | 月100万トークン | $25〜/月 |
| v0 | デザイナー〜開発者 | UIの品質が最高、Next.js特化で本番レベル | 月200クレジット | $20〜/月 |
| Lovable | 非技術者・起業家 | React出力コードが美しい、Supabase連携が簡単 | 月5クレジット | $20〜/月 |
| Replit Agent | 幅広い開発者 | Python等も対応、自律的にDB構築まで完結 | 制限付き無料 | $25〜/月 |
どれを選べばいい？
プログラミング経験ゼロで、とにかく最初の1ページを作りたい→ Bolt.new（この記事でガイドします）。 UIの品質を最優先にしたい開発者 → v0。 Reactで本格的なアプリを作りたい → Lovable。 Python等も使いたい → Replit Agent。 迷ったらまずBolt.newの無料枠で試してみましょう。
実際に作ってみよう（ハンズオン6ステップ）
ここからは実際にBolt.newを使ってWebサイトを作る手順を、初めての方でも迷わないようにステップバイステップで解説します。所要時間は約30分です。
bolt.newにアクセス
ブラウザで bolt.new を開きます。Chrome（またはChromium系ブラウザ）の最新版が推奨です。FirefoxやSafariはベータ対応のため、Chrome系が安定します。
アカウントを作成
画面右上の「Sign Up」をクリック。Googleアカウントで1クリック登録できます。メールアドレスでの登録も可能です。登録が完了すると、月100万トークン（約3〜5回のプロジェクト作成分）の無料枠がもらえます。
プロンプトを入力
画面中央のチャット欄に、作りたいサイトの説明を入力します。日本語でOKです。最初は「シンプルな自己紹介ポートフォリオサイトを作って」くらいのシンプルな依頼から始めましょう。
AIがコードを自動生成
送信ボタンを押すと、AIがコードを書き始めます。画面左側にファイルツリーとコードエディタ、右側にリアルタイムプレビューが表示されます。通常1〜2分で完成形が見えます。
チャットで修正を依頼
プレビューを見て「ヘッダーの色を青に変えて」「問い合わせフォームを追加して」など、日本語で追加の指示を出します。何度でもやり取りできます。
完成したらデプロイ（公開）
「Deploy」ボタンをクリックするだけで、作成したサイトがインターネット上に公開されます。自動でURLが発行され、誰でもアクセスできるようになります。
うまくいかなくても大丈夫
最初のプロンプトで思い通りのサイトが出来上がることは稀です。「指示→確認→修正依頼」を3〜5回繰り返すのが普通のワークフローです。何度でもやり直せるので、気楽にいきましょう。もし生成結果がおかしくなったら「Rollback」で前の状態に戻せます。トークンも消費しません。
プロンプト（指示文）のコツ＆実例3パターン
Bolt.newで良い結果を得るために最も重要なのが「プロンプト（AIへの指示文）の書き方」です。ChatGPTと同じく、具体的に伝えるほど精度が上がります。ここでは、初級・中級・上級の3パターンのプロンプト例を紹介します。
プロンプト3つの基本ルール
- 誰のためのサイトかを伝える（例：「フリーランスデザイナー向け」）
- 何を載せるかをセクション単位で箇条書きにする
- デザインの雰囲気を指定する（例：「ネイビーと白、モダンでクリーン」）
シンプルなポートフォリオサイト
コピペで使えるプロンプト例
フリーランスのWebデザイナー用のポートフォリオサイトを作ってください。 ・ヘッダーに名前とナビゲーション ・自己紹介セクション ・実績を3つカード形式で表示 ・問い合わせフォーム ・フッター カラーはネイビーと白を基調に、モダンでクリーンなデザインにしてください。
ポイント
「誰のため」「何を載せるか」「デザインの雰囲気」の3点を伝えるのがコツ。最初から完璧を目指さず、ざっくり依頼して後から修正するのが効率的です。
カフェのLP（ランディングページ）
コピペで使えるプロンプト例
東京・渋谷にあるカフェのランディングページを作ってください。 ・ファーストビューに大きな写真エリアとキャッチコピー「一杯のコーヒーが、あなたの1日を変える」 ・メニューセクション（コーヒー、スイーツ、フードを3列で） ・店舗情報（住所、営業時間、アクセス） ・Google Maps埋め込みエリア（プレースホルダーでOK） ・Instagram風の写真ギャラリー カラーはブラウンとクリームの温かみのある配色で。日本語フォントを使って。
ポイント
セクションを箇条書きで列挙すると、AIが構造を正確に把握できます。写真は後から差し替えられるので、まずはプレースホルダーで構成を固めましょう。
タスク管理ツール（フル機能）
コピペで使えるプロンプト例
個人用のタスク管理Webアプリを作ってください。 【機能要件】 ・タスクの追加・編集・削除 ・ステータス管理（未着手 / 進行中 / 完了）をドラッグ&ドロップで変更 ・期限の設定とカレンダー表示 ・優先度（高/中/低）のラベル付け ・タスクの検索・フィルタリング 【技術要件】 ・Reactで構築 ・ローカルストレージでデータを保存 ・レスポンシブ対応 ・ダークモード切り替え デザインはNotion風のミニマルなUIにしてください。
ポイント
複雑なアプリは「機能要件」と「技術要件」を分けて記述すると精度が上がります。一度に全部盛り込むよりも、まずコア機能で作って段階的に追加するのがトークン節約のコツ。
Bolt.newの「Prompt Enhancer」を活用しよう
チャット欄の横にある「Enhance」ボタンを押すと、あなたのプロンプトをAIが自動的に改善してくれます。「何を書けばいいかわからない」という方は、まずざっくりした指示を書いてからEnhanceボタンを押してみましょう。
まずはLINEで、AI活用の第一歩を相談してみませんか？
「自分にはどのツールが合う？」「補助金は使える？」といった疑問に、専門スタッフが個別にお答えします。匿名・無料で気軽にご相談いただけます。
＼ 1分で完了・匿名性も安心 ／
Bolt.new活用事例5選
「Bolt.newで何が作れるの？」という方に、代表的な活用事例を5つ紹介します。すべて無料プランでも着手可能です。
1.ポートフォリオサイト
フリーランスや就活生の自己紹介・実績紹介サイト。テキストと構成を伝えるだけで、プロ品質のポートフォリオが30分で完成します。
2.LP（ランディングページ）
小規模ビジネスの集客ページや、イベント告知ページ。ファーストビュー・特徴・料金・CTAの基本構成を指定するだけで本格的なLPに。
3.ブログ・メディアサイト
記事一覧・カテゴリ分け・サイドバー付きのブログサイト。Markdownで記事を管理する仕組みまで一括で生成可能です。
4.ECサイトモック（プロトタイプ）
投資家向けプレゼンやクライアント提案用のECサイトモック。商品一覧・カート・決済画面のUIを素早く形にできます（実際の決済連携は別途開発が必要）。
5.社内ツール・管理画面
タスク管理、顧客リスト、在庫管理などの社内向けツール。ローカルストレージやSupabase連携でデータの保存も可能です。
Bolt.newが向かないケース
Python・PHPなどJavaScript以外の言語を使うプロジェクト、大規模なエンタープライズアプリ、高トラフィックが見込まれる本番サービスには向いていません。そういった用途にはCursorや従来の開発手法が適しています。
料金プランと無料枠の使い方（2026年2月時点）
Bolt.newは無料プランだけでも十分に使えます。ここでは2026年2月時点の料金体系を整理します。
Free（無料）
0円トークン: 月100万トークン（1日30万上限）
- パブリック/プライベートプロジェクト
- 10MBファイルアップロード
- Webサイトホスティング
- データベース（無制限）
注意: サイトにBoltブランドロゴ表示、トークン繰り越し不可
AIでWeb制作を試してみたい人。月に3〜5プロジェクト程度
Pro（月$25）
約3,750円/月おすすめトークン: 月1,000万トークン〜（日次上限なし）
- Boltブランドロゴなし
- 100MBファイルアップロード
- カスタムドメイン対応
- SEO最適化
- AI画像編集
- トークン繰り越し（最大2ヶ月）
注意: 年払いで月$20に割引
本格的にWeb制作をAIで行いたい人
Teams（月$30/人）
約4,500円/人/月トークン: 1人あたり月1,000万トークン
- Proの全機能
- チーム管理・請求の一元化
- デザインシステム共有
- プライベートNPMレジストリ
注意: トークンはチーム内で共有不可（個人割当）
チームでAI Web制作を導入する企業
無料枠の賢い使い方
- トークンは毎月1日にリセット。繰り越しはできないので月内に使い切るのがお得
- 1日あたりの上限は30万トークン。一気に使わず、数日に分けるのが安定
- 「Lock」「Target」機能を活用すると、不要なトークン消費を抑えられる
- まずは無料枠で試して、「毎月トークンが足りない」と感じたらProプランを検討
※ 価格は2026年2月時点の情報です。最新の料金はBolt.new公式サイトでご確認ください。年払いの場合、Proプランは月$20に割引されます。
初心者がつまずきやすいポイントと解決法
Bolt.newは直感的なツールですが、初めて使うときにつまずきやすいポイントがあります。事前に知っておけば焦らずに対処できます。
生成されたサイトが真っ白（ブランクスクリーン）
原因: ビルドエラーや依存パッケージの不整合が原因のことがほとんどです。
解決法
チャット欄に「画面が真っ白です。ターミナルのエラーを確認して修正してください」と送信しましょう。AIがエラーログを解析して自動修正してくれます。それでも直らない場合は、チャット履歴で正常に動作していた段階まで「Rollback」するのが確実です。
トークンがすぐに無くなる
原因: 大きなプロジェクトほど、1回のやり取りで消費するトークンが増えます。AIはプロジェクト全体のコードを毎回読み込むため、ファイルが増えるほど消費量が上がります。
解決法
「Lock」機能で変更不要なファイルをロック、「Target」機能で修正対象のファイルだけを指定しましょう。また、小さな修正を複数回に分けるよりも、まとめて1つのプロンプトで依頼する方がトークン効率が良い場合もあります。
AIの修正がどんどん壊れていく（修正ループ）
原因: バグを直そうとして別のバグが発生し、そのバグを直そうとしてさらに壊れる——という悪循環です。
解決法
「Rollback」で正常に動いていた状態に戻り、問題の箇所だけを具体的に指示しましょう。「Attempt Fix」ボタンの連打は避け、問題を整理してからプロンプトを書くのがコツです。
日本語のフォントやレイアウトが崩れる
原因: AIが生成するデフォルトのフォント設定が英語向けの場合があります。
解決法
「フォントはNoto Sans JPを使ってください。日本語テキストが正しく表示されるようにしてください」と指示を追加しましょう。最初のプロンプトに含めておくのがベストです。
デプロイ後に動かない部分がある
原因: プレビュー環境とデプロイ環境で、環境変数やAPI接続設定が異なることが原因です。
解決法
デプロイ前に、環境変数が正しく設定されているかチャットで確認しましょう。「デプロイ前のチェックリストを教えて」とAIに聞くのも有効です。
よくある質問（FAQ）
- Q. Bolt.newは本当に無料で使えますか？
- A. はい、無料プランがあります。月100万トークン（1日あたり30万トークン上限）が無料で付与され、シンプルなポートフォリオやLPであれば3〜5サイト分に相当します。クレジットカードの登録も不要です。ただしトークンは翌月に繰り越せないため、月内に使い切るのがお得です。
- Q. プログラミングの知識がなくても使えますか？
- A. はい、プログラミング経験ゼロでも使えます。Bolt.newはChatGPTと同じように日本語で「こんなサイトを作って」と話しかけるだけでコードを自動生成してくれます。生成されたコードを理解する必要もありません。ただし、複雑なアプリを作る場合はHTML/CSSの基礎知識があるとAIへの指示が的確になります。
- Q. Bolt.newで作ったサイトは商用利用できますか？
- A. はい、商用利用可能です。ただし無料プランで公開したサイトにはBoltのブランドロゴが表示されます。ロゴを非表示にしたい場合やカスタムドメインを使いたい場合は、月$25のProプランへのアップグレードが必要です。
- Q. スマホからでも使えますか？
- A. ブラウザベースのツールなのでスマホからアクセスは可能ですが、コードエディタやプレビュー画面の操作はパソコンの大画面が圧倒的に快適です。実際の制作作業はパソコン（できればChrome系ブラウザ）で行うことをおすすめします。
- Q. 日本語でプロンプトを書いても大丈夫ですか？
- A. はい、日本語でのプロンプト入力に対応しています。「カフェのランディングページを作ってください」のように自然な日本語で指示できます。ただし、生成されるコード内のコメントや変数名は英語になることが多いです。サイトに表示するテキスト自体は日本語で出力されます。
- Q. v0やLovableとどう違いますか？
- A. Bolt.newは「ブラウザだけで完結し、最も手軽に始められる」点が最大の特徴です。v0（Vercel）はNext.jsに特化しUIの品質が高いですがコード知識があると有利、Lovable（旧GPT Engineer）はReactコードの美しさに強みがありますがフレームワーク選択肢が少なめです。プログラミング未経験で最初の一歩を踏み出すならBolt.newが最もハードルが低いです。
- Q. トークンとは何ですか？どのくらい消費しますか？
- A. トークンはBolt.newにおけるAI利用の単位です。テキストの長さやコードの複雑さに応じて消費されます。目安として、シンプルなポートフォリオサイトの新規作成で約20〜30万トークン、小さな修正依頼で数千〜数万トークンを消費します。プロジェクトが大きくなるほど1回あたりの消費量が増える傾向があります。
- Q. 作ったサイトのデータはどこに保存されますか？
- A. プロジェクトのコードはBolt.newのクラウド上に保存されます。GitHubの個人アカウントと連携して、コードをGitHubリポジトリにエクスポートすることも可能です（組織アカウントは未対応）。サイトをBolt Hostingでデプロイした場合、ホスティングもBoltのインフラ上で管理されます。
まとめ：Bolt.newで「作る側」になろう
かつてWebサイトを作るには、プログラミングスクールに通うか、プロに高いお金を払って依頼するしかありませんでした。それが今では、ブラウザを開いてAIに話しかけるだけで、プロトタイプからLP、さらには業務ツールまで作れてしまいます。
Bolt.newは、そんな「AIでモノづくりを始める」最も手軽な入口です。無料プランでも月100万トークンが使えるので、まずは1つ、シンプルなポートフォリオやLPを作ってみてください。
「プログラミングができないから無理」という時代は終わりました。大切なのは「何を作りたいか」というアイデアと、AIに伝える言葉。あなたの頭の中にある「こんなサイトがあったらいいな」を、今日、形にしてみませんか？
もし「AIをもっと体系的に学びたい」「仕事で使える実践力を身につけたい」と思ったら、AIリブートアカデミーの100日間プログラムもぜひチェックしてみてください。Bolt.newのようなツールを使いこなすためのAI活用力を、プロと一緒に身につけることができます。
AIで仕事を変えたい方へ｜LINEで無料相談する
経産省リスキリング補助金対象の100日間プログラム「AIリブートアカデミー」について、LINEで気軽に相談できます。補助金の使い方・カリキュラム・学習イメージを無料でお伝えします。
＼ 1分で完了・匿名性も安心 ／