第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」 第一部発表で紹介したサイトマップ(一部)公開
モデレーターの中野(株式会社アークウェブ)です。
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」会議の第一部では、皆さんの事前提出課題から「サイトマップにまつわる課題」を5つに体系化して発表しました。発表資料は以下のエントリーにて掲出済みです。
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」終了いたしました
http://websig247.jp/meeting/24/
この中で、事前提出課題から特に参考になりそうなものを中心に15のサイトマップを選び、「皆さんのサイトマップを共有」として紹介しました。
あいにく説明の時間が少なく、またサイトマップというドキュメントの性質として情報量が多いことから、参加者アンケートでも「あのサイトマップをもう一度見たい」という要望をいただきました。
そこで、発表で使わせてもらったサイトマップを提出された方に連絡を取り、許可をいただけた6点をこのエントリーで公開したいと思います(会議後、急きょのお願いに快諾いただいた6人の参加者の皆さん、どうもありがとうございました)。公開が遅くなってしまいすみません。
鴫原友則さんのサイトマップ
- いわゆるツリー型(トップページから一方向に展開する形)ではなく、トップページを中心に上下に放射線状に広がる形になっている
- 「ログイン」「ログアウト」などの、同一ページであり、システムと絡んだ条件分岐により表示が異なる場合は、実践でなく点線で関係が示されている
- 各ページが単一のブロックでなく、「一覧」「表示」「入力」「確認」といったひな型で構成されている。ビジュアル的にも、ページ種別を踏まえた遷移を把握しやすくなっている
マルヤマリュウヘイさんのサイトマップ
マルヤマさんのブログ http://blog.meetalk.jp/
- オーソドックスなフローチャート型だが、「静的コンテンツ」「システム生成コンテンツ」「別ウィンドウ」などの色分けによる凡例がわかりやすい
- 会員認証後でないと閲覧できないページは太枠で囲まれている
あんけいさんのサイトマップ
あんけいさんのサイト http://an-k.jp/blog/
- 網羅的なサイトマップではなく、特定の動線にフォーカスしたフローチャートである
- 抽象化されているため、サイトの初期設計や改善検討の際などに使いやすい
中谷さんのサイトマップ
株式会社テクト http://www.tec-tec.co.jp/
中谷さんのブログ http://www.tec-tec.co.jp/blog/
- 3種類あるが、それぞれ「商談初期段階」「見積提示段階」「Webに明るくない顧客への提案初期段階」と、目的によって適切と思われる情報を中心にまとめている
- いずれも網羅的なサイトマップでなく、ページの種別によってグループ化され、同種のページはまとめるなどある程度簡略化されている
- 「デザインパターンA」「デザインパターンB」など、デザインテンプレートの確認・管理用としても使われている
- システム(CMS)が自動生成するページは色分けする、重ねて表現するなどの工夫がされている
鈴木尚栄さんのサイトマップ
鈴木さんの個人サイト http://naown.jp/
- Ajaxなどで増えてきた「同一ページ内の遷移(非同期書き換え)」をU字の矢印で表現
- 大きなサイトマップでページ間遷移を矢印で表現しづらい場合に、飛び地を結ぶショートカット的なマークを使っている
- 公開エリアと会員エリアを実線で区切っている
- 「同窓表示」を実線、「別窓表示」を破線で表現している
森松茂樹さんのサイトマップ
- ユーザー向けサイトマップを右側から、管理画面を左からツリー状に配置し、情報の共有や依存の関係も記述するというユニークなサイトマップ
並木さんのサイトマップ
- 外部のリスティング広告ページからの動線、キャンペーンページ(ランディングページ)からサイト内への動線も注記したサイトマップ
いかがでしょうか。
サイトマップの書式を考えるうえでの参考になれば幸いです。