WEBディレクションの修練場では、Web制作の現場でよくある課題をこなしながらWebディレクションスキルを磨いていただきます。
今回のお題はサイトマップ（構造図）。
サイトマップ作りはWebディレクターの基本スキル。
サイトマップはサイト立ち上げ時、サイトリニューアル時などに作ることが多いので、しっかりおさえておきましょう。
※「サイトマップ」は、サイト構造図やHTML Sitemap、XML Sitemapなどを指す名前ですが、今回はサイト構成図をテーマに扱います。
お題
クライアント「来月、会社を立ち上げることになったのでコーポレートサイトを作りたい」
クライアントはウェブに詳しくない。
また、その他のサイト要件についての情報は、ない。
そんな中、サイトに必要なページ情報と全体構造の認識を合わせるために、サイトマップを作ってみることにする。
サイトマップは一般的なコーポレートサイトのもので作る。
【今回のお題】
一般的なコーポレートサイトをイメージしたサイトマップ（構造図）を作る。
ヒント
今回は「コーポレートサイト」を作ることが分かっているが、その他に必要なページについての情報が何もなく、時間もない。
そこで、汎用性の高いサイトマップを作ってクライアントに提出する。
回答例
まずはサイトに必要なページをできるだけ洗い出します。
そこからグループ化し、最後にサイトマップにまとめれば完成です。
サイトに必要なページの洗い出し
まずはサイトに必要なページを洗い出します。
ホームがあって、会社案内があって、企業理念、社長メッセージ、アクセスがあって……という風にどんどん書き出していきます。
自分の頭で思いついたものから書き始めて、クライアント企業の同業・競合に当たるサイトなども参考にするといいです。
参考にするサイト数は3～5サイトくらい見れば十分です。
今回は必要ページとしてこんな感じで洗い出してみました。
- ホーム
- 会社案内
- 企業理念
- 社長メッセージ
- 会社概要
- 社員紹介
- 沿革
- グループ会社
- アクセス
- サービス案内
- サービス詳細
- 当社の強み
- 当社の強み詳細
- 導入事例
- 事例詳細
- IR情報
- IR情報詳細
- お知らせ
- お知らせ詳細
- ブログ
- 記事詳細
- 採用情報
- 募集要項
- プライバシーポリシー
- お問い合わせ
同じテーマでグループ化する
サイトに必要なページを洗い出したら、同じテーマのページ群をグループ化します。
「ホーム」はサイトのトップページに当たる1つだけのグループ。
- ホーム
続いて「会社案内」グループ。
- 会社案内
- 企業理念
- 社長メッセージ
- 会社概要
- 社員紹介
- 沿革
- グループ会社
- アクセス
以下、グループ分けが続きます。
「サービス案内」グループ。
- サービス案内
- サービス詳細
「当社の強み」グループ。
- 当社の強み
- 当社の強み詳細
「導入事例」グループ。
- 導入事例
- 事例詳細
「IR情報」グループ。
- IR情報
- IR情報詳細
「お知らせ」グループ。
- お知らせ
- お知らせ詳細
「ブログ」グループ。
- ブログ
- 記事詳細
「採用情報」グループ。
- 採用情報
- 募集要項
「プライバシーポリシー」グループ。
- プライバシーポリシー
「お問い合わせ」グループ。
- お問い合わせ
ざっと、こんな感じになりますね。
親子関係を整理する
ページのグループ分けができたら、グループ内の親子関係を整理します。
これは、最終的にサイトの階層構造を決めるのに使います。
同じグループ内で親は1つだけ、子はいくらでも格納して大丈夫です。
たとえば「サービス案内」グループなら、「サービス案内」が親で「サービス詳細」が子になります。
- サービス案内（親）
∟サービス詳細（子）
すべてのグループの親子関係を整理したものが次になります。
- ホーム
- 会社案内
∟企業理念
∟社長メッセージ
∟会社概要
∟社員紹介
∟沿革
∟グループ会社
∟アクセス - サービス案内
∟サービス詳細 - 当社の強み
∟当社の強み詳細 - 導入事例
∟事例詳細 - IR情報
∟IR情報詳細 - お知らせ
∟お知らせ詳細 - ブログ
∟記事詳細 - 採用情報
∟募集要項 - プライバシーポリシー
- お問い合わせ
サイトマップ（構造図）を作る
最後に、サイトマップ（構造図）を作ります。
サイトマップはサイト全体の階層構造が分かるように作ります。
このとき、「ホーム」がサイトの最上位の階層（第1階層）、親（第2階層）、子（第3階層）となります。
サイトマップを作るためのツールはどんなツールを使っても大丈夫です。ただ、サイトマップファイルをみんなが見れて、編集もできるツールを選んでおくと何かと便利です。
→パワポ（Googleスライド）やExcel（Googleスプレッドシート）などの定番のツールを使うといいです。
パワポ（Googleスライド）とExcel（Googleスプレッドシート）に迷ったら、Excel（Googleスプレッドシート）のほうがページの増減やグループの入替などが楽なのでおすすめです。
Googleスプレッドシートでサイトマップ（構造図）を作る
今回はGoogleスプレッドシートで作ります。
A列にページ一覧を、B列に親になるページを入力します。
入力したデータを全て選択して、挿入→グラフを選択します。
グラフエディタでグラフの種類「組織図」を選択。
これで完成です。
サイトマップを画像で保存したものがこちら↓
サイトマップ テンプレート（スプレッドシート）をダウンロードする ※「ファイル」→「コピーを作成」でコピーしてお使いいただけます
完成！
これでお題クリア。
おつかれさまでした！
サイトマップ（構造図）の作り方に関する補足
サイトマップが完成したら、クライアントに見せてサイト構成を確認します。
ページの過不足がないか、グループ分けは適切かなどを確認しましょう。
今回の回答例のように、サイトマップは始めの段階ではあまり絞り過ぎない方が良いです。
後からページを増やすのはもちろんできますが、ページ内容によってはグループ分けが変わる可能性があり、URL構造が変わるなど、面倒になります。
始めの段階でサイトの全体像を把握し、グループ分けしておくのがコツです。
また、サイト構造は階層を深くしすぎないことです。
これはユーザーの使い勝手が悪くなることや、クローラーに見つけてもらいにくくなるためです。
できるだけ第3階層まで（ホーム - 親ページ - 子ページ）でおさめるのがポイントです。
今回はサイトマップの王道の作り方を説明しました。
サイトマップに正解はないので、作る人によってグループ分けの仕方や親子関係は変わってくるところです。
また、サイトマップは随時見直しすることになります。
サイトを運用していく中で、新しいコンテンツを掲載する親ページを作ったり、アクセス数の多い子ページを親ページ化してみたり、グループ分けを見直してみたり、など改良していくものです。
