サイトマップ~ホームページ・Webサイト制作に必須のツール

テクノロジー

ホームページ、Webサイト制作の現場で、目標やコンセプトなど大枠の企画ができたら、もっと具体的な設計図をかいていきます。

今回は、Webサイト制作の設計段階で必ずつくる基本の資料として、「サイトマップ」を紹介します。

サイトマップとは

サイトマップは、Webサイトの制作で、必ず作成する資料です。

作りかたはものすごくカンタンで、1ページ1個と考えてページの役割やタイトルを書き、それを組織図っぽく線でつないでいくだけです。

サイトマップの例

先頭は、ほとんどの場合「トップページ」となります。

次に、トップページを1回クリックして出てくるページを並べます。これを「第2階層」と呼びます。

また、左から右に流れていくパターンと、上から下に流れていくパターンがあります。企画書の紙やパソコンのディスプレイが横長であるため、横向きがよく使われます。

ただし、昨今のトレンドとして、第2階層のページを増やして階層を浅くする傾向があり、その場合は、上から下に流れていくほうが全体として横長の図になります。ケースバイケースでわかりやすいほうを選んで表現しましょう。

最近のWebサイト制作の依頼は、リニューアルが非常に多いです。

つまり、たいていの場合既存のWebサイトがあって、それが古くなって問題が多くなってきたので作り直す、という仕事の比率がかなり増えています。リニューアルの場合は、既存のサイトマップを書いて、これがどう新しくなるのか、つまり、新旧のサイトマップを書いて並べる必要があります。

サイトマップ、サイトツリー、サイトフロー

サイトマップは、サイトツリーと呼ばれたり、サイトフローと呼ばれたりすることもあります。それぞれに微妙なニュアンスの違いがあります。

サイトマップは、いわゆる「サイトマップページ」というWebサイト全体のページ一覧を指すこともあります。事例として、総務省のサイトマップページをあげておきます。

総務省|サイトマップ
総務省ホームページのサイトマップを掲載しています。

ただし、最近はこういうページを別に作らず、フッタにサイトマップページの機能を入れてしまうことが多くなっています。ユーザービリティ、つまり、どのページからでも行きたいところを選べるというユーザーの使いやすさの面と、Webサイト内部のリンクがSEO的に有利と言われていることの2つの理由があります。

「サイトツリー」は他に意味があまりないため、こちらを好んで使う現場もあります。図がツリー状であることから命名されているので、トップページを一番上にして上から下に階層をつくる図を書きたくなります。

「サイトフロー」と言う場合は、フロー図というニュアンスが出るので、ユーザーがどう動くかを重視した図になることがあります。各ページを結ぶ線に矢印をつけたくなる感じです。Webサイト全体を表すというよりは、ユーザーの見る画面はこの順番、というのを表現することを強調しています。業務システムなどであれば業務フローを表す感覚で出てくるページをまとめていくこともあります。

ディレクトリマップ

Webサイトの大規模化にともなって、「サイトマップ」に加えて「ディレクトリマップ」という資料が作られるようになりました。

サイトマップはユーザーの見た目に合わせて、適度にまとめられたり省略して書くことが多いのですが、ディレクトリマップは制作現場のための技術資料の色合いが強くなります。

ディレクトリマップはすべてのページを一覧表として書き下し、タイトルやパス名、METAタグの内容を管理したりする目的で使われます。

サイトマップをかくツール

サイトマップを描くツールとして、おそらくもっともよく利用されているのが「Excel」です。見た目を調整する自由度がかなりあり、あとからいろいろなことを言われても対応できるためです。しかし、もともとフロー図をつくるソフトではないので、生産性が高い感じはあまりしません。

WordやPowerPointには、「スマートアート」という機能の中で組織図っぽい図を選ぶことができ、テキストを打ち込んでいくだけで比較的カンタンにサイトマップが作れます。

マインドマップ系のツールも利用できます。こちらはもともとフロー図をつくるためのツールなのでかなりのスピードで作れますが、印刷したり企画書に入れたりするときの見た目の自由度がおおむね低く、制作現場ではあまりつかわれていない印象です。

まとめ

Webサイト制作のディレクションに必須のツール「サイトマップ」の基本的な知識を紹介します

お役に立てば幸いです。

コメント