ユーザーを混乱させないサイトマップの作り方と目的

一口にサイトマップといっても、検索エンジンにページを通知するためのsitemap.xmlであったり、ユーザーにサイト内のページリストを提示するサイトマップページなどがあります。
今回はサイト制作において、全体を把握するために活用するサイトマップを取り上げます。
目的作成順序作成ツールサンプルの4段階に分かれています。

サイトマップの目的

サイトマップは、サイトに存在するページリストや、その階層を示すものです。
作成することにより、各ページが論理的なグルーピングがされているかなどサイト全体を俯瞰して確認することが可能です。
すると自ずと、どのカテゴリやページの優先度が高いのか作業者の間で明確になり、クライアントとの認識合わせやデザイナーとのブレもなくせます。

サイトマップ作成順序の6STEP

サイトマップを作成する順序は下記の通りです。

#1 サイトの目的・ゴールを明確にする

まずはサイトの目的やゴールを決めておきましょう。
ゴールを明確にすることで不要なページや要素を作る必要がなくなります。
新聞などとは異なりWEBは表示領域に制限がありませんので、ページをあれもこれもと量産しないようにするため非常に重要なステップです。

下図をご覧いただくとわかりますが、リンクによる画面遷移は上位のみで、その他多くは検索によって到達しているとの実情があります。
ページが埋もれてしまい、ユーザーが欲しい情報に辿りつけないことがないよう、ページの制作範囲はきちんと考慮すべきなのです。
ユーザーを混乱させないためのサイトマップの作り方と目的
出典:http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html

#2 ページ内容を書き出す

目的に沿って必要と思われるページを書き出していきます。
次のステップでグルーピングを行いますので、この段階ではある程度細かい単位で書き出して問題ありません。

#3 ページをグルーピングする

前のステップで書きだしたページをサイト目的・ゴールと照らし合わせて、統合できるところ削除できるところを洗い出し、グルーピングします。

#4 ページの優先度を設定する

次にグルーピングした中でどのページが最優先か考えてみましょう。
例えば、サイトの特長が安さであれば価格のページを、品質であればこだわりを訴求したページが優先となるでしょう。

#5 カテゴリ/ナビゲーションを設定する

ページをさらにカテゴリ化してまとめられないか確認します。
ここでのまとまりがメニューになってきます。

#6 ツールを利用してサイトマップを作成する

ページ設計がまとまったら最後に図式化して、関係者で共有できるようにしましょう。

サイトマップ作成ツール

手書きやパワーポイントなどでも作成できますが、下記のようなサービスを活用するとテンプレートを利用して簡単に作成することが可能です。

サイトマップのサンプル

先達が作成したサイトマップをご覧ください。

ユーザーを混乱させないためのサイトマップの作り方と目的
出典:https://dribbble.com/shots/1660727-Sitemap/attachments/261278
サイト全体の階層がわかるとともに、ページのレイアウトが把握ができます。

ユーザーを混乱させないためのサイトマップの作り方と目的
出典:https://dribbble.com/shots/1198252-Sitemap-For-Student-Guide/attachments/159409
こちらは階層構造だけでなく、機能についても概要がわかるようになっています。

このサイトマップ作成が完了するとワイヤーフレーム作成に移行できます。
ワイヤーフレームの目的と作り方5段階まとめも参考にしてください。

howto > ユーザーを混乱させないサイトマップの作り方と目的