バイブコーディングでWebサイトを作る方法｜初心者でも1日で完成

LPを30分で完成させることができるって聞いたら、信じるだろうか。

僕も最初は疑っていた。でも実際にやってみると、本当に可能なんだ。デザイナーに頼めば数万円、制作会社なら数十万円。それが数千円で、それも数十分で完成する。

バイブコーディングでLP制作をやってみたら、やり方次第で副業としても単価が高いビジネスになることに気づいた。この記事では、僕が実際にBolt.newを使ってLP制作した流れを、そのまま再現できるようにステップバイステップで解説する。

LP制作をバイブコーディングで実演する理由

LPは、Webサイトの中で最も成果に結びつきやすいページだ。商品を売る、会員登録を増やす、資料請求を取る。すべてはLPの出来で決まる。

だから、LP制作は受注単価が高い。デザイン込みで10万円以上、動きやコピーをこだわれば50万円を超えることもある。副業としてLP制作をやる人も増えている。

でも、ここに落とし穴がある。AIに丸投げすると売れないLPになる。その理由は、構成を決める段階で手を抜いてしまうからだ。

ステップ1：LP構成を決める｜骨組みが全て

プロンプトを投げる前に、LPの構成を決める。これが最も大事なステップだ。

今回は架空のオンライン講座「AIプロンプト完全マスター講座」というLPを制作する想定で進める。

構成を固める際は、自分自身に問う。「訪問者は何に困っているのか」「うちの講座はそれをどう解決するのか」「証拠は何か」。この3つが明確になると、AIへのプロンプトの質も上がる。

ステップ2：Bolt.newにプロンプトを投げる｜初期生成

構成が決まったら、その情報をプロンプトに詰め込んでBolt.newに投げる。

ここで重要なのは、プロンプトの精度だ。ぼんやりした指示では、ぼんやりしたLPが出てくる。

「AIプロンプト完全マスター講座」というオンライン講座のLPを作成してください。ターゲットは、ChatGPTやClaudeを使い始めたけど、うまく活用できていない30代サラリーマン・フリーランス。課題は「プロンプトの書き方がわからない」「思った通りの回答をもらえない」。解決策として、実践的なテンプレート、10個の事例、30分の動画講座を提供します。ヒーロー画像には、コンピュータの前に座る人のイラストを。色はブルーとホワイトで洗練した印象で。

このプロンプトをBolt.newに投げると、3分から5分でLPの基本形が完成する。

ステップ3：ヒーロー領域を調整する｜目を引く見出しに

Bolt.newが生成したLPを見て、まず調整するのはヒーロー領域だ。ここは訪問者が最初に目にする場所。吸引力がないと、すぐに離脱される。

見出しが「AIプロンプト講座」では弱い。訪問者のメリットが見えない。

ヒーロー領域の見出しを「ChatGPTを使いこなせていないあなたへ。プロンプトの一文で、回答の質が10倍変わる」に変更してください。サブ見出しは「10年遅れた人材から、最先端を使いこなす人材へ。実践的なプロンプトテンプレート30個を手に入れる」。ボタンテキストは「今すぐ講座を始める」に。

見出しの変更だけで、LPの吸引力は劇的に変わる。

ステップ4：セクションを追加・修正する｜ストーリーを構築

ヒーロー領域が固まったら、次は各セクションの中身を修正する。

AIが生成した段階では、各セクションのコピーがテンプレート的だ。ここを、訪問者の心を動かす言葉に変える。

「問題提起」セクションに、以下を追加してください。「99%のサラリーマンがChatGPTを無駄に使っている。その理由は、プロンプトの書き方を知らないから。同じツールを使っても、年収が2倍変わる人と変わらない人がいます。その差は、プロンプトにあります。」実績セクションには、受講者の声として「3ヶ月で副業月3万円を達成」「質問の精度が上がり、報告書作成時間が半減」などの具体的な成果を3つ追加。

セクションごとに微調整を重ねることで、LPが「説得力のあるストーリー」に進化していく。

ステップ5：レスポンシブ対応を確認する｜スマホ表示を見直す

LPの訪問者の60%以上はスマートフォンから来る。レスポンシブ対応がされていなければ、そこで離脱されてしまう。

Bolt.newで生成したLPはレスポンシブ対応していることが多いが、細かい調整が必要だ。

スマートフォン表示で、ボタンがフル幅（左右のマージン各10px）で表示されるよう修正してください。見出しサイズがスマホで24px以上になるように、レスポンシブをこだわってください。テーブルがスマホで横スクロールなく表示されるか確認してください。

ステップ6：コピーライティングを修正する｜売上を左右する文章調整

ここが、LP制作で最も時間をかけるべき部分だ。コピーの一文で成約率は大きく変わる。

AIが生成したコピーは、記事的で説得力に欠けることが多い。訴求力のあるコピーに書き直す必要がある。

「多くの人がChatGPTを使い始めましたが、その効果を最大化できている人は全体の1%です」という文章を「年間1000時間の時間を失っているのに気づいていないサラリーマンが99%です。その理由は、プロンプトの書き方を知らないから」に変更。CTAのボタン前のテキストを「特典：30日間の返金保証付き。リスクゼロでお試しください」に変更。

コピーの修正は、AIが提案してくれた複数案から選んでもいいし、自分で直接修正してもいい。何度も読み返して、訪問者の心に刺さる言葉に仕上げる。

ステップ7：公開する｜サーバーへのアップロード

LPが完成したら、サーバーにアップロードして公開する。

Bolt.newのデプロイ機能を使えば、ワンクリックで公開できる。独自ドメインを使う場合は、DNSの設定が必要だが、Bolt.newが自動でサポートしてくれる。

公開後は、GoogleアナリティクスやGTMタグを設置して、訪問者の行動を計測する。離脱率が高いセクションや、ボタンのクリック率などを見て、さらに改善していく。

最初のLP制作は2日、改善は1週間。そのサイクルを回していくと、成約率は月1%から3%、5%と上がっていく。

バイブコーディングでLP制作を始めると、こういう相場感が変わる。それと同時に、「LP制作って本当に単価が高いビジネスだ」という気づきも生まれる。

副業で月10万〜30万円を狙うなら、LP制作のスキルは強い。月3本のLP制作で、月15万円の売上。それを自動化できれば、数ヶ月後には不労所得に近い状態まで持っていける。