サイトマップ(構造図)の作り方(練習問題)

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階層まで(ホーム - 親ページ - 子ページ)でおさめるのがポイントです。

今回はサイトマップの王道の作り方を説明しました。
サイトマップに正解はないので、作る人によってグループ分けの仕方や親子関係は変わってくるところです。

また、サイトマップは随時見直しすることになります。
サイトを運用していく中で、新しいコンテンツを掲載する親ページを作ったり、アクセス数の多い子ページを親ページ化してみたり、グループ分けを見直してみたり、など改良していくものです。

【無料】WEBディレクションの修練場(練習問題でスキルを磨く)
WEBディレクションの修練場は実戦形式でWebディレクションスキルを磨いていただくためのコンテンツです。全て無料、回答付きです。