IAセミナー：サイト設計運用を最適化するために

サイト設計＆運用を
最適化するための
理論と実践

2009-7-17
楽天株式会社編成部
清水誠

自己紹介

1. Web歴１５年
開発・制作・IA・マーケ（1994～）

2. ＩＡとＵｓｅｒＥｘｐｅｒｉｅｎｃｅを日本へ輸入
実践＆啓蒙→CMS・SEOへ（2000～2003）

3. 組織・プロセスの最適化を推進中
IT・CMS・SEO・アクセス解析（2004～）

© 2009 Makoto Shimizu 2

自己紹介

日本企業と外資企業を経験

Sapient
凸版印刷 Scient Razorfish WebCrew Amway 楽天

1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008


自己紹介

ベンチャーから大企業まで

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


自己紹介

受託から事業会社へ

発注・主体・
受託・提案・短期
結果・長期

Sapient
凸版印刷 Scient Razorfish WebCrew Amway 楽天

1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008


セミナー概要より

米国では定着した感のある「IA」。日本でも巨大化、複雑化するサイト
構築現場で「情報アーキテクチャ」や「インフォメーションアーキテクト」
という言葉が注目されています。しかし、その概念やサイト構築への
実践的展開の方法は、多くの人にとってまだ未開拓の領域ではない
でしょうか。

この講演では、国内有数のインフォメーションアーキテクトを招聘し、
Webサイトの構築・運営における情報アーキテクチャの考え方を解説。
さらに、CMSやSEO、アクセス解析、ITマネジメントとの関連性に触れ
つつ、IAなどの手法、ツール、ベンダーを使いこなしてサイトの設計や
運用を最適化するためにできることを、具体例をひも解きながら解説
します。


アジェンダ

1. IAとは？
誕生の秘話
USから日本へ
定着した方法論
2. 明日から使えるIAツール
3. ステップアップのために


１．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.

（図書館学のロゼンフェルド派と対立）

１．IAとは

USから日本へ

USのWebインテグレータが商用化
数千人規模で回せる方法論を体系化
職域を細分化
Sapient, Scient, Razorfish, iXL,
MarchFIRST
外資が持ち込み、日本でも啓蒙
日本の制作会社はディレクションの延長で展開


１．IAとは

定着したIAツール（方法論）

ペルソナ／シナリオ
ヒューリスティック調査／認知ウォークスルー
ユーザビリティテスト
コンセプトモデル 1999年には確立されていた
カードソート USではコモディティ化
コンテンツインベントリ
サイトマップ
ワイヤフレーム
ラピッドプロトタイピング
スタイルガイド

アジェンダ

1. IAとは？
ロジックとドキュメント化のテク
使いこなし術と留意点
3. ステップアップのために


２．明日から使えるIAツール

IAツール＝ロジックとドキュメント化のテク

調ヒューリスティック調査・・・定量的な比較ができる
査ユーザーテスト・・・新鮮な発見／説得材料
認知ウォークスルー・・・なりきり評価。効率が良い

ペルソナ／シナリオ・・・対象ユーザーは誰か
コンセプトモデル・・・サイトの全体像を分かりやすく
設サイトマップ・・・一覧でも十分
計
ワイヤフレーム・・・手書きからモックアップまで
スタイルガイド・・・結果ではなくルールを



認知ウォークスルー

探査学習の理論に基づく「なりきり評価」
1. 目標設定ユーザは達成したい目標を設定
2. 探査ユーザはタスク遂行に有効な操作
を発見するためにUIを探査
3. 選択ユーザは最適な操作を選択
4. 評価ユーザはシステムの応答を解釈し、
タスクが進展しているかを評価



例：口座開設の認知ウォークスルー
目標：まず開設すべき「ダイレクト普通預金口座」についての説明及び口座開設の方法を知りたい

１．評価：期待していたダイレ２．探査：表の一段目が預金金額
クト普通預金の説明及び口座別に3種類に分かれているが、その
開設のページではないので、下の表は同じ。何が違うのだろう
驚く。か？

２．探査：金利は新聞で見た
が、もう一度確認したい。４．選択：金利の高さに満足したの
で、口座を開きたい。なぜ「予約」な
のか、少し戸惑いながらもクリック…

３．選択：ここに直接書いてあ
れば楽なのに、と思いつつ
「金利」をクリック。すぐ戻る。「予約」？リンクのネ
ーミングは、次に何
があるのかを説明す
べき



ペルソナとシナリオ（タスクフロー）は表裏一体

ペルソナはイラストやあだ名も効果的。リアルにする
必要はない



例：Flickrのコンセプトモデル

http://soldierant.net/archives/2005/10/flickr_user_mod.html



例：Flickrのコンセプトモデル（シンプル版）

http://www.flickr.com/photos/l
upus63/162403710/



ワークフロー的なコンセプトモデルもある

http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/



コンセプトモデルは練習が必要

よく使うサイトの全体像を図解してみる
自社サイト
Yahoo!
Google
楽天市場



サイトマップは管理台帳

懲りすぎにご注意



継続的メンテナンスが必要

フリーソフト「Website Explorer」で自動Excel出力

http://www.umechando.com/webex/



ワイヤフレーム：精度はケースバイケース

http://www.slideshare.net/fred_beecher/integ
rating-effective-prototyping-into-your-design-
process?type=powerpoint



手書きで十分な場合も

http://www.flickr.com/photos
/jackdorsey/182613360/



紙でインタラクティブを再現することも

ペーパープロトタイプでテスト中の動画

http://www.youtube.com/watch?v=GrV2SZuRPv0



手書き風ワイヤフレーム作成ツールもある

荒い「ラフ」感
を演出できる



スタイルガイド

デザインの仕様書ではなく、ルールを記述する


アジェンダ

1. IAとは？
3. 付加価値を出すテク
教科書通りに進めても価値は出ない
本質はユーザー中心主義と論理思考
肩書きではなくスキル
隙間を埋めて価値を出す
PDCAの反復のみが成功の秘訣


３．付加価値を出すテク

教科書通りに進めても価値は出ない

方法論（ツール）は
初心者でも同じことができるようにするためのもの
マイナスをゼロへ
新卒でも同じアウトプットを出せる仕組み
画一的な対応では質と効率が悪化
驚くべき結果は出ない
“方法論を使わない方法を
知るのがエキスパートだ”
－R・ノウルズ



ウォーターフォールの逆流アプローチ

必要なことを必要なときに決め、
必要なドキュメントのみを作る

http://www.mdn.co.jp/content/blank/100/148/



IAは付加価値を求めるトレンド

小さなIA
方法論とツールを活用する作業者
大きなIA
開拓者／思想家
コンサルタント／リーダー
エバンジェリスト／著名人
多くのBig IAが事業会社へ
飛び込み、実践
エンタープライズIAも



IAの本質はユーザー中心主義と論理思考

ユーザー視点で考える（心構えではなく）
すべての設計・デザインに必然性を持たせる
コミュニケーションとしての情報デザイン

重要性と必要性は高まる一方
大規模化と複雑化で関係者間
コミュニケーションが困難に
情報と技術が均質化し、
差別化が困難に



すぐにできることは…

シナリオとコンセプトモデルでUIの必然性を明確に
設計・制作物の根拠と価値を伝えるようにする



肩書き（アーキテクト）ではなくスキル（アーキテクチャ）

「情報アーキテクト」の肩書きを持つ必要はない
役割分担は組織や人、プロジェクトによる
「情報アーキテクチャ」は設計・制作者の前提スキル

R社の場合：
1. 少数精鋭のIAチームを新設
2. 「ズルイ」
3. 全員がディレクター兼IAに



すぐにできることは…

IAの理論と実践を身に着けておく
名刺には「Webディレクター」「Webデザイナー」。

でも「IA設計も（を）担当してます。」



隙間を埋めて価値を出す

誰もやらない／できない／気がつかない）
→絶好のチャンス

効果 • 人 vs. エンジンのバランス

検証 • 情報構造をエンジンへ伝える

• システムのアーキテ • 人とエンジンのバランス
クチャを戦略と同期開発 IA SEO • 情報構造をエンジンへ
伝える

• コンテンツを分類
CMS
• 制作・管理プロセスを整理



隙間はあらゆる所にある
企業と顧客の間
• ペルソナ / シナリオ
Business
6 • ユーザーテスト
5 • アクセス解析
4 3
User
2
IT 1 Experience

職域の隙間
• ユーザー中心主義チームの隙間
• IA=ユーザビリティ • 仕様フォーマット統一
• アジャイルな • Wiki / Blogでコミュニケーション促進
プロトタイピング
• プロジェクト管理
• 制作プロセス改善



事例：IAでシステム開発・運用を最適化

全２０サイトのUIとシステムをパターン化し再構築

日経システム構築 2005年7月号より



事例：IAでシステム開発・運用を最適化

アシスト「ITQ博2005」配布資料より



PDCAの反復のみが成功の秘訣

仮説・実行・検証・仕組み化
ある程度改善を進めると行き詰る
結果を定量的に分析する必要がある
• アクセス解析やABテスト
仕組み化が重要
• 横串の横断組織を新設
• 人に依存しないように



事業会社は楽しい！

（コンサルタントより）自社サービスを自分たちの手で
作っていくほうが断然楽しいし有利
ツールやベンダーを使いこなせる
仮説を立てて意思決定し、結果を見届ける
長期的な視点を持てる



ただし、

時には地道な努力や調整も必要
最後まで結果に責任を持つ必要がある
前向きな向上心が必要
視野を広く、外へ目を向ける必要がある


まとめ
IAとは
言葉ありきのアイデンティティ
手法としてはコモディティ化（もはや当たり前）
明日から使えるIAツール
論理をドキュメント化することで、根拠と価値を伝えられる
割り切り、使いこなす
付加価値を出すテク
標準から離れることを覚える
大きく出る “Go BIG or Go Home”
IAをスキルとして身に着けるといろいろ便利
隙間は埋めることに価値がある
改善を繰り返して積み重ねるのが成功につながる
事業会社で働くのは楽しい


ご清聴ありがとうございました。


（参考）おすすめ本

IAに関する書籍

デザイニング・ウェブナビゲーション

インタラクティブシステムデザイン

ヒューメイン・インタフェース


（参考）オンラインで読める記事

MdN Web STRATEGY
『実践的インフォメーションアーキテクト論』
1. IAの成り立ちとタイプ分け
2. 架空プロジェクトでIAの活動内容を理解する
3. 情報の整理とは
4. IA設計の逆流アプローチ
5. ワイヤフレームもコンテンツ管理を
6. 捨てられないスタイルガイドとは
7. IAは救世主？



ロフトワーク 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



MdN Web STRATEGY
『実践CMS導入・運用ガイド』
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



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



実践CMS★IA
http://www.cms-ia.info
CMSブログ
実践プロジェクト
講演資料
こどもIA日記

CMS IA

mak00s


IAセミナー：サイト設計運用を最適化するために

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Mehr von Makoto Shimizu

Mehr von Makoto Shimizu (20)

IAセミナー：サイト設計運用を最適化するために