第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」のWebSiteExpertに掲載頂いた記事原文です！

1. WebSig会議とは？
「WebSig24/7（ウェブシグ トゥウェンティー
・
フォーセブン） 」はWebに関連する市場の健全な
発展を通じて， 私たちWeb 屋，顧客，そしてネッ
トユーザが幸せになろうというビジョンのもと
2004年から活動している任意団体です．毎回レ
ポートをお届けしている「WebSig 会議」は私た
ちのメインの取り組みであり，旬なテーマでの講
義と参加者のグループワークを組み合わせた隔
月イベント．Ustreamでビデオ中継を見ながら そしてその表現方法も人によって異なり，コ
Twitterで話し合える「セミッター」を使い，講 ミュニケーションの非効率を招いています．顧客
演資料を公開するなどして可能な限りオープンに とのコミュニケーションにおいても同様でしょう．
しています． 顧客はドキュメントからWebサイトの構造を想
最近では「WebSig 会議を大阪で見ようの 像しなければなりません．プロジェクトの責任者
会 」が自主 開 催され（ 主 催：Re:Creator’s であれば，上司などのステークホルダーに説明す
Kansai），今回のイベントでも「札幌でも見る会 る必要もあります．
をやりたい」という声をTwitter 上でいただくな Webサイトの多様化・進化に対応したサイト
ど東京圏以外にも広がっています．こういった活 マップの記述内容の洗練や，記述方法の標準化
動はぜひサポートしていきたいと考えていますの が必要な時期なのかもしれません．標準の確立
で，興味があればご連絡ください． は，質の高いWebサイトを効率的に制作するこ
とにつながるはずです．
そこで今回のイベントでは，参加者みんなで話
今回のテーマは「サイトマップ」 し合ってよりよいサイトマップをつくるアイディ
アを見出し，“理想的なサイトマップ”の制作を
Webサイトの構造を表わす資料である「サイ 試みることにしました．
トマップ」は，制作ドキュメントとしてはポピュ イベントの趣旨から，WebSig 会議としては初
ラーなもので，この仕事に関わっている人であれ の「ゲストスピーカーなし」 「参加者に重めの事
ば何らかの形で触れたことがあるでしょう． 前提出物をお願いする」という試みを敢行しまし
一方，現在のサイト構築現場では，Webサイ た．元々 WebSigでは商業セミナーのような“有
トの規模拡大，CMSの導入によるコンテンツと 名講師ありき”ではなく，テーマの必然性からゲ
テンプレートの分離，ファセット型データ構造の ストを決めてきましたが，今回は「参加者みんな
採用，LPOなどと関連した多様なサイト内動線 で」というアプローチにこだわったのです．そし
への配慮，動的コンテンツの導入などにより，単 て参加者に (1)参加者が仕事で実際に制作した
純にページ名をツリー構造で示すだけでは全容 サイトマップ，(2)サイトマップについて感じてい
を捉えづらくなっている感があります． る疑問・問題リストを宿題として提出してもらい，
2009年8月29日に東京渋谷で行われた第24回WebSig会議「100人で
考え 理想的なサイ マ プの形と標準書式」 レポ ト
る， ト ッ の ー をお届け まし す．
TEXT
中野 宗 NAKANO Hajime
株式会社アークウ ブ取締役副社長，
ェ WebSig24/7モデレーター，
WebSigエコ ピース代表
＆
60 ● WebSite expert #26

2. 理想的な
「100人で考える、
第24回WegSig会議
サイ ップの形と標準書式」 ベン
トマ イ トレポート
それを入念に検討して当日の進行を決めていきま 前にモデレーターが長い時間をかけて整理を
した． 行った際，「そもそもサイトマップとは何か」と
いう定義・前提条件に対する疑問が多く出てい
ることに気づきました．以下のようなものです．
第一部：サイトマップに
ついての疑問をまとめてみよう
・ サイトマップといっても，顧客との確認用なの
当日の発表資料は，プレゼンテーション共有 か受注側の進行管理に使うものなのかなど，目
サービス「SlideShare」でご覧いただくことが 的によって内容が変わるのでは？
できます． ・ 案件規模によってサイトマップのあり方は変わ
るのではないか
Slideshare 第24回WebSig 会議一部資料 ・ 論理構造と物理構造が混在してしまうケース
http://www.slideshare.net/websig/24websig1 がある
・ サイトマップ作成の段階で，各ページのラベリ
第一部では参加者の事前課題を整理した「サ ングも盛り込むべきだろうか？
イトマップの疑問・問題」の提示と，参加者の ・ サイトマップは全体の構成を確認するという目
サイトマップのレビューを行いました． 的があるが，各ページの内容がわかってこそ全
「サイトマップの疑問・問題」については，事 体の構成のよしあしが判断できる．サイトマッ
プだけでは顧客に伝わりづらいことがある
そこで，今回取り組む課題を明確にするため
に“WebSig 流”の定義 前提条件を定めました．
・
・ サイトマップとはWebサイトに掲載する情報
を組織化し，その論理的な構造をツリー図とし
て表現した資料． 画面遷移のフローチャート
として使用できるように情報が付加されること
もある
・ サイトマップとは別に，ファイルリスト（サイ
トの物理構造を扱うもの）とワイヤフレームは
作る
・ 利用を想定するフェーズは「初期構築やリニュー
アル」のみ．コンサル時などは想定しない
・ 顧客対制作者，制作者内，顧客内など，すべ
てのステークホルダーが使うものとする
その上で制作者が抱えるサイトマップについ
ての疑問・課題を見ていくと，大きく5つの系統
WebSig24/7イベント
「
第24回WebSig会議
」
WebSite expert #26 ● 61

3. に分けることができました．実際の声と共に見て
いきます．
■サイトマップの課題①コミュニケーションに
関するもの
・ 代理店や顧客との意思疎通ツールとして使え
ていない．意味がわからないと言われてしまう
・ 顧客側として）大きなサイトで，いきなりサイ
（
トマップを見せられ混乱したことがある．ハイレ
ベルの構成を示した上で詳細にいくべきでは？
・ リニューアル前後のページ間の相関について，
良い記載方法はないだろうか
・ 後工程（納品後）にどう使われるかわからない
と，どこまで作り込むべきか決めづらい
■サイトマップの課題② CMSにまつわるもの
・ CMSで，顧客が更新できる箇所などを説明す
るいい見せ方は？
・ 早い段階からCMSでサイトのプロトタイプを
作って検討する際は，構成をフレキシブルに動
かしやすい．そんな場合，サイトマップはあま ・ 外部リンクは書くべきだろうか
り資料としては価値がない ・ 書類上離れたページへの参照が表しづらい
・ 重要なページとそうでないページの書き分けの
■サイトマップの課題③ツール，作業効率， 方法は？
ライフサイクルに関するもの ・ ページそれぞれの内容のボリュームについても
・ サイトマップ作成に時間がかかりすぎてコスト
サイトマップに書くべきか？
パフォーマンスが悪くなるのを避けたい．少な ・ コンテンツの構造ばかりでなく，想定ユーザー
い手間で受注，制作，納品までをスムーズに の動線も見えるようにしたい
進行するにはどうすればいいか ・ ランディングページからの動線をサイトマップ
・ たびたび修正が入るが作業が面倒．お勧めソ
にどう含めるべきか
フトはないか？ ・ 大きくなってしまうと印刷しづらい．A3用紙
・ ファイルリストやワイヤフレームは制作の最終
でも印刷時に分割されてしまい，全体像を把
工程まで必要なため更新され続けるが，サイト 握できないことがある
マップは途中から誰も触らなくなってしまう
・ サイトマップ単独でなく，画面IDをキーに素
■サイトマップの課題⑤コンテンツのタイプ，
材管理やアセット管理と連動できたら便利では 特性に関するもの
ないだろうか ・ AjaxやFlashを利用したサイトのサイトマッ
プとは？
■サイトマップの課題④書式に関するもの ・ 動的ページの表現方法が難しい．エラーなど
・ 用語の標準が浸透していないため，名称など
の分岐をどこまで書くか？
がバラバラ ・ URL は同じでもログインするとコンテンツが
・ 企画立案者が思い思いに書くのでフォーマット
変わるページをどう表現するか
が不統一．顧客側も解釈に苦労しているのでは ・ 同一ページだが，タブ形式で内容が切り替わ
・ 画面名称のみを書いてもピンと来ないと言われ
るようなページの記述方法は？
る ・ 動的ページ，
静的ページで書き方を変えるべきか？
・ 商品ページのように大量にあるページで，自動
生成されるページと1ページずつ作成するペー この課題提示の後，参加者提出資料から選ん
ジの書き分けはどうするか だ15のサイトマップのレビューを行いました．さ
・ 関連リンクなどでリンクし合うページをどのよ
まざまな工夫が凝らされ，部分的には課題を解
うに表現すべきか 決しているなど優れたドキュメントです（このサ
62 ● WebSite expert #26

4. 理想的な
「100人で考える、
第24回WegSig会議
サイ ップの形と標準書式」 ベン
トマ イ トレポート
イトマップの一部は，WebSig 公式サイトでご覧
いただけます）．
第二部：グループワークで
サイトマップを作ってみる
第一部で明らかになった課題のうち，最もベー
シックな問題である「書式」と，FlashやAjaxの
台頭を踏まえれば重い課題である「コンテンツの
タイプ」に絞って，実際にサイトマップを作るグ ・FlashやAjaxによるページ遷移のないコンテ
ループワークを実施しました． ンツはどう表現する？
「書式」の問題用サンプルサイトは，CMSで ・タグやクロスカテゴリで分類されるインタ
構築された中規模サイト「東京ナイロンガールズ フェース（いわゆるファセット分類）はどう表
（http://nylongirls.jp/）．課題の詳細は以下のよ
」 現する？
うなものです（抜粋） ．
6人ずつの班に分かれ， 50分のディスカッショ
ン，50分のサイトマップ作りの後で発表が行わ
れました．
発表では，「グローバルナビに含まれるページ
群は囲むとわかりやすい」 「別ページの場合とポッ
プアップ画面（擬似ページ）の場合で罫線を変え
るとよい」「Ajaxなどの画面の非同期書き換えの
場合，半分以上内容が変わったら別画面と見なし
ていいのでは」「印刷しづらい問題は， その都度必
要なページだけを表示して印刷すればよい」など
実践的なアイディアがいくつも見られました．
【盛り込む要素について】 紙幅も尽きてしまったので，各班が実際に作
・ 必須で盛り込むべき要素は？
り上げたサイトマップはぜひWebSig 公式サイト
・ サイト属性，プロジェクト種別によって盛り込
でご覧ください．
むべき要素は？
・ タイトル，メタ情報等の詳細は必要？
・ 画面名称以外はなにが必要？
まとめ
・ 導線は必要？
【表現方法について】 今回のテーマに限らず，さまざまな標準化に
・ ステンシル，凡例はどのように？
取り組むことはWeb 業界全体にとってもメリッ
・ 同一ページが大量にある場合は？
トがあることだと思います．皆さんもぜひオンラ
・ 自動生成されるページは？
インでの議論や，今後のWebSigイベントにご
・ 重要なページとそうでないページは？
参加ください！
・ 関連リンクは？
・ 外部リンクなどは？
続いて「コンテンツのタイプ」のサンプルサイ
トは，Flashで制作され擬似ウィンドウなどが多
用されたリッチなサイト「NHK山形放送局 山
形ロケMTP みてけろ（http://www.nhk.or.jp/
yamagata/mitekero/）
」です．課題は以下の通
り（抜粋） ．
WebSite expert #26 ● 63