サイトマップのデザインの作り方｜参考にしたいサイト8選も紹介

こんにちは。「AIアナリスト」ライターチームです。

サイトマップとは、Webサイトの全体像をわかりやすく表現したマップのことです。自社サイトのサイトマップのデザインを考案する際、他社のサイトを参考にしたいと考えるケースもあるのではないでしょうか。この記事ではサイトマップのデザインのコツなどを詳しく紹介します。ぜひ参考にしてみてください。

目次

• サイトマップとは？
  • サイトマップの目的
  • サイトマップの種類
• サイトマップのデザインはおもに8種類
  1. シンプル型
  2. 階層構造視覚化型
  3. 色分け型
  4. 縦2分割型
  5. グラフィカル型
  6. 説明付き型
  7. カテゴリー別型
  8. 辞書型
• デザインを参考にしたいサイトマップ8選
  1. シンプル型
  2. 階層構造視覚化型
  3. 色分け型
  4. 縦2分割型
  5. グラフィカル型
  6. 説明付き型
  7. カテゴリー別型
  8. 辞書型
• サイトマップの作成の流れ
  • 目的を明確にする
  • 目的のために必要なページをリストアップする
  • リストアップしたページを分類する
  • 分類したページの階層構造を設計する
• サイトマップをデザインする際の6つのコツ
  1. ワイヤーフレームを作成する
  2. カテゴリーを色で分ける
  3. 階層構造における工夫をする
  4. 目的や悩みで分類する
  5. イラスト・写真を入れてわかりやすくする
  6. カテゴリーごとに説明を入れる
• まとめ

サイトマップとは？

サイトマップとは、Webサイトの全体像をわかりやすく表現したマップのことです。サイトマップがあればユーザーに「このWebサイト内にはこのようなコンテンツがありますよ」と示すことができます。

サイトマップの目的

サイトマップの目的は、ユーザーに対してWebサイト内のコンテンツをわかりやすく伝えることです。また、ユーザー以外にも検索エンジンに対してWebサイト内のページを知らせる役割も持っています。サイトマップは、Webサイトの構造や内容を検索エンジンが理解する際の手助けになるため、SEO対策としても役立ちます。

サイトマップの種類

HTMLサイトマップ

HTMLサイトマップとはWebサイトを訪れたユーザーにWebサイトの構造を知らせるためのマップです。HTMLサイトマップという名前の通りHTML形式で掲載されており、Webページをカテゴリー別に網羅できます。

Webサイト内に無数のページがあると、ユーザーはどのページに自分の必要とする情報があるのかわかりません。一方でHTMLサイトマップがあれば、どこにどのページがあるのかわかるため、ユーザビリティの向上につながります。

XMLサイトマップ

XMLサイトマップとは、検索エンジン向けに利用されるサイトマップのことです。プログラミングデータの内容が網羅されており、主にSEO対策を行うことを目的として利用されます。XMLサイトマップを利用すれば、検索エンジンがWebサイトの全体像を理解しやすくなるため、結果的に検索エンジンの検索結果に表示されやすくなるでしょう。

ハイレベルサイトマップ

ハイレベルサイトマップとは、概略を示したサイトマップだと考えてください。Webサイト全体を俯瞰的に見ることができ、コンテンツ同士のつながりやどのページにユーザーを誘導させたいのか示されます。ハイレベルサイトマップを利用すれば、ユーザーの導線把握及びコンバージョン率の向上にもつながるでしょう。

サイトマップのデザインはおもに8種類

ここでは、サイトマップの主なデザインとして8つ紹介します。自社のWebサイトに適したものを選んでみてください。

1．シンプル型

シンプル型のサイトマップは、特に装飾などは施されておらず、カテゴリー別に上から下へページ内容が表示されています。シンプル型は文字だけで構成されているため、コンテンツが増えたとしても追加しやすい点が特徴です。様々なWebサイトで見かけるパターンですが、文字ばかりになると見にくくなるため注意してください。

2．階層構造視覚化型

大、中、小のカテゴリーによって階層構造が別れているサイトマップです。例えば、大カテゴリー「会社について」、中カテゴリー「会社概要」、小カテゴリー「沿革」といった形となります。カテゴリー同士は分類されているため、自分の必要とする情報も見つけやすいでしょう。

3．色分け型

カテゴリーの違いを色で表しているサイトマップです。例えば、会社概要に関するページは赤、採用に関するページは青、自社製品に関するページは黄色といったように、カテゴリー別に色を分けることで、Webサイトを訪れたユーザーは直感的にそれぞれの違いを認識できるでしょう。

4．縦2分割型

その名の通りWebサイトの中央で2つに区切って表示するサイトマップです。構造自体はとてもシンプルですが、左右に区切ることによって、より多くの情報を掲載できる点が特徴だといえます。ページ数が多い場合、コンテンツ数が多い場合などの利用に向いています。

5．グラフィカル型

絵や写真などの画像を使用しているサイトマップです。Webサイトを訪れたユーザーの資格に訴えることができるため、一目見てどのような内容を扱っているのか理解できるでしょう。グラフィカル型は旅館やホテルなどのホームページでよく見られます。

6．説明付き型

ページ内容に関する説明がついているサイトマップです。リンク付きテキストがあり、その下にリンク先の内容の説明が記載されている、というのが一般的な形です。クリックする前に大体の内容がわかるため、目的外のページに飛んでしまう心配がありません。

7．カテゴリー別型

Webサイトにタブを設置しカテゴリー分けをしているタイプのサイトマップです。Webサイトで扱う内容が多岐にわたる場合などの利用に向いているタイプであり、タブを設定し、カテゴリーを分け、そこから詳細ページにアクセスするといった形でユーザーを誘導できます。

8．辞書型

辞書のような形でWebサイトの内容が記載されているサイトマップです。Webサイトによっては、五十音順に表示しているケースもあれば、内容別に並べられているものもあります。大雑把な内容から具体的な内容へと記載されている点が特徴です。

デザインを参考にしたいサイトマップ8選

ここでは、ぞれぞれのサイトマップのデザインの事例について紹介します。実際に企業や団体が使用しているものなので、参考にしてみてください。

1．シンプル型

株式会社ニコンのサイトマップは、文字のみのシンプル型です。カテゴリー別に分けることでみやすい形になっています。

※参照：サイトマップ | ニコンイメージング

2．階層構造視覚化型

早稲田大学のサイトマップは、階層構造を視覚したデザインとなっています。大カテゴリー、中カテゴリー、小カテゴリーが分かれているので、カテゴリー階層がわかりやすいのが特徴です。

※参照：サイトマップ | 早稲田大学

3．色分け型

ひらかたパークのサイトマップは、色分け型となっています。サイト内で使用されているカテゴリーに合わせて色が使い分けられています。

※参照：サイトマップ | ひらかたパーク

4．縦2分割型

シュテルン横浜東のサイトマップは、中央で区切る縦2分割型です。左右に分割することで下までスクロールする必要がなく、情報を探しやすくなっています。

※参照：会社概要 | メルセデス・ベンツ正規ディーラー [新車・中古車] シュテルン横浜東

5．グラフィカル型

鬼怒川温泉あさやホテルのサイトマップは、画像を使用したグラフィカル型となっています。画像を使用することで、ユーザーも一目でどのような内容なのか理解できるでしょう。

※参照：サイトマップ | 鬼怒川温泉あさやホテル【公式】

6．説明付き型

日本郵便株式会社のサイトマップは、説明付き型です。各リンク先の内容が記載されているため、ユーザーが必要としている情報を見つけやすくなっています。

※参照：サイトマップ | 日本郵便株式会社

7．カテゴリー別型

東京医科歯科大学医学部附属病院のサイトマップは、カテゴリー別型で記載されています。病院の利用者別、部門別などに分類されているため、目的や悩み別に情報を探すことが可能です。

※参照：サイトマップ | 東京医科歯科大学医学部附属病院

8．辞書型

エヌ・ティ・ティ レゾナント株式会社が運営するgooのサイトマップは、辞書型のデザインです。「知る」「見つける」「調べる」といった大まかな目的の下に詳細が記載されているほか、五十音順にサービスが記載されています。

※参照：サイトマップ | goo

サイトマップの作成の流れ

ここでは、実際にサイトマップを作成する際の具体的な流れについて解説します。

目的を明確にする

サイトマップを作成するにあたっては、なぜ作成するのか、その目的を明確にする必要があります。具体的な目的としては、問い合わせ数アップや人材獲得などが挙げられます。目的を設定することで「目的を達成するためにはどうすればいいのか」という軸ができ、サイトマップ作りの行動指針となります。

目的のために必要なページをリストアップする

目的が決まったら、目的を達成するために必要なページのリストアップを行います。これは、Webサイト内にどのようなページやコンテンツがあるのかわかるようにするためです。必要に応じて、競合他社のWebサイトをチェックしてみることで、サイトマップに必要なページのイメージがつかめるでしょう。

リストアップしたページを分類する

ページのリストアップが完了したら、ページの分類を行います。この時、どこにも分類できないページや不要なページが出てきたら、それらは省いていきましょう。分類は以下のようなイメージです。分類の際の参考にしてみてください。

分類したページの階層構造を設計する

分類ができたら、階層構造の設計を行います。分類したページのままでは、構成が異なるため、ユーザーにとってわかりにくいものとなります。また、下層ページはユーザーにとって探しにくいものであるため、階層を作ることで見つけやすくもなるでしょう。階層構造の具体的なイメージは以下の通りです。

「採用情報」→「先輩社員の声」→「先輩社員Aの声」

しっかりと階層構造が設計できていれば、ユーザーにとってはより使いやすいサイトマップとなるでしょう。

サイトマップをデザインする際の6つのコツ

ここでは、サイトマップをデザインする際の6つのコツについて解説します。

1．ワイヤーフレームを作成する

ワイヤーフレームとは、各Webページの設計書のようなものです。Webサイトのレイアウトや配置を考える際などに使用されます。ワイヤーフレームがあれば、Webサイトにどのような情報があるのか整理できるほか、サイトマップの作成に取り組むチーム内での認識の擦り合わせにも活用できます。

2．カテゴリーを色で分ける

サイトマップのボリュームが多くなりそうな時は、カテゴリーを色分けすることでみやすくなります。一目見てどのカテゴリーなのか判別できるため、ユーザーの利便性も向上するでしょう。ただし、使用する色が多くなりすぎると、Webサイトのデザイン性を損なうことになるため、配色には注意が必要です。

3．階層構造における工夫をする

階層構造を設計するときは、見やすくするために色分けを行うほか、起承転結を持たせることで、ユーザーにとってよりわかりやすいサイトマップとなります。起承転結とは、「大カテゴリー」→「中カテゴリー」→「小カテゴリー」といった形で関連性やストーリー性を持たせることです。それぞれの関係がわかりやすくなり、全体像も把握しやすくなるでしょう。

4．目的や悩みで分類する

ユーザーによってははっきりとした目的や悩みを持ってWebサイトを訪れてくるため、目的別、悩み別に分類するのも1つの方法です。このような形で分類すれば、Webサイト全体がわかりやすいものになるだけでなく、ユーザーはガイドに案内されているような形で必要とする情報にアクセスできます。

5．イラスト・写真を入れてわかりやすくする

サイトマップにイラストや写真などを挿入しておけば、一目見るだけでどのような内容なのかイメージでき、ユーザビリティの向上につながります。ただし、画像数が多くなるとWebサイトの表示速度が低下する恐れがあります。そういった事態を避けるためにも画像を掲載する際は、圧縮するなどして対応してください。

6．カテゴリーごとに説明を入れる

専門用語を使用している場合、世代によって認識が異なる場合、内容がわかりにくい場合などは、カテゴリーごとに説明を入れることで、わかりやすいものとなります。ただし、説明を入れすぎると、わかりづらく見にくいものとなってしまうため注意してください。

まとめ

サイトマップは、ユーザーや検索エンジンに対してWebサイトの内容を知らせるためのものです。デザインはシンプルなものから、色や画像を使ったものまでさまざまです。自社サイトに適したサイトマップを選んでみてください。サイトマップを足がかりに本格的にSEO対策を行いたい場合は、プロに頼るのも1つの方法です。

「AIアナリスト」は、AIがアクセス解析を⾃動で⾏い、重要な改善ポイントを教えてくれるツールです。これまでに30,000サイトを改善したノウハウで、Webサイトの膨大なデータを分析し、成果を伸ばすための改善ポイントをデータ根拠とともにお届けします。Googleアナリティクスに連携するだけで利用可能で、設定は2分で終わります。まずは無料版からお試しください。

AIアナリストの資料請求はこちら