ハイレベルサイトマップとは?Webサイトの目的を明確にする作り方を解説
2022年01月18日
ハイレベルサイトマップどのようなWebサイトも、制作する理由・目的があります。ハイレベルサイトマップは、Webサイトの目的(コンバージョン)を達成するのに必要となる情報を整理・分類して、サイトの概要や導線を検討・理解するために作成されます。Webディレクター職のほかマーケターが作成するケースもあり、Webサイトで最も初期段階での構想図と言えます。
この記事ではハイレベルサイトマップについて、具体的な役割やディレクトリマップとの違い、ハイレベルサイトマップの作り方を解説します。
ハイレベルサイトマップとは
ハイレベルサイトマップとは、Webサイト全体の構造を図式化し、プロジェクト関係者がサイトの全体像を理解し共有するためのサイトマップです。全ページを網羅するのではなく、サイトの目的に応じて必要とされるコンテンツをカテゴリ分類したものです。
Webサイトは階層構造であるため、ツリー図で作られるのが一般的です。
ハイレベルサイトマップはサイト構造のベースとなります。Webサイト制作は、制作途中で変更が生じると予算とスケジュールに大きな影響が出てしまう可能性があります。ハイレベルサイトマップを使って、関係者との認識を合わせてから次のステップに進む必要があります。
ハイレベルサイトマップの役割
ハイレベルサイトマップはWebサイト制作の初期段階で作成され、Webサイトの全体像について関係者間で認識を合わせる役割があります。
ここではハイレベルサイトマップのさらに具体的な役割や、ハイレベルサイトマップが必要になるケースを説明します。
企画・提案段階で使う
ハイレベルサイトマップは、Webサイト制作の企画や提案の段階で作成されます。社内やクライアントへの提案において、Webサイトの目的を明確にし、目的に必要なコンテンツを明確化する役割をはたします。
Webサイト構築やリニューアルの設計
Webサイト構築やリニューアルの設計のベースとして、ハイレベルサイトマップが必要になります。
ハイレベルサイトマップで得られた合意をもとに、詳細に設計を進めていくことになります。
サイトの最終目的への導線の設計
ハイレベルサイトマップは、Webサイトの最終目的(コンバージョン)をどのように達成するかを検討・設計するときに作成することがあります。
詳細な画面遷移ではなく、大まかなステップとしてどのような導線が必要かを検討するために使われます。
ハイレベルサイトマップとディレクトリマップの違い
ハイレベルサイトマップと同様に、サイトの設計のために使われるものとしてディレクトリマップがあります。ハイレベルサイトマップがサイトの大まかな構造や全体像を示すのに対し、ディレクトリマップは全ページを一覧化する形で作られます。
ディレクトリマップは、全ページのURL(パスやID)とタイトル、ページの内容などを、Excelなど表形式で一覧にするケースが多いでしょう。制作関係者が制作物を過不足なく作成していくためにも必要とされます。
ハイレベルサイトマップをベースにして、個別ページごとの詳細な内容を決めてディレクトリマップを作成していきます。
ハイレベルとはどこまでか?
ハイレベルサイトマップの作成方法や項目には、明確な決まりがあるわけではありません。制作会社や各担当がテンプレートを作っているケースもあるでしょう。Webサイトの規模や種類によって、一覧化する項目も異なる可能性があります。
例えば企業ホームページの場合、トップページや会社概要、企業理念、事業紹介、お問い合わせページなどの主要ページをハイレベル(上位階層)とし、ハイレベルを元にローレベル(下位階層)のページを決めていく手順が一般的です。ハイレベル、ローレベルの定義はWebサイトの内容や目的、規模などにより異なります。
その他のサイトマップの種類
サイトマップと呼ばれるものに、ハイレベルサイトマップのほかに、HTMLサイトマップとXMLサイトマップがあります。
ハイレベルサイトマップが、制作関係者やクライアントなどの内部向けであるのに対し、HTMLサイトマップとXMLサイトマップは公開するためのものです。
HTML サイトマップとは
HTMLサイトマップは、公開後のWebサイトに設置してサイトの訪問者が参照するサイトマップです。サイトの内容が一覧で表示されます。
HTMLサイトマップは、サイト訪問者が目的のページを探しやすくするために公開します。
XMLサイトマップとは
XMLサイトマップとは、Googleをはじめとする検索エンジンのクロールロボットにサイトの構成を伝えるためのサイトマップです。コードを書くこともできますが、ツールで作成したりワードプレスを使っているサイトではプラグインで作成・アップロードできます。
サイト訪問者にはXMLサイトマップは見えませんが、SEOでは重要と言われています。
ハイレベルサイトマップの作り方
ハイレベルサイトマップの作り方を、順を追って紹介します。
ハイレベルサイトマップで示す項目は、サイトの種類や規模、誰に対して示すかによって異ってかまいません。Webサイトに詳しくない相手に提案する場合には、目的のページと目的達成までの大枠の行動が理解しやすいようにします。
また、検討や議論の場で使うには書き換えやすいようなフォーマットにしておくことも重要でしょう。
①最終目的の明確化
まず、Webサイトの最終目的(コンバージョン)を明らかにします。
商品の購入、資料請求や問い合わせなどが考えられます。
Webサイトにおいて達成したい最終目的のページを決めます。
②必要なページの洗い出し
次に、最終目的のページに至るまでに必要となるページを洗い出します。例えばECサイトであれば以下のようなページが必要となります。
- トップページ
- 商品一覧
- 商品詳細
- カート
- 決済・配送先情報の入力ページ
- 購入完了ページ
- 会員登録
ハイレベルサイトマップでは詳細は必要なく、最終目的に必要な行動を把握できるように書くことを重視します。
③コンテンツの分類と構造化
必要なページの洗い出しが終わったら、それぞれのページをカテゴリ別に分類し、構造化・図式化していきます。ハイレベルサイトマップでの最上位の分類は、サイトのTOPページからリンクを置く(グローバルナビなど)イメージで考えるとよいでしょう。
コーポレートサイトのように、最終目的が購入などのアクションではなく閲覧である場合、ステークホルダーは自社の何に興味を持つのか、反対に自社からアピールしたい点は何かといった観点でコンテンツを洗い出します。こうした観点から主要といえるカテゴリを洗い出し、配下にどのようなページを置くかを図式化していきます。
この段階で不要なコンテンツが出た場合は、ハイレベルサイトマップから外します。
④最終目的(コンバージョン)の導線の検討
最終目的(コンバージョン)に至るまでの導線を明確にします。
例えば商品購入がコンバージョンの場合、トップページから商品一覧ページに行き、商品詳細ページからカートに商品を入れて購入となります。こうした基本の導線を明らかにします。そのうえで商品カテゴリなどを検討していきます。
まとめ
ハイレベルサイトマップの作成は、Webサイトの全体像を俯瞰的に理解し、サイトのコンバージョンや導線を明確にするために必要なステップです。ハイレベルサイトマップでサイトの最終目的とその導線を把握し、それを詳細化したディレクトリマップを作り、ページ遷移などの設計や詳細デザインが進んでいきます。
プロジェクトが進んだ段階でハイレベルサイトマップの変更が必要となってしまうと、予算やスケジュールに大きな影響を与えてしまうでしょう。そのため、Webサイト制作の初期段階でハイレベルサイトマップを使って検討し、合意を得ておくことが重要です。