サイトマップとは？基本と作り方を解説。

Webサイト設計に関する資料（ドキュメント ）のうち、サイト全体の情報構造をわかりやすくまとめたものが「サイトマップ 」です。プロジェクトに関してチーム全体の共通ツールにもなるもので、サイト構造を図式化し、要点や注釈をつけるのが一般的です。

サイトマップは大きく以下の2つに分けれられます。

①ハイレベルサイトマップ
②ディレクトリマップ （詳細サイトマップ）

サイトマップ 作成はサイトの上位階層（ハイレベルサイトマップ ）を設計した後に下位階層の設計（ディレクトリマップ ）に移るという過程があり、ハイレベルサイトマップ で全体構造を検討してから、組織化・構造化された情報を使って下位階層のディレクトリマップの作成へと進むのが一般的です。

ハイレベルサイトマップではまず、短期的に変更が入らない要素から洗い出し大きなカテゴリーとして構成を決めていきます。サイトの大まかな構成に短期もしくは中期で変更が入った場合は対応が難しくなくなるため、プロジェクトの将来的な計画から考えていきます。

ハイレベルサイトマップの作成

サイトマップ設計の段階では全ての情報を漏れなく網羅する必要はありません。特に要点となる部分だけを論点として大まかな分類を決定して要約や注釈を添える形で作成しまとめましょう。もちろん、クライアントが達成したい目標とユーザーの目的の双方を考慮しわかりやすい分類をするようにする事が大前提となります。

ハイレベルとローレベル
Webサイトは一般的には情報に親子関係を持たせて構造化していくことが多いですが、その場合はまずサイトの中で必要となるコンテンツ（情報）をリストアップしてカテゴライズしていき、その情報を掲載するのに必要な主要ページを洗い出していきます。コーポレートサイトであれば例えば以下のようなページが洗い出されます。

・トップページ
・企業理念ページ
・代表メッセージ紹介ページ
・事業紹介ページ
・よくある質問ページ
・お問い合わせページ

そして、洗い出された各主要ページ（上位階層ページ）を基準にした時、そのページの階下層に必要なページを更に検討します。このように一般的には各ページを「上位階層（ハイレベル）」「下位階層（ローレベル）」の順で検討していきますが、どこまでが上位階層でどこまでが下位階層なのかはその時のwebサイトの規模にもよるので決まった正解などはありません。「上位階層（ハイレベル）のページ」とする場合は、それらのページをサイト内における最上階層としナビゲージョン項目（トップページから各主要ページに直線的に移動できるリンク）として含ませるのが普通です。

サイトマップはプロジェクトにおいても初期プロセス段階の資料なので、メンバー同士で議論を重ねる中ですぐに調整できる形式にしておくのが理想です。試行錯誤がしやすいツールとしておすすめなのが、付箋をホワイトボードなどに貼り俯瞰できるようにしたり、Adobe XDで各ページを簡単にまとめたサイト構造を図で作成する方法があります。テキストで箇条書きするなど簡易的なものでも十分なのでリソース状況に合わせて使い分けましょう。

ディレクトリマップの作成

先の上流工程で決まったハイレベルサイトマップを元に、次は各ページレベルでの情報構造を決めていきます。 まず、ディレクトリマップ作成の時点でハイレベルサイトマップの設計については必ず承認を得ておくようにしましょう。ディレクトリマップを作成している段階でハイレベルサイトマップに変更が入ってしまうと再調整するのに大幅な工数がかかってしまいます。上流から下流の工程に移る際はポイントで承認手続きを踏むようにします。

ディレクトリマップとは
サイト全体のビジネス課題、設定したペルソナ、ハイレベルサイトマップ とナビゲーション設計などの上流作業が終わったら次はページレベルでより具体的な詳細内容を決めていきます。ハイレベルサイトマップだけではサイトの大まかな構造は把握できても個別ページごとの詳細な内容や構成は把握できないのでまだ資料としては不十分です。より詳細な内容を決めていくにあたり、ハイレベルサイトマップに加えディレクトリマップも必ずセットで用意するようにしましょう。

ハイレベルサイトマップではWebサイトの大まかな全体像、構成を共有する資料であるのに対し、ディレクトリマップはサイト制作段階で制作チームが必要とするような情報、例えば階層構造、ナビゲーション項目、パス、ページ内の具体的な内容をコンテンツインベントリ形式でリスト化し記述するまさに設計書のような役割があります。

ディレクトリマップの作り方
ディレクトリマップではこれから作成するページごとに階層を与え、ページ毎に必要な情報をコンテンツインベントリ形式（リスト形式）で表記していきます。ここからハイレベルサイトマップ をベースにしてページレベルでの詳細な取り決めを行っていくため、この作業に入る時点でハイレベルサイトマップの合意は必ずとるようにしましょう。ディレクトリマップの記述が進んでいけばいくほど、ハイレベルサイトマップに変更が入った場合に変更が難しくなり、スケジュールの延期や予算不足に繋がりかねないからです。

ハイレベルサイトマップでサイト全体の主要ページ（ナビゲーション項目）大枠が決まったら、次はディレクトリマップ内で各ページレベルでの詳細を取り決めていきます。基本的には以下のような項目をコンテンツインベントリ形式（リスト形式）で表記していきましょう。

ページ階層（第一階層、第二階層、第三階層など）
サイト全体から見てそのページがどの階層にあるのかを記載し、ページ同士の位置関係がわかるようにします。

各ページの名称（会社概要、事業紹介、など）
必ずしも必要ではないですが、記載することによってページの概要を共通認識する事ができます。簡単でもいいので記載しましょう。

各ページのコンテンツ内容（会社の沿革や企業情報、各種サービスの紹介、個人情報保護方針や利用規約など）
各ページの内容をより詳細に記載する事でページのより具体的な内容を共通認識する事ができます。箇条書きでもいいので記載しましょう。

各ページのパス（/about/、/service/、/privacy/など）
各ページのディレクトリ構造を記載します。特にコーディングの際に必要な情報なので記載するようにしましょう。

各ページのID（A、A-2、A-3など）
ページを個別に識別するための専用の番号などです。そのページが大カテゴリの中でどこに属しているのかや、どの階層に位置しているのかといった情報が分かるように記載します。IDを付与しておけば例えば修正指示などの際にそのページを指し示す時にも使えるので利用しましょう。

もちろん、ディレクトリマップに記載するニアようは案件によって様々です。基本的には製作担当が必要とする情報を記載する事が望ましいのでそれに基づいて項目を検討しましょう。

制作のためのツール

サイトマップに適したツールは様々ありますが、基本的にはサイト規模によって変わってきます。例えばページ数も少なくサイト全体の構造も特に複雑でないようなサイトであれば、PowerPointやKeynoteもしくはXDのようなツールで各ページをツリー上に記載し各ページにテキストを添えるような形で内容を記載するなのでも構いません。サイト規模が大きくページも膨大になるようであればエクセルやGoogleスプレッドシートのような多くの項目を複数のシートに分けて管理できるような管理ツールが理想です。もちろん小規模サイトでも使えるのでこのような管理ツールに慣れておいた方がいいかもしれません。

重要なのは関わるメンバー全てが容易に導入共有できいつでも閲覧できること。なおかつ専門知識が不要で扱いやすく修正も簡単で作業効率を妨げないツールが理想です。サイト規模やチームの状況にも合わせて選びましょう。