サイト全体の構造を整理しよう

「サイト全体の構造を整理しよう」の画像

はじめに

第37章では、ページとページを内部リンクでつなぎました。

ここでは一段上から、

サイト全体がどう整理されているか

を見ます。

これがサイト構造です。

トップ
├─ 初めての方へ
├─ サービス
│  ├─ 縮毛矯正
│  ├─ Color
│  └─ 施術
├─ 店舗紹介
├─ アクセス
├─ ブログ
└─ 問い合わせ

のように、情報の位置とつながりを整理します。

サイト構造とは

サイト構造は、

ページがどのように分類され、階層化され、リンクでつながっているか

です。

ナビゲーション メニューだけを見る話ではありません。

ヘッダーに表示されていないページも、サイト構造には含まれます。

ナビゲーションとサイト構造は違う

ここは重要です。

サイト構造

サイト全体の設計図。

ナビゲーション

その設計図の中から、利用者へ主要な道を見せるUI。

サイトに100ページあっても、ヘッダー メニューへ100ページ並べるわけではありません。

第21章のグローバルナビゲーションは、サイト構造の一部を見せる仕組みです。

トップページを起点に考える

初心者はトップページから考えると整理しやすくなります。

トップ
↓
主要セクション
↓
詳しいページ

たとえば、

トップ
↓
メニュー・料金
↓
縮毛矯正

です。

トップページですべて説明するのではなく、概要から詳しいページへつなぎます。

大きな情報から細かい情報へ

たとえば、

サービス
↓
縮毛矯正
↓
施術の詳しい解説

のように、広いトピックから具体的なトピックへ整理できます。

ブログでも、

Hair Care
↓
縮毛矯正
↓
縮毛矯正後のホーム Care

のようなまとまりが考えられます。

階層を深くしすぎない

ページを整理するために階層は便利です。

しかし、

トップ
↓
サービス
↓
Hair
↓
Straightening
↓
ダメージヘア
↓
Course

のように深くしすぎると、目的ページを見つけにくくなる場合があります。

「必ず3クリック以内」のような絶対ルールではなく、

重要なページへ自然にたどり着けるか

を見ます。

逆に全部Flatでも分かりにくい

すべてをトップ直下へ並べるだけでも、ページが増えると整理しにくくなります。

情報が増えたら、

  • セクション
  • カテゴリー
  • Hub ページ
  • 親 / 子

などを使ってまとめます。

固定ページには親 / 子がある

WordPressのページは、親 ページを設定して階層を作れます。

たとえば、

メニュー・料金
├─ 縮毛矯正
├─ Color
└─ 施術

のようにします。

WordPress公式ドキュメントでも、ページは親 / 子として階層化できると説明されています。

Themeやパーマリンク構成によっては、この階層がURLや表示にも関係します。

親 ページを設定すればナビゲーションが完成するわけではない

WordPress上で親 / 子を設定しても、

理想的なヘッダー メニューや内部リンクが全部自動でできるわけではありません。

WordPressの階層
≠
利用者が実際にたどるナビゲーション

です。

親 / 子は情報整理。

ナビゲーションや内部リンクは、その構造を利用者へ見せる方法です。

投稿はカテゴリーで整理する

投稿ではカテゴリーを使ってトピックごとにまとめられます。

たとえば、

縮毛矯正
Color
ホーム Care

などです。

カテゴリーは「記事を整理する大きな棚」と考えます。

記事を書くたびに似たカテゴリーを増やしすぎないようにします。

タグは必要になってからでもよい

タグは、カテゴリーとは別の横断的な分類に使えます。

ただし、小規模サイトでは無理に使う必要はありません。

まずカテゴリーを整理し、

記事数が増えて横断分類が本当に役立つ段階で検討します。

パンくずリストとは

パンくずリストは、

ホーム > メニュー・料金 > 縮毛矯正

のように、利用者へ現在地と上位階層を示すナビゲーションです。

役割は主に、

  • 現在地を伝える
  • 上位ページへ戻れる
  • ページ同士の関係を見せる

ことです。

パンくずリスト自体も内部リンクになります。

現在のWordPressにはパンくずリスト ブロックもある

2026年時点のWordPress公式ドキュメントには、

パンくずリスト ブロック

があります。

Block Themeなどでは、テンプレートやTemplate Partへパンくずリスト ブロックを配置し、複数ページへ共通表示することもできます。

ページに親が設定されている場合、その階層をパンくずリストへ反映できます。

投稿ではカテゴリーやタグなどがパンくずリストに使われます。

ただし、利用しているWordPress バージョンやTheme、サイト構成によって実際の使い方は確認します。

Breadcrumbs Block

Classic ThemeではTheme / Pluginのパンくずリストもある

Classic Themeでは、Theme独自機能やSEO Pluginなどがパンくずリストを提供している場合があります。

すでにTheme側でパンくずリストが出ているのに、別Pluginやブロックで重ねて追加すると二重表示になる可能性があります。

まず、

現在のThemeが何を出しているか

を確認します。

パンくずリストとURLは同じものではない

たとえばURLが、

/example.com/straightening/

でも、サイト上のパンくずリストが、

ホーム > サービス > 縮毛矯正

になることはあります。

URL文字列そのものと、利用者へ見せる情報階層は同じではありません。

Googleもサイト構造の理解ではリンク同士の関係を重視しています。

サイト全体を確認する

Googleも論理的なサイト構造を推奨している

Google Search Centralは、

  • 利用者がナビゲーションしやすい論理的なサイト構造
  • 重要 ページへ関連ページからリンクする
  • 分かりやすいアンカー テキスト

を推奨しています。

Googleはサイト内リンクの関係から、ページ同士の重要性やつながりを理解する材料を得ます。

つまり、

Directory名だけをきれいにすること

より、実際にページがどうつながっているかが重要です。

重要 ページを埋もれさせない

ビジネス上重要なページが、

  • ヘッダーにない
  • フッターにもない
  • 関連 リンクもない
  • ブログからもつながらない

なら、利用者は見つけにくくなります。

重要ページは、意味のあるページから自然にリンクします。

ただし、すべてをトップページへ直接並べる必要はありません。

孤立 ページをサイト全体で確認する

第37章ではIndividual ページの内部リンクとして孤立 ページを見ました。

第38章ではサイト全体を俯瞰します。

このページはどこに所属する?
誰がどこから来る?
次にどこへ進む?

を確認します。

所属先も入口も説明できないページは、位置づけを見直します。

サイト構造を図にしてみる

ページが増えたら、一度テキストや図にします。

トップ
├─ 初めての方へ
├─ サービス
│  ├─ 縮毛矯正
│  ├─ Color
│  └─ 施術
├─ 紹介
├─ アクセス
├─ ブログ
│  ├─ 縮毛矯正
│  ├─ Color
│  └─ ホーム Care
└─ 問い合わせ

この図を見ると、

  • 重複ページ
  • 足りないページ
  • 深すぎる階層
  • 孤立 ページ
  • ナビゲーションへ載せるべきページ

が見つけやすくなります。

小規模サイトはSimpleでよい

店舗サイトで、最初から巨大MediaのようなArchitectureを作る必要はありません。

まず、

トップ
├─ 初めての方へ
├─ メニュー・料金
├─ 店舗紹介
├─ アクセス
├─ ブログ
└─ 問い合わせ

程度から始めても構いません。

情報が増えたときに、意味の近いものを整理します。

サイト構造確認チェックリスト

□ 主要セクションが分かる
□ 重要 ページが埋もれていない
□ 階層が必要以上に深くない
□ カテゴリーが増えすぎていない
□ 親 / 子が意味に合っている
□ パンくずリストがサイト構造と矛盾していない
□ ナビゲーションと階層を混同していない
□ 孤立 ページがない
□ 関連ページから内部リンクされている
□ 利用者が次のページを見つけられる

今回のポイント

  • サイト構造はページの分類・階層・リンク全体の設計
  • ナビゲーションはサイト構造の一部を見せるUI
  • トップ → セクション → Detailと考えると整理しやすい
  • 階層を深くしすぎない
  • WordPress ページは親 / 子で整理できる
  • 投稿はカテゴリーを中心に整理できる
  • パンくずリストは現在地と上位階層を示す
  • 現在のWordPressにはパンくずリスト ブロックもある
  • Googleは論理的なサイト構造と内部リンクを重視する
  • 重要 ページや孤立 ページをサイト全体で見直す

今回の視点

サイト構造は、

「何ページ作ったか」

ではありません。

重要なのは、

それぞれの情報がどこにあり、どうつながっているか

です。

ナビゲーション、フッター、内部リンク、パンくずリスト。

それぞれは別の部品ですが、全部をつなぐと一つのサイトマップが見えてきます。


Part 6|検索されるホームページを作る

前へ:第37章「内部リンクでページ同士をつなごう」

目次:初心者向け WordPressで作るホームページ完全Guide

次へ:第39章「画像のaltと意味を正しく伝えよう」