第45回　サイトマップの代表的な三つの型とそのバリエーション

　今回は，サイトマップについて考えてみます。実はサイトマップの定義は余り明確ではなく，プロジェクトや開発部隊によって，その意味するところは微妙に異なるように思えます。ただし，本来の目的は，ほぼ一致していて，「プロジェクト全体を俯瞰する」ために存在すると言ってもいいように思えます。代表的な三つの型とそのバリエーションの例を示していきます。

サイトマップ基本形三種

　サイトマップは，その構造から，大きく三つに分けられると思います。

　一つ目は，階層型（hierarchy[階層]から「Hiermap」と略したりします）。二つ目は，2.5次元型（三次元の表示ではないけれど，平面的ではない立体的な描画方法を採っているもの）。そして，（同心）円状にページを配置した同心円型です。

　これは構造上からの分類で，用途別に分類したりする方法も存在しますが，「定説」的なものが見当たらないので，ここではこの三つの分類で話を進めます。

　階層型は主に開発の現場で多く見られるタイプです。ページ間で受け渡されるパラメータなどをページの横に記したりしやすく，上から下に流れるものは，プログラムの構造的な記述と近いせいかもしれません。

　2.5次元型は，主にクライアントに説明する際や，サイトの構造を印象として強く残したいときに活用されます。通常はサイトが完成してから，わかりやすく説明する場合に用いられるように思います。

　同心円型は，人間が記述するというよりも，プログラム的な「解析」作業があって初めて成立するものです。辿りつくのに必要なクリック数を同心円としてとらえて，サイト全体の深さやページの分布を示すことができます。

サイトマップ：階層型（hiermap）

　階層型のバリエーションは，少なくとも3種類あります。一つ目は横型（左）にしたもの，そしてもう少し「図形色」を減らして，Excel的にしたもの（中）。そして，Webサイト自体に掲載される，「索引」的な意味で用いられる，言葉によるもの（右）です。

　情報構造の俯瞰（鳥瞰）に用いられるのが基本要件であり，サイト構造をキチンと理解している人が，詳細情報をまとめるための資料（あるいは，チェックリスト系）か，逆にほとんどサイトに関する知識のない人への一番簡単な概要説明に用いられることが多いと思います。

サイトマップ：2.5次元型（sitemap）

　2.5次元になると，もう少し表現の幅が広がるので，立体的な描写で，様々な情報をわかりやすく示すことが可能になります。なので，クライアントや，チーム全体の共通意識（共通概念）を形成するのに使われることが多くあります。あくまでパラメータの流れなどの詳細情報ではなく，ページ間のつながりや，ページ群同士（通常は同一ディレクトリー内のものなど）の関係など，「関係性」を描くと言ってもいいかもしれません。

　下図は，サイト全体の情報構造をディレクトリっぽいもので分類しながら，ページのボリュームと，大まかな導線を示したものです。このような図が常に有効だとは言えませんが，ツボにはまれば，共通意識を持つことが非常に楽になります。ただし，お気づきの通り，この図を描くこと自体に労力が要りますので，余り更新できない（しない）という前提で運用する必要があります。

　次の図は，ペルソナ的な，プロフィール毎に異なる経路を示した例です。赤と緑の二つのタイプのユーザーが，どのようにサイトを巡って，最終的な「処理フロー」に落ちていくかを検証する材料として使ったりします。サイト全体像が見えてきても，ユーザーの視点に立って，どのように情報を辿っていくのかを仮説を立て検証していくプロセスで活用します。具体的に経路の線が視覚化されると，本当にそのページを辿っていって，ユーザーが満足するのかを，具体的な感覚で検証しやすくなるためです。また，こうした検証が，クライアントに対して説得力を持つ場合も多々あります。

　次は，2.5次元だからという訳ではないのですが，階層型よりも説得力があったように思えた例です。これは実際に存在したi-Modeサイトの解析結果をこの型にしたものですが，ご覧のとおり1カ所だけ階層が深い部分があります。これがCGIで延々と並んでいるページで，ユーザーに入力をしていただくページ群でした。しかし，この図を見せられると一目瞭然ですが，これだけの深い階層をパケット代を払って（当時はまだ上限があるサービスが珍しい時代），最後まで辿り着くのはかなり厳しいものがあります。この部分の改修をしたくて，クライアント用の説明ドキュメントを用意したのですが，この図を一目見ただけで，クライアントはその提案に同意しました（と友人から聞きました）。視覚化情報の持つ，雄弁さを実感した瞬間でした。

　さらに下の図は，ページの構造図の上に，アクセスログなどの数値データを重ね合わせたものです。並列に棒グラフを並べたものや，直立に並べたものですが，臨機応変に使い分ければ，処理の負荷分散や，ユーザーが逃げ出すターニング・ポイントなどを視覚的に表現できます。

サイトマップ：同心円型（circlemap）

　同心円状型の最大の利点は，どんなにサイトの規模が大きくなっても，ある面積以内で収めて表現できるという点です。上述の階層型や2.5次元型では，ページ数が増えれば，必然的に横に伸びていくことになり，ある規模を超えると，もはやページとして認識できないという欠点を持っています。

　しかし，同心円型では，ここのファイル名などは最初から重なることがわかっているので，そうした詳細情報を見る場ではありません。作りこんでいったWebサイトを，第三者的な視点で見つめ直してみる，というイメージで俯瞰するという感覚かもしれません。

　ですので，必然的に，主観的な位置情報が入るのは余り好ましくないのかもしれません。様々なアルゴリズムでこうした表現をすることは可能ですので，好みのものを探してみては如何でしょうか。また，こうした表現も手軽に実現できるようなWebサイト表現が，今後ますます広がっていくことも期待したいものです。

　HTMLコーディングやグラフィック製作というスキルのみではなく，こうした誰かに説明するというスキルも，Webデザイン エンジニアリングには必要となるスキルです。より説得力のある資料が，容易に準備でき，加工できることも，Webサイトを効率的に高品質で作り上げることに役立つものです。クライアント，エンジニア，デザイナ，そうした異業種の人間たちが，エンドユーザーとの理解を求めて，一つのWebサイトを構築していくのですから。

（参考）

• Ridual
• OpenRidual

三井 英樹＠ ビジネス・アーキテクツ / 日刊デジタルクリエイターズ
Webデザイン エンジニアリング目次