背景画像
BLOG

ブログについて

サイトマップ(構成図)を作ろう

2021.05.11

制作
入門

サムネ画像

こんにちは、クリエイティブ制作部です。

今回の制作ブログは「サイトマップ(構成図)を作ろう」です。
サイト制作する際、その前に取り掛かる作業としてサイトマップを作成します。
しかし、ド初心者で入社した私のような者にとっては、「そもそもサイトマップとは何ぞや」と思いがち…。ですので、すでにお分かりの方もいらっしゃるとは思いますが、サイトマップの必要性や作成方法についてお話しさせていただきます。

サイトマップとは

サイトマップとは、サイト内のコンテンツや階層、ページのつながりを図に表した資料です。「構成図」とも呼ばれます。下記のイメージ図は自社サイトのサイトマップです。
きれいなサイトマップを作成することで、クライアント様や制作チームとの意識合わせがスムーズに進み、実際にサイト制作する際も作業に取り掛かりやすくなる重要な役割を持っています。

画像1

サイトマップの必要性

サイト全体とコンテンツの導線の確認ができる

サイトマップがあれば、サイト全体の構成やどんなコンテンツがあるのか、そしてサイトのボリュームも一目で確認することができます。サイトの全体像を把握することで、その後の詳細ページを詰めていく作業もスムーズになります。

制作チームやクライアント様とサイト全体像の認識のずれを避けられる

サイト制作に取り掛かる前にサイトマップを作成しておくことで、チームはもちろん、クライアント様との認識相違を防ぐことができます。また、全体の情報を俯瞰してみることができるので、足りない情報に気づきやすく、ミスを減らすことにもつながります。

サイトマップの作り方

では、サイトマップの作り方をご紹介していきます。
今回は自社サイトを例に作成していきたいと思います。

サイトマップは以下の手順で作成していきます。
1.必要なページを洗い出す
2.ページをカテゴリ別に分ける
3.ページの階層を決めて図に落とし込む

ちなみに、私は吉野さんのブログでもご紹介された、AdobeXDを使用していつも作成していますが、ExcelやPowerPointなどでも作成できます。調べると他にもいろんなツールが出てきますので、ぜひ使いやすいツールで作成していただければと思います。

1.必要なページを洗い出し

まず、サイトに必要なページを以下のように洗い出していきます。今回は自社サイトを例に作成していきますが、採用サイトやコーポレートサイトなど目的のサイトによって必要なページは変わってきます。また、新規のサイト制作とサイトリニューアルの場合でも少しやり方が変わります。新規サイト制作の場合は、思いつくページを洗い出しながら、ページに抜けが出てしまわないよう他社企業のサイトを参考にして洗い出していきます。サイトリニューアルの場合は、既存サイトを参考にしてページを洗い出します。そこからページの見直しや変更をし、全体を整理していきます。

画像2

2.ページを内容別に分類する

先ほど挙げたページを内容別に分類していきます。
例えば、「マーケティング部広告運用」「マーケティング部データ解析」「クリエイティブ制作部」「営業本部」「業務内容」は業務についての内容なので一つにまとめます。
「お問い合わせ」や「プライバシーポリシー」などの独立しているページは、ひとまず「その他」でまとめてしまいます。

このようにページの内容別に分類していくと、自社サイトの場合は以下の4つにまとめることができます。

画像3

3.ページの階層を決めて図に落とし込む

ページを分類したら、階層を決めてツリー状の図に落とし込んでいきます。
考え方として、第一階層はトップページになります。第二階層はトップページから1クリックで飛べるページ、第3階層はトップページから2クリックで飛べるページ、とイメージしていただくとわかりやすいのではないかと思います。
では先ほど分類したページに階層を決めて図に落とし込んでいくと、以下の画像のようになります。最後に、作成したサイトマップ全体を確認し、抜けているページがないか確認します。確認できましたらサイトマップの完成です。

画像4

サイトマップを作る際のポイント

クライアント様にも見せる大切な資料ですので、分かりやすく、かつ見やすいサイトマップを作る必要があります。そこで、いつも私が見やすいサイトマップを作る際に意識しているポイントを紹介させていただきたいと思います。

体裁を整える

図形の長さを統一したり、縦と横で図形がずれたりしないように整えることを意識しています。小さなことかもしれませんが、以下の画像のように比べてみると体裁を整えるだけで見やすさは変わってくると思います。

画像5

階層別に色を分ける

サイトマップは一目見たときに、各ページのつながりや階層がわかりやすいというのも、役割の一つになります。階層ごとに色を変えることで、より分かりやすいサイトマップになります。

画像6

最後に

今回は、サイト制作する際に重要なサイトマップについてお話ししました。
サイトマップがあることでサイトの全体像を把握することができます。専用のツールでなくとも、ExcelやPowerPointからでも作成することができます。サイトマップを作成する際に少しでもこちらのブログを活用していただけたらうれしいです。
最後までお読みいただきありがとうございます。
また次回もよろしくお願いいたします。