「バイブコーディングでWebサイトを作れるのは知ってるけど、具体的にどんなLPが作れるの？」
この記事では、バイブコーディングを使って90分でLP（ランディングページ）を1枚完成させる具体的な手順を解説します。プログラミング経験がなくても、AIへの指示だけでプロ品質のLPが作れます。
実際にアントワのViveコーディング教室の体験ワークショップでも、この手順で参加者全員が90分以内にLPを完成させています。
なぜLPから始めるべきなのか
バイブコーディングで最初に作るなら、LPが最適です。理由は3つあります。
- 1ページ完結でシンプル — 複数ページのサイトより構造が単純で、初心者でも完成させやすい
- 実用価値が高い — 自分のサービスや商品の集客にすぐ使える
- 副業の第一歩になる — LP制作は1件3〜10万円の副業案件として需要がある
準備するもの（5分で完了）
1. AIコードエディタ
Cursorがおすすめです。無料のHobbyプランで始められます。ブラウザだけで完結させたい場合は、BoltやReplit Agentも選択肢です。
2. LPの設計メモ
AIに指示を出す前に、以下を整理しておくと精度が格段に上がります。
- 誰に向けたLPか（ターゲット）
- 何を伝えたいか（商品・サービスの特徴）
- 何をしてほしいか（CTA：問い合わせ、購入、申し込み等）
- デザインのイメージ（色、雰囲気、参考サイト）
完璧でなくて大丈夫です。メモ書き程度で十分。AIとのやり取りの中で具体化していけます。
90分でLPを作る手順（6ステップ）
Step 1：AIにLP全体を一気に生成させる（15分）
Cursorのエージェント機能を開き、以下のような指示を出します。
パーソナルジムのLPを作ってください。
ターゲット：30代女性、運動初心者構成：
・ヒーローセクション（キャッチコピー + 無料体験CTAボタン）
・3つの特徴（完全個室、女性トレーナー、手ぶらOK）
・料金プラン（月4回 28,000円 / 月8回 48,000円）
・お客様の声（3件、写真エリア付き）
・よくある質問（5つ）
・アクセス（地図エリア + 住所）
・CTAセクション（無料体験申し込み）デザイン：白ベースにコーラルピンク（#FF6B6B）をアクセントカラーに。余白を広くとったミニマルなデザイン。フォントはNoto Sans JP。レスポンシブ対応必須。
これだけでAIがHTML + CSSのコードを一気に生成します。ポイントは具体的な数字と色を指定すること。「おしゃれに」ではなく「白ベースにコーラルピンク」のように伝えます。
Step 2：ブラウザでプレビュー確認（5分）
生成されたindex.htmlをブラウザで開きます。この時点で80%くらいの完成度のLPが表示されるはずです。
確認するポイント：
- 全体のレイアウトはイメージ通りか
- スマホ表示（ブラウザの幅を狭める）で崩れていないか
- テキストが読みやすいか
Step 3：セクションごとに修正指示（30分）
ここからがバイブコーディングの本領発揮です。気になる箇所を日本語で修正指示します。
修正指示の例：
- 「ヒーローのキャッチコピーをもっと大きく、太字にして」
- 「料金プランのおすすめプランに”人気No.1″のバッジをつけて」
- 「お客様の声にBefore/Afterの写真エリアを追加して」
- 「CTAボタンをもっと目立つ色にして、ホバー時にアニメーションをつけて」
- 「FAQをアコーディオン形式（クリックで開閉）にして」
1回の指示で1箇所ずつ修正するのがコツです。一度に複数の修正を指示すると、意図しない変更が入ることがあります。
Step 4：画像エリアにダミー画像を設定（10分）
AIが生成したLPには、画像の「枠」はありますが実際の写真は入っていません。仮の画像を設定します。
- Unsplash（unsplash.com）— 商用無料の高品質写真
- ぱくたそ（pakutaso.com）— 日本人モデルの写真が豊富
AIに「ヒーローの背景画像にUnsplashからフィットネスの写真を設定して」と指示すれば、URLを直接埋め込んでくれます。
Step 5：スマホ表示を最終チェック（15分）
LPの閲覧者の70%以上がスマホからアクセスします。PC表示だけで満足せず、必ずスマホ表示を確認しましょう。
- ブラウザのデベロッパーツール（F12）でスマホ幅に変更
- 文字が小さすぎないか
- ボタンが指でタップしやすいサイズか
- 横スクロールが発生していないか
問題があれば「スマホ表示でボタンが小さいので、高さを48px以上にして」のように指示します。
Step 6：公開準備（15分）
完成したLPを公開する方法はいくつかあります。
- Vercel / Netlify — 無料でHTMLサイトを公開できる。GitHubと連携すれば自動デプロイ
- レンタルサーバー — XServerやConoHaにFTPでアップロード
- WordPress — 固定ページとしてHTMLを貼り付ける
個人の練習用ならVercelが最も手軽です。クライアントに納品する場合は、先方の環境に合わせます。
LP制作でよくある失敗と対策
失敗1：指示が曖昧で何度もやり直し
「もっとかっこよくして」のような指示では、AIの解釈が毎回変わります。「ヒーローの背景を暗めのグラデーション（#1a1a2e → #16213e）にして、テキストを白にして」のように数値で指定するのが近道です。
失敗2：情報を詰め込みすぎ
LPは「1ページで1つのアクション」が原則です。サービス紹介もブログも会社概要もとなると、コーポレートサイトになってしまいます。伝えたいことを3つに絞るのがコツです。
失敗3：CTAが弱い
「お問い合わせ」だけのボタンでは行動を促せません。「無料体験を予約する（残り3枠）」のように具体的なアクション + 緊急性を入れると、クリック率が上がります。
よくある質問
Q. 本当に90分で作れる？
はい。ただし「設計メモを事前に準備している」のが前提です。何を作るか決まっていない状態から始めると、設計で時間がかかります。設計メモがあれば、AIへの指示→修正のサイクルは非常に高速です。
Q. デザインの品質はプロに頼んだ場合と比べてどう？
テンプレート的なLPであれば遜色ありません。ただし、ブランドの世界観を表現するような高度なデザインは、プロのデザイナーとの協業が必要です。AI駆動開発のメリット・デメリットも参考にしてください。
Q. 作ったLPで副業できる？
できます。LP制作は1件3〜10万円が相場で、副業案件として需要があります。詳しくはバイブコーディングで副業を始める完全ロードマップをご覧ください。
体系的に学びたいなら
「一人でやると途中で詰まりそう」「最短で実践レベルに到達したい」という方には、Viveコーディング教室の体験ワークショップがおすすめです。
- 90分でマイLPが完成する成果コミット型
- AIへの指示の出し方から公開まで、講師がリアルタイムでサポート
- 作ったLPはそのまま自分のサービス集客に使える
関連記事
- バイブコーディングのやり方｜始め方から実践手順まで完全ガイド
- CursorでWebサイトを制作する方法｜AI駆動開発の実践ガイド
- バイブコーディングで副業を始める完全ロードマップ
- ホームページ制作の費用相場｜30秒でわかる見積もりシミュレーター付き
まとめ
バイブコーディングを使えば、90分でプロ品質のLPを作ることができます。
- 事前に「誰に・何を・どんなデザインで」を整理しておくのが成功の鍵
- AIに具体的な数値と色で指示するほど、イメージ通りの結果になる
- 修正は1回1箇所ずつ。セクション単位で仕上げていく
- スマホ表示は必ず確認。閲覧者の70%以上がスマホ
まずは架空のサービスで1枚作ってみてください。「こんなに簡単にできるのか」と実感できるはずです。
