「Websig 1日学校2011」に参加してきました。昨年参加できたなかったこともあり、今回はどんなイベントになるのか告知されてから気になっていました。個人的にもモデレーターの方々とは面識があるので、事前にお話を聞いたりさせていただきました。

テーマが「今後のキャリア」に関するものが多かったこともり、自分自身の考えと比べたかったこともあり、「フロントエンドエンジニア」クラスで申し込みました (趣旨と違っていたらゴメンナサイです)。自分自身は「UXデザイナー」というタイトルですので、デザイナーやディレクタークラスに申し込むべきだったかも知れませんが……。

八王子のデジタルハリウッド大学という立地 (会場・アクセス) ですので、まずは遠かった。そして体育館には扇風機しかないので暑かった。予想以上に快晴だったこともあり、遠い昔を思い出すような感覚で夏の学校を体験できました。Instagramからいくつか写真を撮ったのでTwitterから見ることができます (写真: Recent images by @bookslope)。

カレーもうまかったし、レッドブルガールもいたし、体育の先生や保健の先生などコスプレもあり、リスまで登場したし、楽しく過ごすことができました。スタッフのみなさん本当にお疲れさまでした。

参加してみた授業の感想

感想はそれぞれの授業ごとにありますが、いくつか書き留めておこうと思います。

まず、「キャリア」というテーマだと、どうしても自分の話になると思うんです。「わたしはこうでした」「わたしはこう考えます」という具合に。それはそれで別にいいんですが、ボクは業界とか社会という側面で考えた場合に、そうするため・そうなるための「教育や環境」という側面もあるといいと思いました。

また、フリーランスの方の視点と企業 (組織) にいる方の視点とでもかなり違うところがあるので、前提としてどちらかを明示的に分けるクラス分けでもよかったのかなと思いました。

もちろん自分が参加していない授業でそうした視点があったかも知れませんので、あくまで自分が参加した授業を通しての感想です。ちなみに自分が参加したのは、下記の授業でした。

• 「HTML5とはなにか?」マイクロソフトの春日井さん @ykasugai
• 「<career>」ピクセルグリッドの中村享介さん @kyosuke
• 「デザイン視点のコミュニケーション術」couldのヤスヒサくん @yhassy
• 「キミたちはどう生きるか」元IMJの荒井先生 @naohidearai
• 「仕事を通じて社会に提供している価値とは」ワールドカフェスタイルで全員参加

仕事を通じて社会に提供している価値

最後のワールドカフェ (風?) なグループワークでは「仕事を通じて社会に提供している価値」というテーマでしたが、いくつかのポイントをその場でまとめることができたので、ついでに絵にしてみました。

つまり、我々は〈カタチをつくる〉ことによって〈社会を豊か〉にし、その結果〈人々をハッピーにする〉という図式です。当たり前ではあるのですが、いろいろな方々の意見がこの手段と社会的な結果と個人（情緒）的な結果に分けられたので、そのように整理してみました。また、〈カタチ〉はこの場合は〈Web〉になるわけですが、カタチをつくるほかにもカタチにすることも含まれている感じです。

ただそれだけだとほかの業界や業種にも当てはまるので、Webの業界だから言えることを考えたところ、「ハッピーにする」ほかにあった「成長に貢献する」ことでも言えますが、「圧倒的なスピードで加速させていること」「尋常なないくらいな広がりをみせていること」が言えると思います。また、「なぜそれだけ情報を提供する必要があるのか」という問には「信頼」というのもありました。ボクはこの議論を最後まで続けられませんでしたが、「平和」につながるキーワードだったんじゃないかと帰りの電車で思ったくらいです。

あなたが考える「デザイナー」ってどんなイメージですか?

カタチにするという話では、ヤスヒサくんからの問い「あなたが考える「デザイナー」ってどんなイメージですか?」でも考えたことが当てはまると思うのですが――

デザイナーとは「創造できる人」だと思っています。
創造できる人とは、潜在的な事象を顕在化できること、顕在化したものを具現化できることだと思っています。

潜在的な事象を顕在化することとは、顧客やユーザーが意識していない・意識できていない課題を見つけることを指しています。顕在化したものを具現化することは、その見つかった課題を解決することを指しています。課題にはさまざまあると思います。「売上が上がらない」「操作がしにくい」など。こうしたことはある事象のもとに判断していますので、その判断ができることも創造力の1つだと思います。単純な数字を見て「これはこういうことだ」と考えること〈仮説力〉にも通じる解釈だと思います。

また、具現化することはカタチにすることを指しています。「プロジェクト計画を立てる」ということも含まれますし「ビルを建てる」ことも「料理する」ことも含まれます。

とりわけ、自分自身で考えてみると、前者の〈潜在的な事象を顕在化すること〉が仕事の大半を占めていることに気づきます。最終的には、Webサイトというカタチになったり、今後のマイルストーンというカタチになっているような気がします。その流れを線でとらえるとヤスヒサくんのプレゼン「デザイン視点のコミュニケーション術」にもあった「プロセスへの参加」ということにつながるのかも知れません。

最後に「明日からできる一歩」は自分としては「知らない人に声をかけること」にしました。TwitterやFacebookでフォローしている人が増えている中、リアルでそうしたことができない性格なので、少しでもいろいろな方々をお話をしていくことが自分の成長にもつながるのかなと思いました。

最近は話す方が多い中で、こうしてほかの方のお話を聞く機会に出会えて新鮮でした。

今回のイベントに参加したことで「Websig 1日学校2011」というデザインプロセスに参加できたのかな、と思います。ありがとうございました。そして関係者の皆さん・参加された皆さん本当にお疲れさまでした。

来年も参加したいと思います。

• 第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」　終了いたしました (WebSig24/7)

また、当日のスライドもSlideshareで公開されています。

第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」

この中での課題定義については、以前gihyo.jpで書いていたエントリー「サイトマップと情報の構造化」も参考にしていただけたようで、以下のように定義付けをされていました。

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

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

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

今回の課題は「サイトマップ」だったのですが、やはりウェブサイト構築をする上ではそれだけで完結するものでもなく、ファイルリストなども十分に関係してきます。ここでも「ワイヤーフレームコミュニケーション研究会」のエントリーでも書いたように「前提を揃える」ことが大切になってきます。そういう意味では前提としていくつか条件があったので取り組みやすかったと思います。

提出した課題

1. ボキャブラリーの標準が浸透していないため表記がバラバラ
   
2. 論理構造なのか物理構造なのかが混在してしまうケースがある
   
3. システムフローと同等の成果物と思われることがある
   
4. すべてを網羅しようとするとA3におさまらない
   
5. 運用上の更新はすべきか、誰がすべきか
   
6. 後工程でどう使うかがわからないとどこまで必要かがわからない
   
7. 結局お客さんはサイトマップを見てもわからない
   
8. 画面IDと連動するシステムがない (ソフトではあるものもあるが)
   
9. コンテンツ管理と連動しようとするとCMSが必要になる
   
10. アセット管理や素材管理と連動したくなる

参加したグループでは以下のようなことをまとめていたと思うので思い出しながら書いておきます。

課題1 (比較的静的なウェブサイト) について

必要な情報

主によく検討する情報としては以下のようなものが必要になるかと思います。

• 識別子 (枝番IDやラベリング)
  
• 単一ページ/複数ページ
  
• 物理的/概念的・論理的 (ファイルがあるのかないのか)
  
• 静的/動的 (HTMLかそれ以外か)
  
• 関係線/導線
  
• 同画面遷移/別画面遷移
  
• 本サイト/外部サイト

必要な表現

ビジュアルボキャブラリーを決めておく。

ビジュアルボキャブラリーについては、Jesse James Garrett氏の「A visual vocabulary
for describing information architecture and interaction design」をコンセントの長谷川敦士さんが翻訳された「情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー」を参照のこと。

印刷対応

全部を1枚に収めるのは不可能なので説明したい箇所だけを切り出す。

課題2 (RIAのウェブサイト) について

ファセットの表現

「どんな情報に整理でき、どんな情報を扱うのか」に着目しました。
画面上にある情報をフラットに並べて再整理をし、カテゴリの整理と出力されている情報の整理をしました。タグのようなものをサイトマップで示そうとすると (ドキュメントとして) 破綻してしまうので、説明する内容を制限し、わかりやすいものに仕上げました。

感想

ないものを作り出すための作業ではなく、すでにあるものからサイトマップを作成するため、どうしてもウェブサイトを見ての判断になり画面の要素に偏ってしまうことです。したがって、サイトマップを作成する作業にも関わらず画面仕様書に近いものを作成しているグループがあったように思います。

もちろん結論として (というか実際の現場だと) わかりやすいものであればなんでもいいのですが、サイトマップを作成するという課題に対して「結果として画面仕様書になりました」だとちょっと違うかなと思いました。

実際にサイトマップを作成する (作成するというより再整理するという表現のほうが適切だと思いますが) 状況の多くが、すでにあるものを参考にすると思うので、そういう意味では近い状況にはできたかと思いますが、であれば、課題1のサイトマップ (あらかじめ印刷されたもの) はいらなかったと思います。結果的にそれにどういう情報を付け加えれば理想のサイトマップになるのかにボクがいたグループは意見を集約できたのでよかったのですが、ほかのグループの結果を見るとあらかじめ用意されたものをなくしてゼロから書き上げていたので、論点が幅広くなってしまった印象がありました。

課題としてあがっていた「理想的なサイトマップの形と標準書式」については以下のようにまとめることができると思います。

• サイトマップの理想のカタチはワイヤーフレームと同様、自分の状況や後工程に依存する
• サイトマップの標準書式はビジュアルボキャブラリーを揃えることで標準化できる

この「自分の状況」や「後工程」にどれだけのパターンがあるのかはイシューだと思いますが、そうしたことを意識しながら日々取り組んで行くことで業界全体としても理想のカタチになっていくような気がします。

少なくても「サイトマップ」という言葉で、しかも「IA」という言葉を使わずに、これだけの参加者が集まれることや、そのことにこれだけ関心を持つ人がいること自体にパワーを感じました。

「ライブ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主催」というカタチはいったん終了することにしました。

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

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

第一部のほうは遅刻してしまったので参加できませんでしたが、第二部のほうでグループワークに参加しました。「ワールド・カフェ」スタイルということで、人が入れ替わり立ち代わり議論というかディスカッションしてきました。

テーマは「Web業界がHappyになるには?」ということで、総括はどこぞのブログを参照してもらうとして、3Rも続けた中で自分の中で考えが整理できたので考えたことを記録しておきます。

まず、個人レイヤーでは「自己実現」がHappyのトリガーになり得ます。逆に言うと、自己実現の指標（ゴールや目標）がない人はHappyになりにくいと考えられるかなと。

次に業界レイヤーで考えられることは、やはり「価値観の共有」でしょう。同じ業界でもクライアントや制作者などさまざまな人が関係してくるため、そこで同じ「これいいよね」が共有できないとダメなんじゃないかな。「リレーションシップ」だと、これに尽きるんじゃないかな。

あと業界レイヤーでおもしろいと思ったのが、制作者でもお客さんの声が聞きたいと本気で思っていることです。この「制作者でも」と書くと語弊をまねくかも知れませんが、たとえば自動車業界でいう工場で働く人間が「お客さんの声が聞きたい」と本気で思っているでしょうか。本当のところはわからないのですが、多分そんなこと考えて仕事していないと思うんです。それだけ、Web業界の人間は誰もが「お客さんの声が聞きたい」と本気で思っている。業界としては特異なんじゃないかとさえ思います。それはもしかすると成り立ちが時代背景としても比較的新しい業界であるってことなのかも知れないし、これからの業界ってのはそうならないと続かないのかも知れない。

違う見方をすれば、それだけ業界全体が小さいのかもしれないなと。そして、それは「世間（一般）」との距離が異常に「近い」ってことなんじゃないかなと。Webが生活に浸透してきているように、日常接するものであることも関係してきているように思います。これからの分野で生き残るためには、こういう進化した業界 (言い過ぎ?) として全員が「お客さんの声が聞きたい」と本気で思っている業界ではないでしょうか、と。

なかなか楽しい頭の体操になりましたとさ。

さて、2008年も後少し。

「Web標準の日々」に引き続き、WebSigのほうでもIA系のミニセミナーを実施します。

開催概要などについては、ミクシィのコミュニティ「【WebSig24/7】Web制作者の会」でトピックとしてあがっていますので引用します。

もう昨年になるわけですが、9/29にWebSig24/7のミニセミナーで講演をさせていただきました。

• 【分科会】明日から実践できるIA（ミニセミナー） (WebSig24/7)

このミニセミナーで使用したプレゼン資料「明日から実践できるIA」を公開します。

• 明日から実践できるIA (PDF・1.7MB)

また、WebSig24/7の運営メンバーでもある、えふしんさんのブログ「F’s Garage」でプレゼン資料を音声と合わせて公開していただいています。

• F’s Garage：明日から実践できるIA

また、このエントリーでは音声と合わせてプレゼン資料を見ることができます。

• 【WebSig分科会】明日から実践できるIA（ミニセミナー）

内容は見ていただくとわかるのですが、だいたい下記のような具合でした。

• 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