Bolt.new（ボルト）でランディングページ作成を自動化する3ステップ【初心者向け】
A
AI Friends
1日前・6分で読める
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
Bolt.new（ボルト）は、StackBlitz が開発したブラウザ完結型の AI アプリビルダーです。プログラミング知識がなくても、日本語で指示を出すだけでランディングページ（LP）を自動生成できます。この記事では、初心者でも 3 ステップで LP を作る方法を解説します。
従来の LP 制作は、デザインツールで見た目を作り、HTML や CSS でコーディングし、サーバーにアップロードする必要がありました。外注すると 10 万円以上かかることも珍しくありません。Bolt.new なら、「青を基調とした商品紹介ページを作って」と入力するだけで、AI が自動でデザインとコードを生成します。ブラウザ内で実行される WebContainers 技術により、ローカル環境のセットアップも不要です。2026 年 5 月には Microsoft Azure との連携も発表され、企業利用にも対応しています。無料プランでも月 100 万トークン（約 50 ページ分）使えるため、個人やスタートアップに最適です。
まず bolt.new にアクセスし、「Sign in」をクリックします。Google アカウントまたは GitHub アカウントでログインできます。初回ログイン時に表示されるチュートリアルは、スキップせずに最後まで見ることをおすすめします。画面右上の歯車アイコンから設定画面を開き、言語を「日本語」に変更しておくと、後の作業がスムーズです。無料プランの場合、画面上部に残りトークン数が表示されるので、確認しておきましょう。1 日の上限は 30 万トークンです。この段階で、どんな LP を作りたいか簡単にメモしておくと、次のステップで迷いません。
画面中央のチャット欄に、作りたい LP の内容を日本語で入力します。例えば「オンライン英会話スクールの LP を作成。青とオレンジのグラデーション、ヒーローセクション・料金表・お問い合わせフォーム付き」のように具体的に指示します。送信すると、AI が React や Vue.js などのフレームワークを自動選択し、コードを生成します。右側のプレビュー画面でリアルタイムに確認できます。気に入らない部分があれば「ボタンの色を緑に変更」「フォントサイズを大きく」と追加で指示を出せます。2026 年のアップデートで Figma デザインの読み込みにも対応したため、既存デザインがある場合はファイルをドロップするだけで反映されます。
プレビュー画面で問題がなければ、画面右上の「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 制作のコストと時間を大幅に削減できます。まずは無料プランで試し、気に入ったら Pro プランで本格運用するのがおすすめです。
この記事は AI Friends からのクロスポストです。
