Step 3：Web ページ・LP の基礎知識

コードを書く講座ではなく「AI に伝えて作る」講座なので、ここでは最低限の概念だけ押さえましょう。

Web ページは何でできている？

Web ページは主に 3つの言語 で構成されています：

言語役割たとえると
HTMLページの構造・内容家の骨組み・間取り
CSS（Tailwind CSS）見た目・デザイン壁紙・家具・インテリア
JavaScript動き・インタラクション電気・水道・エアコン

今日は AI がこれらを全部書いてくれるので、「HTML が構造で Tailwind CSS が見た目」 とだけ覚えておけば OK です。

LP（ランディングページ）とは？

LP = 1ページで完結する Web ページ のことです。

通常の Web サイトとの違い

通常の Web サイトLP
ページ数複数ページ1ページ
目的情報を幅広く伝える1つのアクションに導く
ナビゲーションあり（メニューバー）最小限
構造複雑縦にスクロール

宿泊施設 LP の目的

「このお宿に泊まりたい！」と思ってもらい、予約ボタンを押してもらう

宿泊施設 LP に必要なセクション

上から下にスクロールする流れで、以下のセクションを作ります：

┌─────────────────────────────┐
│   ① ファーストビュー          │  ← 最初に目に入る。写真+キャッチコピー
│      （ヒーロー画像）          │
├─────────────────────────────┤
│   ② 施設の特徴・魅力          │  ← 「なぜこのお宿？」を3つくらいで
├─────────────────────────────┤
│   ③ お部屋紹介               │  ← 部屋の種類を写真付きで
├─────────────────────────────┤
│   ④ 料金・プラン             │  ← 宿泊プランと価格
├─────────────────────────────┤
│   ⑤ お客様の声               │  ← 口コミ・レビュー
├─────────────────────────────┤
│   ⑥ アクセス                 │  ← 地図・交通手段
├─────────────────────────────┤
│   ⑦ 予約 CTA                │  ← 「ご予約はこちら」ボタン
├─────────────────────────────┤
│   ⑧ フッター                 │  ← 施設情報・連絡先
└─────────────────────────────┘

CTA とは？ Call To Action の略。「予約する」「お問い合わせ」など、ユーザーに行動してもらうためのボタンやリンクのことです。

Astro とは？

今日使う Astro は Web サイトを作るための フレームワーク です。

Astro のいいところ

  • 高速 — 不要な JavaScript を送らないので表示が速い
  • Markdown 対応 — .md ファイルでコンテンツを書ける
  • 初心者にやさしい — HTML と Tailwind CSS の知識だけで始���られる

Astro プロジェクトのファイル構造

my-accomadation-lp/
├── src/
│   ├── pages/        ← ページファイル（URLになる）
│   ├── layouts/      ← ページの共通レイアウト
│   └── components/   ← 再利用できるパーツ
├── public/           ← 画像などの静的ファイル
├── package.json      ← プロジェクトの設定
└── astro.config.mjs  ← Astro の設定

覚えなくても大丈夫です。AI に「ここに画像を置いて」と言えば正しい場所に置いてくれます。

このステップのまとめ

  • Web ページは HTML（構造）+ Tailwind CSS（見た目） で��きている
  • LP は 1ページ完結 で 1つのアクション に導くページ
  • 宿泊施設 LP は 8つのセクション で構成する
  • Astro は高速な Web サイトが作れるフレームワーク

概念はここまで！次はいよいよ AI を使って LP を作っていきます。