12/3 (土) にあった第5回WebUX研究会「ストーリーテリングをユーザエクスペリエンスデザインに活用する」に参加してきました。その中で気づいた点や自分なりにまとめておきたいことを2つ書いておきます。

• コンテンツとストーリーの関係性は逆にしてはいけない
• ストーリーにすること自体は伝え方のパターンでしかない

このイベントは、書籍「ユーザエクスペリエンスのためのストーリーテリング -よりよいデザインを生み出すストーリーの作り方と伝え方」の翻訳出版記念ということで、前回の同イベントで告知されていたものでした。

イベントの内容

• ストーリーとは何か? (楽天 脇阪さん @wackiesrock )
• ストーリーを集める (NHN Japan 酒井さん @yhsk )
• ストーリーを作る (Zynga Japan 前田さん @t_maeda )
• ユーザーストーリーマッピング (アギレルゴコンサルティング 川口さん @kawaguti )
• パネルディスカッション (スピーカー + 浅野先生 @314satoshi + ネットイヤー 坂本 @bookslope ）

※当日の模様は「Togetter: 2011年12月3日 第5回 #WebUX 研究会 ツイートまとめ」から見ることできます。

「講義 + ワークショップ」という流れで進行したこのイベントですが、ボク自身はワークショップには参加せず (参加できず、が正しい) 最後のパネルディスカッションにだけ登壇するという参加の仕方でした。ぶっちゃけ、翻訳本が手元にない状態でしたので (今もまだないけど)、スピーカーの話を聞きながらいろいろと脳内メモリに書きこんでおりました。

コンテンツとストーリーの関係性は逆にしてはいけない

まず感じたのが、作成したストーリーの良し悪し (評価) をストーリー自体に持たせてしまうと、ただの妄想にしかならないということです。つまり、ストーリーがコンテンツになっている状態 (ストーリーが内輪の図) といえます。この場合だとたしかにストーリー自体が可視化されるので、まわりから見てもわかりやすいです。

それに対してボクの理解では、ストーリーは表現方法 (演出方法) だと思っていたので、このすれ違いが解消されないと、正しく会話ができないと感じました。

• ストーリーが外輪: 読み聞かせやプレゼンなど、ストーリー自体は表現方法 (演出方法) のパターン
• ストーリーが内輪: 新聞や小説など、ストーリー自体がコンテンツになるパターン

ストーリーにすること自体は伝え方のパターンでしかない

ボクたちは「起承転結」や「抑揚をつけて」など伝え方のパターンはすでに学んでいます。もちろん技術的な側面はあるかと思いますが、ストーリーにすることが伝え方のパターンでしかないと思います。そう考えたときに「なぜストーリーにすることが有効か」を考えてみました。

それを示したのが次の図です。つまり、伝えることを仮にA地点からB地点までの距離で定義すると、AからBまでの面積で表現できると思いました。直接的伝達を1にした場合、論理的伝達のほうが階段状になる分面積が広くなり、さらにストーリー的伝達だと曲線として考えられるのでそれよりも面積は広くなります。その曲線が行きすぎてしまうとスパゲティー的伝達になってしまい、結局伝わらないというオチになります。

• 直接的伝達: 直接伝えるパターン
• 論理的伝達: ロジックを積み上げて伝えるパターン
• ストーリー的伝達: 曲線で抑揚をつけて伝えるパターン
• スパゲティー的伝達: 曲線すぎて伝わらないパターン

「コミュニケーション」と言うとそれまでなのですが、結局は相手がいることが前提となるので、相手が受け入れられるポイントがいくつ存在するのかがポイントになると思います。そのポイントを多く持つ = 面積を広げるという発想になります。最近だと、AKB48や少女時代などのグループで大人数にする理由にもつながる考え方かも知れません。

ここまで自分なりに書いてみましたが、まだ本を読んでいないこともあるので、きちんと読ませていただき、改めてまとめてみようと思います。

関連リンク

• 第5回WebUX研究会(12月3日)にてワークショップを行いました。 « UXBC Tokyo / UX Tokyo (準備室)
• 第5回WebUX研究会開催しました | 情報デザイン研究室

IAという分野においては、浅野さん (@noriyo) のブログ「IA Spectrum」に最近の海外での話題が紹介されているのでご覧ください。

・情報アーキテクチャの現在形「Pervasive Information Architecture」
・クロスチャネルの結晶
・「World IA Day 2012」開催のお知らせ

これらの情報を挟みつつ、そもそも私たちが向き合っているWeb (?) を自分の経験を通して見直してみることで、UXをIAという視点で設計していくことを体験する内容にしています。

当日のアウトライン

・IAについて
・IAの適用例
・サイトストラクチャのパターン
・エクスペリエンスマップ
・ワークショップ (グループワーク)
・発表・講評

もちろんIAの基本的な概要も話すのですが、今回のワークショップでは、IAを学ぶというよりも、どういうときにIAのスキルが活かされるのか、ユーザーの利用シーンを想定してみていくことで、これまで言葉でしか頭に入っていなかったクロスチャネルといったことを具体的に理解・イメージできるような内容にしています。

なお、今回は4地域を隔週で回るスケジュールになるため共通のテーマで実施しており、当日使用したスライドは非公開で参加者のみにワークショップ終了後に通知しています。有料ということもあり、次回以降に参加する皆さんのためにもネタバレにならない範囲での感想やツイート (#aqjp) をお願いしています。

最後の大阪開催を11/23に予定しているので、その日以降には一般公開したいと思います。

先週まで、ワークスコーポレーションと共同で「IAシンキング」刊行記念イベントを各地で実施してきました。
5/21 (土) と5/22 (日) に名古屋・大阪で実施しており、その前の5/14 (土) にはアップルストア銀座店 (東京) でも実施をしています。4月にはロフトワーク「OpenCU」イベントでも事前に実施いたしました。

• 4/25 (月) ロフトワーク「OpenCU」イベント (東京)
• 5/14 (土) アップルストア銀座店 (東京)
• 5/21 (土) アップルストア栄 (名古屋)
• 5/22 (日) アップルストア心斎橋 (大阪)
• 5/22 (日) デジタルハリウッド大阪校 (大阪)

なお、今週末の土曜にはイマジカデジタルスケープのイベント「Open-Iセミナー」を予定しています。内容は、デジタルハリウッド大阪校と同じ3時間枠になるため、いくつかの課題を複数人でワークショップができる内容を計画しています。

• イマジカデジタルスケープ Open-Iセミナー2011 「Web制作者・担当者のためのIAワークショップ」

以上のツアーを考えると、トータルだと200人以上の方々と向き合ったことになり、回ごとの濃度を考えると、これまでには経験したことがないくらい濃い時間を過ごすことができました。参加者の皆さん、本当にありがとうございました。

当日のプレゼン資料 (スライド) については、Slideshareのほうですべて公開しておりますので、興味ある方はパラパラとめくってもらい (なぞ) 復習や改めて自主学習などに使っていただければと思います。内容は、書籍と同じように「講義 + 演習」という組み合わせて、何問かの課題を手元でシミュレーションしていただき、後半にはその集積の課題を大きな視点で考えてもらう感じです。

また、当日のトゥギャッターも「#iathinking」というハッシュタグで展開されているので、読み返しという意味でご覧いただければ当日の状況が見えていくるかと思います。

• Togetter – 「2011年5月14日 IAシンキング Web制作者・担当者のためのIA思考術 銀座 #IAthinking」
• Togetter – 「2011年5月21日 IAシンキング Web制作者・担当者のためのIA思考術 名古屋 #IAthinking」
• Togetter – 「2011年5月22日 IAシンキング Web制作者・担当者のためのIA思考術 大阪 #IAthinking」

これを機会に各地での勉強会やワークショップなどのイベント企画などあれば、積極的に参加していきたいと思います。

事前課題にあげた「サイトマップ」については、当日間近 (8/29) にあった第24回Websig24/7会議「100人で考える、理想的なサイトマップの形と標準書式」を参考にしてそこで得た知識をなるべく話そうとしました。

決して、「サイトマップ (ページ)」のことを指しているわけではありませんので、あえて「ページ」をつけています。

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

このブログのエントリーでも書きましたが、Websig24/7会議の模様は下記エントリーを参照してください。

• 第一部発表で紹介したサイトマップ(一部)公開 (WebSig24/7)
• グループワークで作成したサイトマップ公開 (WebSig24/7)

ここでも提出させてもらったサンプルがあるのですが、等斜角を持ったアイソメ図からExcelで作成したツリー図・Visioで作成したダイヤグラムなど、さまざまなカタチがあります。これはもちろん異なるプロジェクトにおいての成果物サンプルなのですが、やはりそれぞれのプロジェクト体制やドキュメントの目的は異なります。

ビジュアルボキャボラリーを活用する

「サイトマップの書式」という言い方をする場合がありますが、ドキュメントの書式というのとドキュメントで扱う情報の表現 (凡例) とは異なります。ここでは後者について概念的な理解として「ビジュアルボキャブラリー」を紹介しました。

ジェシージェームスギャレット氏の「Visual Vocabulary for Information Architecture」をコンセントの長谷川さんが翻訳したサイト「jjg.net: a visual vocabulary（日本語版）」があります。

これは，インフォメーションアーキテクトあるいはインタラクションデザイナーが，
ウェブサイトにおけるストラクチャーあるいはユーザー経験のフロー，またはその両方
を抽象度の高いレベルで記述するためのものだ。

このビジュアルボキャブラリーをすべて覚えるのでもいいのですが、抽象的な情報の (サイトマップとしての) 表現方法を理解し、ふだん作成しているサイトマップ上での表現に活かしてほしいと思います。

gihyo.jpで連載していた「Web情報アーキテクチャ（IA）とツール」も参照のこと。

ふだん扱う情報の凡例としては次のようなものが考えられます。

• 単一ページ
• リンク
• グループ
• 別ウィンドウ
• 複数ページ
• 導線
• 関連性 (関係線)

Websigでもあったのですが、この「線」の扱いについて「導線」と「関連性 (関係線)」を同一と考えている傾向が多々あるようです。ホームページから全カテゴリートップページに矢印がついているサイトマップをよく見かけるのですが、これは不適切だといえます。

矢印はステップ (進み方) としても理解できるため、ホームページと全カテゴリートップページとを結ぶ線は必ずしもその順番で画面を遷移しないといけないわけではありません。したがって、表現する場合は矢印ではなくコネクタとして (ただの線で) 表現するほうが好ましいでしょう。

最低限必要なサイトの情報

また、サイトマップには最終的に物理的 (ページ) にするための情報も含まれるため、以下のような最低限必要なページ (情報) も含めておくといいでしょう。

サイト情報/Site Information

• サイトマップ
  
• サイトの利用規約
  
• プライバシーポリシー

機能/Function

• サイト内検索
  
• RSS配信
  
• 文字サイズ変更
  
• 印刷

Flickrのほうにあげていただいたサンプルについてもいくつかコメントさせていただきましたが、こちらは別途細かく見ていくとしていくつか注意点があげられます。

• 関係性を矢印で表現しない
  
• 階層はわかりやすく構造化する
  
• 画面エリアで整理しない (見た目で分類しない)
  
• 導線にあたる線は矢印にする

潜在意識にあるサイトマップを描いて共通認識を探る

ワークとして、「企業情報」配下のツリー図を描いてみることをしました。これは潜在的に自分の中にある (ある意味) 基本的な情報構造を表現したみた場合に、他人とは違う点、また、とらえ方にも個人差があり共通項を見つけることが難しい点を体感してほしかったことが理由です。

たとえば、「プレスリリース」と言ったときにはどうでしょうか。2009年の情報をプレスリリース (インデックス) ページに含めるのか含めないのかでも書き方は変わってきます。リダイレクトするなどの情報をどう表現すれば伝わりやすくなるのか考えてほしかったわけです。

事前改題の回答例

サイトマップは比較的抽象的で構いません。何度も言っていますが、事前課題の状況を踏まえた場合の詳細度でOKです。凡例としては大分類のグルーピングがされていればほかはとくに気にならないかと思います。

ポイントとしては、以下2点が表現されていることになるかと思います。

• 「サービス・ソリューション」「施工実績」配下に共通にある「分野」などの情報分類と相互リンク (関係性) の表現。
  
• 「お問い合わせ」および「サポート情報」への矢印 (つながりの) 表現。

さて、次は「ナビゲーションを考えてみよう」を振り返ってみます。

関連エントリー

• 企業サイトにおける4+1のメニュー分解 (CSS Nite LP7 Redux 02)
• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」

撮影: 飯田昌之

企業サイトの情報分類

ひとくちに「企業サイト」といっても昨今の企業サイトを見れば単純な会社情報だけを扱っていないことに気づきます。つまり「事業内容」が肥大化してサービス情報として大きく取り扱う傾向があります。

企業サイトと言われるほとんどが――

• その企業の情報を扱う「会社情報系」
• その企業の事業を象徴する「商品・サービス系」

とに大きく分類することができます。

例にならって課題サイトのメインメニューを「会社情報系」「商品・サービス系」に分類してみると、ほとんどの情報が収まることがわかります。

サイトマップページには「(実は) 提供側で見てほしい情報が隠されている場合がある」と書きましたが、やはりメインメニューにも提供側の意図が見え隠れしてきます。つまり、企業情報を主にしている場合には「会社情報系」を主軸に、サービス情報を主にしたければ「商品・サービス系」を主軸に分類していることがあります。

また、「企業情報サイト」「サービスサイト」というサイト単位で分けているケースもあります。ドメインから分ける場合や管轄部署を分ける場合など理由はさまざまありますが、その企業の事業範囲とサイトに掲載している情報の規模によりどこに主軸を置くかは検討が必要です。例として、ソフトバンクモバイル株式会社の企業情報サイトとサービスサイトがあります。

企業サイトにおける4+1のメニュー分解

経験則ですが、企業サイトで扱うサービス情報には相対する「サポート情報」が含まれます。それは、そのサービス情報には「これから利用する人」「すでに利用している人」が想定できるからです。

• 新規 (商品・サービス/Webサイト) 利用者向け
• 既存 (商品・サービス/Webサイト) 利用者向け

多くの企業サイトで「お問い合わせ」が目立つ位置にあるのはこの情報群を取り出しているせいです。もちろんコンバージョンを意識した「アクション」として位置づけているケースもありますが、ここでは情報の種類で説明しています。したがって、企業サイトで扱う情報のほとんどがさきほどの2つ (会社情報系・サービス系) をこの4つにさらに分解することができます。

1. サービス
2. サポート
3. 企業情報
4. ニュース
5. 独自

また、「独自」な情報群としてその企業の独自性 (アイデンティティ) を象徴するような情報があれば情報の粒 (粒度) が異なっても含めておくほうがいいでしょう。例では、「防災のトビシマ」を独自な情報群として説明しました。

この「企業サイトにおける4+1のメニュー分解」に課題サイトのメインメニューを当てはめたものが下記です。

他社サイトの把握と業界標準

業界ごとにWebサイトを見ていくと、その業界・業態によりデファクトスタンダードが存在していることに気づきます。例では建設業界 (清水建設・鹿島建設・大成建設・戸田建設) でしたが製薬業界や金融業界などやはり一定のメニューに集約されています。ここで取り上げた他社の企業サイトでも「会社情報系」と「商品・サービス系」とに分けてみると明確にその企業の意志が伝わってきます。

B2Bにける商品・サービス系には必ずと言っていいほど「事例」や「実績」が取り上げられます。例で取り上げた他社サイトも4サイトのうち2サイトが「実績」がメインメニューに含まれていました。

最適なメインメニューのまとめ

今回の課題では、以下の2点が考慮されていればメインメニューの最適化という課題に対しては妥当性のある回答と考えられます。

• 商品・サービス系として「ソリューション」をまとめること
• 「お問い合わせ」つまり「サポート情報」を加えること

いかがでしたでしょうか。スライドでは、以下の情報群でまとめました。

• 技術・ソリューション: 商品・サービス系 (※1) としてまとめる
• 施工実績: B2B特有の情報として※1から取り出す
• お客様サポート: 「お問い合わせ」を含む情報として加える
• 企業情報: 採用情報を含む会社情報系 (※2) の根幹
• 株主・投資家情報: 上場企業としての重要な情報配信を※2から取り出す
• ニュース: 広報としての情報配信として※2から取り出す

最適なメインメニューの最適化として、さいごにまとめたのが下記3点です。

• 情報の共通項を見つける: グルーピングから情報整理ははじまる
• 他社との共通項を見つける: 業界標準を意識する
• 重視する方向性を決める: 企業情報にはその企業の意図が含まれている

ということで、「最適なメインメニューを考えてみよう」だけで2エントリーになってしまったのですが、週1くらいで振り返っていこうと思います。

関連エントリー

• サイトマップを描いてみよう (CSS Nite LP7 Redux 03)
• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」

撮影: 飯田昌之

当日のスライドはSlideshareにもアップしています。「IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)」もご覧ください。

事前課題

事前課題を出したのは、当日までに気分を盛り上げる作用もありますが、どちらかというと参加者が期待されている「IA」をワークを入れて全体像をつかむには1時間内ではどうしても時間が足りなかったせいです。

これまで参加したことのあるワークショップでは、前提となる参加者の状況や役割により意見が分かれて論点がブレてしまう傾向があると感じたため、状況を決めてしまうところから考え始めました。

• 自分は30代のWebディレクターである
• 勤務先の制作会社では、内部にデザイナーやコーダーがいる
• 来週顧客に説明に持っていく資料
• その資料は、要点が書かれていればよい
• 上司 (営業) もいっしょに同行する

この状況ですと、「サイトマップ」と言ったときに想像するものは詳細なサイトマップである必要はありませんし、デザイナーではないのでデザイン的に作り込む必要もありません。時間的にもそれほどあるわけではありませんので、時間をかけて課題に取り組む必要もないことになります。

対象サイトの選定

「飛島建設」さんのウェブサイトを対象にしたのは以下3つの理由です。

• 今どき珍しいレガシーなつくりだった
• ざっと見た程度でも改善点が見つけやすかった
• 建設業界という大きな業界のため類似サイトが多く見つけやすかった

最適なメインメニューを考えてみよう

あえて「メニュー」という言葉を使ったのは「ナビゲーション」という言葉の持つ意味と分けて考えたかったからで決して言葉の定義が揺らいでいるわけではありません。また、「7つのナビゲーション」を出したのは、前のセッションの振り返りの意味があります。

まず、サイト全体を把握することからはじめると思いますが、その際には――

• メインメニュー (ナビゲーション類) を見る
• サイトマップページを見る
• 一定時間いろいろ触ってみる

をしていくことになると思います。ヒューリスティック分析やユーザビリティ調査をしたことのある方にとってみれば、もう少し細かい作業をするかも知れませんが。もちろん個別の情報を得るにはアクセス分析ツールを見ることや、プリフェッチャソフトなどでファイルを取得して物理的な情報を見るというのもあります。

さて、その中でサイトマップページには2つの側面があります。

1. そのサイトで扱う情報 (ページ) の大分類がわかる (反対に上位階層だけの場合がある)
2. (実は) 提供側で見てほしい情報が隠されている場合がある (階層で割り切れない場合がある)

とくに2は経験がある方も多いと思います。

課題サイトでは、メインメニューで扱っている分類とサイトマップページで扱っている大分類とでやはり違いが見つけられます。これが2にあたる部分だと推測できるのですが、この段階でメインメニューの分類とサイトマップページの分類に違いがある点を見つけられればOKです。

実体をもたない情報分類

課題サイトのサイトマップページ左上には「トップページ〜」という3つの分類があります。これも前述の2にあたる部分ではありますが、どうしても画面要素で分類しがちな点は必ずつきまといます。これら3つの分類は、実体をもたない集合体でいわゆるショートカットリンク集にあたります。つまり、実体はほかの分類として分けられているのに、画面要素での分類でも見せたいという意図 (前述の2) が理由としては考えられます。

当日は3つとも対象外として説明しましたが、実は3つめの「トップページ下部メニュー」というのは無視してはいけません。「サイトの利用規約」や「プライバシーポリシー」はサイトに必要な情報群としてまとめるケースがあります (例: サイト情報)。当日は論点をメインメニューにしたかったのでここの説明は省きました。

共通項目をまとめてグルーピングしてみよう

「KJ法」や「カードソーティング」という言葉で聞くように、情報に分類にはいろいろな方法があります。課題サイトで扱うメインメニューを考える際に、そのサイトで扱う情報構造の最上位を自分の視点でグルーピングしてみるところから考えてみました。

当日も話しましたが、事前課題で取り組まれた参加者のほとんどが画面要素に分解して考えていたこと (つまりワイヤーフレームで考えていたこと) には驚きました。あえて「メニュー」と表現したの真意は、まずは情報の分類を純粋なリストで考えてみてほしかったからです。

課題サイトを改めて見た場合、ホームページと下位階層ページのナビゲーションが違っていることに気づきます。ここで、下位階層ページのナビゲーションを、ある視点で分類 (グルーピング) したものがホームページでのナビゲーションになると思ってしまうとNGです。

例として線を引いたものがありますが、さきほどのサイトマップページの分類とホームページのメニューとで突き合わせた場合に、結局まとめきれずに「防災のトビシマ」と「Bespokeサービスソリューション」が余ってしまうことになります。したがって、この2つをグルーピングしなければ、サイトの情報分類の最上位を整理できたことにはなません。例では「サービス・ソリューション」という分類を追加しています。

少し長くなってしまったので、ここでいったん区切ります。

関連エントリー

• 企業サイトにおける4+1のメニュー分解 (CSS Nite LP7 Redux 02)
• IAスペシャルでのワークショップ (CSS Nite LP, DISK 7)
• CSS Nite LP7「IAスペシャル」

先日 (9/12) 行われた「CSS Nite LP, DISK 7」は、300人を越す参加者となり予想以上に大人数かつ大きな部屋に大きなスクリーンで、これまでにはないシチュエーションでした。

前半のセッションではどちらかというと参加者が聴く姿勢になるので、わたしのセッションではできるだけ手や頭を動かせるワークショップ形式にさせていただきました。300人強でワークショップ (?!) というのははじめてで大きなチャレンジでしたのではじめはどうなることかと思っていたのですが、みなさんの協力あってカタチにすることができました。

当初、もう少し参加者と近い距離を想定していたため、その場で課題に対する質疑応答なども考えていたのですが、想定以上に部屋が大きかったこともあり (参加者が多いということもあり) かなり小刻みにタンタンと進めるような格好になりました。

撮影: 飯田昌之

結果としては、事前課題に取り組めた方と取り組めなかった方とで大きく反応が分かれましたが、伝えたかったこと (感じてほしかったこと) は、十分に伝えることができたと思っています。

ワークについては、課題の出し方・取り組み方がうまく伝え切れずに消化不良にさせてしまった点がありました。ただ、このテーマを考える上で重要な点は伝え切れたと思います。あの場で理解できなくてもあとあと「こういうことを言わんとしていたのか」と思う場面が必ず出てくると思うので、そういった場面で活かせられれば幸いです。

別途、課題についてのエントリーも書こうと思います。

ちなみに今回「IAスペシャル」だったのですが、「IA」を専門職の領域だとかある意味遠くて現実的ではないと思われてしまうことを嫌って、このセッションでは「IA」という言葉を一回も使わずに進行してみました。また、テーマに「LPO」とあるのですが、こちらもあえて「LPO」「ランディング」という言葉はいっさい使わずに、考え方や手を動かすことで中身を伝えるようにしました。

というのも、参加者が自分たちの関わっている業務に直接関係している範囲で考えてほしかったのと専門用語を使うことで「知っている」というふうに安直にとらえてほしくなかったことが理由です。手を動かすことで「知っている」のではなく「理解できている」ということを自身で感じてほしかったことが一番の理由です。

撮影: 飯田昌之

懇親会の場で安藤さんと建設業界におけるウェブでのソリューション訴求は実際にはあまり意味がないので、現実味が薄かったとご指摘もいただきました。建設会社さんを題材にした理由は、たまたま見つけたレガシーなつくりだったことと間違い探しをしていく上で説明がしやすかったのが理由で、それ以外にはありません。

反省点

アンケートのほうで皆さんからご指摘いただけことも、自戒を込めて今後の活動に活していくようしたいと思います。

• 事前課題を取り組んでもらうような促し方ができなかった。
• 課題の取り組み方とアウトプットイメージを伝えきれなかった。
• 所々早口になってしまった。
• スライドの文字が小さい部分があり遠くの方から見えにくかった。
• グループディスカッションに時間をあまり割けられなかった。
• 時間を延長してしまった。

今後の取り組み

最後にご紹介したデジタルスケープのワークショップは、下記からご覧いただけます。

• デジタルスケープ｜セミナー・トレーニング
• 坂本貴史氏に学ぶ、WebディレクターのためのIA入門｜ワークスコーポレーション

今回の反省点を活かして、さらにパワーアップしてお届けしていきます。

• CSS Nite LP, Disk 7「IAスペシャル」が終了しました | CSS Nite公式サイト

関連エントリー

• 最適なメインメニューを考えてみよう (CSS Nite LP7 Redux 01)
• CSS Nite LP7「IAスペシャル」

• Webサイト設計ワークショップ 2009年2月1日（日曜日） | サイバーガーデンbiz

 「サイバーガーデン」の益子さんといえば、CSS NiteやWeb検などではもうおなじみの方ですよね。

今回お話をいただいたのは、Web Directions EASTのときだったと思いますが、ワークショップのニーズは業界内では日に日に増しているように思います。もうハンズオン形式で先生と生徒という関係だけだと辛いんじゃないかなと最近感じているところもあります。

ココでも書きましたが、エントリー層からミドル層へ・大人数制から少人数制へとレイヤーが異なる活動の一環を今後はしていくということで、今回は少人数制である程度時間をかけたワークショップを実施してみようと思います。

内容は、WebSigでも行ったライブIAとグループワークと同じ構成です。ただ、1つ1つのセッションにかけられる時間がぜんぜん違うのと、少人数なのでいっしょに話しながら余談も交えながら一緒に考えられればと思います。

ご興味ある方はぜひ参加してください。

お菓子でも食べながらウェブのことをじっくり考えてみる時間を持ってみませんか?

• お申し込み | サイバーガーデンbiz

「ライブIA」をしたら面白いかも、というアイデアからはじめたこのIA分科会は、なんとか無事に終えることができました。WebSigの運営者や参加していただいた皆さん本当にありがとうございました。そしてお疲れさまでした。

思い返してみると、これまでのプレゼンはスライドをつくることにそれなりの時間を要して取り組んでいたのですが、今回はスライドはありませんでした。その場でブラウズする画面とクロッキー帳に手書きで描いた自分のヘタクソな字だけです。それがお客さんにとってベストプラクティスだったかどうかはわかりませんが、自分の考えていることを口に出して頭の中にある図を実際に描いてみることで、思考工程を可視化するにはちょうどよかったかと思います。

ということで、ちょっとだけ補足というかなにを伝えたかったのかを書き留めておきます。

第一部 本邦初公開! リアルタイムにIAの思考を追うライブIA

お題は、「東京都公式ホームページへようこそ」を「ユーザーがきちんと使えるサイトにする」というものにしました。もちろん時間制限がある中での取り組みでしたので、ポイントをいくつかに分けてご紹介しました。整理すると以下のような具合です。

1. 前提 (知識) をつくる

外部評価ランキングやその評価基準の移り変わりを見ていく

2. 価値基準をつくる

自分の感覚と近いお手本サイトを決めて見まくる

3. リアルを想像する

リアルで体験してみる。実際の自分の体験とを重ね合わせてウェブの使い方を考える

4. ユーザーを考える

当事者・関係者・利用者は必須だが、自分が利用者になって考える

5. 仮説としてのシナリオを考える

自分だったらこう使うという使い方をプロセスに分解して要件にする

6. サイト構造を考える

サイトマップを見て情報分類を再整理する

7. ナビゲーションを考える

大分類とファセット分類などを整理してメインナビゲーションを決める

8. ラベルを考える

シナリオで作った要件に必要なラベルで再整理する

9. 画面フローと画面を考える

シナリオで作った要件に必要な画面フローと画面を考える

自分の中では、「これがIAです」というものを語るというより、サイトやその利用方法を考えて想像して形づくることって楽しくないですか? ということが一番伝えたかったことです。そうして考えたものなので、自分が使って満足いく形にしたいですよねと。自分が使って使えないサイトってなんだか寂しくないですかと思うので。

なので「IA」という言葉は使っていますが、どちらかというとウェブプロデュースやウェブディレクションをする立場の方でも「作り方」を体験してもらうにはちょうどよかったんじゃないかなと思っています。

動画もYoutubeのほうにあがっていますので、興味ある方はご覧ください。

• IA分科会 「明日からできるIA Vol.3 ユーザー目的からユーザーフローを導き出す」のビデオを公開いたしました (WebSig24/7)

• YouTube – websig さんのチャンネル

そのあと、第二部でグループワークをしてもらったわけですが、皆さんが楽しみながらグループワークができたのかが一番気になったところでした。

• 楽しむ
• チーム内での価値基準をつくる
• 使う上での目的の扱いを考える
• あくまで自分だったらこう使うだろうを考える

ポイントとしては「チームでの価値基準をつくる」がありました。複数人でのチームプレーなので価値観として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主催」というカタチはいったん終了することにしました。

ご協力いただいた皆さん、本当にありがとうございました。

そして次のステップを考えているところです。

また、今回は「Crusher」というサービスを利用して参加表明をしてもらうようにしました。招待状をカスタマイズできて事前にアナウンスやメールが送れるのでコミュニティ運営には必要だなと。

プレゼンといっても「プランニング」「スライド」「スピーカー」という分類に分けて課題を個人で出し合い、それについての解決策をグループワークで洗い出していきました。カラーで大きめの付箋とクロッキー帳、模造紙が手作り感満載で「やってる感」が演出できました。

結果

結果として、課題に対しての解決策を16の項目に絞ってまとめることができました。項目の詳細はヤスヒサさんのブログを参照してもらうとして、ワークショップ自体についてはみなさんのレポートが参考になるので、一緒に見てもらえればいいと思います。

• 「よいプレゼン」を考えるワークショップにて：編集的ウェブ考 – CNET Japan
• プレゼンワークショップを開催しました : could
• aMaze: プレゼンワークショップに参加
• プレゼンワークショップに行ってきたのでまとめ | Blog hamashun.com

ちなみに、場所はミツエーリンクスさんに提供していただいたので、とても近代的な摩天楼 (なぞ) のような場所ですることができました。ありがとうございます。

ワークショップで感じた課題

• 時間と人数
• 参加者と参加条件
• プログラム

時間はやはり足りなかった。全部で6グループ (3人) として発表をしてもらったわけですが、1グループ10分程度は必要でそれだけでも1時間は必要でした。

今回はクローズで実施したので、参加者のレベルが (知識・経験・理解度が) 高かったことを痛感した。アンケートをとって感想を書いていただいたのですが、その内容からしてそう思えました。ありがとうございます。これがmixiとかでおおっぴらに公募していたらこんな風にはならなかったと思います。次回は参加条件などもきちんと決める必要があると感じました。課題についてもそうですが、事前調査をもっとすべきでした。

プレゼンという抽象的なテーマであったこともあるのですが、やはり深堀りしきれなかった。問題解決はいくつか出せたものの、それ自体を評価するようなところまでできなかった。実践という側面がなかった。1回3時間の中にはおさめることができないので、それを考えると、講義・実践といって会を分けるくらいがちょうどいいのかなと。

今後の方向性

ビジョンは「超える」という感じで、業務のカテゴリを超えることもそうですし、業種を超えるというのも当てはまるかなと。

ヤスヒサさんは、アイデアインキュベータみたいなコミュニティを創造してたみたいで、ボクはプレゼンからはじまったこともあるので、そういう軸で異業種交流ができるような形になればいいかなと考えています。

そうこうしていろいろ考えていくと、だんだん仕事よりヘビーな感じになってきたわけですが、今後のスタイルとしては次のような感じを考えています。

サロンみたいな場で、何人かがプレゼンする (ライトニングトーク?)

やはりライブでの緊張感は実践には必ずつきものなので、それを体験してもらうための場は必要だと感じました。なので、それに向けての課題であり宿題 (練習) であり、そのためのワークショップであって、そのためのリサーチをするという具合です。

ということで、ワークショップのサイトが必要になってきましたな。