ウェブ制作
サイトマップはどうやって作成する？作成方法と便利な作成ツールを紹介します！
Webサイトを制作するにあたって、サイト全体の構成を示す「サイトマップ（サイト構成図）」という資料が作成されます。
サイトマップを作成することで、サイト全体を俯瞰して見ることができ、ページの必要性の確認や導線の整理を行うことができます。
※サイトマップと言えば、「HTMLサイトマップ」や「XMLサイトマップ」を想像される方もいらっしゃるかと思いますが、本記事でご紹介するサイトマップとは、構成図とも呼ばれ、ツリー状になったサイト全体を把握するための資料となります。
サイトマップ（サイト構成図）とは？
サイトマップとは、一般的にホームページを制作する際に全体を俯瞰してみることができる資料や図式のことを指し「サイト構成図」とも呼ばれます。
ページの構成をツリー状に表したもので、トップページを頂点として、各ページがどのようにカテゴリー分けされているのかや繋がりを持っているのかを視覚的に分かりやすくしたものです。
サイトマップの役割とメリット
サイトマップを作成するメリットは、以下の2点となります。
・Webサイト全体を俯瞰してみることができる
・プロジェクトチームと全体像の共通認識が持てる
それぞれ解説します。
Webサイト全体を俯瞰してみることができる
「木を見て森を見ず」という言葉があるように、Webサイトも各ページにこだわり過ぎて、Webサイト全体の構成を見失ってはいけません。
サイト全体の構成や導線をどのようにするのか、あらかじめ決めておくための資料がサイトマップとなります。 サイトマップを通して、サイト全体像を把握しておけば、その後の詳細ページを詰めていく段階でも理解しやすいのではないでしょうか。
プロジェクトチームと全体像の共通認識が持てる
サイトマップを作成しておけば、多人数が関わるプロジェクトにおいて、サイト全体の 共通認識が持てるようになります。
視覚的に分かりやすいサイトマップは認識を合わせるための資料として最適ではないでしょうか。
サイトマップとディレクトリマップとの違い<
「サイトマップ」に似た用途で使用する「ディレクトリマップ」という資料があります。
サイトマップとディレクトリマップは、「サイト全体を把握するため」という意味では、同じですが、次の点について違いがあります。
サイトマップは「ユーザー向け」、ディレクトリマップは「制作者（クリエイター）向け」と考えると分かりやすいかもしれません。
サイトマップの用途
→ユーザー向けのサイトマップ
ディレクトリマップの用途
→制作者（クリエイター）向けのサイトマップ
Webサイト構築をスムーズに行えるようにサイトマップとディレクトリマップの違いを理解しておきましょう。
サイトマップの作成方法
サイトマップは、以下の手順に従って作成していきます。
- 必要ページを洗い出す
- グルーピングする
- ツリー状に整理する（サイトマップに落とし込む）
- 全体を俯瞰して確認する
それでは、実際にサイトマップ作成を簡単に実践していきます。
必要ページを洗い出す
今回は一般的なコーポレートサイトを作成する想定で、必要なページを洗い出していきます。
例えば以下のようなページを洗い出します。
- トップページ
- 会社概要
- 採用情報
- お問い合わせ
- サービス一覧
- サービス詳細（１）
- サービス詳細（２）
- 沿革
- プライバシーポリシー
- 経営理念
- お知らせ
- お知らせ詳細
- ブログ
- ブログ詳細
必要なページを洗い出す前に、競合サイトなど参考にしたいサイトから、どのようなページがあるのかを確認しておくと抜け漏れなく洗い出すことができます。
リニューアルの場合は、現状のサイトのコンテンツに縛られず、理想とするものを洗い出していきましょう。
グルーピングする
洗い出した必要ページをグルーピングしていきます。
- トップページ
- お知らせ
∟お知らせ詳細 - 会社概要
∟経営理念
∟沿革 - サービス一覧
∟サービス詳細（１）
∟サービス詳細（２） - ブログ
∟ブログ詳細 - 採用情報
- お問い合わせ
- プライバシーポリシー
ここまで完成すれば、あとは図に落とし込むだけです。
ツリー状に整理する（サイトマップに落とし込む）
グルーピングしたものを、サイトマップに落とし込んでいきます。
サイトマップを作成するためのツールについては、後ほどご紹介いたします。
全体を俯瞰して確認する
サイトマップをもとに全体を俯瞰して確認してみましょう。
この際にページの追加や変更、削除やページの名称の見直しを行います。
納得のいったところで、サイトマップの完成となります。
サイトマップを作成するツールのご紹介
サイトマップを作成するツールを６つご紹介します。
仕事環境に合わせて、最適なツールでサイトマップを作成しましょう。
- パワーポイント
- Google スライド
- エクセル
- Google スプレッドシート
- Adobe XD
- Cacoo
- Lucidchart
それぞれのツールを簡単にご紹介します。
パワーポイント（PowerPoint）
パワーポイント（PowerPoint）は、Microsoft社が開発・販売している企画書や提案書などの作成ができる「プレゼンテーションソフト」です。
PowerPointを使うと、文字や写真、グラフなどが入った見栄えのするスライドを簡単に作成できます。
PowerPointは白いスライドに自由にテキストや図、写真、グラフなどを配置することができ、また、SmartArt機能の階層構造を利用すると簡単にサイトマップのような図を作成することも可能です。
「Microsoft PowerPoint」公式サイトはこちら
Googleスライド
Googleスライドは、Microsoft社のエクセルと同様に活用できます。
エクセル（Excel）
エクセル（Excel）は、Microsoft社が開発・販売している数値データを扱った「表計算ソフト」です。入力された数値データをもとに、計算、表の作成、グラフの作成ができます。
Excelの表は方眼紙のような見た目で、行を数値、列をアルファベットで表されており、マス目になっているので、ツリー状に配置しやすいツールとなります。
Googleスプレッドシート
Googleスプレッドシートは、Microsoft社のエクセルと同様に活用できます。
Adobe XD
Adobe XDは、WEBサイト・アプリ制作に適したデザインツールです。
主に画面設計（ワイヤーフレーム）やデザインを作成するツールですが、サイトマップも簡単に作成することができます。
UI・UXは「見やすい・使いやすい」といったユーザー目線で開発すること。デザインは「美しい見た目をつくる作業」を意味します。
XDは、webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへの共有を一つのアプリで実現します。デザイナーだけでなくディレクターやプランナーも思い描いたアイデアをすぐにカタチに落とし込めます。
Cacoo
Cacooは、無料でも使えるクラウド型のサイトマップ作成ツールです。
ワイヤーフレーム、サイトマップ、モックアップ図、マインドマップ、フローチャート、室内レイアウトなどが誰でも簡単に作成できます。
Cacooはフローチャート、ワイヤーフレーム、AWS構成図、マインドマップ、組織図などのテンプレートと図形を豊富に用意しています。独自の画像やスクリーンショットなどのアセットを利用することも可能です。
Lucidchart
Lucidchartは、無料でも使えるクラウド型のサイトマップ作成ツールです。サイトマップ以外にも、アイディアや業務フロー、複雑な資料の見える化を通して、チームワークの向上を実現させることができます。ダイヤグラムやチャート、構成図やワイヤーフレーム、インフォグラフィックスの作成だけではなく、リモート環境でもチームメンバーや、プロジェクトメンバーとの同時編集が可能です。
Lucidchart は、ユーザーがプロフェッショナルなフローチャート図を描画し、共有する上で非常に有用なツールです。ブレインストーミングからプロジェクト管理まで、あらゆる用途のデザインに役立ちます。Lucidchart の導入後、より多くの図を、より高い品質で、よりスピーディに作成できるようになったことです。作成する図が増えるほど、より詳細な技術情報を顧客に提示でき、今後の利用に向けて保管できるようになりました。
まとめ
サイトマップとは、Webサイト全体を俯瞰してみることのできるツリー状になった資料で構成図とも呼ばれています。
サイトマップをは、Webサイト全体を図として捉えることができるので、カテゴリー分けや導線などを把握しやすい資料となります。
オーパスプランでは、Webサイトの新規制作やリニューアルする際には、SEOに強いディレクトリを意識しながら「サイトマップ」を作成し、サイト全体の方向性や目的を確認し、プロジェクトを進めていきます。
