ホームページのサイトマップ制作｜中小企業がページ構成とメニューを整理する手順

お役立ち情報Web・Growth

ホームページ制作前のサイトマップを、訪問者の目的から整理する手順を紹介します。ページ一覧の記入例を使い、親子関係、メニュー、次の行動へのリンクを分けて考え、制作会社と構成案を確認する方法を解説します。

明るい会議室で、二人の担当者が大型画面に表示されたウェブサイトのページ構成図を見ながら話し合っている。

ホームページのサイトマップ制作は、訪問者が知りたいことを洗い出し、必要なページに分け、ページ同士の関係と入口を整理する作業です。会社案内やサービス資料をそのまま並べるのではなく、「誰が、何を確かめるために訪れるのか」から考えると、制作会社と話し合うための構成案を作れます。

進め方は、訪問者の目的を整理し、ページ候補を一覧にしたうえで、関連するページをまとめて親子関係を決めること。その後、メニューと各ページからの次の行動を考え、具体的な利用場面で確認します。

この記事で扱うサイトマップは、制作前に用意する「サイト構成図」です。最終的には、ページの関係が分かる構成図と、各ページの役割が分かる一覧を用意します。この段階で、すべての本文を書き終える必要はありません。

制作前のサイトマップで整理すること

Webデザインに入る前に、サイトマップでページの関係を整理しておくと、どの情報をどこに置くかを制作会社と確認できます。見た目を考える前に、サービスの説明、会社情報、問い合わせなどが、それぞれどの役割を持つのかを明らかにしましょう。

「サイトマップ」という言葉には、用途の異なるものがあります。

種類	主な用途
制作前のサイト構成図	作るページと、その所属・親子関係を整理する
公開サイトマップページ	訪問者がサイト内のページを探せるよう、リンクを一覧で示す
XMLサイトマップ	検索エンジンにページなどの情報を伝え、発見やクロールを助ける

Googleの公式文書では、検索エンジン向けサイトマップを送信しても、記載したすべてのコンテンツのクロールやインデックス登録は保証されないと説明されています。制作前の構成図も、作るだけで検索順位の上昇を保証するものではありません。検索エンジン向けサイトマップの役割

構成図には、まずページの所属関係を示します。「サービス詳細からお問い合わせへ進む」といった横方向のリンクは、別に記録すると読み取りやすくなります。すべての移動経路を一枚の図に詰め込む必要はありません。

訪問者がしたいことから必要な情報を洗い出す

最初に考えるのは、会社が掲載したい情報よりも、訪問者がサイトで確かめたいことです。

例えば、サービスを検討する人なら、「自分の依頼に対応しているか」「利用条件は何か」を知りたいかもしれません。来社する人なら所在地、相談を始めたい人なら問い合わせ方法が必要です。自社の訪問者に当てはまる目的を選び、それぞれに必要な情報を書き出します。

英国政府のGOV.UKの内容設計指針も、利用者が誰で、何をしたいのかを把握し、既存の内容に合わせて需要を作り出すのではなく、行動や課題を基に内容を考えることを求めています。この考え方を、企業サイトの準備にも取り入れられます。利用者の目的から内容を考えるGOV.UKの指針

手元の会社資料や、実際に受けた質問を確認しながら、次のように整理してみてください。

訪問者がしたいことの例	判断に必要な情報の例
依頼したい内容に対応しているか知る	サービス内容、対応範囲、対象となる依頼
利用できる条件を確認する	対応地域、利用条件、依頼前に確認する事項
会社の所在地を調べる	住所、アクセス方法
相談を始める	問い合わせ方法、問い合わせ先

これは整理方法を示す例です。実際に掲載する項目は、自社の事業と確認済みの情報に合わせます。

根拠のない想定は、確定事項と分けて残しましょう。例えば「初めての訪問者は専門用語の説明を必要とするか」は、担当者の想定だけで決めず、実際の質問などを確認する事項にできます。既存資料をすべて載せることや、社内部門ごとにページを作ることを出発点にすると、訪問者の目的との対応が見えにくくなります。

情報をページ候補に分け、一覧にする

必要な情報が見えてきたら、同じ問いに答えるものをまとめ、ページ候補にします。

例えば、あるサービスの内容と利用条件を一緒に確認する必要があるなら、同じページで説明する案が考えられます。一方、サービスごとに対象者や内容が大きく異なり、それぞれを詳しく確認したい場合は、個別ページに分ける案を検討できます。

事業が複数あるからといって、すべてを独立したページにする必要はありません。資料の枚数よりも、「このページで何を判断できるようにするか」「別のページとして直接訪れる必要があるか」で考えましょう。

ページ一覧には、名前だけでなく役割と次の行動も記録します。次は説明用の記入例です。

ページ名	面向する読者	答える質問	主な情報	所属分類	次の入口	素材担当	未決定事項
サービス一覧	依頼先を探している人	どのサービスが自分に合うか	各サービスの概要と違い	サービス	個別サービス	営業担当	分類名を確認する
個別サービス	具体的に検討している人	何を依頼できるか	内容、対応範囲、条件	サービス一覧の下	お問い合わせ	事業担当	公開できる条件を確認する

担当者名や未決定事項は、制作準備のための記録です。公開ページに載せる内容とは分けて扱います。

リニューアルの場合は、現在のページ名やURLも併記し、「保留」ではなく「残す・統合する・削除する・新設する」のどれを検討しているかを記録すると、変更点を話し合いやすくなります。まだ判断できないものは「要確認」として残してください。

古いページ名だけを見て存廃を決めず、そのページが答えている質問も確認します。同じ役割のページをまとめるのか、役割が違うので分けて残すのかが、構成を考える際の判断材料になります。

メニューと次の行動へのリンクを分けて考える

ページの親子関係を決めたら、訪問者に見せる入口を考えます。ここでは、次の役割を分けて扱うことが大切です。

ページの階層は、内容の所属を示す。
メニューは、サイトの主要な入口を示す。
本文中のリンクは、今読んでいる内容から次に必要な情報や行動につなぐ。

ページ一覧にあるすべてのページを、主メニューに並べる必要はありません。例えば、メニューには「サービス」を置き、その先の一覧ページから個別サービスを選ぶ構成も考えられます。

メニュー名は、訪問者が中身を予測できる言葉にします。「第一事業部」のような社内名称を使う場合は、その名称で提供内容が伝わるかを確認してください。実際の事業内容を示す名称のほうが適切な場合もあります。

本文のリンクも、読み進めた人の次の疑問に合わせます。サービス詳細を読んで「利用条件を詳しく確認したい」なら条件の説明へ、「自分の依頼について相談したい」なら問い合わせ入口へつなぎます。ページ一覧の「次の入口」欄に、リンク先と、どの説明の後に置くかを記録すると、構成図に線を増やさずに共有できます。

WCAG 2.2では、リンクの目的を、リンク文字そのもの、またはリンク文字とプログラムで判断できる文脈から理解できることを求めています。文章の中でも、単に「こちら」と書くより、「対応範囲を確認する」のように行き先が分かる表現を使うと、読者が次の行動を選びやすくなります。リンクの目的を判断できる表現についてのWCAG解説

スマートフォンでメニューを折りたたむ場合も、表示する項目の順序、言葉、リンク先を確認しましょう。W3C WAIのメニュー構造の指針では、画面サイズが変わっても、これらを一貫させることが勧められています。W3C WAIのメニュー構造の指針

構成図とページ一覧を使って制作会社と確認する

構成案ができたら、最初に整理した訪問者の目的を使って、入口から次の行動まで順に確認します。

例えば、「サービスが自分の依頼に合うか判断し、相談したい人」を想定します。トップページやサービス一覧から入り、個別サービスで内容と条件を確認し、問い合わせ入口へ進めるかをたどってみてください。説明が足りなければ、必要な情報をページ一覧に追記します。次に進む先が分からなければ、リンクの配置を見直します。

制作会社との打ち合わせでは、次の点を構成図と一覧で照合します。

図にあるページが一覧にもあり、役割と所属が一致しているか。
主メニューから入るページと、その先で選ぶページが明確か。
各ページで判断に必要な情報がそろい、次の行動につながるか。
素材を確認する担当者と、未決定事項が分かるか。

本文が完成していなくても、ページの役割、載せる情報、確認が必要な項目を分けておけば、何を決めたいのかを共有できます。これは構成を相談するための準備方法です。実際に必要な資料や進め方は、依頼先と確認してください。

リニューアルでは、既存ページを残すか統合するかに加え、現在の問い合わせ経路をどう組み直すかも確認します。自社だけでは内容の整理やページの関係を決めにくい場合、Kizashiでは、サイト分析や内容・構造の再整理を含むリニューアル支援を提供しています。既存ページや導線を見直すホームページリニューアル支援で、今のサイトに必要な作業が対応範囲に含まれるかを確認できます。

構成図とページ一覧ができると、次は「どの情報を先に見せるか」「スマートフォンでどう読ませるか」「問い合わせへどうつなぐか」を、実際のページに落とし込む段階です。Kizashiのホームページ制作・リニューアルは、企業や店舗に向けて、情報整理、ページデザイン、スマートフォン対応、問い合わせフォームなどを扱います。整理したページの役割を、画面上の情報配置や入口として具体化する支援につながります。

実装まで依頼したい場合は、情報整理から進めるホームページ制作・リニューアルの対応範囲を見るから、必要な支援を確かめてください。手元の構成案と未決定事項を照らし合わせると、情報整理から相談したいのか、ページ設計や制作を依頼したいのかを考えやすくなります。