【事例あり】参考になるサイトマップのデザインパターンとデザイン例

サイトマップはWebサイトの全体像を把握するし、ユーザーがサイトを回遊する際に役立ちます。Webサイトを制作する際にはサイトマップの作成が重要です。しかし、サイトマップには複数の種類があり、よくわからないとお悩みの方は多くいらっしゃいます。

本稿ではサイトマップのデザインの種類を解説し、HTMLサイトマップのデザインを実際のWebサイトを例に紹介します。自社でサイトマップを作成しようと検討している方は、ぜひ参考にしてください。

サイトマップの種類

サイトマップには大きく分けて「HTMLサイトマップ」と「XMLサイトマップ」の2種類があります。以下よりそれぞれの特徴を解説します。

HTMLサイトマップ

HTMLサイトマップとは、HTMLに記載するサイトマップです。サイトマップのページやフッター部分に設置されており、ユーザーの利便性のために作成します。

規模が大きなWebサイトではページ数が多いため、ユーザーが求めている情報を見つけるまでに時間がかかったり、見つけられずに離脱するケースがあります。しかし、HTMLサイトマップがあれば、ストレスなく、ユーザーを求めているページまで誘導可能です。特に、情報を表示できる画面範囲がせまいスマホでは、ページを簡潔にまとめているサイトマップは重宝されています。

XMLサイトマップ

XMLサイトマップは、検索エンジンにWebサイトの情報を知らせるためのものです。HTMLサイトマップとは違いユーザーが見ることはありません。そのため、今回の記事ではHTMLサイトマップのデザイン例を紹介します。

XMLサイトマップについてはこちらの記事で詳しく解説していますのでご覧ください。

XMLサイトマップとは？　SEOの効果や作成方法を解説！

自社Webサイトでクローラビリティに課題がある場合、XMLサイトマップを活用すれば改善できる可能性があります。XMLサイトマップとは、検索エンジンにWebサイトのページの情報や各ファイルの関係を伝えることができるファイル…

サイトマップの代表的なデザインとは

サイトマップはコンテンツを探すために見やすく、使いやすくすることが重要です。どのようなデザインを選べばいいか悩んだ時には、コンテンツを探しやすいか、ページ量に見合ったデザインか、デザインにこだわりすぎて見にくくなっていないかに注意して選んでください。ここではHTMLサイトマップの代表的なデザインパターンを紹介します。。

＜１＞上から下へと流れるパターン

上から下へと流れる、シンプルでよく見かけるデザインパターンです。左から右へ流れるパターンもありますが、会社や事業の成長に伴ってWebサイトが大きくなり、ページが増えていくと横に入りきれなくなります。上から下に流れるデザインであれば、ページが増えても追加しやすいのがメリットです。

（引用：株式会社PLAN-B）

＜２＞色分け

カテゴリー別に色分けするデザインパターンです。ひと目でカテゴリーを判別できるわかりやすいデザインが特徴です。ただし、カテゴリーを細かく分類しすぎて使用する色が多くなると、ごちゃごちゃして逆に分かりにくくなることがあります。色分けのデザインでサイトマップを作成したい場合にはカテゴリーを細かくしすぎないように注意しましょう。

（引用：ひらかたパーク）

＜３＞悩み・目的別

ユーザーの悩みやWebサイト訪問の目的に合わせて、カテゴリーを分類したサイトマップデザインです。市役所や区役所などの地方自治体のホームページでよく見られます。

（引用：新宿区役所）

サイトマップデザインの作り方とは？　作成の流れを紹介

サイトマップの作成の流れは次の通りです。

1つずつポイントを解説します。

STEP 01：どんなページが必要なのか考える

Webサイトにどのようなページが必要なのかを考え、すべて洗い出しましょう。ページ数によって最適なサイトマップデザインは異なります。必要なページを考える際には、競合のWebサイトを参考にするのがおすすめです。必要なページの抜けもれがなくなります。

STEP 02：必要ページをカテゴリー別に分ける

必要なページを洗い出したら、関連性あるもの同士、カテゴリー別に分類しましょう。どこにも分類できないページはその他に分けておきます。カテゴリー別に分けた結果、不要なページがあれば省きます。

STEP 03：階層構造を整える

カテゴリーに分類したページの、階層構造を整えます。下層ページはユーザーにとって探しにくいページですが、階層構造ができることで見つけやすくなります。階層構造はトップページを第一階層とし、その下にカテゴリーで分類した詳細なページが続くのが基本の流れです。具体的には以下のようなイメージです。

STEP 04：全体をチェックする

階層構造まで完成したら、最終的に全体をチェックします。必要なページの追加や、不要なページの削除、カテゴリー名の変更など、全体を調整すれば完成です。

【事例あり】サイトマップはフッターにデザインすべき？

サイトマップをフッターにデザインすることでWebサイト内の回遊率を高めることが可能です。メニューバーがわかりにくくなってしまうため、ヘッダーには多くの情報は載せれませんが、フッターではサイトマップの掲載ができるスペースを確保できます。別の目的でWebサイトに訪問したユーザーでも、フッターのサイトマップで「この情報も気になる」と思わせられれば、別のページへのアクセスを見込めます。

フッターのサイトマップは、ユーザーに次の行動の選択肢を与える役割を果たすのです。また、ページを最後までスクロールしフッターまでたどり着いたユーザーは、自社への興味が高いユーザーの場合が多くあります。そのようなユーザーにさらに情報を提供できれば、コンバージョンにもつながりやすくなります。

フッターのサイトマップデザイン事例＜１＞

（引用：株式会社PLAN-B）

株式会社PLAN-Bのフッターのサイトマップです。シンプルで知りたい情報がわかりやすいデザインになっています。

フッターのサイトマップデザイン事例＜２＞

（引用：BOTCHAN）

BOTCHANのフッターのサイトマップです。BOTCHANの提供する商品が把握でき、本来求めていた商品以外への興味を惹きつけられます。

フッターのサイトマップデザイン事例＜３＞

（引用：株式会社東亜不動産）

株式会社東亜不動産のフッターのサイトマップです。目的別に分類されており、ユーザーの利便性が高まります。

サイトマップのデザインを作るコツとは？

サイトマップはただ作成して設置すればいいわけではありません。見やすく、使いやすいサイトマップを作成しユーザーの利便性を向上させる必要があります。以下でサイトマップのデザインのコツを解説します。

ワイヤーフレームを作る

サイトマップを作成する前に、サイトマップページのワイヤーフレームを作成しましょう。ワイヤーフレームは、Webページの構成要素を決定する際に使用されます。Webサイトを複数人で作成する場合、どのようなデザインのサイトマップを作成するのか完成イメージを共有できるため、認識のズレが生じません。

悩み、目的でカテゴリーをつくる

サイトマップは、悩み・目的でカテゴリーを作ると、ユーザーの利便性が向上します。ユーザーは明確な悩みや目的を持ってWebサイトを訪れることがほとんどです。悩みや目的で分類されたサイトマップは、ユーザーを案内する役割を果たし、知りたい情報へとスムーズに導きます。

カテゴリー毎に色を変える

サイトマップの情報量が多くなりそうな時は、カテゴリー毎に色を変えるのがおすすめです。ひと目で何のカテゴリーのページか判断できます。ただし、使用する色が多すぎると、Webサイトのデザインを崩してしまう危険性があります。デザイン性を損なわないよう、統一感のある色使いを意識しましょう。

階層構造を分かりやすくする

サイトマップの階層構造はわかりやすさを意識しましょう。大カテゴリー、中カテゴリー、小カテゴリーの流れで関連性を持たせることで、ユーザーは下層ページでも求めている情報を見つけやすくなります。

目的に合わせたデザインのサイトマップを作成しよう

サイトマップには大きく分けてHTMLサイトマップとXMLサイトの2種類があります。そのうちデザインが重要になってくるのは、ユーザーの目にとまるHTMLサイトマップです。HTMLサイトマップのデザインには以下の4つのパターンがあります。

• 上から下へと流れるパターン：シンプルでよく見かけるデザイン
• 色分け：カテゴリー毎に色分けし、パッと見てわかりやすいデザイン
• 悩み・目的別：悩みや目的で分類し、求める情報を見つけやすいデザイン
• 画像併用：画像やイラストを併用し、ページ内容をイメージしやすくしたデザイン

HTMLサイトマップのデザインは見やすさ、使いやすさを重視し、それぞれのサイトに見合ったデザインを選択する必要がありますHTMLサイトマップを作成し、ユーザビリティを向上させましょう。