Step 5：LP を制作しよう

いよいよ本番！セクションごとに AI に指示を出して LP を組み立てていきます。 1つ作ったらプレビューで確認 → 次のセクションへ の流れで進めましょう。

制作の進め方

  1. セクション単位 で指示を出す（一度に全部作らない）
  2. プレビューで 見た目を確認 する
  3. 気になるところがあれば 修正指示 を出す
  4. OK なら 次のセクション へ進む

セクション① ファーストビュー（ヒーロー）

ページを開いて最初に目に入る部分です。第一印象を決める最重要セクション。

Antigravity への指示例

宿泊施設のLPのファーストビューを作ってください。

- 全画面の背景画像（温泉旅館の外観イメージ）
- 施設名「湯宿 やまざくら」を大きく表示
- キャッチコピー「四季折々の自然に抱かれる、至福のひととき」
- 「ご予約はこちら」ボタン
- 半透明のオーバーレイで文字を読みやすく

確認ポイント

  • 画面いっぱいに表示されているか
  • 文字が読みやすいか
  • ボタンが目立っているか

セクション② 施設の特徴・魅力

「なぜこのお宿を選ぶべきか」を伝えるセクション。

Antigravity への指示例

施設の特徴を3つ紹介するセクションを追加してください。

1. 源泉かけ流しの温泉 — 自家源泉から湧き出る天然温泉
2. 旬の食材を使った会席料理 — 地元の食材にこだわった季節の味
3. 全室オーシャンビュー — 客室から望む雄大な海の絶景

アイコン付きのカード形式で、背景は白、見出し付きで。

確認ポイント

  • 3つの特徴がわかりやすく並んでいるか
  • アイコンが内容と合っているか

セクション③ お部屋紹介

宿泊する部屋のイメージを伝えるセクション。

Antigravity への指示例

客室を紹介するセクションを追加してください。3つの客室タイプをカード形式で。

1. 和室スタンダード — 8畳の落ち着いた和室。2名様まで。
2. 和洋室デラックス — 和室+ベッドルーム。ご家族におすすめ。4名様まで。
3. 特別室 露天風呂付き — 専用露天風呂付きの贅沢な空間。2名様まで。

各カードにはダミー画像、部屋名、説明文、定員を表示。

確認ポイント

  • カードが横に並んでいるか（PC表示時）
  • スマホで見たとき縦に並ぶか

セクション④ 料金・プラン

宿泊プランと価格を見せるセクション。

Antigravity への指示例

宿泊プランを紹介するセクションを追加してください。

| プラン名 | 内容 | 料金（税込） |
|---------|------|-------------|
| スタンダードプラン | 1泊2食付き | ¥15,000〜 / 人 |
| デラックスプラン | 1泊2食+貸切風呂 | ¥22,000〜 / 人 |
| プレミアムプラン | 1泊2食+露天風呂付客室 | ¥35,000〜 / 人 |

テーブルまたはカード形式で見やすく。一番人気のプランにはバッジを付けて。

確認ポイント

  • 料金が見やすいか
  • おすすめプランが目立っているか

セクション⑤ お客様の声

信頼感を高めるレビューセクション。

Antigravity への指示例

お客様の声セクションを追加してください。3件の口コミをカード形式で。

1. 田中様（30代・ご夫婦）★★★★★
   「温泉が最高でした。お料理も地元の食材が使われていて大満足です。」

2. 鈴木様（40代・ご家族）★★★★★
   「子連れでも安心して過ごせました。スタッフの方がとても親切でした。」

3. 佐藤様（50代・ご夫婦）★★★★☆
   「海が見える部屋で最高の朝を迎えました。また来年も来たいです。」

星評価も表示してください。

確認ポイント

  • 口コミが読みやすいか
  • 星評価が表示されているか

セクション⑥ アクセス

施設への行き方を伝えるセクション。

Antigravity への指示例

アクセス情報のセクションを追加してください。

住所：〒XXX-XXXX 静岡県熱海市〇〇町1-2-3
電話：0557-XX-XXXX

交通手段：
- 電車：JR熱海駅からバスで15分
- 車：東名高速 厚木ICから約60分（駐車場無料）
- 送迎：熱海駅から無料送迎あり（要予約）

Google Maps の埋め込みも配置してください（ダミーでOK）。
左側にテキスト、右側に地図のレイアウトで。

確認ポイント

  • 住所・電話番号が見やすいか
  • 地図が表示されているか

セクション⑦ 予約 CTA

ページの最終目的「予約」に導くセクション。

Antigravity への指示例

予約を促すCTAセクションを追加してください。

- 背景色を少し濃い色にして目立たせる
- 見出し「ご予約・お問い合わせ」
- 「空室確認・ご予約はこちら」の大きなボタン
- 電話番号「0557-XX-XXXX」も記載（「お電話でもご予約いただけます」）
- 受付時間「9:00〜21:00」

確認ポイント

  • ボタンが大きく目立っているか
  • 電話番号もわかりやすいか

セクション⑧ フッター

ページ最下部の情報エリア。

Antigravity への指示例

フッターを追加してください。

- 施設名「湯宿 やまざくら」
- 住所、電話番号
- 「© 2024 湯宿 やまざくら All rights reserved.」
- 背景は濃い色、文字は白

確認ポイント

  • 情報が漏れなく記載されているか
  • 全体のデザインと統一感があるか

全体の確認

すべてのセクションが揃ったら、ページ全体を通して確認しましょう：

  • 上から下まで自然な流れになっているか
  • セクション間の余白は適切か
  • 色やフォントに統一感があるか
  • ボタンやリンクがわかりやすいか

気になるところがあれば、どんどん AI に修正指示を出しましょう！

全セクション揃ったら、次はデザインの仕上げに進みます。