Archive for the ‘websig’ tag
理想的なサイトマップの形と標準書式
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」に参加してきました。
当時の模様は、公式サイトのエントリーでご覧いただけますしTwitterでも中継 (?) されていたようで「buzztter」で見ることができます。ミクシィでも感想トピックスが立ち上がっているようです。
また、当日のスライドもSlideshareで公開されています。
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」
この中での課題定義については、以前gihyo.jpで書いていたエントリー「サイトマップと情報の構造化」も参考にしていただけたようで、以下のように定義付けをされていました。
サイトマップとは
Webサイトに掲載する情報を組織化し、その論理的な構造をツリー図として表現した資料。 画面遷移のフローチャートとして使用できるように情報が付加されることもある。ワイヤーフレームとは
画面に表示する要素とその配置を簡潔にまとめた資料。 ユーザーの操作に対するシステムの反応やインターフェースの振る舞いも定義する場合がある。ファイルリストとは
Webサイトを構成するファイルの一覧。 列記する項目としては最低限、画面名（または識別子）、ディレクトリパスとファイル名（物理的な構造）、URLを含む。
今回の課題は「サイトマップ」だったのですが、やはりウェブサイト構築をする上ではそれだけで完結するものでもなく、ファイルリストなども十分に関係してきます。ここでも「ワイヤーフレームコミュニケーション研究会」のエントリーでも書いたように「前提を揃える」ことが大切になってきます。そういう意味では前提としていくつか条件があったので取り組みやすかったと思います。
提出した課題
- ボキャブラリーの標準が浸透していないため表記がバラバラ
- 論理構造なのか物理構造なのかが混在してしまうケースがある
- システムフローと同等の成果物と思われることがある
- すべてを網羅しようとするとA3におさまらない
- 運用上の更新はすべきか、誰がすべきか
- 後工程でどう使うかがわからないとどこまで必要かがわからない
- 結局お客さんはサイトマップを見てもわからない
- 画面IDと連動するシステムがない (ソフトではあるものもあるが)
- コンテンツ管理と連動しようとするとCMSが必要になる
- アセット管理や素材管理と連動したくなる
参加したグループでは以下のようなことをまとめていたと思うので思い出しながら書いておきます。
課題1 (比較的静的なウェブサイト) について
必要な情報
主によく検討する情報としては以下のようなものが必要になるかと思います。
- 識別子 (枝番IDやラベリング)
- 単一ページ/複数ページ
- 物理的/概念的・論理的 (ファイルがあるのかないのか)
- 静的/動的 (HTMLかそれ以外か)
- 関係線/導線
- 同画面遷移/別画面遷移
- 本サイト/外部サイト
必要な表現
ビジュアルボキャブラリーを決めておく。
ビジュアルボキャブラリーについては、Jesse James Garrett氏の「A visual vocabulary
for describing information architecture and interaction design」をコンセントの長谷川敦士さんが翻訳された「情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー」を参照のこと。
印刷対応
全部を1枚に収めるのは不可能なので説明したい箇所だけを切り出す。
課題2 (RIAのウェブサイト) について
ファセットの表現
「どんな情報に整理でき、どんな情報を扱うのか」に着目しました。
画面上にある情報をフラットに並べて再整理をし、カテゴリの整理と出力されている情報の整理をしました。タグのようなものをサイトマップで示そうとすると (ドキュメントとして) 破綻してしまうので、説明する内容を制限し、わかりやすいものに仕上げました。
感想
ないものを作り出すための作業ではなく、すでにあるものからサイトマップを作成するため、どうしてもウェブサイトを見ての判断になり画面の要素に偏ってしまうことです。したがって、サイトマップを作成する作業にも関わらず画面仕様書に近いものを作成しているグループがあったように思います。
もちろん結論として (というか実際の現場だと) わかりやすいものであればなんでもいいのですが、サイトマップを作成するという課題に対して「結果として画面仕様書になりました」だとちょっと違うかなと思いました。
実際にサイトマップを作成する (作成するというより再整理するという表現のほうが適切だと思いますが) 状況の多くが、すでにあるものを参考にすると思うので、そういう意味では近い状況にはできたかと思いますが、であれば、課題1のサイトマップ (あらかじめ印刷されたもの) はいらなかったと思います。結果的にそれにどういう情報を付け加えれば理想のサイトマップになるのかにボクがいたグループは意見を集約できたのでよかったのですが、ほかのグループの結果を見るとあらかじめ用意されたものをなくしてゼロから書き上げていたので、論点が幅広くなってしまった印象がありました。
課題としてあがっていた「理想的なサイトマップの形と標準書式」については以下のようにまとめることができると思います。
- サイトマップの理想のカタチはワイヤーフレームと同様、自分の状況や後工程に依存する
- サイトマップの標準書式はビジュアルボキャブラリーを揃えることで標準化できる
この「自分の状況」や「後工程」にどれだけのパターンがあるのかはイシューだと思いますが、そうしたことを意識しながら日々取り組んで行くことで業界全体としても理想のカタチになっていくような気がします。
少なくても「サイトマップ」という言葉で、しかも「IA」という言葉を使わずに、これだけの参加者が集まれることや、そのことにこれだけ関心を持つ人がいること自体にパワーを感じました。
[WebSig24/7] IA分科会 ライブIAとグループワーク
WebSig IA分科会 ユーザー目的からユーザーフローを導き出す (ライブIA)
「ライブIA」をしたら面白いかも、というアイデアからはじめたこのIA分科会は、なんとか無事に終えることができました。WebSigの運営者や参加していただいた皆さん本当にありがとうございました。そしてお疲れさまでした。
思い返してみると、これまでのプレゼンはスライドをつくることにそれなりの時間を要して取り組んでいたのですが、今回はスライドはありませんでした。その場でブラウズする画面とクロッキー帳に手書きで描いた自分のヘタクソな字だけです。それがお客さんにとってベストプラクティスだったかどうかはわかりませんが、自分の考えていることを口に出して頭の中にある図を実際に描いてみることで、思考工程を可視化するにはちょうどよかったかと思います。
ということで、ちょっとだけ補足というかなにを伝えたかったのかを書き留めておきます。
第一部 本邦初公開! リアルタイムにIAの思考を追うライブIA
お題は、「東京都公式ホームページへようこそ」を「ユーザーがきちんと使えるサイトにする」というものにしました。もちろん時間制限がある中での取り組みでしたので、ポイントをいくつかに分けてご紹介しました。整理すると以下のような具合です。
- 1. 前提 (知識) をつくる
- 外部評価ランキングやその評価基準の移り変わりを見ていく
- 2. 価値基準をつくる
- 自分の感覚と近いお手本サイトを決めて見まくる
- 3. リアルを想像する
- リアルで体験してみる。実際の自分の体験とを重ね合わせてウェブの使い方を考える
- 4. ユーザーを考える
- 当事者・関係者・利用者は必須だが、自分が利用者になって考える
- 5. 仮説としてのシナリオを考える
- 自分だったらこう使うという使い方をプロセスに分解して要件にする
- 6. サイト構造を考える
- サイトマップを見て情報分類を再整理する
- 7. ナビゲーションを考える
- 大分類とファセット分類などを整理してメインナビゲーションを決める
- 8. ラベルを考える
- シナリオで作った要件に必要なラベルで再整理する
- 9. 画面フローと画面を考える
- シナリオで作った要件に必要な画面フローと画面を考える
自分の中では、「これがIAです」というものを語るというより、サイトやその利用方法を考えて想像して形づくることって楽しくないですか? ということが一番伝えたかったことです。そうして考えたものなので、自分が使って満足いく形にしたいですよねと。自分が使って使えないサイトってなんだか寂しくないですかと思うので。
なので「IA」という言葉は使っていますが、どちらかというとウェブプロデュースやウェブディレクションをする立場の方でも「作り方」を体験してもらうにはちょうどよかったんじゃないかなと思っています。
動画もYoutubeのほうにあがっていますので、興味ある方はご覧ください。
そのあと、第二部でグループワークをしてもらったわけですが、皆さんが楽しみながらグループワークができたのかが一番気になったところでした。
- 楽しむ
- チーム内での価値基準をつくる
- 使う上での目的の扱いを考える
- あくまで自分だったらこう使うだろうを考える
ポイントとしては「チームでの価値基準をつくる」がありました。複数人でのチームプレーなので価値観として1つの方向性を見いだしてから開始してほしかったわけです。これは会社のプロジェクトでもいえることですが、価値観が違っても目指す方向が同じであれば同じベクトルで取り組むことができます。
もちろん設計を進める上でのポイントとしては使う上での目的の扱いと、あくまで自分だったらこう使うだろうを考えて (実体験を思い出した上で) 要件を考える点です。こちらもいろいろな観点の要素が含まれているお題ではあるのですが、その点を話し合って決めていくことはひとつの方向性を全員で作っていくことになります。そして最後は自分です。そのチームでの成果に自分が納得できたか、になります。
この取り組みを通じて、設計（というか作り方）のポイント習得とチームワークの体験ができたと思います。
WebSig IA分科会の最後としては、盛りだくさんな要素が含まれていました、こんなカタチでもウェブに関わることの楽しさとそれを職業にしている自分たちを客観視できたんじゃないかと思います。
WebSig IA分科会を振り返って
実はこの分科会は3回目になるわけですが、振り返ると年1回ペースだったわけです。
- 2006/09/29 IA分科会 Vol. 1「明日から実践できるIA」
- 2008/08/25 IA分科会 Vol. 2 「ストラクチャの作成を考える」
- 2009/01/17 IA分科会 Vol. 3 「ユーザー目的からユーザーフローを導き出す」
その間にIAのコミュニティ活動 (IAカクテルアワー) があったりなかったりという関係で、国内でバラバラになっている活動を収束しようという話になり、今回をもって「WebSig主催」というカタチはいったん終了することにしました。
ご協力いただいた皆さん、本当にありがとうございました。
そして次のステップを考えているところです。
Web業界がHappyになるには?
「2008年を振り返り、2009年の Web 業界を考える」ということで、第21回WebSig会議＆忘年会に参加してきました。
第一部のほうは遅刻してしまったので参加できませんでしたが、第二部のほうでグループワークに参加しました。「ワールド・カフェ」スタイルということで、人が入れ替わり立ち代わり議論というかディスカッションしてきました。
テーマは「Web業界がHappyになるには?」ということで、総括はどこぞのブログを参照してもらうとして、3Rも続けた中で自分の中で考えが整理できたので考えたことを記録しておきます。
まず、個人レイヤーでは「自己実現」がHappyのトリガーになり得ます。逆に言うと、自己実現の指標（ゴールや目標）がない人はHappyになりにくいと考えられるかなと。
次に業界レイヤーで考えられることは、やはり「価値観の共有」でしょう。同じ業界でもクライアントや制作者などさまざまな人が関係してくるため、そこで同じ「これいいよね」が共有できないとダメなんじゃないかな。「リレーションシップ」だと、これに尽きるんじゃないかな。
あと業界レイヤーでおもしろいと思ったのが、制作者でもお客さんの声が聞きたいと本気で思っていることです。この「制作者でも」と書くと語弊をまねくかも知れませんが、たとえば自動車業界でいう工場で働く人間が「お客さんの声が聞きたい」と本気で思っているでしょうか。本当のところはわからないのですが、多分そんなこと考えて仕事していないと思うんです。それだけ、Web業界の人間は誰もが「お客さんの声が聞きたい」と本気で思っている。業界としては特異なんじゃないかとさえ思います。それはもしかすると成り立ちが時代背景としても比較的新しい業界であるってことなのかも知れないし、これからの業界ってのはそうならないと続かないのかも知れない。
違う見方をすれば、それだけ業界全体が小さいのかもしれないなと。そして、それは「世間（一般）」との距離が異常に「近い」ってことなんじゃないかなと。Webが生活に浸透してきているように、日常接するものであることも関係してきているように思います。これからの分野で生き残るためには、こういう進化した業界 (言い過ぎ?) として全員が「お客さんの声が聞きたい」と本気で思っている業界ではないでしょうか、と。
なかなか楽しい頭の体操になりましたとさ。
さて、2008年も後少し。
[WebSig24/7] サイトストラクチャを考えるIA (ミニセミナー)
「Web標準の日々」に引き続き、WebSigのほうでもIA系のミニセミナーを実施します。
開催概要などについては、ミクシィのコミュニティ「【WebSig24/7】Web制作者の会」でトピックとしてあがっていますので引用します。
■概要
IA分科会1回目にご出席の皆様、前回お越しいただけなかった方々長らくお待たせしました。
前回の開催から非常に長い時間が空いてしまいましたが、やっと！やっと！IA分科会2回目を発表することが出来ます！
前回よりかなりの時間が経っているにも関わらず、復習もなく粛々と計画を進めさせていただきます。
今回は、Webサイトにおける情報提供の骨格となるサイトストラクチャの構築についてをテーマとしてグループワークを中心に行います。分科会ということで、講師が一方的に話をするのではなく、他の参加者とのコミュニケーションをベースに課題に取り組んでもらいたいと思います。
■開催日時
2007年 8月25日（土） 12時半開場13時スタート 17時30分終了予定
■開催場所
デジタルハリウッド大学 セカンドキャンパス７F
東京都千代田区外神田3-1-16 ダイドーリミテッドビル7FWeb標準の日々に参加された方は、「駅から遠かった方のデジハリのビル」といえばわかりますでしょうか。
WebSig24/7でのSecondLifeセミナーを行った場所でもあります。■会議参加費用：2,000円
※通常会議費用は3,000円ですが、デジタルハリウッド様会場支援により、今回は1,000円引きとなっています。
■スピーカー
坂本貴史
ネットイヤーグループ株式会社 UXDセンター ディレクター/インフォメーションアーキテクト
http://bookslope.jp/blog/本イベントのモデレートはTOKYOジハードこと安藤直紀（デジタルハリウッド）が担当させていただきます。押忍押忍。
■IA分科会Vol.2のアジェンダ
講義
サイト構造の把握のためのノウハウ
グループワーク7月15,16日に行われた「Web標準の日々」ビジュアルデザイントラックで デザイン対決が行われた水産庁のサイトのサイトストラクチャを考えます。
水産庁
http://www.jfa.maff.go.jp/詳細は現地でご説明します。
■参加条件
- 情報設計に興味がある方
- グループワークを通じて、積極的に知見を作り上げることに同意できる方
なお
当日の模様は写真、ビデオ撮影される可能性があり、グループワークの成果はWeb サイト上に掲出します。■定員について
グループワークの関係上、60人限定とさせていただきます。■申し込み時の注意事項
参加を希望する方は、以下より、自分が該当する属性を申告してください。
グループワークのチーム割りで使います。
- IA業務未経験（IAという概念をまったく知らない）
- IAの概念について少しは知っている（「IA分科会1回目」「Web標準の日々」坂本氏の講演聴講者）
- IA的業務を行った経験がある（肩書きはIAではない）
- IAを職種として担当している（肩書きとしてIAを名乗っている）
■事前課題および持ち物について
参加者は事前課題として、このサイトを利用する方のペルソナを作成してきてください。
ペルソナの作成については次回以降に行いますが、現時点で知っている限り、調べられる限りでの範囲で自分なりに作成してください。
当日のグループワークの時に、チームメイトに公開して使います。また、当日チームでミーティングをする時に、よい結果を生むために必要な道具について考えて、用意してきてください。
それはツールの場合もありますし、もしかしたら食べ物かもしれません。
チームは6人で編成します。以上です。
よろしくお願いします。
ちなみに、前回のセミナー概要は下記で参照できます。
興味のある方は参加してみてください。
[WebSig24/7] 明日から実践できるIA (ミニセミナー)
もう昨年になるわけですが、9/29にWebSig24/7のミニセミナーで講演をさせていただきました。
このミニセミナーで使用したプレゼン資料「明日から実践できるIA」を公開します。
- 明日から実践できるIA (PDF・1.7MB)
また、WebSig24/7の運営メンバーでもある、えふしんさんのブログ「F’s Garage」でプレゼン資料を音声と合わせて公開していただいています。
また、このエントリーでは音声と合わせてプレゼン資料を見ることができます。
内容は見ていただくとわかるのですが、だいたい下記のような具合でした。
- IAとは
- プロセスとスキル
- ほかの職能からみるIA
- 戦略と戦術
- アプローチの違い
- IAとUXD (ユーザー・エクスペリエンス・デザイン)
- 実践できるアプローチ
とくに、1ウェブ制作会社において「Information Architect」として専門の人間を置くことの難しさはすでにみなさん痛感されていると思うのですが、そうなると専門の人間が現れるを待つより自分たちでスキルを学んで・取り組んでいくしか方法がなくなってくると思います。
そういったことも踏まえて、「IA」というキーワードを概念的または実践的に見た場合に日々思うところをシェアさせていただきました。
たくさんの感想をいただけたので、第2回・第3回と続けていければと思います。
資料の中でご紹介した関連情報を付け加えます。
- プロセス オブ ウェブデザイン 企画からデザインへ 落とし込みの技術
- O’Reilly — What Is Web 2.0
- Web情報アーキテクチャ―最適なサイト構築のための論理的アプローチ
- デザインセクションに見る創造的マネージメントの要諦
- adaptive path >> the nine pillars of successful web teams
- User Experience Design
- So you want a new website / Eric Lease Morgan
- The Elements of User Experience
- Webcredible – web usability & accessibility consultancy
- Intelligent Experience Design >> Articles >> What Is User Experience Design