「LP制作には最低でも1週間かかる」——これが、つい最近までの常識だった。デザイナーにワイヤーフレームを依頼して、コーダーにHTML化してもらい、修正を何往復もする。1枚のランディングページにこれだけの時間と手間。
Bolt.newを使い始めて、この前提が崩れた。プロンプトを書いて3時間。クライアントに出せるクオリティのLPが完成する。去年の秋、3案件のLPをBolt.newで同時進行したとき、合計3日で全部納品できた。従来なら2〜3週間コース。
ただし「何でも作れる魔法のツール」ではない。LP制作に向いている理由と、実際の制作フロー、つまずきやすいポイントまで正直に書く。
- Bolt.newがLP制作に向いている3つの理由
- LP制作の具体的な手順（プロンプト例つき）
- クオリティを上げるプロンプトの書き方
- Bolt.newで作ったLPの実例と制作時間
- LP制作でよくある失敗と回避法
- Bolt.new vs 他ツール、LP制作ならどれが最適か
Bolt.newがLP制作に強い3つの理由
ブラウザ完結のAI開発ツールはいくつかある。その中でLP制作に限れば、Bolt.newの優位性は明確だ。
Bolt.newの中核技術「WebContainers」はブラウザ内でNode.jsを動かす仕組み。LPに必要なのはフロントエンド（HTML/CSS/JS）とせいぜいフォーム送信程度の軽いバックエンド。Bolt.newの得意領域とLPの要件が、ぴったり一致する。
LP制作で最も時間を食うのは修正のやりとり。「ここの色を変えて」「フォントを大きく」——Bolt.newなら修正指示をプロンプトに書くだけで、30秒以内にプレビューに反映される。クライアントとの画面共有中にリアルタイムで調整することもできる。
完成したLPをVercelやNetlifyに直接デプロイ可能。独自ドメインの設定もデプロイ先で行える。「作る→公開」までの工程に、サーバー設定や FTP アップロードといった面倒な手順が一切ない。
Bolt.newでLP制作する手順——プロンプト例つきで全公開
実際にLPを1枚作る流れを、僕が普段やっている手順通りに再現する。
Bolt.newを開く前に、LPの構成を紙やメモで整理する。最低限決めておくべきは「ファーストビューのキャッチコピー」「ベネフィット3〜5つ」「CTA（申し込みボタン）の文言」「フォームの項目」の4つ。ここが曖昧だと、AIへの指示もブレる。
ここが最も重要なステップ。プロンプトの精度がLPの完成度を決める。
「AI学習講座のランディングページを作ってください。Next.js + Tailwind CSSで構築。セクション構成：①ファーストビュー（キャッチコピー＋CTA）②3つのベネフィット（アイコン付き）③講座内容④受講者の声（3名分）⑤料金プラン⑥FAQ⑦最終CTA。カラーはダーク系（#0a0a1a）にアクセントカラー赤（#E53935）。フォントはNoto Sans JP。レスポンシブ対応必須。ファーストビューのCTAボタンは赤色で「無料説明会に参加する」。」——このくらいの粒度で指示を出す。
初回生成で70〜80%の完成度になる。残り20%は細かい修正の積み重ね。「ファーストビューの見出しをもっと大きく、font-size: 48pxに」「セクション間の余白をpadding: 80pxに統一して」など、CSSの値を具体的に指示するのがコツ。「もっと良い感じに」のような曖昧な指示はAIが迷う原因になる。
Bolt.newは画像アップロードに対応している。ダミー画像をクライアントの実際のロゴや写真に差し替える。「アップロードしたlogo.pngをヘッダーの左上に配置して、高さ40pxに」と指示すれば正確に反映される。
ExportボタンでプロジェクトをダウンロードしてVercelにデプロイ。独自ドメインの接続は Vercel のダッシュボードから設定。合計所要時間は3〜4時間が目安。
LPのクオリティを左右するプロンプトの書き方
Bolt.newでLP制作する際、プロンプトの書き方で仕上がりが大きく変わる。僕が受講生に教えているポイントを3つ共有する。
| ポイント | NGな指示 | OKな指示 |
|---|---|---|
| 技術スタック指定 | 「いい感じのLPを作って」 | 「Next.js + Tailwind CSSでLPを作って」 |
| 色・フォント指定 | 「おしゃれな色で」 | 「背景#0a0a1a、アクセント#E53935、Noto Sans JP」 |
| セクション構成 | 「いくつかのセクションで」 | 「①FV ②ベネフィット3つ ③料金 ④FAQ ⑤CTA」 |
| レイアウト指示 | 「見やすく配置して」 | 「3カラムグリッド、gap: 24px、max-width: 1200px」 |
| CTA設計 | 「ボタンを置いて」 | 「赤色ボタン、角丸8px、テキスト『無料で始める』」 |
共通するのは「具体的な数値と技術用語で指示する」こと。AIは抽象的な言葉より、具体的なCSSプロパティ値や色コードの方が正確に解釈できる。
LPの全セクションを1回のプロンプトで完璧に仕上げようとすると、トークンを大量消費する。ファーストビューを先に完成させてから、次のセクションに進む——という段階的なアプローチの方が、トークン効率もクオリティも高い。
Bolt.newで作ったLPの実例と制作時間
僕と受講生が実際にBolt.newで制作したLPの事例を紹介する。
| 案件 | 制作時間 | セクション数 | 特徴 |
|---|---|---|---|
| AI講座のLP | 3時間 | 8セクション | ダーク系デザイン、フォーム付き |
| 飲食店のキャンペーンLP | 2時間 | 5セクション | 写真メイン、シンプル構成 |
| SaaS製品の紹介LP | 4時間 | 10セクション | 料金比較表、FAQ、動画埋め込み |
| イベント告知LP | 1.5時間 | 4セクション | カウントダウンタイマー付き |
平均して2〜4時間。従来のLP制作（デザイン→コーディング→修正）は5日〜2週間かかるので、時間短縮率は80%以上になる計算だ。
「LP制作の外注費は1枚10〜30万円が相場。Bolt.newで自分で作れるようになってから、クライアントへの提案スピードが劇的に変わった」——受講生Cさん（フリーランス・2025年10月受講）
LP制作でよくある失敗と回避法
Bolt.newでのLP制作は簡単だが、つまずくポイントもある。僕が見てきた典型的な失敗を共有する。
よくある失敗
- レスポンシブ対応を後回しにして、スマホ表示が崩れる
- フォーム送信の動作確認をせずに納品してしまう
- 画像の最適化をせず、ページ読み込みが遅い
- OGP（SNS共有時の画像・タイトル）の設定を忘れる
回避法
- 初期プロンプトに「レスポンシブ対応必須」を必ず入れる
- デプロイ前にフォーム送信テストを実施（テスト用メールで確認）
- 画像はWebP形式で圧縮してからアップロード
- headタグ内のOGP設定をプロンプトで指示しておく
特にスマホ表示の崩れは多い。Bolt.newのプレビューはPC画面がデフォルトなので、必ずスマホ幅（375px）での確認を習慣づけること。
LP制作ツール比較——Bolt.new vs Lovable vs Cursor
LP制作に使えるツールは複数ある。それぞれの強みと弱みを、LP制作の観点で比較した。
| 項目 | Bolt.new | Lovable | Cursor |
|---|---|---|---|
| LP制作速度 | 最速（2〜4時間） | 速い（3〜5時間） | 中程度（半日〜1日） |
| デザイン品質 | 高い | 非常に高い | 自分次第 |
| 環境構築 | 不要（ブラウザ完結） | 不要（ブラウザ完結） | 必要（ローカル環境） |
| カスタマイズ性 | 中程度 | 中程度 | 非常に高い |
| 料金 | 無料〜$20/月 | $15〜/月 | 無料〜$20/月 |
| 向いている人 | スピード重視のフリーランス | デザインにこだわりたい人 | コードを細かく調整したい人 |
結論として、LP制作の「スピード×手軽さ」で選ぶならBolt.newが最適解。デザインの美しさで勝負するならLovable。コードレベルで細部を追い込むならCursor。目的に合わせて使い分けるのがベストだ。
まとめ——Bolt.newでLP制作の常識が変わる
- Bolt.newはフロントエンド特化の設計がLP制作と相性抜群
- LP1枚の制作時間は平均2〜4時間。従来比80%以上の時間短縮
- プロンプトは「具体的な数値＋技術用語」で書くのが鉄則
- 段階的に指示を出す方がトークン効率もクオリティも高い
- レスポンシブ対応・フォーム動作・OGP設定の確認を忘れずに
- スピード重視ならBolt.new、デザイン重視ならLovable、細部調整ならCursor
- LP制作の外注費（10〜30万円）を自分で回収できるスキルになる
LP制作はフリーランスの収入源として即効性が高い。Bolt.newを使えば、未経験でも半日でクライアントに見せられるクオリティのLPが作れる。まずは自分のポートフォリオ用LPを1枚作ってみるのが、一番の近道だ。
