2009/8/29

2

本会議の目的とゴール会議の目的とゴール

サイトマップが抱える課題をみんなで共有。

課題をどのように解決するかをグループワークを通して考え共有、公開。

業界への啓蒙や、標準書式についての議論をオンラインで継続して行うための材料とする。

3

■第 1 部：サイトマップの課題の共有•事前課題で提出して頂いた課題を系統別に共有•事前課題で提出して頂いたサイトマップの共有

第1 部ゴール•サイトマップの課題を共有する•各種各様なサイトマップを知る、第 2 部で取り扱わない課題の解決策をさらっと検討•第2 部で取り扱う課題（書式とコンテンツタイプ）の精緻化

■第 2 部：グループワーク•書式とコンテンツタイプの課題を解決するサイトマップを考える

第2 部ゴール•標準書式についての議論をオンラインで継続して行うための材料となるアウトプットを出す

■第 3 部：発表・質疑•グループワークで考えたサイトマップを全員で共有•（告知では最優秀チーム選定としていましたが、変更させて頂きました）

本会議の進め方会議の目的とゴール

4

第1 部：サイトマップの課題の共有

5

皆さんからサイトマップの前提条件についての疑問がありました

6

•誰の為の資料なのか？→お客様との確認用資料なのか、受注側の進行管理に使うべきなのか？また、それぞれで内容が変わるのか？（足立さん）

•今回のサイトマップはどこまでの範囲をサイトマップとして定義しているかが若干不明です（安西さん）

•案件規模により作成するサイトマップは変化すると思う、適切なサイトマップはどんなものか（丸山さん）

•作業の段階によってもサイトマップは変わってくると思われる。適切なサイトマップとはどんなモノか例えば・・・受注前（提案時点） /受注後（制作初期） /納品前後（制作終盤）で考える（丸山さん）

•論理構造なのか物理構造なのかが混在してしまうケースがある（坂本さん）

•運用上の更新はすべきか、誰がすべきか（坂本さん）

•サイトマップの段階でラベリングもすべきか？（鈴木さん）

•全体の構成を確認するためのサイトマップだと思いますが、各ページの内容がある程度わかってこそ、全体の構成が OKかどうか判断できると思います。が、サイトマップだけではクライアントに、各ページがどのような構成になるのか伝わらないことが多く、判断されにくいと感じることがある。（細田さん）

•サイトマップはサイトマップという一つのコンテンツとして考えた方がよいのではないだろうか（峯山さん）（Webサイトのコンテンツとしてのサイトマップ）

前提条件に関する疑問

7

そこで前提条件と定義を決めました

8

前提条件サイトマップとは別に、「ワイヤーフレーム」「ファイルリスト」を別に作る

フェーズとしては「初期構築およびリニューアル時」のみ。コンサル時などは想定しない

ステークホルダー全てが見るものとする。「制作会社内」「制作会社と顧客」「顧客の会社内」

作成するサイトマップはハイレベルサイトマップではなく、詳細サイトマップを想定

本会議を進行する上での前提条件と定義

9

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

ワイヤーフレームとは画面に表示する要素とその配置を簡潔にまとめた資料。ユーザーの操作に対するシステムの反応やインターフェースの振る舞いも定義する場合がある。

ファイルリストとはWebサイトを構成するファイルの一覧。列記する項目としては最低限、画面名（または識別子）、ディレクトリパスとファイル名（物理的な構造）、 URLを含む。

本会議を進行する上での前提条件と定義

10

ワイヤーフレーム

本会議を進行する上での前提条件と定義

11

ファイルリスト

本会議を進行する上での前提条件と定義

12

課題の体系化

13

1. コミュニケーションに関するもの2. CMSに関するもの3. ツール、作業効率、ライフサイクルに関するもの4. 書式に関するもの5. コンテンツのタイプ、特徴に関連するもの

課題の体系化

課題として最も大きいと思われた、

４：書式に関するもの５：コンテンツのタイプ、特徴に関連するもの

を第 2部で検討する課題とします

14

１：コミュニケーションに関するもの

• 代理店・クライアントにどう分かりやすく説明すればよいか（上敷領さん）

• （ Clientとして）いきなり詳細なサイトマップを見せられ概要がつかめずに混乱をした。ハイレベルを理解したうえで、詳細にいくべき？（安西さん）

• クライアントとの意思疎通ツールとしては使えていない。見ても意味が分からないと言われてしまう（山岸さん）

• サイトマップはクライアントとのやり取りでどのフェーズで出すべきか？（鈴木さん）

課題の体系化

15

２： CMSに関するもの

• CMSの更新可能箇所などを説明するいい見せ方は？だいたいいつも別紙で提出してます（松本さん）

• サイトマップは、プロトタイプやワイヤーフレームと比べてわかりづらいと敬遠されてしまうことがある。

特にMTなどの CMS管理機能などを使ってプロトタイプ（テストサイト）を作って揉んだ場合、コンテンツの構成がフレキシブルに大幅に動くことがある。そうするとクライアント側から見てわかりやすいプロトタイプに頼り切りになり、サイトマップはあまり資料としては使用されなくなってしまう傾向がある（土屋さん）

課題の体系化

16

３：ツール、作業効率、ライフサイクルに関するもの

• サイトマップが肥大化したときに、資料の管理や編集が大変になる （鈴木さん）

• サイトマップ作成に時間を掛けすぎてコストパフォーマンスが合わないということを回避したい。いかに時間を掛けずに作り、受注→制作→納品までをスムーズに進行していけるか（河下さん）

• 度重なる修正が入るのに、作るのが面倒。お勧めソフトないです？（松本さん）

• 企画書のように、 A4サイズで収めようとすると無理がある ( ことが多い )

• コンテンツ管理と連動しようとすると CMSが必要になる（坂本さん）• 画面 IDと連動するシステムがない ( ソフトではあるものもあるが ) （坂本さん）• アセット管理や素材管理と連動したくなる（坂本さん）• 後工程でどう使うかがわからないと、どこまで必要かがわからない（坂本さん）

• リニューアル前と後のページ間の理想的な相関図の記載方法は？（満島さん）

• みんなが更新、運用しやすいサイトマップとは？（満島さん）

• ファイルリスト、ワイヤフレームは最終工程に必要なためアップデートされ続けるが、サイトマップは誰も触らなくなる（平間さん）

課題の体系化

17

４：書式に関するもの（１）

• ボキャブラリーの標準が浸透していないため表記がバラバラ（坂本さん）

• 決まったフォーマットがなく、企画立案者がその都度思い思いに書くので表現がばらばら。受け取る側も、都度違う粒度なので線引きに苦労してるんじゃないか（柏内さん）

• サイトマップ上でタイトル・メタ等詳細がわかるようにまとめられないか？（高橋さん）

• 画面名称のみを書いても、ぴんと来ないと言われる（鈴木さん）

• ログインしないと閲覧できないページをどう表現するか（大谷さん）

• 同一ページがたくさんあると見づらい（矢野さん）

• 商品ページのように多量にあるページで、自動生成されるページ (CMS)と、1ページづつ作成するページの書き分け（矢野さん）

• 重要なページとそうでないページの表示の仕方は？（森松さん）

• 「関連リンク」などでリンクし合うページをどのように表現すべきか？（細田さん）

• 外部リンクを書くかどうか迷う（矢野さん）

• （発注側として）制作側には、コンテンツの構造も重要だが実際の想定ユーザーの動線も見えるようなサイトマップを検討してほしい（安西さん）

課題の体系化

18

４：書式に関するもの（２）

• ランディングページからの動線をサイトマップにどう含めるべきか（黒川さん）

• 構造的に離れたページへの参照が表しづらい（柏内さん）

• コンテンツ構成と、ページ構成の立体的な交差を分かりやすく表現できる書式について悩んでいます。現在は、どのような種類の画面があるか＋遷移はどうなっているか、という資料構成にすることが多いのですが、発注者と受注者のコミュニケーションの深度によってはうまく意思疎通が図れない可能性を感じています（古荘さん）

• A4用紙 1 ページに収まるように作るのって結構大変。配置とか悩む時間が惜しい（松本さん）

• 印刷しづらい。コーポレートサイトの全面リニューアル時、 A3用紙でも印刷時に分割されてしまい全体像を一覧できなかった（柏内さん）

• （ページ内容のボリューム把握はどこでするか）（森松さん）

• （複雑なサイト構造における、グローバルナビゲーションとサブナビゲーションの関係 ( 表記の仕方 ) ）（黒川さん）

課題の体系化

19

５：コンテンツのタイプ、特徴に関するもの

• 動的ページの表現方法が難しい。エラーなどの分岐をどこまで書くか？多いと見づらくなる（矢野さん）

• 問い合わせフォームのように、同一 URL で遷移するページをどう表現するか。（大谷さん）

• 同一ページで、タブ形式で切り替わるようなページの記述方法は？（矢野さん）

• ページ遷移と動的書き換えを書き分けにくい（田中さん）

• 動的ページ、静的ページで書き方を変えるべきか（森松さん）

• Ajaxや flashを利用したサイトのサイトマップとは？（満島さん）

• カテゴリやタグなどの生成ページやメニューなどで、縦横の軸にからんで重複してまとめて見せるコンテンツなどの表し方に悩む（土屋さん）

• URL は同じでもログインすることで表示されるコンテンツが変化するページをどう表現するか。（大谷さん）

課題の体系化

20

皆さんのサイトマップを共有

21

• あや _sitemap_01　サイトマップとファイルリストを兼ねている。 Excelの折り畳み、ソート機能などを活用

• 　シギハラさんサイトマップ　厳密なツリー状ではない。ページを表わすブロック上に「表示」「入力」などのコンテンツ

種別あり

• 丸山さん（中規模） websig提出用サイトマップ 04 年 04 月公開版 040304　静的、システム生成、別ウィンドウなどを凡例 ( 色分け )で区別

• 高橋陽子さん sitemap　凡例が親切。 CMSの仕様についての顧客向け説明 ( 編集可不可など )を兼ねている

• 満島さん NewSiteMapP3_0424_test　素材管理、制作進捗管理、ページ内要素管理などを兼ねている

•　安西さん _サイトマップ _anzai　網羅的なサイトマップというより、動線を意識したもの ?

• 中谷さん 090826_サイトマップ（中谷茂樹）　クライアントへの提案という目的のために簡素化・強調したもの ?

• 並木さん Sitemap01　キャンペーンページ (ランディングページ ?)からの動線を記入したもの

皆さんのサイトマップを共有（ 1 ）

22

• 古荘さん KKNサイト構成図 よく意味がわかりません。 (^-^;; 要解説

• 坂本さん _hpk_ss_050310 凡例がわかりやすい

• 坂本さん _timberline_ss_040528 3D! どんな意図で ?

• 森松さんシステム概要 -Final　非ツリー型。入力フォームなどのフローも丁寧に記載

• 村山さん　色によるゾーニング。ページに含まれる内容の詳述あり

• 大谷さん sitemap 「主導線」のほかに「関連導線」もあり

• 鈴木尚栄さん出資料　罫線による非会員・会員エリアの区別。更新マーク ?( 矢印 )による動的コンテンツ (「同じ

画面への　処理」 )の図示。凡例の中の「矢印だらけで図が汚れることを防ぐための方向識別」とは ?

皆さんのサイトマップを共有（ 2 ）

23

第２部：グループワーク

24

課題説明

25

１ -1：詳細サイトマップに盛り込むべき要素はなにか？検討ポイント

•必須で盛り込むべき要素•サイト属性、プロジェクトによって盛り込むべき要素

事前課題より•タイトル、メタ等の詳細が必要？•画面名称以外はなにが必要？•導線　など

1- ２：どのように表現するべきか？検討ポイント

•ステンシル、凡例はどのようなものが適切か事前課題より

•同一ページが大量にある場合•自動生成されるページ•重要なページとそうでないページ•関連リンク•静的ページと動的ページ•外部リンク　など

1- ３：印刷と一覧性検討ポイント

•俯瞰的に見るために印刷はしたい。•分割する？ハイレベルもつくる？あきらめる？

グループワーク課題１：書式

「書式の課題サイト」で具体的なサイトマップを書いてください

解決方法を文章または具体的なサイトマップを書いてください。

課題サイトを利用してもしなくても OKです

26

グループワーク課題 1 ：書式の課題サイト

東京ナイロンガールズ - TOKYO NYLON GIRLS http://nylongirls.jp/

27

2- １：ページ遷移を伴わない Flashや Ajax（同一ページにてタブ形式などでページ遷移無しでコンテンツが切り替わる場合なども）

２ -2：タグや属性で分類される場合（いわゆるファセット分類）

2- ３：システム状態検討ポイント

•エラーや分岐などをどこまでどう表現するか•記入しない？ダイヤグラムで別に書く？

グループワーク課題２：コンテンツのタイプ、特徴

「コンテンツタイプ、特徴の課題サイト」で具体的なサイトマップを書いてください

時間があるチームは、解決方法を文章または具体的なサイトマップを書いてください

28

2- １：ページ遷移を伴わない Flashや Ajax（同一ページにてタブ形式などでページ遷移無しでコンテンツが切り替わる場合なども）

２ -2：タグや属性で分類される場合（いわゆるファセット分類）

グループワーク課題２：コンテンツのタイプ、特徴の課題サイト

NHK山形放送局　山形ロケMTP「みてけろ」http://www.nhk.or.jp/yamagata/mitekero/

29

検討ポイントPROFILE、操作ガイドはどう表現するか表現しない？

グループワーク課題２：コンテンツのタイプ、特徴の課題サイト

30

検討ポイント・ジャンルから、季節のカテゴリをどう表現するか・「やまがたニュースアイ、ぶどうも変わる時代」は、ジャンルから＞食季節から＞夏のどちらにも配置されるがどう表現するか

グループワーク課題２：コンテンツのタイプ、特徴の課題サイト

31

グループワーク：アウトプットの出し方

前提条件を守ってくださいサイトマップとは別に、「ワイヤーフレーム」「ファイルリスト」を別に作るフェーズとしては「初期構築およびリニューアル時」のみ。コンサル時などは想定しないステークホルダー全てが見るものとする。「制作会社内」「制作会社と顧客」「顧客の会社内」作成するサイトマップはハイレベルサイトマップではなく、詳細サイトマップを想定

手書き、エクセル、パワーポイントどの形式でも構いませんデジタルデータの場合、どなたかの PCをお借りください

ワイヤーフレーム、ファイルリスト（場合により他ドキュメント）でカバーする範囲を説明しないと理解できない場合はその旨、補足文章を書いてください

ファイルリストには、画面名（または識別子）、ディレクトリパスとファイル名（物理的な構造）、 URLが明記されていることは前提とします。

コンテンツタイプ、特徴はサイト全体ではなく、課題となる部分的なサイトマップでよいものとします

表紙にチームメンバー名を記入してください

各ページ左上に 1-1、 2-2など課題番号をいれてください