Webサイトを作成するときに重要なのが「サイトの情報設計」です。コンテンツを増やしたり、デザインやレイアウトの配置にこだわったりする人は多いですが、全体の骨組みやサイトのコンセプト・方向性について考え抜いている人は多くありません。
特にサイト設計を請け負う場合、ディレクションからデザイン、コーディングなど担当する人が異なります。クライアントの求めている成果物はどんなものかイメージを共有するためにも、サイトの情報設計は欠かせません。
目次
色々なサイトマップ
まずはサイトマップの意味と作り方について理解しましょう。
サイトマップとは
サイトマップとは「このサイトの中にはどんなコンテンツがあるのか」を示す図です。「サイト構成図」とも呼ばれています。
サイトマップをあらかじめ作っておくことで、サイトの全体像やボリューム感、各ページに必要な機能が分かります。
以前はサイト全体の利便性向上、検索流入の増加狙いでサイトマップを導入しているサイトが多かったです。しかし、最近はメニューを網羅したフッターなどの登場により、サイトマップを持たないサイトも多く見かけるようになりました。
個人ブログなどであれば、フッターを活用してメニューを網羅するのも悪くありません。ただし、サイト制作を請け負い、制作に複数人が参加するのであれば、事前のサイトマップ作成はまだまだ必須と言えます。
ハイレベルサイトマップとは
ハイレベルサイトマップとは、簡単に表現するとサイトマップの概略版です。サイトマップの構造を大まかに記述し、ユーザーの導線チェックとコンバージョン（購入）率向上が目的です。
ECサイトのハイレベルサイトマップをイメージしてみましょう。商品検索・カテゴリー検索・特集ページなどサイトの大まかな循環を確認します。そして、最終的に商品を購入して欲しい場合、どこに力をいれるべきか明らかにするのがハイレベルサイトマップ作成の目的です。
コンバージョン率向上を考えるのであれば、検索結果の見やすい表示・商品のセールスポイントのアピールが考えられます。
これが通常のサイトマップの場合、ECサイトで取り扱っているコンテンツすべてを網羅しなくてはいけません。大規模なサイトになるほど、ハイレベルサイトマップの導入が不可欠です。
ハイレベルサイトマップは、サイトが購入者にとって見やすく作られているか、見てほしい（購入して欲しい）ページに移動しやすいサイト構造になっているかを視覚的に判断しやすいです。
HTMLサイトマップとXMLサイトマップの違い
HTMLサイトマップは主にサイトを利用するユーザーの「ユーザビリティの向上」を目指して設置されます。サイト内のコンテンツが多岐に渡る場合、サイト内で目的のページにたどり着けず迷子になって離脱してしまうリスクがあります。
しかし、HTMLサイトマップを導入すればコンテンツをカテゴリーごとにリスト形式で網羅することが可能です。
一方のXMLサイトマップは検索エンジン対策（SEO）として利用されています。XMLサイトマップがあれば、検索エンジン（Googleなど）がサイトの全体像を把握できるようになります。その結果、検索エンジンにインデックスとして記録されやすくなり、検索結果に表示させたいページが表示されやすくなります。また検索エンジンが新規ページを検索結果に表示させるようになるまでには、ある程度の時間を要するのが一般的です。しかし、はやく検索結果に表示させたい場合はこちらからWebページが新設・更新されたことをGoogleに通知することができます。それがXMLサイトマップです。
XMLサイトマップは通常、Googleサーチコンソールに送信され、更新ページが早くGoogleに登録されるように促します。
サイトマップの作り方
サイトマップの種類について理解は出来たでしょうか。ここからは、サイト全体の設計を考えるための「サイトマップ」「ハイレベルサイトマップ」 について解説していきます。
サイトマップの作成方法は大きく分けて「サイト構成の決定」「ページの洗い出しとグループ分け・階層化」です。
サイトマップ作成の流れ
本格的にWebサイトを制作・運営するには設計図が欠かせません。サイトの構造が優れているかどうかは。すべてサイトマップの品質にかかっています。
さっそく、どのようにサイトマップを作っていくべきか解説していきます。ここでは主に、これから新規サイトを制作するためのサイトマップ作成方法について解説します。しかし、既存サイトの再構築にもサイトマップは使えるので、ぜひ参考にしてください。
載せるページを洗い出す
Webサイトを作るにあたり、目的を達成するためにはどのようなページを何ページ作るか洗い出しましょう。
ECサイトであればトップページ+カテゴリーページ、商品詳細ページに注文ページなどとイメージしやすいです。しかし、たとえば企業のホームページの場合はどんなページを載せるべきでしょうか。
まずは「トップページ」、ここでサイト全体の印象が決まります。レイアウトには注意しつつ、このサイトにはどんなコンテンツがあるのか一目で分かるようにすると良いです。
他には「会社の紹介」「取り扱っている商品紹介」「採用情報」「問い合わせページ」などが一般的なところです。
載せるページを洗い出すには、まずサイトを作る目的を明確にしなければなりません。目的やビジョンがあやふやな場合は、サイトマップの作成前に「Webサイトを作ってどうしたいか」を明確にしましょう。
ページをグループ分け
ページの洗い出しが完了したら、次はページのグループわけをしましょう。例えば企業のホームページの場合、商品紹介ページや採用情報ページは複数存在するケースが多いです。
商品A・商品Bの紹介ページは「商品紹介グループ」、先輩社員の声や募集要項については「採用情報グループ」といった感じでグループ分けをしましょう。
ページの階層化
複数のページをもつサイトは、一般的にトップページを第一階層として下の階層につながっていきます。「トップページ」→「商品紹介ページ」→「商品Aの紹介ページ」といった感じにつながりがあります。ここで「商品Aの紹介ページ」は第三階層にあたります。
ページの階層化を意識する理由は、トップページから流入してきたユーザーは下層のページを探しづらいからです。サイト内で迷子にならないように、第二階層でカテゴリーごと、第三階層で個別ページ、といった感じで分かりやすいようにしましょう。
サイトマップの完成
ここまで完了したらサイトマップは完成です。サイトの構造が視覚的に分かりやすくなったのが実感できるでしょうか。
サイトマップは一般的に上から下に、ピラミッド型の形になります。構造的に見にくい位置にページが設置されていないか、さらに見やすいサイトを作れないか、日々チェックしましょう。
ワイヤーフレームを作成し、具体的にサイトマップページを作る方法も紹介します。
ワイヤーフレームを作成しよう
ワイヤーフレームは「各ページの設計書」です。サイトマップをもとに、ひとつのページにどんな機能を持たせるかを考えましょう。
たとえばページの上部には常にサイト内検索ボックスを設置する、アイキャッチ画像を指定の場所に挿入する、などです。TwitterやInstagramなどのSNS共有ボタン設置も一般的です。
ワイヤーフレームの作成も、サイトマップと同じ要領で行います。「追加したい要素の洗い出し」→「要素のグループ化」→「要素の順位付け」→「ドキュメント化」といった流れです。
これでユーザーにとって使いやすいサイトを作成する準備が整いました。
HTMLサイトマップのデザイン集
最後に、HTMLサイトマップの主なデザインを紹介します。
繰り返しになりますが、HTMLサイトマップとは、ユーザーが目的のページにたどり着けるよう設置された、サイト全体の地図です。
上記で制作したサイトマップは、いわば開発用の設計図です。実際にサイトに設置するためには、もう少し分かりやすいデザインにしないとサイトマップ本来の役割を果たせません。
ここでは、どこかで1度は目にしたことがあるポピュラーなデザインを中心に紹介します。
シンプル型
シンプル型はその名の通り、装飾などは加えずに「上から下」へ、カテゴリーごとに区切って表示するサイトマップです。
シンプルで分かりやすいですが文字の羅列になってしまうので、コンテンツが増えると少し見にくくなるのが難点です。
色分け型
色分け型は、シンプル型に色を加えてカテゴリーごとの違いを分かりやすくしたモデルです。
シンプルかつ色分けされているので、カテゴリーごとの区切りが分かりやすくなっています。
悩み・目的別型
悩み・目的別型はサポート・ヘルプページでよく見かけます。例えば携帯電話会社であれば、「料金体系について知りたい」「製品が故障した」など大きなカテゴリーに分け、その下に個別のケースを記載して誘導する手法です。
縦二分割型・グラフィカル型
縦二分割型は名前の通り、中央で区切ってサイトマップを表示するデザイン方法です。
シンプル型・色分け型に近いイメージですが、左右で分けることによって大量の情報を表示することができます。コンテンツが多様多種な内容を含んでいる場合におすすめです。
グラフィカル型は写真を使って視覚的に訴えかけるデザインです。温泉旅館のサイトなどで見かけます。
説明付き型
説明付き型は一見すると色付き型サイトマップと似ています。違いとしては、リンク付きテキストの下に「どのような内容を含んでいるページに飛ばされるか」が説明されている点です。
サイトによっては1ページで複数の内容を含んでいる場合があります。リンクの重複を避けるため、「○○一覧」と記載して、下部に説明文を載せると分かりやすいです。これが「説明付き型」というサイトマップのデザインです。
カテゴリー別型
カテゴリー別型サイトマップは、ページ上部にタブを設置してカテゴリー分けします。多種多様なコンテンツを含むサイトは「タブ」→「カテゴリー」→「詳細ページ」という順番でユーザーを誘導すると、分かりやすいサイトマップになります。
辞書型
辞書型サイトマップは、言葉通り辞書のようなデザインのサイトマップです。たとえば検索サイトのように「知る」と書かれたカテゴリーには「ニュース」「天気」などと記載します。
大雑把な概念から具体的な行動を提示しているのが辞書型サイトマップの特徴です。
サイトマップ作成はコストに見合うのか
Webサイトを作成するには、事前にサイトマップを作成してサイト全体の方向性を決定する「情報設計」が欠かせません。
事前に情報設計をせずに、随時必要な機能やページを追加する制作方法だと実際にサイト制作が進んだ段階で大幅なサイトの再設計が必要になってしまうリスクが高くなります。
サイトマップを活用した情報設計は作成の手間がかかりますが、Webサイトの品質向上には欠かせない工程です。事前に「どんなWebサイトを作成したいか」「どんな機能やページが必要になるか」を明確にして、より質の高いWebサイトを作りましょう。
