Webサイトを制作する時に、Webサイト全体の構成を整理するためにサイトマップというものを作ります。サイトマップはその名の通り、Webサイトを視覚的に表した地図のようなもので、サイトマップがあるとWebサイト制作がスムーズになります。
しかし、サイトマップを作ったことがないと下記のような疑問が出てきませんか？
・そもそもサイトマップって何？
・サイトマップはどのような手順で作るの？
・どんなツールを使ってサイトマップを作ればいい？
本記事ではサイトマップとは何か？を説明してから、サイトマップの作り方を初心者でも分かるように順を追って解説します。また、サイトマップを作る上でのおすすめツールや気をつけるべきポイントも合わせてお伝えします。
目次
サイトマップとは何か
サイトマップはWebサイトのページ構成をツリー状に可視化したものです。Webサイトの各ページがどのように連なっているのかを視覚的に理解できるため、Webサイトの地図のようなイメージに近いでしょう。
トップページを頂点として、そこに様々なページを連ねていきます。
下記は会社ホームページのサイトマップのサンプルになります。
トップページの下にグループ分けされた大項目が連なっており、その下にグループに属したページが存在します。
なぜ必要か
サイトマップを作る目的は、大きく下記の2つです。
・制作するページの抜け漏れを防ぐ
・プロジェクトメンバー全員で共通認識を持つ
制作するページの抜け漏れを防ぐ
サイトマップを作ることで、制作するページの抜け漏れを未然に防ぐことができます。特に大規模サイトになればなるほど抜け漏れは発生しやすくなるため、サイトマップは不可欠です。
サイトマップがなければ、本来作る必要があったページを作っていないことに後から気づき、納期遅れが発生してしまいます。複数ページの抜け漏れが起きるとグループ分けから考え直す必要が出てくるかもしれません。
このように、抜け漏れに気づいた時の代償は思っているよりも大きいのです。
サイトマップを作れば、事前に全てのページを洗い出してから制作に取り掛かることができます。
プロジェクトメンバー全員で共通認識を持つ
サイトマップが1つあれば、プロジェクトメンバーが困った時にサイトマップを見ることで認識の統一を図れます。
逆にサイトマップがない場合、各メンバーが責任者にサイトの構成を都度確認する必要が出てくるため、コミュニケーションコストが増えます。また、サイトの構成を当初から変更した時に共有漏れが起きて、人によって認識の相違が発生する可能性があります。
サイトマップを作る手間はかかりますが、後々のコミュニケーションコストを考えるとコスパはいいはずです。
いつ作るのか
必ずWebサイトの制作に取り掛かる前に作ります。Webサイトを作ることが決まり、目的やターゲットが決まったら作り始めましょう。
サイトマップができたら、次は各ページのワイヤーフレームの作成に取り掛かります。
誰が作るのか
Webサイトの企画を担当する人が作ります。Webディレクターやマーケターが一般的には多いのではないでしょうか。この人が作らなければいけないという決まりはないので、サービスの企画担当になっている人が作りましょう。
重要なプロジェクトの場合は、プロジェクトのリーダーや責任者が作る場合もあります。
サイトマップの作り方
サイトマップの概要を掴めたところで、ここからはサイトマップの作り方について順を追って解説していきます。
手順は下記の3つです。
STEP1. 必要なページを洗い出す
STEP2. カテゴリー分けをして、カテゴリー名を決める
STEP3. マインドマップツールを使って情報を整理する
手順は多くなく、慣れればスイスイ作れると思います。
今回は、冒頭でお見せした会社ホームページのサイトマップを作りながら解説を進めていきます。
STEP1. 必要なページを洗い出す
まず最初にやるべきことは、Webサイトに必要なページの洗い出しです。ポイントはカテゴライズのことは考えずに、とにかく必要だと思うページを書き出すことです。
書き出すものは紙でも、Googleドキュメント / Microsoft Wordのようなドキュメントツールでもいいでしょう。自分のスタイルに合ったものを使用すればOKです。
下記のように箇条書きで書き出していきましょう。
・会社概要
・代表挨拶
・採用ページ
・沿革
・お問い合わせ
・サービス紹介ページ
・プレスリリース
・理念・ビジョン
・募集職種
・私たちについて
・福利厚生制度
・公式ブログ
・お知らせ
・プレスキット
・グループ会社の情報
・経営陣紹介
どんなページを作ればいいのか分からないという方は、他社のサイトを見るといいです。5~10サイトくらいを眺めると、自社にはどんなページがあるといいか想像できるようになります。
STEP2. カテゴリー分けをして、カテゴリー名を決める
ページの洗い出しが完了したら、次はカテゴリー分けを行います。カテゴリー分けとは特定のテーマごとにグルーピングするということです。
サイトマップはツリー状に作っていくので、トップページの直下の階層になるものがカテゴリーになります。
完成したサイトマップで言う下記の部分を決めます。
また、カテゴリー分けすると同時にカテゴリーの名称も決めましょう。
今回の例では、下記のようにカテゴリーを作れそうです。
・会社情報
・サービス紹介
・採用情報
・ニュース
カテゴリー名称が決まったら、STEP1で洗い出したページがどのカテゴリーに属すのかを割り当てていきます。
この時、追加で必要だと思うページを追記したり、不要だと思ったページを削除する作業も並行して行いましょう。
各ページをドキュメント上でカテゴライズしたものが下記です。
私たちについて
会社情報
・理念・ビジョン
・会社概要
・代表挨拶
・グループ会社の情報
・経営陣紹介
・沿革
サービス紹介
・サービス名1
・サービス名2
・サービス名3
採用情報
・社長メッセージ
・募集要項
・社員の声
・福利厚生制度
・公式ブログ
・よくある質問
ニュース
・プレスリリース
・お知らせ
・プレスキット
お問い合わせ
ここまでくればほとんどサイトマップはできたも同然です。あとは、この情報をプロジェクトに関わるメンバーが見やすくするために、マインドマップツールに移行します。
STEP3. マインドマップツールを使って情報を整理する
サイトマップを作るにはマインドマップツールがおすすめです。理由は、簡単にツリー状のビジュアルを作れるからです。
STEP2までで作成した情報をそのままマインドマップツールに移行しましょう。
移行すると下記のようになり、サイトマップの完成です。
Webサイト制作を進める中で、ページを追加したり削除したりする場合は、サイトマップも編集します。なぜなら、このサイトマップがプロジェクトメンバー全員の共通認識となるため、常に最新の状態を保っている必要があるからです。
このように、サイトマップを作ることは難しいことではありません。費やした労力の割には、プロジェクトを進める上では重要な要素になるため作っておくことをおすすめします。
サイトマップを作るのにおすすめのツール
サイトマップを作るにはマインドマップツールがおすすめと話してきましたが、一推しはMindMeisterです。これまでの例で説明してきたサイトマップもMindMeisterで作ったものです。
数あるマインドマップツールの中でも無料で使えて操作性が高いと感じるからです。
また、他者とも共有できるためチームで使う際にも重宝します。
その他のマインドマップツールとしては下記があります。
・XMind
・MindMup
・GetMind
・Cacoo
結局は自分が使いやすいと感じるかが一番大事なので、迷っている方はいくつかのマインドマップツールを触ってみてしっくりくるものを使うといいでしょう。
サイトマップの事例
会社のホームページのサイトマップを作る過程は見てきましたが、他にもWebサイトには様々な種類があります。参考までに、サービスサイトや採用サイトのサイトマップの例もご紹介します。
サービスサイトの例
サービスサイトはサービス内容によって必要なページが異なるので一概には説明できませんが、今回はBtoB向けの業務システムのサービスサイトを想定してサイトマップを見てみましょう。
BtoBサービスの場合は、システムの機能や企業ごとの使用用途、導入事例を厚めにすることが多いです。
採用サイトの例
採用サイトは単に募集中の職種情報を掲載するだけでなく、会社の魅力や会社の中で働く人の魅力を求職者に知ってもらう必要があります。
また、会社の求める人物像にマッチする人材にエントリーしてもらうようにWebサイトを作っていくことも重要です。
募集職種の情報を掲載することはもちろんのこと、会社の中の様子や働く環境も厚めに伝えることが多いでしょう。
サイトマップを作る際のポイント
最後に、サイトマップを作る際のポイントを3つだけお伝えします。
・コンテンツの重複がある場合はページを統合する
・階層を深くし過ぎない
・必ずフィードバックをもらう
コンテンツの重複がある場合はページを統合する
むやみやたらにページ数を増やせば良いというものではありません。自分たちが作りたいページを作るのではなく、ユーザーにとって必要なページか？、読みやすいサイトになっているか？ということが大切です。
もし、ページAとページBのコンテンツが重複しているのであればどちらか一方を削除して統合することを検討しましょう。
コンテンツの重複はユーザーを迷わせる要素になってしまうからです。
階層を深くし過ぎない
階層が深くなればなるほど、ユーザーは情報を見つけ辛くなります。ページが見つけられないとページを作成した意味がありません。
よほど大規模なサイトでない限り、多くても3階層程度までで収めることを推奨します。
一度、Webサイトを公開してページがあまり見られていないことが分かったら、階層を浅くするなど改善を試みましょう。
必ずフィードバックをもらう
Webサイトの構造はサイトマップで決まるので、作成したサイトマップは必ずフィードバックをもらいましょう。
あなたがサイトマップを作る場合は、上司に加えてプロジェクトメンバーにも確認依頼をすると良いです。自分では気付けなかった抜け漏れや気づきを得られて、より質の高いサイトマップに仕上がります。
内容のまとめ
- サイトマップとはWebサイトのページ構成をツリー状に可視化したもの
- サイトマップを作る目的
- 制作するページの抜け漏れを防ぐ
- プロジェクトメンバー全員で共通認識を持つ
- サイトマップは必ずWebサイトの制作に取り掛かる前に作成する
- サイトマップは一般的にWebディレクターやマーケターが作ることが多いが、この人が作らないといけないというルールはないため、サービスの企画担当になっている人が作る
- サイトマップの作り方
- STEP1. 必要なページを洗い出す
- STEP2. カテゴリー分けして、カテゴリー名を決める
- STEP3. マインドマップツールを使って情報を整理する
- サイトマップはマインドマップツールを使って作るのがおすすめで、一推しは無料で使えて直感的に操作できるMindMeister（マインドマイスター）
- マインドマップツールはたくさん種類があるので、迷っている場合は複数のツールを触ってみて自分に合ったものを選ぼう
- サイトマップを作る際のポイント
- コンテンツの重複がある場合はページを統合する
- 階層を深くし過ぎない
- 必ずフィードバックをもらう
