ペルソナ/シナリオ法の講義

講義は、HCDプロセスについての前回の勉強会の復習+ペルソナ/シナリオ法についてのより詳しいお話、という内容でした。

まずは、ペルソナ/シナリオ法の具体的な手法の前に、前回の勉強会の内容を踏まえた復習として、以前のレポートで書いたこと以外で気になった点を書いておきます。

• ペルソナ/シナリオ法の概要
  • ここ3年ぐらいで普及しつつあるマーケティングなどでよく用いられる手法
  • これといって決まった方法はない
  • 「ペルソナ/シナリオ法を使うだけでいいものができる！」はまちがい
• なぜユーザ像を明確にするのか
  • 商品の評価は使う人がするもの
  • ユーザ像をメンバーで共有する必要がある
    • 不明瞭なユーザ：ユーザは開発者自身(一方では必要なことだが)
    • 厳密なペルソナ：ユーザはペルソナ
  • Goal-Directed Design (目標主導型設計)
    1. ペルソナが目指すゴールを決める
    2. ゴールまでのシナリオを考える
  • 「優れた開発者ほどユーザのことを考えながら作らない」
    • 基本なこと：ユーザのことだけ考えているとイノベーションは生まれない
    • ユーザを要所要所に参加させる(ユーザ参加型デザイン)ことで、穴を埋めていく
• 文化の違いによる問題点
  • 日本：高コンテキスト社会
    • 行間を読む、空気を察する、など
    • ペルソナ法が浸透しにくい
  • アメリカ：低コンテキスト社会
    • はっきり示さないと伝わらない
    • 常に頭の中身を具体的に外に出す(外化)習慣がある
      • 刑事物のドラマで「壁一面に犯人のことを書き出して悩んでる場面」ってよくあるよね
• ペルソナ/シナリオ法の利点
  • ユーザ情報の理解の促進
  • コラボレーションの促進
  • 一貫したユーザ評価
    • ペルソナを基に評価ができる
    • 「ペルソナはそんなことしません！」

そして、前回よりも詳しくペルソナ/シナリオ法の具体的な手法について説明されました。

• インタビューの手法
  • ペルソナの作成には非構造化インタビューを利用
  • 2種類の非構造化インタビュー
    • デプスインタビュー
      • 根掘り葉掘り詳しく聞く方法
      • 例：心理カウンセラー
    • エスノグラフィックインタビュー
      • 現地の人に対象のものを実際に触りながら聞く方法、、Web制作ではこちら
      • 例：グルメインタビュー
  • 対象者自身は問題や不都合に気づいていないため、よりよいものを使ってもらい比較させることで発見を促す
• 問題シナリオ作成時の留意点
  • サマリ報告ではなく、「生っぽさ」を失わないこと
  • 行動のステップを描写すること
  • インタビューで実際に使われた言葉を効果的に利用するとよりよい
• KJ法でまとめるときのポイント
  • ポストイットには「動詞(〜する)」で書いてまとめるとわかりやすくなる
• シナリオを書くときのポイント
  • キャッチフレーズをつけるとイメージしやすくなる
• シナリオの種類
  • アクティビティ・シナリオ：やることを書いたシナリオ
  • インタラクション・シナリオ：やったことを書いたシナリオ
  • 相互に変換したり、かき分けるとユーザの行動がわかりやすくなる

前回同様、実践されている写真を交えた大変わかりやすいお話で夢中で聞いていました。
この後、今学んだばかりのやり方を早速実践！ということでワークショップがはじまりました。

ワークショップを通してわかったこと

今回の課題は以下の通り。(浅野先生のブログ記事からお借りしました。)

ワークショップの様子は浅野先生のブログのレポートをご覧になると雰囲気がつかめるかと思います。
今学んだばかりのものをいきなりやってみている上に、時間がないのでもう必死でした。

そして、実践するとやはり思っていたものと実際は全然違いました。IA100を読んだりしてなんとなく頭にあったものの、2人分インタビューして、ポストイットに書いて、まではなんとか手探りでやったのですが、そこからKJ法で分類するのが難しい。「インタビュー数が少ないと後が大変」と先生がおっしゃっていたのはその通りで、2人分の結構対照的なことが書いてあるポストイットをうまくまとめ上げるのは苦労しました。

個人的な反省点は、課題である醤油への本質的欲求をしっかり意識してまとめる作業することが作業に必死で結構頭から離れていたことです。
完成したペルソナとシナリオを見ると、解決への道(=醤油を意識したペルソナとシナリオ)が見えにくいなぁと感じました。インタビューする上で、ユーザが醤油に対してどのような欲求や考えがあって行動に繋がっているのか、をもっと意識していればよかったのかなぁと。

「ペルソナは諸刃の剣」であることを実感しました。ペルソナが的外れなものだと、その上に積み重なってくるものがすべて破綻してしまう、素人には危なすぎます。うまいペルソナをつくるにはとにかくいっぱいペルソナつくって経験を積む必要があることを身をもって感じました。
そういった意味で、浅野先生の要所要所のアドバイスは本当に的確で勉強になりました。きっと、こういう経験が豊富な方に師事して経験を積んでいくのが一番の近道じゃないかなぁと感じました。

今年の抱負

今年も昨年と同様Web編とプライベート編に分けて書きたいと思います。

昨年の反省会

2009年初エントリにもえらそうなことが結構書いてますね･･･。

[SESSION-1] 名古屋のWeb制作会社2009年を振り返って
名古屋のWeb制作会社のみなさん

このセッションでは以下の制作会社のみなさんに、この2009年に力をいれたことや制作事例、気になったことなどを15分程度で取り上げていただきました。
以下に気になったことを書いておきます。

• トライデントコンピュータ専門学校 : 水野さん 原さん 堀尾さん 河口先生
• 山崎デザイン事務所 : 長谷川さん
• アップルップル : 山本さん
• スーパーエレメンツ : 中村さん
• モンキーワークス : 古庄さん
• マール : 増田さん
• アクアリング : 岩田さん

[SESSION-2] 2010年に飛躍するための7つのキーワード
長谷川 恭久　さん　(could)

ヤスヒサさんによる2010年(というかこれからのWeb)で注目すべきキーワードと、それに自分を対応付けていくためのプレゼン(鼓舞)、というありがたいお話。いや、ホントに重要なお話だと思ったのです。

まずはポイントとなる7つのキーワードについて僕なりにお話をまとめてみます。

• OSの多様化
  • OSらしいソフトを作るためのガイドラインが存在
    • 使いやすさのヒントはOSにある
  • ニーズに合わせたハードとOSの開発が広まっている
  • OSの特徴を活かしたデザインの提案が重要
• リアルタイム
  • 時間がなくて忙しいから広まった
  • 人は今すぐの反応を期待し、「今」を楽しむようになった
    • リアル感を感じるのに貪欲になっているのでは
  • ビジネスにおいてもリアルタイムは将来必須
    • これを実現できる部署がないからできない
    • Twitterのようなコンセプトだけがリアルタイムではない、ということに注意
• Eco・IT
  • ITとEcoは切り離せない
  • 情報の透明化＝ブランド
  • 企業/個人のエゴでおわらない
• トラッキング・アラート
  • 必要なときだけ丁度良い情報提供が重要になってくる
    • 顧客との新たな関係
  • 企業はサービスプロバイダーへ
• 情報発信の民主化
  • 情報発信のコストは限りなくゼロに
  • リアルタイムなコンテンツ発信へ
• アウトソーシング
  • ユーザテストの低価格化
    • 何でも自家製にする必要はない
  • 柔軟性が今後の鍵
• 情報のポータブル化
  • データはよりコンパクトへ
  • データとデータがつながり始めている
    • (情報の賞味期限を表現している)マークアップが重要

体系的にまとまっていますが、やはり我々が知りたいのは「具体的にどうすればいいんだろう」とうことです。それについていくつか具体的なお話をしていただきました。

たとえば、マークアップでは、マークアップと表現のバランスに注意して1ページ1テーマ・なるべく絞ることを意識したり、他サービスとの連携^[1] などの工夫をする。また、ページだけでなく情報をデザインする意識でいること、などを挙げられました。

また最後の方に軽くおっしゃっていた、Webの特性を活かすこと、例えば典型的な特徴がコピー&ペーストなのに、必要な情報が画像(容易にメモやスケジュールに記録できない)、などは避けることが重要というのは、簡単なTipsですがなるほどなぁと思いました。

今回のお話は2010年じゃなくても、もう少し先にすごく生きてくるお話だったんじゃないか、感じたのでした。

忘年会

冬のWCANのメインとも言われている忘年会ももちろんありました。場所はいつもの国際会議情の展望レストラン パステルで。

まずはじめに、事前に募集されていた2010年のWCANのロゴが、勉強会での3組による決選投票の末決定しました。
決まったのはセッション1でも前で作品紹介していたトライデントさんの堀尾真衣さんのロゴでした！おめでとうございます！

僕も1点応募したのですが、かすりもしませんでした。笑

こんなの。あえてこれまでになさそうな色を選んでかっちょよく作ってみたら、決選投票の3つはすべて一代目ロゴの4色でかわいらしい感じのが選ばれていました。完全に読み違えた･･･。

で、忘年会では学生の方が多く参加されていたのでお話させていただきました。とても楽しいのですがやはりいつもあっという間ですね。もう1時間長かったらいいなぁ。
今年も大変お世話になりました。おそらく名古屋にいてWCANに参加できるのは次のSpringで最後でしょうか。とっても寂しいです。

関連記事

• [開催情報] WCAN 2009 Winter
• [報告] WCAN 2009 Winter
• [Twitter] Twitter / Search – #wcan
• [SESSION-1] 名古屋のWeb制作会社2009年を振り返って
• [SESSION-2] 2010年に飛躍するための7つのキーワード
• WCAN 2009 Winter で紹介したサイト一覧 : could

設定方法

1. Firefoxのロケーションバーに「about:config」と入力してEnter^[1]
2. フィルタの検索バーに「browser.gesture」と入力
3. マルチタッチジェスチャーで設定できる項目が複数表示されます(上画像参照)。
4. 設定したい項目の「値」をダブルクリックするとそのジェスチャーをした際のアクションを編集できます。
5. 設定が終わったらFirefoxを再起動すると使えるようになります。

設定項目のジェスチャを書いておきます。

browser.gesture.pinch.in, browser.gesture.pinch.out

ピンチイン、アウト(2本指)

browser.gesture.swipe.up, browser.gesture.swipe.down

上方向、下方向にスワイプ(3本指)

browser.gesture.swipe.left, browser.gesture.swipe.right

左方向、右方向にスワイプ(3本指)

browser.gesture.twist.left, browser.gesture.twist.right

左回り、右回りにツイスト(2本指で回転)

設定できるアクション一覧

アクションは沢山用意されており、以下に使えそうなものをメニューバーの項目名に沿っていくつか挙げておきます。
さらに多くの項目がStrings of my incoherenceの記事で紹介されています(英語)。

cmd_newNavigator, cmd_newNavigatorTab

新規ウィンドウ (Command + N)、新規タブ (Command + T)

Browser:OpenFile, Browser:SavePage

ファイルを開く (Command + O)、別名でファイルを保存 (Command + S)

cmd_print

プリント (Command + P)

cmd_close, cmd_closeWindow

タブを閉じる (Command + W)、ウィンドウを閉じる (Command + Shift + L)

Browser:AddBookmarkAs

このページをブックマーク (Command + D)

Browser:Home

ホーム

Browser:BackOrBackDuplicate, Browser:ForwardOrForwardDuplicate

戻る (Command + [)、進む (Command + ])

Browser:ReloadOrDuplicate, Browser:ReloadSkipCache

更新 (Command + R)、更新(キャッシュをスキップ) (Command + Shift + R)

Browser:PrevTab, Browser:NextTab

前のタブ (Command + Shift + [)、次のタブ (Command + Shift + ])

cmd_fullZoomReduce, cmd_fullZoomEnlarge

縮小 (Command + -)、拡大 (Command + +)

cmd_fullZoomReset

(ズームを)リセット (Command + 0)

Browser:OpenLocation

ロケーションバー (Command + L)

Tools:PrivateBrowsing

プライベートブラウジングを開始 (Command + Shift + P)

History:UndoCloseTab

閉じたタブを元に戻す (Command + Shift + T)

サンプル

下の画像の上にポインタを持ってきてみてください。

使用した画像ファイル

わかりやすいように2pxのボーダーと背景色を設定しています。

viewmore.gif

HTMLで利用した画像です。

viewmore-hover-after.gif

CSSのhover時に利用した画像です。「CSS ロールオーバーのアクセシビリティを少し考えてみた」の時とは違い、透明部分がない画像になっています。

HTMLコード

これは以前と全く同じです。

<a href="#" class="viewMore">
  <img src="viewmore.gif" alt="過去の記事一覧を見る" width="142" height="20" />
</a>

CSSコード

プロパティはわかりやすい順序で書いています。

a.viewMore {
  display: block;
  width: 142px;  /*viewmore.gifの横幅*/
  height: 20px;  /*viewmore.gifの縦幅*/
}

a.viewMore:hover:after {
  content: url(viewmore-hover-after.gif);  /*viewmore-hover-after.gifを挿入*/

  width: 142px;  /*viewmore-hover-after.gifの横幅*/
  height: 20px;  /*viewmore-hover-after.gifの縦幅*/

  position: absolute;
  margin-left: -142px;  /*viewmore-hover-after.gifの横幅分マイナス*/
}

ちなみに、今回はa.viewMoreをブロック要素にしていますが、この指定は必要なくても動作します。このサンプルではline-heightが指定されている関係でafter疑似要素で挿入した画像との縦位置がずれてしまうためにこのようにしているだけで、.css_rollover_using_after-pseudo-element p {line-height: 1;}とかすると、ブロック要素とする必要もなくなります。
つまり、ブロック要素からインライン要素まで幅広く使える手法になっています。

しくみ

1. hover時にa要素の後ろ(:after)にcontentプロパティでviewmore-hover-after.gifを挿入
2. 「position: absolute;」で挿入した画像をa要素の真後ろに配置
3. 「margin-left: -画像の横幅;」でviewmore.gifの真上に移動

という流れです。after疑似要素は、IE8が::afterに対応していないため、:afterを使っています。

どうやらFirefox、Safari、Operaでcontentプロパティによって挿入された画像の出現位置が異なるようで、試行錯誤の過程で「position: absolute;」とすると、どのブラウザもa要素の真後ろに挿入画像がいくことが判明しました。

ですので、まだ十分な検証はできていませんし、hover時にのみviewmore-hover-after.gifを出現させると画像を読み込むタイミングがどうなるのかよくわかりません。そこのところが分かる方はぜひご教示ください。

各OFF環境での動作

CSS OFF時

イメージがそのまま表示される。
hover時は変化なし。

画像OFF時

イメージの代替テキストが表示される。
hover時もテキストのまま

JavaScript OFF時

問題なし。

もともとすべてCSSで制御しているので、もちろんCSSがOFFの時は何も変化ありません。ただ、前回と違って、画像OFF時に元の画像が消えてしまうことがないため、よりアクセシビリティは高いのではないかと思います。

考察みたいな

この方法ってすでにどなたかが見つけて実践されているんでしょうか？IE7以前では使えないのですが、今後IE8がどんどん普及してくれるようになれば、この手法も使えるようになる、ような気もします。

僕はPure CSSなところが好きです。

HCDプロセスと新しいデザイン教育
浅野 智　先生　(横浜デジタルアーツ専門学校)

随時メモを取っていましたが、ここでは特に印象に残ったこと・勉強になったことを過剰書きで。

• IT社会の問題
  • 情報が多すぎて理解できないこと
  • コンピュータが難しくて使えないこと
  • 作り手・使い手の顔が見えないこと
    • 技術さえあれば同じものが作れるわけではなく、コミュニケーションなどを通じて身につけてきた経験が必要
    • これがユーザーエクスペリエンス(UX)
• ユーザ中心設計の思想
  • UX(ユーザが良い経験をすること、経験のデザイン)をデザインすることが重要
  • フィリップス社のデザインセンター：「橋をデザインするのではなく、川を渡るシステムを作れ。」
  • Google MapsをそのままWebサイトに貼るのはダメ！
• HCDデザインの特徴：ユーザ参加型のデザイン
  • 宗教みたいに「ユーザを考える人になりなさい」といいたいわけではない
  • ユーザ自身が気がついていない問題をインタラクションの中から見つけ出し、デザインに反映
• ユーザに聴けば分かると思ってる人は大間違い：コンテキストで理解する

そして、ここからはISO12407の循環プロセスに沿って、各プロセスを説明されました。

1. ユーザ調査：おざなりになりがち
   • 一回でも参与観察しておくことが大切
   • 優秀なデザイナは参与観察を自然にやってる
   • 観察からこそデザイン(問題解決)が生まれる
2. 情報の視覚化
   • 10人のユーザを10%喜ばせるのではなく(90%は不満だから)、1人のユーザを100%喜ばせることが大切！
3. 情報のモデル化
   • ネイサン・シェドルフのモデル
   • L(ocation)A(lphabet)T(ime)C(ategory)H(ierarchy)ですべて分類可能
   • Webでいえば：地図、検索、更新情報、メインメニュー、ローカルメニュー
4. ユーザ評価
   • NE比解析
     • エキスパートとノービスのデータを取って、その比をとる
     • 3倍の差が出たはとこ、ノービスが慣れればエキスパートになれる

大変わかりやすいお話でした。今回のお話は高校の校長向けのお話の再演だったようで、Web制作とは少し分野の異なる内容もありましたが、「様々な分野に適合可能」というお言葉にもあるように、Web制作に置き換えてもとても参考になった内容だったのではないでしょうか。

また、レポートとしては、トライデントの生徒さんのブログの記事が詳しいです。

参考リンク

• 情報デザイン研究室 [先生のブログ]
• 情報デザイン勉強会＆懇親会 – ウェブDeBLOG
• IA勉強会 | おいつけおいこせ！

[SESSION-1] 80カ国に広がる世界スタンダードiPhoneが生み出したモバイルWebの世界
林 信行　さん　(nobilog2)

書籍やmactopia JapanのApple’s Eye、ITmedia +D等への寄稿などで幅広く活躍されているITジャーナリスト林 信行さんによるiPhoneについてのセッション。iPhoneの特徴や世界的な立場などの説明から、iPhoneをWebから攻めるためのアプローチを考察されました。

まず、会場でiPhoneを持っている人に手を挙げてもらったところ、今回は約6割の方が手を挙げました。もうまわりはみんな持ってるよiPhone。林さんによるとiPhone 3GS発売後半年たっても未だに売れ続けているそうで、ソフトバンクの携帯電話の出荷数の45%くらい^[1]がiPhoneでは、とおっしゃっていました。ソフトバンクに新規契約する半数くらいがiPhoneユーザでは、とも。

[SESSION-2] 60分でできる! 実践 HTML5 & CSS3 ウェブサイト
菊池 崇　さん　(Web Directions East)

菊池さんによるHTML5とCSS3についてのセッション。HTML5の概念をわかりやすく説明してくださいました。個人的にはHTML5策定の背景についての裏話?が大変おもしろかったのでこれをとりあげます。

まず、Google Trendでみると日本での「HTML5」のキーワード検索が他国に比べて飛び抜けていると紹介されました。また、HTML5は2010年9月に勧告^[2]とあるのですが、これはある意味W3Cのおどしのようなもので、本心は「フィードバックがほしかったから」ということらしいです。
参考リンクの位置が適切でなかったので修正しました。

また、CSS3については、「これまでCSS3はお遊びに過ぎなかったが、実践の時がきた」として、text-shadowやgradient、webkit-transition、レイアウトモジュールのデモなどを実演していただきました。

[SESSION-3] Webディレクターとしての経験密度とWebブランディング
名村 晋治　さん　(Webディレクションやってます blog)

名村さんのWeb業界を生きていくための方法論Webに関わるひとのあり方のセッション。だと思いました僕は。

今回のアジェンダは「ディレクターの困ることと解決方法」として以下のようなものでした。大変密度が濃く、名村さんの言い声で熱く語られているのを聴いているだけで「がんばらないとな」という気持ちがふつふつを沸いてくるようなお話でした。半年に一度くらいこのお話を聴きたい。

• 経験を仕事に使えるように結びつけていく
• 思考を可視化していく
• ディレクターの考えるWebブランディング
• 「Webブランディング」を提案要素にする

まず、ディレクターの困ることの解決方法を真剣に考えてみましょう、とのことで、具体的な問題とその解決法を以下のように説明されました。ちなみに「考える」とは「答えを出す活動」だ、とおっしゃっていたのも印象的でした。

価格設定で迷う

基準を決めていきましょう

デザインがいつまでも決まらない

決定権をクライアントサイドに与えすぎでは? ケツを決めて提案する。先までの流れを考えて、自分の役割を決めていくことが重要

やりたいことがではなく「会社として得なこと」をやらされている感がある

青島くんではないけど「やりたいことをやりたければ偉くトップになれ」独立しましょう

そして、こういった解決方法を生み出していくには「経験」によるところがあり、日々の経験を自分にきちんと結びつけていく考え方をしましょうとおっしゃいました。お話の中では、

• 「情報」と「経験」をつなげられていないから「使うことができる」形になっていない
  • 経験を結びつければ加速する
  • 得られた経験から次へ得られる情報は倍加していく
• 「情報に変える」習慣をつける
  • 起きている間、目に入っているものをすべて情報に変えること、をまずは「10分」から始める
• どういう思考をすれば「情報」になるか
  • 5回の「なぜ?」や物事の存在理由の言語化を実践

などなど。ここでは内容のほんの一部しか紹介できていません。このような常に「考える習慣」を身につけることによって、次第に解決方法を出せるようになってくる、と説明されました。それにはブログなどの文字に落とすことが重要だとし、経験を自分の血肉に「意識して」変えていくことが重要であるとまとめられました。

続いて、「Webサイトを捉える根本的な指針の1つ」としてのWebブランディングのお話になりました。まず「楽天やAmazonのロゴが描けますか」と会場に問いかけ、「ロゴは描けなくても何をやっているかはわかりますよね」とWebは(ロゴなどの見た目とかじゃなくて)サービスを訴求しなければならない、と提起されました。

そして、WebブランディングはWebだけでできることではないとして、ブランディングの基本は「お礼」であり、決して大規模サイトのみに当てはまるのものではないと説明されました。「WebサイトをWebだけで考えていると 失敗する時代である。」というフレーズはすごく印象に残っています。

ここからは、お客さんにWebブランディングの重要性を説く名村さんのスクリプトトークでした。まさに「ずっと名村さんのターン！！^[4]」という感じでした。ぜひ公開される?スライドを読んでいただきたいなぁと思います。
いやぁ、心にしみました･･･半年に一度くらいこのお話を聴きたい。

懇親会

いつもの山ちゃんで。林さんに質疑応答で質問した件についてもう少し突っ込んだお話をすることができました。大変満足でした。

また、Twitter経由で知ってすごくファンになったほのぼのとした奥さんとの絵ブログの中のひとと実は向かいの席だった、ということが終わりがけに発覚した、とかありました。

就職先が決まってから、随分Webのセミナーにでても自分の(したい)仕事と結びつけて考えるようになったなぁと思います(いいことかどうかは置いといて)。名村さんのお話をきいたりして、こういう考えた経験もそのうち身になっていくのかなぁと漠然と感じた勉強会でありました。

関連記事

• [開催情報] WCAN 2009 Autumn
• [報告] WCAN 2009 Autumn
• [Twitter] Twitter / Search – #wcan
• [SESSION-1] 80カ国に広がる世界スタンダード iPhoneが生み出したモバイルWebの世界
• [SESSION-2] 60分でできる！実践 HTML5 & CSS3ウェブサイト
• [SESSION-3] Webディレクターとしての経験密度とWebブランディング

パネルディスカッション

今回の講演者6名が前に登壇されてパネルディスカッション開始。僕は録音しながら聴いていたのでメモはとりませんでした。といってもここまでで結構押していて、割とさっくりと終わった感じがしました。こちらは公開される音声でゼヒ。

最後に、鷹野さんが「iPhone持っている人は上にかざしてください」というと･･･なんということでしょう。実に会場の7割くらいの人がiPhoneを持って手を挙げるではありませんか。なんという業界だ、と思うと同時に、自分の立場としては非常に微妙な気分になりました。ええ、僕も挙げましたけども。
あぁ、Android? 5人だってさ･･･。

懇親会・まとめ

懇親会は少し離れたカフェ?っぽいところを貸し切って。これはキャパオーバーだろうというスペースにおよそ80人が入った上、土砂降りのせいで、せまく蒸し暑い懇親会でした。

ヤスヒサさん、益子さんと久しぶりにお会いして「どこ就職するの?」というお話など。また、ほりうち(@horri)さんと「深夜まで起きてる人トーク」などを楽しみつつ、ほりうちさんのおかげでhiloki(@hiloki)さんとリアル初対面ができました。久しぶりのトーキョー、楽しかったです。

また、コンセントさんのトートバッグを頂きました。これは分厚い資料が配られるという内定式で大活躍!(するはずでしたが実際はプリント3枚しか配られませんでした。なぜ!?)。

いやぁ、たいへん身になったセミナーでした。またトーキョーに行きたいです。その時は遊んでやってください。

参考リンク

• [特設サイト] CSS Nite LP, Disk 7「IAスペシャル」（2009年9月12日開催）
• [当日の様子やみなさんの感想やレポート] CSS Nite LP, Disk 7「IAスペシャル」が終了しました | CSS Nite公式サイト

情報アーキテクチャとは何か

ここでは、まずIAの定義とその役割を説明されました。

まず、このセッションで何度か繰り返されていたことですが、「情報アーキテクチャ≠ワイヤーフレーム」と始めに忠告。ワイヤーフレームにはIAの要素も含まれるが、IAがワイヤーフレームと同一ということではないと説明されていました。

同様に、Webサイトにおける情報アーキテクチャ要素として以下の3つを提示されました。

サイト構造

ストラクチャ、分類

ナビゲーション

リンク、検索

ラベル

文言、用語

IAとはユーザとコンテンツやサービスのつなぎかたであるとし、Information Architectの仕事はこのサイトはユーザにとって、よりわかりやすく・有用になるのか、を考えることであると説明されました。「IAは愛だ」という表現はインパクトがありました。
つまり、IA設計とは「わかりやすさ」のデザインであるとまとめられました。

情報アーキテクチャはなぜ重要か

IAをきちんと設計することによって、

• ユーザ側の「探している情報をみつけられない」を解決
• 企業側の「見せたい情報に気づかれない」を解決
• 「情報があふれる」ことを解決

できるとし、情報アーキテクチャによって、情報を探せる・伝えられる、変化(コンテンツ更新など)に対応できる、ことが実現できるのだ、とおっしゃっていました。

情報アーキテクチャ設計

これまでは解説メインでしたが、ここからは具体的なテンプレートや手法を提示しながら、前提の要素からIAの設計までの手順をわかりやすく説明されました。

実際は、スライドの中で「情報アーキテクチャ設計の全体像(22枚目)」という図をステップごとに1つ1つ丁寧に説明されていたのですが、「ナビゲーション」の設計のところが気になったのでここを抜粋して書きたいと思います。

まず、ナビゲーションエリアとして、「グローバルエリア、コンテンツエリア、ローカルエリア」の3つがあると説明され^[1]、ナビゲーションの役割として以下の7つがあるとおっしゃいました。
なお、この7つのナビゲーションは長谷川さんが昔定義したものが今も大体使えてるとのことです。

1. 階層型ナビゲーション：よくあるやつ
   • サイトストラクチャを辿りながら表示
2. 機能ナビゲーション：いつも出しておくもの(サイトマップとか)
3. 関連ナビゲーション：入会案内やブログの関連エントリ
   • 協調フィルタリングとかつかって表示
4. ダイレクトナビゲーション：いわゆるショートカット(バナー、スペシャルコンテンツとか)
   • 目的別の配置を表示
5. パンくずナビゲーション
   • 現在位置を把握
6. ステップナビゲーション
7. ダイナミックナビゲーション：検索

コンテンツをうまくナビゲートするには、どこのエリアにどの役割のナビゲーションをおけばいいのか、を考えることが大切です。
よく「ここはこのナビじゃないでしょ」とか「つかいにくいメニューだなぁ」なんて思うことがありますが、それも(もちろんここまでのIA設計と)ナビゲーション設計がうまくできていないから発生すること。経験的・感覚的ではなく、このようにあらかじめ整理しておくことで適切なナビゲーションを選択・設計できるようになりますね。

CSS Nite LP, Disk 7「IAスペシャル」 レポート の記事

• [SESSION-1] 情報アーキテクチャの全体像　〜ワークフローとケーススタディ〜
• [SESSION-2] プロジェクトマネジメントから見たIAの大切さ
• [SESSION-3] IAの欠点 〜IAの本来の目的と役目
• [SESSION-4] IAワークショップ〜LPOをテーマに〜
• [SESSION-5] 実装視点からのボトムアップIA
• [SESSION-6] IAからWebサイトデザインへの突破口
• パネルディスカッション
• 懇親会・まとめ
• 関連記事