狠狠撸

IAなんか怖くない
?中小規模案件で考える情報アーキテクチャの第一歩?

2010.07.10
加川大志郎
Concent, Inc.

IAなんか怖くない ?中小規模案件で考える情報アーキテクチャの第一歩? PAGE:1

自己紹介
加川大志郎（かがわだいしろう）と申します。
? 株式会社コンセントディレクター

? バックグラウンド
? 情報系大学院（音声?画像解析）共著で本を
? 楽器メーカー（開発、UI設計、品質管理）書いてます

? 個人メディア
? http://d4r.jp/blog/
? http://twitter.com/d4r

not 大四郎
but 大志郎


Concent, Inc.
Web時代の設計事務所


アンケート
皆さんの所属を教えてください（どれか1つから選択）
1. 受託Web制作会社

2. 受託Web制作(フリー)

3. 受託Webコンサルティング、マーケティングなど

4. Webサービス等の事業会社

5. Webが本業ではない企業、団体(メーカー、販売店など)

6. 学生

7. その他


アンケート
「IA」って知ってますか？（複数回答OK）
1. 肩書が「IA」です

2. 技術の事？人の事？（?チャ？?ト？）

3. 聞いた事はあるけど、うまく説明できません

4. なんだそれ、うめぇのか？


アンケート
普段の業務で「IA」やってますか？（複数回答OK）
1. 肩書が「IA」です

2. 事業戦略をWeb戦略に落とし込んでます

3. コミュニケーションデザインしてます

4. ワイヤーフレームやサイトマップ作ってます

5. なんだそれ、うめぇのか？

6. いや、この選択肢はおかしい


本日の内容

1. IAってなに？
2. で、どうやるの？
3. 事例紹介
4. まとめ


IAってなに？


IA(チャ)とIA(ト)
技術 or 人

情報アーキテクチャ（Information Architecture）
1. 情報システムにおける組織化、ラベリング、ナビゲーションシステムの組み合
わせ
2. タスクの遂行およびコンテンツへの直感的アクセスを容易にするため、情報空
間を構造的にデザインすること
3. ウェブサイトとイントラネットの構造化と分類を行う上でのアートとサイエン
ス、情報の発見および管理を促進すること
4. デザインと建築の原則をデジタルの景観にあてはめて考えることに焦点を絞っ
た、新しい学問分野及びコミュニティ
Web情報アーキテクチャ、L. Rosenfeld、P. Morville著、オライリー刊

インフォメーションアーキテクト（Information Architect）
1. データに潜む隠れたパターンを整理し、複雑さを明快にする人
2. ユーザーが自分の知識を獲得するための道筋を見つけられるような、構造や地
図を作る人
3. 明快さ、理解、情報の整理に特化した、時代の要求によって生まれた21世紀の
職業
Information Architects、Richard Saul Wurman著、Watson-Guptill Pubns刊


Webサイトの情報アーキテクチャ
広義のIA（Big IA）

狭義のIA（Little IA）


情報アーキテクチャの階層

? Atsushi Hasegawa


情報アーキテクチャ設計で実現できる事
? 情報を探せる
? ユーザーがほしい情報にアクセスできる
? サイトを学習できる

? 情報を伝えられる
? 意図しているメッセージ?コンテンツなどを適切に伝えられる
? ユーザーに正しく見つけてもらえる

? 変化に対応する
? 情報の追加?更新があっても破綻しない
? どうして失敗したか／どうしてうまくいったかがわかる


企業から見たWebプロジェクトの全体像

? Atsushi Hasegawa
Web担当者現場のノウハウ Vol.1／インプレスR&Dより
http://web-tan.forum.impressrd.jp/


情報アーキテクチャ設計の責任
サイトオーナー(企業)のビジネスとしてのIA
? ユーザーへの価値：情報の探しやすさ、使いやすさ
? ユーザビリティテスト
? ベンチマーキング（競合比較）

? 企業が持つ意図（戦略）の実現
? 効果指標化（コンバージョンレート／売り上げ高／etc）
? 企業?製品のブランディング

? 運用の最適化
? メンテナンスコストを最適化する
? サイト構造／ナビゲーションの維持＝「使える」ガイドライン


IAとは…

つなぎかた

ユーザーコンテンツ、サービス

IA = ? ? Atsushi Hasegawa


で、どうやるの？


専門家がいないとできない？
? 狭義のIAは無意識にやっている
? 感覚的に「わかりやすく」「使いやすく」を心がけているはず
? 精緻なドキュメントを作る=IAではない

? 「Webサイトで何を伝えるか？」の検討
? サイトオーナー（企業）と一緒に検討

狭義のIA（Little IA）


コンテキスト(文脈)の理解
サイトオーナー(企業)のWebサイトの使い方を知る

?課題の把握（サイト評価／ログ分析）
?ビジネス戦略／効果指標
?予算／スケジュール


企業がWebサイトを持つ意味
? 自社メディアとしての企業サイト
? 発信したい情報についての制約が無い
? 多くの情報、最新の情報を提供
? ユーザーごとに適した形での情報の編集、提示

? コミュニケーションチャネルとしてのWebサイト
? いつでも使える問い合わせ窓口
? アクセス解析からのユーザーニーズの取得とサイトへの反映

? Webサイトの構造自体で企業活動の方針を表現
? 企業のブランディング
? 社内での情報共有や啓蒙活動としての効果

? 様々なステークホルダー
? Webサイトに訪問するのは顧客と就職希望者だけではない
? 社員、社員の家族、地域住民
? 投資家、ビジネスパートナー、マスメディア


ビジネスツールとしてのWebサイトを提供

サイトオーナー(企業)にとってのWebサイト
?ローンチしてからがスタート
?どうやって使えばビジネスに貢献できるか？

制作会社に出来る事
?Webサイトの使い方を提案
?「作って納めて終了」にしない
?ローンチ後の活用を前提としたデザイン

企業がWebを活用する上での
パートナーとしての価値を高める


事例紹介


事例紹介：株式会社映像システム様
?http://www.eizo-system.co.jp/

?視聴覚設備の設計、施工、保守
?教育機関の視聴覚室
?TV会議システム

?Webサイトリニューアルの目的（サイトオーナー要望）
?営業ツールとしての活用
?潜在顧客の取り込み
?採用ツールとしての活用
?採用は新卒のみ
?企業としての将来性を伝えたい

※お客様のご了承を得てご紹介しています


リニューアル前


リニューアル後


プロジェクト提案
Webサイトの「使い方」「作り方」の提案
?「誰」に「何」を伝えるか？をはじめに検討する
?「とりあえずデザイン変える」では効果が望めない

?ワークショップ形式でのコンテンツ設計
?社内の意思形成が容易
?仮説の検証を社内で把握しやすい

?運用体制
?部署を横断したプロジェクトチーム形式のほうが良い
?情報が偏らない
?若手を入れる事で鮮度を保つ
?Webサイト運用が若手の教育に繋がる

?効果測定指標の検討
?定量化が難しい
?問い合わせ件数
?営業スタッフの満足度調査


ヒアリング
サイトオーナーを理解する
?サイトオーナーのビジネスを知る
?マーケット、ユーザー、競合、パートナー、etc
?顧客の取り扱っている商品、サービスの理解
?顧客の顧客(Webサイトのユーザー)の理解
?市場の中での顧客の特徴、優位性は何か

?サイトオーナー（企業）を知る
?沿革、組織図、社員の雰囲気、業務フロー、etc
?どのように営業活動、採用活動しているか

?社内資料を頂戴する
?社内報、研修用資料、提案資料、パンフレット、etc

?「どんなWebサイトが欲しいですか？」はまだ聞かない
?サイトオーナーを理解したうえで、いっしょに検討する


ディスカッション
理想のWebサイトの模索
?新しいWebサイトをどう活用したいか？

?新しいWebサイトに何があるとユーザーにとって有益か？

?ユーザーは、どんな人/どんな時/どんな場合か？


コンセプトの決定
伝えたい事を決めて、Webサイトで表現する

サイトオーナーの価値（優位性）ユーザーに伝えたい事
? 納入してからのユーザー側での運用を見越 ? 使い続けてもらう事を重視する姿勢
した設計
? オーダーメイドで最適なシステム構築が出
? 設計から施工までワンストップ来る技術力
? メーカーに依存しない適切な機器選定 ※ あえてハードウェアやシステムのスペック
をアピールしない

視聴覚システム構築ニーズに応えるコミュニケーション
に臨む姿勢の表現コンテンツの提供窓口への誘導
? デザインのトーン&マナー ? ソリューション ? 理解、興味から問い合わせ
? 導入事例に繋げる動線設計
? 「わたしたちが大切にして
いる事」 ? 関連情報への回遊性


クリエイティブの方向性
Webサイトの「人格」を決める


コンセプトの表現方法を検討


ユーザーモデルに応じた表現方法を検討


コンテンツ検討
ユーザーが欲しい情報＋サイトオーナーが伝えたい情報


コンテンツ検討


コンテンツ詳細検討


コンテンツ構成案
情報をどうつなぐか？

a) 事例?取り扱いサービスを訴求
?構成案：事例?サービスを多数提示、検索性を重視した画面設計
?ユーザー行動：自分の要望を軸にサイトを探索
?求める効果：問い合わせに誘導

b) 企業の姿勢を伝える
? 構成案：コンサル力を全面に出す、サイト全体で企業としての姿勢を表現
? ユーザー行動：サイト閲覧を通じて企業の姿勢や仕事の進め方を理解
? 求める効果：広報、ブランディング


サイト構造


サイトマップ上での動線設計
TOPページからの誘導
[a]
「ニーズ毎のソリューション一覧」「業種毎
の事例一覧」への誘導が主動線。自分の状況
に合わせた理解、検討が必要なユーザーを想
定。
[b]
『ピックアップ』からの個別ページへの誘導
もある。比較的目的が明確なユーザーを想定。

[c]
『LONG TERM VALUE』枠はメッセージ欄
であり下層への強い誘導を目的としない。リ
ンク先ページは問い合わせ後など、リピー
ターがESCに対する理解を深める用途。


サイトマップ上での動線設計
ソリューション?導入事例の回遊
[a]
事例ページがハブになるように集約。ユー
ザーの状況に近い/参考になる事例ページに
誘導し、そこからソリューションの回遊に繋
げる。
「例えばこんなこの施設でこのソリューショ
ンを活用しています」
[b]
事例の回遊は個別ページを起点とする。一覧
から選択後は、一覧に戻らず、「関連する事
例」での回遊を充実させる。

[c]
事例個別ページからソリューションへの動線
を確保。
「この施設で使っているソリューションを詳
しく知りたい」

[d]
ソリューションの理解はニーズ毎の一覧ペー
ジで完結する。個別ページが存在するソ
リューションが少ない前提。


ワイヤーフレームからビジュアルデザインへ
ワイヤーフレームに装飾する事がデザインではない


問い合わせフォームでのコミュニケーション
問い合わせ内容と一緒に直前ページのURL
も保存
? どのページを見て問い合わせに至ったか？
? ユーザーに「刺さる」コンテンツは？
? 営業マンからのコンタクト時の事前情報として
例）導入事例の詳細を口頭で紹介する
? 直前ページと問い合わせ内容の一致度は？
? 間違った理解をされていないか？

Web以外の窓口の提示

サイト構造に合わせたカテゴリー
→直前ページに応じて自動でチェック


まとめ


出来るところから、IA
? 狭義のIAは無意識にやっている。はず

? 「Webサイトの使い方」を考える
? ローンチしてからがスタート
? 「作って納めて終了」ではない

? サイトオーナーを理解して、Webで表現するお手伝いをする

? IAはみんなでやること
? サイトオーナーと一緒に考える
? ディレクターだけの仕事じゃない
? 「ワイヤーフレームに装飾する」のがデザインじゃない


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

狠狠撸

WCAN 2010 Summer Session-1: IA

More Related Content

WCAN 2010 Summer Session-1: IA