IAセミナー：サイト設計運用を最適化するために
- 1. サイト設計＆運用を 最適化するための 理論と実践 2009-7-17 楽天株式会社 編成部 清水 誠
- 2. 自己紹介 1. Web歴１５年 開発・制作・IA・マーケ （1994～） 2. ＩＡとＵｓｅｒ Ｅｘｐｅｒｉｅｎｃｅを日本へ輸入 実践＆啓蒙→CMS・SEOへ （2000～2003） 3. 組織・プロセスの最適化を推進中 IT・CMS・SEO・アクセス解析 （2004～） © 2009 Makoto Shimizu 2
- 3. 自己紹介 日本企業 と 外資企業 を経験 Sapient 凸版印刷 Scient Razorfish WebCrew Amway 楽天 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 © 2009 Makoto Shimizu 3
- 4. 自己紹介 ベンチャー から 大企業 まで 12,000人 5,000人 凸版印刷 700人 楽天 20人 30人 20人 100人 Amway Scient S Razorfish WebCrew 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 © 2009 Makoto Shimizu 4
- 5. 自己紹介 受託 から 事業会社 へ 発注・主体・ 受託・提案・短期 結果・長期 Sapient 凸版印刷 Scient Razorfish WebCrew Amway 楽天 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 © 2009 Makoto Shimizu 5
- 7. アジェンダ 1. IAとは？ 誕生の秘話 USから日本へ 定着した方法論 2. 明日から使えるIAツール 3. ステップアップのために © 2009 Makoto Shimizu 7
- 8. １．IAとは 誕生の秘話 質と価値を高める動き 自己アイデンティティ：私は誰？ Web Architect? Information Architect? 編集者リチャード・S・ワーマンの言葉に便乗 1) the individual who organizes “複雑なデータのパターンをまとめ、明確に the patterns inherent in data, making the complex clear. する人” “情報の構造/地図を作成し、他人 2) a person who creates the structure or map of information which allows others to が知識への道を見つけられるようにする人” find their personal paths to knowledge. 3) the emerging 21st century professional “情報構造の明瞭さ・理解・科学のニーズに occupation addressing the needs of the age focused upon clarity, human understanding, 応える21世紀に必要な職業” and the science of the organization of information. （図書館学のロゼンフェルド派と対立） © 2009 Makoto Shimizu 8
- 9. １．IAとは USから日本へ USのWebインテグレータが商用化 数千人規模で回せる方法論を体系化 職域を細分化 Sapient, Scient, Razorfish, iXL, MarchFIRST 外資が持ち込み、日本でも啓蒙 日本の制作会社はディレクションの延長で展開 © 2009 Makoto Shimizu 9
- 10. １．IAとは 定着したIAツール（方法論） ペルソナ／シナリオ ヒューリスティック調査／認知ウォークスルー ユーザビリティ テスト コンセプト モデル 1999年には確立されていた カード ソート USではコモディティ化 コンテンツ インベントリ サイトマップ ワイヤフレーム ラピッド プロトタイピング スタイルガイド © 2009 Makoto Shimizu 10
- 11. アジェンダ 1. IAとは？ 2. 明日から使えるIAツール ロジックとドキュメント化のテク 使いこなし術と留意点 3. ステップアップのために © 2009 Makoto Shimizu 11
- 12. ２．明日から使えるIAツール IAツール＝ロジックとドキュメント化のテク 調 ヒューリスティック調査・・・定量的な比較ができる 査 ユーザーテスト ・・・新鮮な発見／説得材料 認知ウォークスルー ・・・なりきり評価。効率が良い ペルソナ／シナリオ ・・・対象ユーザーは誰か コンセプトモデル ・・・サイトの全体像を分かりやすく 設 サイトマップ ・・・一覧でも十分 計 ワイヤフレーム ・・・手書きからモックアップまで スタイルガイド ・・・結果ではなくルールを © 2009 Makoto Shimizu 12
- 13. ２．明日から使えるIAツール 認知ウォークスルー 探査学習の理論に基づく「なりきり評価」 1. 目標設定 ユーザは達成したい目標を設定 2. 探査 ユーザはタスク遂行に有効な操作 を発見するためにUIを探査 3. 選択 ユーザは最適な操作を選択 4. 評価 ユーザはシステムの応答を解釈し、 タスクが進展しているかを評価 © 2009 Makoto Shimizu 13
- 14. ２．明日から使えるIAツール 例：口座開設の認知ウォークスルー 目標： まず開設すべき「ダイレクト普通預金口座」についての説明及び口座開設の方法を知りたい １．評価：期待していたダイレ ２．探査：表の一段目が預金金額 クト普通預金の説明及び口座 別に3種類に分かれているが、その 開設のページではないので、 下の表は同じ。何が違うのだろう 驚く。 か？ ２．探査：金利は新聞で見た が、もう一度確認したい。 ４．選択：金利の高さに満足したの で、口座を開きたい。なぜ「予約」な のか、少し戸惑いながらもクリック… ３．選択：ここに直接書いてあ れば楽なのに、と思いつつ 「金利」をクリック。すぐ戻る。 「予約」？リンクのネ ーミングは、次に何 があるのかを説明す べき © 2009 Makoto Shimizu 14
- 15. ２．明日から使えるIAツール ペルソナとシナリオ（タスクフロー）は表裏一体 ペルソナはイラストやあだ名も効果的。リアルにする 必要はない © 2009 Makoto Shimizu 15
- 16. ２．明日から使えるIAツール 例：Flickrのコンセプトモデル http://soldierant.net/archives/2005/10/flickr_user_mod.html © 2009 Makoto Shimizu 16
- 17. ２．明日から使えるIAツール 例：Flickrのコンセプトモデル（シンプル版） http://www.flickr.com/photos/l upus63/162403710/ © 2009 Makoto Shimizu 17
- 18. ２．明日から使えるIAツール ワークフロー的なコンセプトモデルもある http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/ © 2009 Makoto Shimizu 18
- 19. ２．明日から使えるIAツール コンセプトモデルは練習が必要 よく使うサイトの全体像を図解してみる 自社サイト Yahoo! Google 楽天市場 © 2009 Makoto Shimizu 19
- 20. ２．明日から使えるIAツール サイトマップは管理台帳 懲りすぎにご注意 © 2009 Makoto Shimizu 20
- 21. ２．明日から使えるIAツール 継続的メンテナンスが必要 フリーソフト「Website Explorer」で自動Excel出力 http://www.umechando.com/webex/ © 2009 Makoto Shimizu 21
- 22. ２．明日から使えるIAツール ワイヤフレーム：精度はケースバイケース http://www.slideshare.net/fred_beecher/integ rating-effective-prototyping-into-your-design- process?type=powerpoint © 2009 Makoto Shimizu 22
- 23. ２．明日から使えるIAツール 手書きで十分な場合も http://www.flickr.com/photos /jackdorsey/182613360/ © 2009 Makoto Shimizu 23
- 24. ２．明日から使えるIAツール 紙でインタラクティブを再現することも ペーパープロトタイプでテスト中の動画 http://www.youtube.com/watch?v=GrV2SZuRPv0 © 2009 Makoto Shimizu 24
- 25. ２．明日から使えるIAツール 手書き風ワイヤフレーム作成ツールもある 荒い「ラフ」感 を演出できる © 2009 Makoto Shimizu 25
- 26. ２．明日から使えるIAツール スタイルガイド デザインの仕様書ではなく、ルールを記述する © 2009 Makoto Shimizu 26
- 27. アジェンダ 1. IAとは？ 2. 明日から使えるIAツール 3. 付加価値を出すテク 教科書通りに進めても価値は出ない 本質はユーザー中心主義と論理思考 肩書きではなくスキル 隙間を埋めて価値を出す PDCAの反復のみが成功の秘訣 © 2009 Makoto Shimizu 27
- 28. ３．付加価値を出すテク 教科書通りに進めても価値は出ない 方法論（ツール）は 初心者でも同じことができるようにするためのもの マイナスをゼロへ 新卒でも同じアウトプットを出せる仕組み 画一的な対応では質と効率が悪化 驚くべき結果は出ない “方法論を使わない方法を 知るのがエキスパートだ” －R・ノウルズ © 2009 Makoto Shimizu 28
- 29. ３．付加価値を出すテク ウォーターフォールの逆流アプローチ 必要なことを必要なときに決め、 必要なドキュメントのみを作る http://www.mdn.co.jp/content/blank/100/148/ © 2009 Makoto Shimizu 29
- 30. ３．付加価値を出すテク IAは付加価値を求めるトレンド 小さなIA 方法論とツールを活用する作業者 大きなIA 開拓者／思想家 コンサルタント／リーダー エバンジェリスト／著名人 多くのBig IAが事業会社へ 飛び込み、実践 エンタープライズIAも © 2009 Makoto Shimizu 30
- 31. ３．付加価値を出すテク IAの本質はユーザー中心主義と論理思考 ユーザー視点で考える（心構えではなく） すべての設計・デザインに必然性を持たせる コミュニケーションとしての情報デザイン 重要性と必要性は高まる一方 大規模化と複雑化で関係者間 コミュニケーションが困難に 情報と技術が均質化し、 差別化が困難に © 2009 Makoto Shimizu 31
- 32. ３．付加価値を出すテク すぐにできることは… シナリオとコンセプトモデルでUIの必然性を明確に 設計・制作物の根拠と価値を伝えるようにする © 2009 Makoto Shimizu 32
- 33. ３．付加価値を出すテク 肩書き（アーキテクト）ではなくスキル（アーキテクチャ） 「情報アーキテクト」の肩書きを持つ必要はない 役割分担は組織や人、プロジェクトによる 「情報アーキテクチャ」は設計・制作者の前提スキル R社の場合： 1. 少数精鋭のIAチームを新設 2. 「ズルイ」 3. 全員がディレクター兼IAに © 2009 Makoto Shimizu 33
- 34. ３．付加価値を出すテク すぐにできることは… IAの理論と実践を身に着けておく 名刺には「Webディレクター」「Webデザイナー」。 でも 「IA設計も（を）担当してます。」 © 2009 Makoto Shimizu 34
- 35. ３．付加価値を出すテク 隙間を埋めて価値を出す 誰もやらない／できない／気がつかない） →絶好のチャンス 効果 • 人 vs. エンジンのバランス 検証 • 情報構造をエンジンへ伝える • システムのアーキテ • 人とエンジンのバランス クチャを戦略と同期 開発 IA SEO • 情報構造をエンジンへ 伝える • コンテンツを分類 CMS • 制作・管理プロセスを整理 © 2009 Makoto Shimizu 35
- 36. ３．付加価値を出すテク 隙間はあらゆる所にある 企業と顧客の間 • ペルソナ / シナリオ Business 6 • ユーザーテスト 5 • アクセス解析 4 3 User 2 IT 1 Experience 職域の隙間 • ユーザー中心主義 チームの隙間 • IA=ユーザビリティ • 仕様フォーマット統一 • アジャイルな • Wiki / Blogでコミュニケーション促進 プロトタイピング • プロジェクト管理 • 制作プロセス改善 © 2009 Makoto Shimizu 36
- 37. ３．付加価値を出すテク 事例：IAでシステム開発・運用を最適化 全２０サイトのUIとシステムをパターン化し再構築 日経システム構築 2005年7月号より © 2009 Makoto Shimizu 37
- 38. ３．付加価値を出すテク 事例：IAでシステム開発・運用を最適化 アシスト「ITQ博2005」配布資料より © 2009 Makoto Shimizu 38
- 39. ３．付加価値を出すテク PDCAの反復のみが成功の秘訣 仮説・実行・検証・仕組み化 ある程度改善を進めると行き詰る 結果を定量的に分析する必要がある • アクセス解析やABテスト 仕組み化が重要 • 横串の横断組織を新設 • 人に依存しないように © 2009 Makoto Shimizu 39
- 40. ３．付加価値を出すテク 事業会社は楽しい！ （コンサルタントより）自社サービスを自分たちの手で 作っていくほうが断然楽しいし有利 ツールやベンダーを使いこなせる 仮説を立てて意思決定し、結果を見届ける 長期的な視点を持てる © 2009 Makoto Shimizu 40
- 41. ３．付加価値を出すテク ただし、 時には地道な努力や調整も必要 最後まで結果に責任を持つ必要がある 前向きな向上心が必要 視野を広く、外へ目を向ける必要がある © 2009 Makoto Shimizu 41
- 42. まとめ IAとは 言葉ありきのアイデンティティ 手法としてはコモディティ化（もはや当たり前） 明日から使えるIAツール 論理をドキュメント化することで、根拠と価値を伝えられる 割り切り、使いこなす 付加価値を出すテク 標準から離れることを覚える 大きく出る “Go BIG or Go Home” IAをスキルとして身に着けるといろいろ便利 隙間は埋めることに価値がある 改善を繰り返して積み重ねるのが成功につながる 事業会社で働くのは楽しい © 2009 Makoto Shimizu 42
- 43. ご清聴ありがとうございました。 © 2009 Makoto Shimizu 43
- 44. （参考）おすすめ本 IAに関する書籍 デザイニング・ウェブナビゲーション インタラクティブシステムデザイン ヒューメイン・インタフェース © 2009 Makoto Shimizu 44
- 45. （参考）オンラインで読める記事 MdN Web STRATEGY 『実践的インフォメーションアーキテクト論』 http://www.mdn.co.jp/content/blank/100/148/ 1. IAの成り立ちとタイプ分け 2. 架空プロジェクトでIAの活動内容を理解する 3. 情報の整理とは 4. IA設計の逆流アプローチ 5. ワイヤフレームもコンテンツ管理を 6. 捨てられないスタイルガイドとは 7. IAは救世主？ © 2009 Makoto Shimizu 45
- 46. （参考）オンラインで読める記事 ロフトワーク WebEXP.jp 『CMSとIA〜デジタル時代を生き抜く情報整理術』 1. CMSとIAの接点：溢れる情報を整理しよう http://www.webexp.jp/feature/200811/20081125_cmsia1.html 2. コンテンツ管理の本質：リポジトリとは http://www.webexp.jp/feature/200902/20090203_cmsia2_1.html 3. 音楽ファイル（MP3）をCMS流に管理しよう http://www.webexp.jp/feature/200906/20090627_cmsia3_1.html © 2009 Makoto Shimizu 46
- 47. （参考）オンラインで読める記事 MdN Web STRATEGY 『実践CMS導入・運用ガイド』 http://www.mdn.co.jp/content/blank/101/149/ 1. CMSの要件は何を定義すべき？ 2. ツールの評価から運用上の問題点を見極めよう 3. CMSで解決できる分類・ナビゲーションの課題とは 4. ドキュメント管理で生産性をUP 5. ワークフローの本当の意義とは 6. 資産としてのテンプレート 7. 複雑化するサイト配信 8. DAMとCMSでシングルソースを実現 9. コンテンツ移行をスムーズに進めるためのプランニング 10. 使いやすさの最先端？気になる3種類のCMSをレビュー 11. SOA流のCMS連携術 12. ECMの本命？ようやく動き出したOracleのCMSを徹底レビュー 13. CMSの真価はコンテンツの構造化にあり 14. マーケティングを加速するCMS © 2009 Makoto Shimizu 47
- 48. （参考）オンラインで読める記事 Web担当者Forum 『ステップ式！CMS活用はじめの一歩』 http://web-tan.forum.impressrd.jp/l/2499 1. コンテンツの理解から始める導入準備 2. 4つのステップで進めるCMSの情報収集 3. CMS導入の提案を社内で通すための7つの説得手法 4. RFPでは失敗する？ CMSをうまく選ぶためのチェックリスト 5. CMSの可能性を最大化するためのWeb担当者の心得 6. CMS導入でのコンテンツ移行を成功させるポイント 7. CMS導入はゴールではなくスタート、その「運用」の秘訣とは 8. CMSのROIを体感しよう 『Webのレビューに便利なオンライン付箋ツール』 http://web-tan.forum.impressrd.jp/e/2009/02/20/4875 © 2009 Makoto Shimizu 48
- 49. （参考）オンラインで読める記事 実践CMS★IA http://www.cms-ia.info CMSブログ 実践プロジェクト 講演資料 こどもIA日記 CMS IA mak00s © 2009 Makoto Shimizu 49