WCAN 2010 Summer Session-1: IA

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 2010.07.10 加川大志郎 Concent, Inc.

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:1 自己紹介加川大志郎（かがわだいしろう）と申します。  株式会社コンセントディレクター  バックグラウンド  情報系大学院（音声・画像解析）共著で本を  楽器メーカー（開発、UI設計、品質管理）書いてます  個人メディア  http://d4r.jp/blog/  http://twitter.com/d4r not 大四郎 but 大志郎

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:2 Concent, Inc. Web時代の設計事務所

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:3 アンケート皆さんの所属を教えてください（どれか1つから選択） 1. 受託Web制作会社 2. 受託Web制作(フリー) 3. 受託Webコンサルティング、マーケティングなど 4. Webサービス等の事業会社 5. Webが本業ではない企業、団体(メーカー、販売店など) 6. 学生 7. その他

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:4 アンケート「IA」って知ってますか？（複数回答OK） 1. 肩書が「IA」です 2. 技術の事？人の事？（〜チャ？〜ト？） 3. 聞いた事はあるけど、うまく説明できません 4. なんだそれ、うめぇのか？

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:5 アンケート普段の業務で「IA」やってますか？（複数回答OK） 1. 肩書が「IA」です 2. 事業戦略をWeb戦略に落とし込んでます 3. コミュニケーションデザインしてます 4. ワイヤーフレームやサイトマップ作ってます 5. なんだそれ、うめぇのか？ 6. いや、この選択肢はおかしい

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:6 本日の内容 1. IAってなに？ 2. で、どうやるの？ 3. 事例紹介 4. まとめ

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

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:8 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刊

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:9 Webサイトの情報アーキテクチャ広義のIA（Big IA）狭義のIA（Little IA）

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:10 情報アーキテクチャの階層 © Atsushi Hasegawa

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:11 情報アーキテクチャ設計で実現できる事  情報を探せる  ユーザーがほしい情報にアクセスできる  サイトを学習できる  情報を伝えられる  意図しているメッセージ・コンテンツなどを適切に伝えられる  ユーザーに正しく見つけてもらえる  変化に対応する  情報の追加・更新があっても破綻しない  どうして失敗したか／どうしてうまくいったかがわかる

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:12 企業から見たWebプロジェクトの全体像 © Atsushi Hasegawa Web担当者現場のノウハウ Vol.1／インプレスR&Dより http://web-tan.forum.impressrd.jp/

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:13 情報アーキテクチャ設計の責任サイトオーナー(企業)のビジネスとしてのIA  ユーザーへの価値：情報の探しやすさ、使いやすさ  ユーザビリティテスト  ベンチマーキング（競合比較）  企業が持つ意図（戦略）の実現  効果指標化（コンバージョンレート／売り上げ高／etc）  企業・製品のブランディング  運用の最適化  メンテナンスコストを最適化する  サイト構造／ナビゲーションの維持＝「使える」ガイドライン

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:14 IAとは… つなぎかたユーザーコンテンツ、サービス IA = ♥ © Atsushi Hasegawa

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:15 で、どうやるの？

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:16 専門家がいないとできない？  狭義のIAは無意識にやっている  感覚的に「わかりやすく」「使いやすく」を心がけているはず  精緻なドキュメントを作る=IAではない  「Webサイトで何を伝えるか？」の検討  サイトオーナー（企業）と一緒に検討狭義のIA（Little IA）

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:17 コンテキスト(文脈)の理解サイトオーナー(企業)のWebサイトの使い方を知る 課題の把握（サイト評価／ログ分析） ビジネス戦略／効果指標 予算／スケジュール

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:18 企業がWebサイトを持つ意味  自社メディアとしての企業サイト  発信したい情報についての制約が無い  多くの情報、最新の情報を提供  ユーザーごとに適した形での情報の編集、提示  コミュニケーションチャネルとしてのWebサイト  いつでも使える問い合わせ窓口  アクセス解析からのユーザーニーズの取得とサイトへの反映  Webサイトの構造自体で企業活動の方針を表現  企業のブランディング  社内での情報共有や啓蒙活動としての効果  様々なステークホルダー  Webサイトに訪問するのは顧客と就職希望者だけではない  社員、社員の家族、地域住民  投資家、ビジネスパートナー、マスメディア

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:19 ビジネスツールとしてのWebサイトを提供サイトオーナー(企業)にとってのWebサイト・ローンチしてからがスタート・どうやって使えばビジネスに貢献できるか？制作会社に出来る事・Webサイトの使い方を提案・「作って納めて終了」にしない・ローンチ後の活用を前提としたデザイン企業がWebを活用する上でのパートナーとしての価値を高める

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

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:21 事例紹介：株式会社映像システム様 http://www.eizo-system.co.jp/ 視聴覚設備の設計、施工、保守 教育機関の視聴覚室 TV会議システム Webサイトリニューアルの目的（サイトオーナー要望） 営業ツールとしての活用 潜在顧客の取り込み 採用ツールとしての活用 採用は新卒のみ 企業としての将来性を伝えたい ※お客様のご了承を得てご紹介しています

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:22 リニューアル前

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:23 リニューアル後

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:24 プロジェクト提案 Webサイトの「使い方」「作り方」の提案 「誰」に「何」を伝えるか？をはじめに検討する 「とりあえずデザイン変える」では効果が望めない ワークショップ形式でのコンテンツ設計 社内の意思形成が容易 仮説の検証を社内で把握しやすい 運用体制 部署を横断したプロジェクトチーム形式のほうが良い 情報が偏らない 若手を入れる事で鮮度を保つ Webサイト運用が若手の教育に繋がる 効果測定指標の検討 定量化が難しい 問い合わせ件数 営業スタッフの満足度調査

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:25 ヒアリングサイトオーナーを理解する サイトオーナーのビジネスを知る マーケット、ユーザー、競合、パートナー、etc 顧客の取り扱っている商品、サービスの理解 顧客の顧客(Webサイトのユーザー)の理解 市場の中での顧客の特徴、優位性は何か サイトオーナー（企業）を知る 沿革、組織図、社員の雰囲気、業務フロー、etc どのように営業活動、採用活動しているか 社内資料を頂戴する 社内報、研修用資料、提案資料、パンフレット、etc 「どんなWebサイトが欲しいですか？」はまだ聞かない サイトオーナーを理解したうえで、いっしょに検討する

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:26 ディスカッション理想のWebサイトの模索 新しいWebサイトをどう活用したいか？ 新しいWebサイトに何があるとユーザーにとって有益か？ ユーザーは、どんな人/どんな時/どんな場合か？

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:27 コンセプトの決定伝えたい事を決めて、Webサイトで表現するサイトオーナーの価値（優位性）ユーザーに伝えたい事  納入してからのユーザー側での運用を見越  使い続けてもらう事を重視する姿勢した設計  オーダーメイドで最適なシステム構築が出  設計から施工までワンストップ来る技術力  メーカーに依存しない適切な機器選定 ※ あえてハードウェアやシステムのスペックをアピールしない視聴覚システム構築ニーズに応えるコミュニケーションに臨む姿勢の表現コンテンツの提供窓口への誘導  デザインのトーン&マナー  ソリューション  理解、興味から問い合わせ  導入事例に繋げる動線設計  「わたしたちが大切にしている事」  関連情報への回遊性

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:28 クリエイティブの方向性 Webサイトの「人格」を決める

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:29 クリエイティブの方向性コンセプトの表現方法を検討

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:30 クリエイティブの方向性ユーザーモデルに応じた表現方法を検討

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:31 コンテンツ検討ユーザーが欲しい情報＋サイトオーナーが伝えたい情報

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:32 コンテンツ検討

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:33 コンテンツ詳細検討

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:34 コンテンツ構成案情報をどうつなぐか？ a) 事例・取り扱いサービスを訴求 構成案：事例・サービスを多数提示、検索性を重視した画面設計 ユーザー行動：自分の要望を軸にサイトを探索 求める効果：問い合わせに誘導 b) 企業の姿勢を伝える  構成案：コンサル力を全面に出す、サイト全体で企業としての姿勢を表現  ユーザー行動：サイト閲覧を通じて企業の姿勢や仕事の進め方を理解  求める効果：広報、ブランディング

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:35 サイト構造

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:36 サイトマップ上での動線設計 TOPページからの誘導 [a] 「ニーズ毎のソリューション一覧」「業種毎の事例一覧」への誘導が主動線。自分の状況に合わせた理解、検討が必要なユーザーを想定。 [b] 『ピックアップ』からの個別ページへの誘導もある。比較的目的が明確なユーザーを想定。 [c] 『LONG TERM VALUE』枠はメッセージ欄であり下層への強い誘導を目的としない。リンク先ページは問い合わせ後など、リピーターがESCに対する理解を深める用途。

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:37 サイトマップ上での動線設計ソリューション・導入事例の回遊 [a] 事例ページがハブになるように集約。ユーザーの状況に近い/参考になる事例ページに誘導し、そこからソリューションの回遊に繋げる。「例えばこんなこの施設でこのソリューションを活用しています」 [b] 事例の回遊は個別ページを起点とする。一覧から選択後は、一覧に戻らず、「関連する事例」での回遊を充実させる。 [c] 事例個別ページからソリューションへの動線を確保。「この施設で使っているソリューションを詳しく知りたい」 [d] ソリューションの理解はニーズ毎の一覧ページで完結する。個別ページが存在するソリューションが少ない前提。

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:38 ワイヤーフレームからビジュアルデザインへワイヤーフレームに装飾する事がデザインではない

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:39 ワイヤーフレームからビジュアルデザインへ

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:45 問い合わせフォームでのコミュニケーション問い合わせ内容と一緒に直前ページのURL も保存  どのページを見て問い合わせに至ったか？  ユーザーに「刺さる」コンテンツは？  営業マンからのコンタクト時の事前情報として例）導入事例の詳細を口頭で紹介する  直前ページと問い合わせ内容の一致度は？  間違った理解をされていないか？ Web以外の窓口の提示サイト構造に合わせたカテゴリー →直前ページに応じて自動でチェック

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

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:47 出来るところから、IA  狭義のIAは無意識にやっている。はず  「Webサイトの使い方」を考える  ローンチしてからがスタート  「作って納めて終了」ではない  サイトオーナーを理解して、Webで表現するお手伝いをする  IAはみんなでやること  サイトオーナーと一緒に考える  ディレクターだけの仕事じゃない  「ワイヤーフレームに装飾する」のがデザインじゃない

IAなんか怖くない〜中小規模案件で考える情報アーキテクチャの第一歩〜 PAGE:48 ありがとうございました。

http://www.concentinc.jp	2894
http://d4r.jp	235
url_unknown	22
file://	14
http://jp.hanrss.com	5
http://www-test.concentinc.jp	2
http://cnttest	1
http://paper.li	1

WCAN 2010 Summer Session-1: IA

by Daishiro KAGAWA on Jul 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 3,174

Statistics

WCAN 2010 Summer Session-1: IA — Presentation Transcript