3-1 ホームページのページ構成設計

このレッスンで身につくこと

第 2 章まででは 1 枚の LP を作りました。情報量が少ないうちはこれで十分ですが、メニューが増えたり、お店のストーリーを語りたくなったり、問い合わせが増えてきたりすると、1 枚に詰め込むのは限界 がきます。スクロールが長くなりすぎて、読み手が どこを見ればいいか分からない 状態になるのです。

このレッスンでは、その「1 枚で限界が来た LP」を 複数ページのサイト に拡張する前段として、設計図 をきっちり引きます。コードを書く前に、サイト全体の地図を描いておくことで、3-2 のページ追加・3-3 のデザイン統一が 迷子にならずに進む ようになります。

なぜ複数ページが必要か — LP 1 枚で済まないケース

「全部 1 ページに詰め込めば、スクロールするだけで済んで楽じゃない？」と思うかもしれません。実際、シンプルな店舗紹介なら LP 1 枚で十分です。ただし、次の症状が出てきたら 分割を検討するサイン です。

• スクロール量が画面 8 つ分 を超えた
• メニュー / 特徴 / 価格表 / 採用情報 / プレスリリースなど、読み手が違うコンテンツ が同居している
• 「お店のこだわり」だけを 5 分かけて読みたい人と、「営業時間だけ知りたい」人が 同じページを開かされている
• スマホで開いたら 目的の情報まで 30 秒スクロール しないと辿り着けない
• 検索エンジンから「メニューの値段」で来た人にも「採用」で来た人にも、同じトップだけ しか見せられない

複数ページにすると、次の 3 つが手に入ります。

1. 情報の整理 — 読み手ごとに入口を用意できる
2. SEO の強化 — ページごとに独立したタイトル・description が持てて、検索流入の窓口が増える
3. 更新の安全性 — メニューだけ更新したいときに、トップを触らずに済む

サイトマップを描く — まずは紙でも OK

ここで一気にコードを書きたくなるのを我慢して、サイトマップ を描きます。サイトマップは、サイト全体の 階層構造を木の枝で表した図 です。紙でも、Claude Code に ASCII で描かせても、Figma でもなんでも構いません。まず描く ことが大事です。

カフェサイト「CAFE BLUE」を例に、最小構成を描いてみましょう。

CAFE BLUE
├── index.html        トップ（看板・3 秒で何の店か伝える）
├── menu.html         メニュー詳細（全ドリンク・全フード）
├── about.html        お店について（理念・店主・歴史）
└── contact.html      お問い合わせ（フォーム + 地図）

4 ページ くらいが、個人店・小規模ビジネスの 最初の正解 です。多すぎると更新が止まり、少なすぎると詰め込みすぎる。4 ページからスタートして、必要に応じて足す のが安全です。

階層は深くしすぎない

サイトマップを描くとき、階層を 2 階層以内 に抑えるのがコツです。

CAFE BLUE
├── menu/
│   ├── coffee.html
│   ├── tea.html
│   └── food.html
└── about/
    ├── story.html
    └── team.html

3 階層 以上になると、読み手は迷子になり、検索エンジンもクロールしづらくなります。「トップから 3 クリック以内」を目安に、全ページに辿り着ける構造にします。

ページ役割設計 — 各ページのゴールを 1 行で

サイトマップが描けたら、各ページのゴール を 1 行で書き出します。ここを曖昧にしたまま作り始めると、「全ページに同じことが書かれている」「どのページが何の目的か分からない」状態になります。

CAFE BLUE の例で言語化するとこうなります。

Claude Code に役割設計を相談する

自分で書きにくいときは、Claude Code に投げると整理してくれます。

> CAFE BLUE という個人カフェのサイトを 4 ページで作る予定。
> 想定読者は次の通りです。
> - 初訪問・通行人
> - 常連・来店検討中
> - こだわりに共感したい層
> - 問い合わせたい層
>
> 各ページ（index/menu/about/contact）のゴールと、
> 載せるべき要素を 1 行ずつ提案して。

返ってきた提案を 叩き台 にして、自分のお店の特徴に合わせて削る・足すと早いです。

URL 構造のベストプラクティス

各ページに どんな URL を割り当てるか は、後から変えづらい設計判断です。最初に決めてしまいましょう。

拡張子を付けるか — /about vs /about.html

最終的にどちらでも動きますが、現代の Web では拡張子なし が主流です。

• ==/about== — モダン。CMS や React 系のフレームワークと相性が良い。後で URL を変えにくいので慎重に
• ==/about.html== — 静的 HTML 直置きで最も簡単。学習用や個人サイトには十分

==このコースの範囲では /about.html 形式 で進めます。最初は ファイル名 = URL== の素直な対応関係で覚えるのが、トラブル回避になります。

日本語 URL は使わない

良い例:   /menu.html
良い例:   /about.html
避ける:   /メニュー.html       # URL エンコードで「%E3%83%A1...」と化ける
避ける:   /お店について.html    # SNS でシェアすると醜い

日本語ファイル名は URL エンコードで読めない文字列 になり、SNS シェア時に「%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.html」のような長い羅列になります。英語の短い単語 を使います。

URL は短く、ハイフン区切り

良い例:   /menu.html
良い例:   /seasonal-drinks.html
避ける:   /Menu.html              # 大文字は環境依存（リンク切れの原因）
避ける:   /menu_list.html         # アンダースコアは検索エンジンが単語と認識しない
避ける:   /seasonalDrinks.html    # キャメルケースも避ける

小文字 + ハイフン が世界標準です。Google も「ハイフン推奨」と公式に言っています。

ナビゲーション設計 — 全ページ共通のメニュー

複数ページサイトの 顔 がナビゲーションです。全ページの上部に同じメニューを置くことで、読み手は 今どこにいるか / どこに行けるか を常に把握できます。

グローバルナビ（ヘッダー）

全ページ共通 で、画面上部に固定で置きます。最小構成は次の通りです。

• ロゴ（左端、クリックでトップへ戻る）
• メニュー項目（Menu / About / Contact）
• スマホ用ハンバーガーボタン（画面幅 768px 以下で表示）

項目数は 3〜5 個 が黄金比です。7 個を超えると 選択疲れ で読み手の認知負荷が上がります。

フッターナビ

補助情報 を置く場所です。グローバルナビの繰り返し + 細かい情報を入れます。

• 営業時間
• 住所・電話
• SNS リンク
• プライバシーポリシー / 特商法表記など、法務系のリンク
• コピーライト表記

パンくずリスト（2 階層以上の場合）

階層が深いサイトでは パンくず を入れます。CAFE BLUE のような 4 ページ構成では 不要 です。

ホーム > メニュー > コーヒー

3 階層以上 になったら検討、と覚えておけば十分です。

ユーザーフロー — トップから問い合わせまでの最短動線

サイトマップが「全体地図」なら、ユーザーフローは 読み手の動線 です。「トップに来た人が、何を見て、最後にどうなる のが理想か」を矢印で描きます。

[初訪問の人]
   ↓
index.html（3 秒で何の店か理解）
   ↓
menu.html（メニューと価格を確認）
   ↓
about.html（こだわりに共感）
   ↓
contact.html（問い合わせ・予約）

このフローを念頭に置くと、各ページの「次に進むボタン」 を設計できます。

• index → 「メニューを見る」ボタンを目立たせる
• menu → 「お店について知る」or「予約する」ボタンを末尾に
• about → 「お問い合わせ」ボタンを末尾に
• contact → フォーム送信完了がゴール

各ページの末尾に「次のページへの誘導」 を 1 つ置くだけで、読み手は 自然に最後まで 流れていきます。逆に、誘導がないページは 読み手が「次どこ行けばいいか」分からなくなり離脱 します。

SEO 観点での設計 — ページごとに独立したタイトル・description

複数ページにする最大のメリットの 1 つが SEO です。各ページに 独立したタイトル・meta description を付けることで、検索エンジンの入口が ページ数だけ 増えます。

全ページが同じ title だと、Google から「重複コンテンツ」と見なされ、検索順位が伸びません。ページごとに違う title にするだけで、SEO の足腰が一段強くなります。

内部リンクも重要です。例えば about ページの本文中に「メニュー はこちら」と menu.html へのリンクを 1 本入れる。これだけで、Google は「このサイトは about と menu が関連している」と認識し、サイト全体の評価が上がります。

Claude Code に構成を相談する

ここまで自分で考えてきたら、Claude Code に 壁打ち をします。たたき台を一気に作ってもらえます。

> CAFE BLUE という個人カフェの Web サイトを 4 ページで作る予定です。
> 次の項目を提案してください。
>
> 1. サイトマップを mermaid 記法のツリーで
> 2. 各ページのゴールと、想定読者
> 3. 各ページの推奨セクション構成（h1, h2 レベルで）
> 4. ページ間の内部リンク（誰がどこに誘導されるべきか）
> 5. SEO 観点で各ページの title と meta description 案

Claude Code は 設計の壁打ち相手 として非常に優秀です。叩き台が 1 分で出てくるので、それを自分の言葉で削っていくと 30 分で設計が固まる レベルになります。

ASCII でワイヤーフレームも描かせる

ワイヤーフレーム（画面の骨組み図）も、紙で描く前に Claude Code に ASCII で描かせる と早いです。

> index.html のワイヤーフレームを ASCII で描いて。
> ヘッダー、ヒーロー、メニュー紹介、お店紹介、フッターの 5 セクション構成で。

返ってくる ASCII を見ながら、「ヒーローはもっと縦長」「メニュー紹介を 3 カラムに」 と修正指示を重ねていけば、Figma を開かずに骨組みが固まります。

設計のステップ — 着手から構成完成まで

<Steps items={[{"title":"想定読者を 3〜5 人書き出す","body":"「初訪問の通行人」「常連」「採用希望者」など、サイトに来そうな読み手を箇条書きで書く"},{"title":"サイトマップを Tree で描く","body":"紙でも Claude Code への ASCII 依頼でも可。4〜5 ページの最小構成からスタート"},{"title":"各ページのゴールを 1 行で書く","body":"「読み手にこのページで何をしてほしいか」を 1 つに絞り、表にまとめる"},{"title":"URL を決める","body":"拡張子を付けるか付けないか、英語小文字 + ハイフンで統一されているかを確認"},{"title":"ナビゲーション項目を 3〜5 個に絞る","body":"グローバルナビに乗せる項目を決定。多すぎたら「本当に全員に見せる必要があるか」で削る"},{"title":"ユーザーフローを矢印で描く","body":"トップから問い合わせまでの最短動線を確認し、各ページの末尾に「次のページへの誘導」を 1 つ決める"}]} />

この 6 ステップが 30 分 で回せるようになれば、3-2 のページ実装が 迷いなくスタート できます。

チェックリスト — 設計完了の判断基準

<Checklist items={["サイトマップを Tree 構造で描き、ページ数を 4〜6 個に絞った","各ページのゴールを 1 行で言語化し、表にまとめた","URL 構造を決めた（拡張子の有無・英語小文字 + ハイフン）","グローバルナビの項目を 3〜5 個に絞り、全ページで同じ配置にすることを決めた","フッターに入れる情報（営業時間・住所・SNS・法務リンク）を列挙した","トップから問い合わせまでのユーザーフローを矢印で描いた","各ページの title と meta description の案を考えた"]} />

このチェックが全部付いたら、3-2 で 実装 に進む準備完了です。

まとめ

1. LP 1 枚で限界が来るのは スクロール量が増えた・読み手が複数化した とき
2. 複数ページ化の利点は 情報整理 / SEO / 更新の安全性 の 3 つ
3. サイトマップは 4〜6 ページ / 2 階層以内 の最小構成からスタート
4. 各ページに 1 ゴール 1 行 で役割を割り当てる
5. URL は 英語小文字 + ハイフン / 拡張子は最初は付けて OK
6. ナビは 3〜5 項目 の黄金比、ユーザーフローを矢印で確認
7. Claude Code は 設計の壁打ち相手 として優秀。叩き台を 1 分で出してくれる

<Quiz question="サイトマップを描くときの階層の目安は？" options={["トップから 3 クリック以内で全ページに辿り着ける 2 階層以内","深ければ深いほど SEO に有利なので 5 階層以上が望ましい","1 階層に全ページを並列で並べる"]} answer={0} />

<Quiz question="URL の付け方として推奨される形式は？" options={["英語の小文字 + ハイフン区切り（例 /seasonal-drinks.html）","日本語のファイル名（例 /季節のドリンク.html）","キャメルケース（例 /SeasonalDrinks.html）"]} answer={0} />

次のレッスン 3-2 ページを追加する では、ここで描いた設計図をもとに、Claude Code に複数ページを一気に生成 させます。設計が固まっているので、実装は プロンプト 1 本 で進みます。