Bolt.new（ボルト）は、StackBlitz が開発したブラウザ完結型の AI アプリビルダーです。プログラミング知識がなくても、日本語で指示を出すだけでランディングページ（LP）を自動生成できます。この記事では、初心者でも 3 ステップで LP を作る方法を解説します。
この記事でわかること
- Bolt.new（ボルト）を使うメリットと向いている人
- アカウント作成から LP 完成までの具体的な手順
- よくあるエラーの原因と解決策
- 無料プランと有料プランの違い
- 応用テクニックで LP をさらにカスタマイズする方法
なぜランディングページ作成を Bolt.new（ボルト）で自動化するのか
従来の LP 制作は、デザインツールで見た目を作り、HTML や CSS でコーディングし、サーバーにアップロードする必要がありました。外注すると 10 万円以上かかることも珍しくありません。Bolt.new なら、「青を基調とした商品紹介ページを作って」と入力するだけで、AI が自動でデザインとコードを生成します。ブラウザ内で実行される WebContainers 技術により、ローカル環境のセットアップも不要です。2026 年 5 月には Microsoft Azure との連携も発表され、企業利用にも対応しています。無料プランでも月 100 万トークン（約 50 ページ分）使えるため、個人やスタートアップに最適です。
ステップ1: 準備（アカウント作成と初期設定）
まず bolt.new にアクセスし、「Sign in」をクリックします。Google アカウントまたは GitHub アカウントでログインできます。初回ログイン時に表示されるチュートリアルは、スキップせずに最後まで見ることをおすすめします。画面右上の歯車アイコンから設定画面を開き、言語を「日本語」に変更しておくと、後の作業がスムーズです。無料プランの場合、画面上部に残りトークン数が表示されるので、確認しておきましょう。1 日の上限は 30 万トークンです。この段階で、どんな LP を作りたいか簡単にメモしておくと、次のステップで迷いません。
ステップ2: 設定（具体的な操作手順）
画面中央のチャット欄に、作りたい LP の内容を日本語で入力します。例えば「オンライン英会話スクールの LP を作成。青とオレンジのグラデーション、ヒーローセクション・料金表・お問い合わせフォーム付き」のように具体的に指示します。送信すると、AI が React や Vue.js などのフレームワークを自動選択し、コードを生成します。右側のプレビュー画面でリアルタイムに確認できます。気に入らない部分があれば「ボタンの色を緑に変更」「フォントサイズを大きく」と追加で指示を出せます。2026 年のアップデートで Figma デザインの読み込みにも対応したため、既存デザインがある場合はファイルをドロップするだけで反映されます。
ステップ3: 実行と検証（結果を確認する）
プレビュー画面で問題がなければ、画面右上の「Deploy」ボタンをクリックします。Netlify との連携により、数秒で公開 URL が発行されます。2026 年からは、公開後に URL を変更できる機能も追加されました。発行された URL をブラウザで開き、スマートフォン表示も確認しましょう。Chrome の開発者ツール（F12 キー）でレスポンシブ表示をチェックできます。お問い合わせフォームが正しく動作するか、実際に送信テストも行います。問題があれば、チャット欄に「フォーム送信時にエラーが出る」と伝えると、AI が自律デバッグ機能（エラーループを 98% 削減）で修正してくれます。
つまずきポイントと対策
トークン切れエラー: 無料プランは 1 日 30 万トークンが上限です。複雑な指示や大量の修正を繰り返すと上限に達します。翌日まで待つか、Pro プラン（月 25 ドル）に切り替えましょう。プレビューが真っ白: ブラウザの拡張機能（広告ブロッカーなど）が原因の場合があります。シークレットモードで試してください。日本語フォントが反映されない: 「Google Fonts から Noto Sans JP を読み込んで」と追加指示を出します。デプロイ時にエラー: プロジェクト名に日本語や記号が含まれていると失敗します。半角英数字のみに修正してください。2026 年 1 月の更新でビルド速度が 40% 向上しましたが、初回デプロイは 1〜2 分かかることがあります。
応用テクニック
Team Templates 活用: 2026 年の新機能で、作成したプロジェクトをテンプレート化できます。複数の LP を同じデザインで作る場合に便利です。Opus 4.6 モデル切替: 設定画面から AI モデルを選べます。軽量な処理は Haiku、複雑なデザインは Opus 4.6 を選ぶと効率的です。AI 画像編集: チャット内で「ヒーロー画像の背景をぼかして」と指示すれば、外部ツール不要で画像加工できます。独自ドメイン設定: Netlify の管理画面から、取得済みドメインを接続できます。SEO 対策にも有効です。アナリティクス連携: Google Analytics のトラッキングコードを「GA4 のタグを埋め込んで」と指示すれば自動追加されます。
まとめ
- Bolt.new（ボルト）は日本語指示だけで LP を自動生成できる AI ツール
- 無料プランでも月 100 万トークン使え、個人利用なら十分
- WebContainers 技術でブラウザ完結、環境構築は不要
- 2026 年の主な更新: Team Templates・Opus 4.6 モデル・Figma 読み込み・自律デバッグ
- トークン上限と日本語フォント問題に注意すれば、初心者でもすぐ使える
- 応用テクニックで独自ドメインや GA4 連携も可能
Bolt.new を使えば、LP 制作のコストと時間を大幅に削減できます。まずは無料プランで試し、気に入ったら Pro プランで本格運用するのがおすすめです。
こんな時代だから遊んで学びたい
AIを学ぶオンラインサロン「AIフレンズ」では、生成AIを楽しく、どこよりも優しく学べる環境をご用意しております。
毎週開催されるオンラインセッションでは、リアルタイムで学び合える機会を提供しています。 さらに、月に一度のオフラインイベントでは、メンバー同士が直接交流し、アイデアや知識を深めることができます。
「AIフレンズ」の仲間とともに、新しい価値を創造し、可能性を広げてみませんか？
一緒に学び、成長しながら、生成AIを使いこなす力を身につけましょう！
