WebSig会議とは？

　「WebSig24/7（ウェブシグ・トゥウェンティーフォーセブン）」はWebに関連する市場の健全な発展を通じて，私たちWeb屋，顧客，そしてネットユーザが幸せになろうというビジョンのもと2004年から活動している任意団体です．毎回レポートをお届けしている「WebSig会議」は私たちのメインの取り組みであり，旬なテーマでの講義と参加者のグループワークを組み合わせた隔月イベント．Ustreamでビデオ中継を見ながらTwitterで話し合える「セミッター」を使い，講演資料を公開するなどして可能な限りオープンにしています．　最近では「WebSig会議を大阪で見ようの会」が自主開催され（主催：Re:Creator’s Kansai），今回のイベントでも「札幌でも見る会をやりたい」という声をTwitter上でいただくなど東京圏以外にも広がっています．こういった活動はぜひサポートしていきたいと考えていますので，興味があればご連絡ください．

今回のテーマは「サイトマップ」

　Webサイトの構造を表わす資料である「サイトマップ」は，制作ドキュメントとしてはポピュラーなもので，この仕事に関わっている人であれば何らかの形で触れたことがあるでしょう．　一方，現在のサイト構築現場では，Webサイトの規模拡大，CMSの導入によるコンテンツとテンプレートの分離，ファセット型データ構造の採用，LPOなどと関連した多様なサイト内動線への配慮，動的コンテンツの導入などにより，単純にページ名をツリー構造で示すだけでは全容を捉えづらくなっている感があります．

　そしてその表現方法も人によって異なり，コミュニケーションの非効率を招いています．顧客とのコミュニケーションにおいても同様でしょう．顧客はドキュメントからWebサイトの構造を想像しなければなりません．プロジェクトの責任者であれば，上司などのステークホルダーに説明する必要もあります．　Webサイトの多様化・進化に対応したサイトマップの記述内容の洗練や，記述方法の標準化が必要な時期なのかもしれません．標準の確立は，質の高いWebサイトを効率的に制作することにつながるはずです．　そこで今回のイベントでは，参加者みんなで話し合ってよりよいサイトマップをつくるアイディアを見出し，“理想的なサイトマップ”の制作を試みることにしました．　イベントの趣旨から，WebSig会議としては初の「ゲストスピーカーなし」「参加者に重めの事前提出物をお願いする」という試みを敢行しました．元々 WebSigでは商業セミナーのような“有名講師ありき”ではなく，テーマの必然性からゲストを決めてきましたが，今回は「参加者みんなで」というアプローチにこだわったのです．そして参加者に (1)参加者が仕事で実際に制作したサイトマップ，(2)サイトマップについて感じている疑問・問題リストを宿題として提出してもらい，

「100人で考える、理想的な 第24回WebSig会議 　　　　　

サイトマップの形 と標準書式」イベントレポート

TEXT中野 宗　NAKANO Hajime株式会社アークウェブ取締役副社長，WebSig24/7モデレーター，WebSigエコ＆ピース代表

2009年8月29日に東京渋谷で行われた第24回WebSig会議「100人で考える，理想的なサイトマップの形と標準書式」のレポートをお届けします．

60 ●WebSite expert #26

「100人で考える、理想的な 第24回WegSig会議

サイトマップの形と標準書式」イベントレポート

「100人で考える、理想的な 第24回WebSig会議 　　　　　

サイトマップの形 と標準書式」イベントレポート

それを入念に検討して当日の進行を決めていきました．

第一部：サイトマップについての疑問をまとめてみよう

　当日の発表資料は，プレゼンテーション共有サービス「SlideShare」でご覧いただくことができます．

Slideshare　第24回WebSig会議一部資料http://www.slideshare.net/websig/24websig1

　第一部では参加者の事前課題を整理した「サイトマップの疑問・問題」の提示と，参加者のサイトマップのレビューを行いました．　「サイトマップの疑問・問題」については，事

前にモデレーターが長い時間をかけて整理を行った際，「そもそもサイトマップとは何か」という定義・前提条件に対する疑問が多く出ていることに気づきました．以下のようなものです．

・サイトマップといっても，顧客との確認用なのか受注側の進行管理に使うものなのかなど，目的によって内容が変わるのでは？

・案件規模によってサイトマップのあり方は変わるのではないか

・論理構造と物理構造が混在してしまうケースがある

・サイトマップ作成の段階で，各ページのラベリングも盛り込むべきだろうか？

・サイトマップは全体の構成を確認するという目的があるが，各ページの内容がわかってこそ全体の構成のよしあしが判断できる．サイトマップだけでは顧客に伝わりづらいことがある

　そこで，今回取り組む課題を明確にするために“WebSig流”の定義・前提条件を定めました．

・サイトマップとはWebサイトに掲載する情報を組織化し，その論理的な構造をツリー図として表現した資料．画面遷移のフローチャートとして使用できるように情報が付加されることもある

・サイトマップとは別に，ファイルリスト（サイトの物理構造を扱うもの）とワイヤフレームは作る

・利用を想定するフェーズは「初期構築やリニューアル」のみ．コンサル時などは想定しない

・顧客対制作者，制作者内，顧客内など，すべてのステークホルダーが使うものとする

　その上で制作者が抱えるサイトマップについての疑問・課題を見ていくと，大きく5つの系統

WebSig24/7イベント

61WebSite expert #26●

に分けることができました．実際の声と共に見ていきます．

■サイトマップの課題①コミュニケーションに　関するもの・代理店や顧客との意思疎通ツールとして使えていない．意味がわからないと言われてしまう

・（顧客側として）大きなサイトで，いきなりサイトマップを見せられ混乱したことがある．ハイレベルの構成を示した上で詳細にいくべきでは？

・リニューアル前後のページ間の相関について，良い記載方法はないだろうか

・後工程（納品後）にどう使われるかわからないと，どこまで作り込むべきか決めづらい

■サイトマップの課題②CMSにまつわるもの・CMSで，顧客が更新できる箇所などを説明するいい見せ方は？

・早い段階からCMSでサイトのプロトタイプを作って検討する際は，構成をフレキシブルに動かしやすい．そんな場合，サイトマップはあまり資料としては価値がない

■サイトマップの課題③ツール，作業効率，　ライフサイクルに関するもの・サイトマップ作成に時間がかかりすぎてコストパフォーマンスが悪くなるのを避けたい．少ない手間で受注，制作，納品までをスムーズに進行するにはどうすればいいか

・たびたび修正が入るが作業が面倒．お勧めソフトはないか？

・ファイルリストやワイヤフレームは制作の最終工程まで必要なため更新され続けるが，サイトマップは途中から誰も触らなくなってしまう

・サイトマップ単独でなく，画面IDをキーに素材管理やアセット管理と連動できたら便利ではないだろうか

■サイトマップの課題④書式に関するもの・用語の標準が浸透していないため，名称などがバラバラ

・企画立案者が思い思いに書くのでフォーマットが不統一．顧客側も解釈に苦労しているのでは

・画面名称のみを書いてもピンと来ないと言われる

・商品ページのように大量にあるページで，自動生成されるページと1ページずつ作成するページの書き分けはどうするか

・関連リンクなどでリンクし合うページをどのように表現すべきか

・外部リンクは書くべきだろうか・書類上離れたページへの参照が表しづらい・重要なページとそうでないページの書き分けの方法は？

・ページそれぞれの内容のボリュームについてもサイトマップに書くべきか？

・コンテンツの構造ばかりでなく，想定ユーザーの動線も見えるようにしたい

・ランディングページからの動線をサイトマップにどう含めるべきか

・大きくなってしまうと印刷しづらい．A3用紙でも印刷時に分割されてしまい，全体像を把握できないことがある

■サイトマップの課題⑤コンテンツのタイプ，　特性に関するもの・AjaxやFlashを利用したサイトのサイトマップとは？

・動的ページの表現方法が難しい．エラーなどの分岐をどこまで書くか？

・URLは同じでもログインするとコンテンツが変わるページをどう表現するか

・同一ページだが，タブ形式で内容が切り替わるようなページの記述方法は？

・動的ページ，静的ページで書き方を変えるべきか？

　この課題提示の後，参加者提出資料から選んだ15のサイトマップのレビューを行いました．さまざまな工夫が凝らされ，部分的には課題を解決しているなど優れたドキュメントです（このサ

62 ●WebSite expert #26

「100人で考える、理想的な 第24回WegSig会議

サイトマップの形と標準書式」イベントレポート

イトマップの一部は，WebSig公式サイトでご覧いただけます）．

第二部：グループワークでサイトマップを作ってみる

　第一部で明らかになった課題のうち，最もベーシックな問題である「書式」と，FlashやAjaxの台頭を踏まえれば重い課題である「コンテンツのタイプ」に絞って，実際にサイトマップを作るグループワークを実施しました．　「書式」の問題用サンプルサイトは，CMSで構築された中規模サイト「東京ナイロンガールズ

（http://nylongirls.jp/）」．課題の詳細は以下のようなものです（抜粋）．

【盛り込む要素について】・必須で盛り込むべき要素は？・サイト属性，プロジェクト種別によって盛り込むべき要素は？

・タイトル，メタ情報等の詳細は必要？・画面名称以外はなにが必要？・導線は必要？

【表現方法について】・ステンシル，凡例はどのように？・同一ページが大量にある場合は？・自動生成されるページは？・重要なページとそうでないページは？・関連リンクは？・外部リンクなどは？

　続いて「コンテンツのタイプ」のサンプルサイトは，Flashで制作され擬似ウィンドウなどが多用されたリッチなサイト「NHK山形放送局　山形ロケMTP みてけろ（http://www.nhk.or.jp/yamagata/mitekero/）」です．課題は以下の通り（抜粋）．

・FlashやAjaxによるページ遷移のないコンテンツはどう表現する？

・タグやクロスカテゴリで分類されるインタフェース（いわゆるファセット分類）はどう表現する？

　6人ずつの班に分かれ，50分のディスカッション，50分のサイトマップ作りの後で発表が行われました．　発表では，「グローバルナビに含まれるページ群は囲むとわかりやすい」「別ページの場合とポップアップ画面（擬似ページ）の場合で罫線を変えるとよい」「Ajaxなどの画面の非同期書き換えの場合，半分以上内容が変わったら別画面と見なしていいのでは」「印刷しづらい問題は，その都度必要なページだけを表示して印刷すればよい」など実践的なアイディアがいくつも見られました．　紙幅も尽きてしまったので，各班が実際に作り上げたサイトマップはぜひWebSig公式サイトでご覧ください．

まとめ

　今回のテーマに限らず，さまざまな標準化に取り組むことはWeb業界全体にとってもメリットがあることだと思います．皆さんもぜひオンラインでの議論や，今後のWebSigイベントにご参加ください！

63WebSite expert #26●