HTMLサイトマップのデザイン見本10パターン｜作り方と点検

HTMLサイトマップは、サイトに何があり、どこから探せるかを利用者に案内するページです。見た目を選ぶ前に、探す人の目的と掲載する情報を整理しましょう。ここでは実在企業の成功事例ではなく、組み合わせて使える10の設計パターンを紹介します。順位や回遊率の向上を保証するものではありません。

HTMLサイトマップ・XML・構成図の違い

HTMLサイトマップは人が読むリンク一覧、XMLサイトマップは検索エンジンにURL等の情報を伝えるファイル、構成図は制作や改修のための設計資料です。構成図の箱と線を、そのまま利用者向けページにする必要はありません。

W3Cのサイトマップ技法は、全体像と別の探し方を提供する用途を示しています。XMLも公開URLなら人が閲覧できますが、通常の案内UIとは目的が違います。Googleのサイトマップ資料でも、掲載はクロールや登録の保証ではありません。

10のデザインパターンを目的と制約で比較する

次の見本は配置の考え方です。「→」は分類と項目の関係を表し、実際のリンクやクリック数ではありません。まず一覧型で内容を整え、項目の多さや利用者の探し方に応じて他の形式を加えると判断しやすくなります。

掲載ページとラベルを台帳で整理する

見本を選ぶ前に、公開ページの台帳を作ります。CMSの公開一覧や確認できるURL一覧を突き合わせ、言語、対象読者、役割を記録してください。GA4やGSCに実績行がないだけで、ページが存在しないとは判断できません。会員限定や手続きの途中だけで使うページは、一般向け一覧に載せる必要があるか別に判断します。

ページの正式タイトルが長ければ、リンク文は意味を変えず短くできます。ただし「その他」だけでは中身が分かりません。「会社情報・問い合わせ」のように、探す人が予測できる言葉を選びます。記事群の分類が重なる場合は、関連記事のトピッククラスターで役割を整理してから一覧を作るとよいでしょう。

色・アイコン・多段組み・開閉UIを使いやすくする

色は補助にし、見出しの文字や枠でも区分を示します。W3Cの色の使用に関する解説に沿い、色を見分けなくても意味が分かるか確認してください。アイコンが文字と同じ意味なら重複を避け、操作を担う画像なら機能が伝わる代替を用意します。

多段組みでは、見た目が左右に並んでも文書の読む順序が筋道を保っているかを確認します。開閉型は「押せそうに見える」だけでは不十分です。W3Cのアコーディオン例を参考に、見出し・操作要素・開閉状態を確認し、Tabで移動、EnterやSpaceで操作できるかを実装に応じて試します。

• 狭い画面で文字やリンクが重なっていないか。
• キーボードで現在位置が分かり、必要な項目へ進めるか。
• 閉じた領域の情報を開く操作名が分かるか。
• 色・アイコン・位置だけに分類や操作を依存していないか。

小規模B2Bサイトの架空の配置見本と記入式テンプレート

以下は架空の小規模B2Bサイトの見本です。実在企業の画面や成果を示すものではありません。3つの見出しとテキスト一覧で成立させ、装飾は後から追加します。

初めて来た人には「導入の流れ」、用語を調べる人には「用語集」、相談したい人には「問い合わせ」が見つかるか試します。「運営者」は読者に分かりにくければ「会社・お問い合わせ」に変えるなど、名称も検証対象です。

フッターだけに重要項目を詰め込むより、必要な範囲を案内する入口と詳しい一覧を使い分けます。項目が増えたら、単に文字を小さくせず分類と探し方を見直してください。

タスク確認とリンク保守を運用に組み込む

「トップから3クリック以内」を一律のSEO要件にはしません。クリックが少なくても、ラベルが曖昧なら迷います。逆に手順に沿った移動が必要な場合もあります。利用者の目的を達成できたかを見て改善します。

ページの追加・移動・公開停止が起きたら、台帳と一覧を同時に点検します。管理担当と確認日を残し、リンク切れ、不要な転送、言語違いを確認してください。Googleのリンク設計資料も踏まえ、一覧の外にある本文中の導線まで必要に応じて見直します。画像の代替はalt記事、具体的なリンクの貼り方は内部リンク記事で確認できます。

関連記事

• 内部リンクの設計と貼り方｜アンカー・孤立ページ・確認手順
• alt属性の書き方｜画像の役割別の例とアクセシビリティ
• トピッククラスターの作り方｜記事の役割分担とリンク設計