【Webディレクター】サイトマップの役割や作り方を解説（Googleスプレッドシートの活用）【テンプレあり】

webサイト制作において、ページやコンテンツ構成の可視化に欠かせないサイトマップ。本記事ではサイトマップの意味や役割の解説、作り方の具体的な手順をご紹介します。

サイトマップの意味・役割

サイトマップとは、Webサイト内のページ・コンテンツを一覧化したものです。

はじめてWebサイトを作る際は、サイト内を構成するコンテンツの内容や関連性、ボリューム感などを検討する時に役立ちます。既存のWebサイトでサイトマップがない場合は、サイトマップを作成することで、サイトの方向性の振り返りに役立つでしょう。

例えば旅行に行く際、お金や着替え、電子機器類など、必要なものを構わずバックに詰め込んでいくと、バッグはあっという間に一杯になり、旅行先でも必要なものが直ぐに取り出せず一苦労してしまいます。

ただしこれらを着替え類や電子機器類などに分類したケースで整理することで、旅先で必要なものを直ぐに取り出すことができます。また旅行の目的により持っていく物の種類や量を整理しやすくなります。

このようなことを、Webサイト上ではサイトマップを通して実現できます。

目的に応じてどんな情報をどのように構成して伝えるべきかということを、サイトマップを活用して検討していきましょう。

サイトマップの作成で意識すべきこと

サイトマップ作成の中で意識しておくと良いことをご紹介します。

サイトマップがWebサイトの品質を左右すること

サイトマップは、Webサイト内のページ・コンテンツの構造を可視化するものです。

これは家づくりに置き換えると、部屋の配置や導線を決める設計図に当たります。
住み手が必要としない空間が多かったり、洗濯機置き場と洋服を干すベランダが遠すぎる..など使い勝手の悪い導線などにはあまり住みたくありません。

Webサイトでも同様に、ユーザーはどんな情報を求めているのか、コンテンツをどのように構成すれば回遊性が向上するかなど、サイトマップ作成において読み手側の意識を忘れずに設計を進めることが大切です。

それが大きな見直しの発生を防ぐことにも繋がります。

目標を踏まえて検討すること

サイトマップは、Webサイトのゴールを踏まえて検討することが大切です。

一例として、あるプロダクトを販売する企業のWebサイト制作の場合を考えてみましょう。

この企業はWebサイトのゴールを「導入に関するお問い合わせ」と設定します。
その上でどんなページ・コンテンツが必要か考えると、「TOPページ、プロダクトの紹介ページ、料金ページ、よくある質問、..」などが思い浮ぶかと思います。

このようにページを洗い出すのも間違いではありませんが、その際「Webサイトにアクセスしたお客さんに向けて、どんなページやコンテンツを用意すれば、問い合わせへ促すことができるか」を念頭に洗い出しを行うのが望ましいでしょう。

そうすることで、ページやコンテンツの取捨選択や集約などの整理がし易くなるかと思います。

サイトマップの作成手順（Googleスプレッドシートの活用）

それでは実際にサイトマップを作っていきましょう。

本記事は新しくWebサイトを制作する方向けに手順をご紹介していますが、既存Webサイトのリニューアルや振り返り時での活用も有効かと思いますので、ぜひご参考ください。

①競合調査

まず制作するWebサイトの業種業態に応じて、どんなページ・コンテンツが必要なのかを把握します。

「同じ業種業態のWebサイトがどのようなページ・コンテンツで構成されているか」といった観点で競合調査を行うわけですが、調査対象とするWebサイトは、以下サイト集から十分に収集できます。

■参考になるWebサイトのリンク集

• SANKOU!
• 81-web.com
• S5 Sty!e

それぞれ以下ボタンから該当の業種業態カテゴリーを選択し、参考とするWebサイトを10点以上ピックアップします。

本記事では「保育園のWebサイト制作」を想定して進めていきます。
したがって、「SANKOU!」から参考サイトをピックアップする場合は、メニュー内の「学校･教育･幼稚園･保育園･スクール」を選択します。

②ページの洗い出し

競合調査でピックアップしたWebサイトから、ページの洗い出しを行います。

今回は一例ですので、5つのWebサイトを参考に進めていきます。

まず各Webサイトにアクセスしたら、どんなページで構成されているかを確認しましょう。 そしてそれらのページを次のように書き出していきます。

③ページのグルーピング

次に洗い出したページのグルーピングを行います。

例えば今回の場合、「年間行事」「園の１日」というページ群は、「園での生活」といったグルーピングが出来るでしょう。

分かりやすく色分けすると、次のようにグルーピングしています。

このように複数の競合サイトのページ・コンテンツを洗い出し、グルーピングを行うことで、制作するWebサイトの業種業態に必要なページ・コンテンツが把握出来るかと思います。

④サイトマップの作成

ここまでに準備した情報をもとに、サイトマップの作成を行います。

前のステップで整理したページ・コンテンツを、制作するWebサイトではどのように構成するかを検討しながらサイトマップを作成していきましょう。

今回の例では、次のようにサイトマップを作成しました。

まず「第1階層」はトップページとなる場合が多いでしょう。「第2階層」には、前のステップで行ったグルーピング単位の要素を設定します。そして「第3階層」は各グループに紐づく詳細ページで構成しています。

競合サイトを参考に整理した情報以外にも、「どんな情報があれば良いWebサイトになるか」「どんな階層にすれば使いやすいWebサイトになるか」等の視点を忘れずに、掲載する情報を精査することが大切です。

以上でサイトマップは完成です。
このようにサイト構造を可視化することで、Webサイト制作で必要なページ・コンテンツの指針が明確になったのではないかと思います。

今回ご紹介したサイトマップ作成のテンプレート（Googleスプレッドシート）は、以下リンクからダウンロードできます。よろしければご活用ください。

templete_Sitemap

※ファイル > コピーを作成 からコピーを作成できます。
※本記事の手順で作成した情報を、ご参考として残しています。適宜削除した上でお使いください。

おわりに

サイト構造の可視化にサイトマップは欠かせません。
そしてサイトマップと併せて、各ページの関連性の可視化のために「画面遷移図」も作成することが望ましいです。

画面遷移図の詳しい作り方については、【Web制作】画面遷移図の役割や作り方を解説（AdobeXDの活用）【テンプレあり】にて解説しています。

サイトマップ・画面遷移図の作成含め、Webサイト制作全体の流れについては、【Webディレクター】新人Webディレクターが覚えるべき基本の業務フローにて解説しています。

また下記の記事では「より体系的・効率的にWebディレクションのスキルを身に付けたい方」に向けて、おすすめの書籍やオンラインスクールを紹介していますので、あわせてご覧ください。