More Related Content
Similar to Iajuku kagoshima 130316
Similar to Iajuku kagoshima 130316 (20)
Iajuku kagoshima 130316
- 1. IA塾 in 鹿児島
2013/03/16
株式会社コンセント
2013 © Concent, Inc.
- 2. IA Juku in Kagoshima PAGE: 1
本日のメニュー
第1部 講義
IAとは?
Web 情報アーキテクチャ設計で大切なポイント
プロジェクトの流れとIAの役割
2013 © Concent, Inc.
- 3. IA Juku in Kagoshima PAGE: 4
IAとは?
2013 © Concent, Inc.
- 4. IA Juku in Kagoshima PAGE: 5
IAとは?
「IA」とは2つのことを指しています。
情報アーキテクチャ – Information Architecture
構造化された情報そのもののことを指します
知識やデータの組織化を意味し、
「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術
分かりやすさのためのデザイン
From: Wikiぺディア
インフォメーションアーキテクト – Information Architect IA!
情報アーキテクチャを設計する人のことを指します
データに潜む隠れたパターンを整理し、複雑さを明快にする人
ユーザーが自分の知識を獲得するための道具を見つけられるような、構造や地図を作る人
From: Information Architects, Richard Saul Wurman
2013 © Concent, Inc.
- 5. IA Juku in Kagoshima PAGE: 6
情報アーキテクチャとは?
2013 © Concent, Inc.
- 6. IA Juku in Kagoshima PAGE: 7
IAとは?
情報アーキテクチャとは? - Information Architecture
知識やデータの組織化を意味し、
「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術
「情報を収集し」「整理し」「優先順位をつける」
データ 情報 知識 知恵
統合 組織化・文脈化
From: Nathan Shedroff
Webサイトでは…
• 情報構造、ナビゲーション、ラベルなどの要素を指します
• サイト内での情報の分類や、情報のつながりを定義することです
2013 © Concent, Inc.
- 7. IA Juku in Kagoshima PAGE: 8
IAとは?
情報アーキテクチャを「Webサイト」で活用するメリット
多様なユーザーに対して変化に富んだ情報を提供する「Webサイト」では、以下3つのメリットがあります。
利用者が情報を探し、活用し、理解しやすくする
送り手が自分の意図どおりに情報を提示できる
情報の変化に対応する
2013 © Concent, Inc.
- 8. IA Juku in Kagoshima PAGE: 9
IAとは?
「Webサイト」の情報アーキテクチャ設計に必要な3つの要素
これら3つの要素を分析・検討することが、情報アーキテクチャ設計をする上での前提条件となります。
• どんなユーザー?
• サイトを使う目的は?
• どんな情報がある? ユーザー • どんな状況で使う?
User
• 情報間の関係は?
• 更新・追加はある?
コンテンツ コンテキスト • ビジネス要件は?
Contents Context
• 制約事項は?
• 現況の課題は?
2013 © Concent, Inc.
- 9. IA Juku in Kagoshima PAGE: 10
IAとは?
「Webサイト」での情報アーキテクチャの考え方
インターネット上の情報アーキテクチャは、4つの階層に分けて考えることができます。
インターネット全体のIA 1企業内のIA 1サイトのIA 画面でのIA
Webエコシステム エンタープライズ サイトストラクチャ グラフィックデザイン
(Web生態系) 情報アーキテクチャ
(EIA)
2013 © Concent, Inc.
- 10. IA Juku in Kagoshima PAGE: 11
インフォメーションアーキテクトとは?
2013 © Concent, Inc.
- 11. IA Juku in Kagoshima PAGE: 12
IAとは?
インフォメーションアーキテクトとは? - Information Architect
「情報アーキテクチャ」を設計する人のことを指します。
• サイトストラクチャ
• ナビゲーション
• ワイヤーフレーム
ビジュアル
戦略 設計 実装
デザイン
狭義のIA
Small IA
IA!
広義のIA
プロジェクトを総合的に見ていく
Big IA プロデューサー的役割も果たします
• 調査、分析
• ユーザー定義
• サイトコンセプト
• 設計方針
2013 © Concent, Inc.
- 12. IA Juku in Kagoshima PAGE: 13
Web情報アーキテクチャ設計で大切なポイント
2013 © Concent, Inc.
- 13. IA Juku in Kagoshima PAGE: 14
Web情報アーキテクチャ設計で大切なポイント
大切なポイント3つ
「Webサイト」でIA設計をする際に踏まえるべき3つのポイントがあります。
who?
1. ユーザーを知る
2. 情報自体の整理を行う
3. ユーザーの体験をデザインする
2013 © Concent, Inc.
- 14. IA Juku in Kagoshima PAGE: 15
Web情報アーキテクチャ設計で大切なポイント
1. ユーザーを知る
そのサイトを使う「ユーザー」が誰なのか、どんな利用状況やニーズがあるのかを知ることが大切です。
職場で使う?
自宅で使う?
平日?休日?
?
? 年代は?
どんな職業?
どんなものが好き?
よく行く場所は?
何が知りたい?
何を探している?
何か困ってる?
ログ解析、市場マーケティングデータ、ユーザー調査、ペルソナ …etc
2013 © Concent, Inc.
- 15. IA Juku in Kagoshima PAGE: 16
Web情報アーキテクチャ設計で大切なポイント
2. 情報自体の整理を行う
扱われる情報の分類を整理し、情報同士の関係や連携するべき情報を明示化することが大切です。
情報の分類 情報の関係性
A
G
場所
会場 スケ
アクセス ジュール
E H イベント
C D
チケット
B F 口コミ
購入
コンテンツリスト、LATCH法、コンテンツモデル …etc
2013 © Concent, Inc.
- 16. IA Juku in Kagoshima PAGE: 17
Web情報アーキテクチャ設計で大切なポイント
3. ユーザーの体験をデザインする – User Experience Design
ユーザーが繰り返し使う「体験」の中で、どんな「価値」が提供できるのかを考えることも大切です。
Webサイト以外の接点 利用する
店舗など
雑誌・新聞等
TV
ユーザシナリオ、ストーリーボード、UXフロー、 …etc
2013 © Concent, Inc.
- 17. IA Juku in Kagoshima PAGE: 18
Web情報アーキテクチャ設計で大切なポイント
人間中心設計(HCD)の考え方を活用する
「ユーザー」のことを考慮しIA設計を行い、「ユーザー」に満足度を提供するために活用できるプロセスと手法です。
ユーザビリティを考慮したデザインプロセス(国際規格 ISO9241-210より)
• フィールド調査
• 文脈的調査
利用状況の理解と
要求が達成されるまで 詳細な記述
繰り返される
リリース
要求事項に対する ユーザーおよび組織の
設計の評価 要求事項の詳細な記述
• ユーザーテスト • ペルソナ/シナリオモデル
• ヒューリスティック評価 • ユーザーモデリング
設計による解決案の作成
• プロトタイピング
• デザインパターン
※コンセントではこのHCDのプロセスをプロジェクトに取り入れています
2013 © Concent, Inc.
- 18. IA Juku in Kagoshima PAGE: 19
プロジェクトの流れとIAの役割
2013 © Concent, Inc.
- 19. IA Juku in Kagoshima PAGE: 20
プロジェクトの流れとIAの役割
プロジェクト体制の例
例えば大規模案件などの場合では、以下のような体制でプロジェクトチームを組む場合があります。
プロデューサー兼
プロデューサー ディレクターの場合も
アートディレクター ディレクター
プロジェクト ディレクター兼
広義のIA プロジェクトマネージャーの場合も
マネージャー
Big IA
インフォメーション
デザイナー コーダー テクニカル
アーキテクト
狭義のIA
Small IA ※体制はケースバイケースです
2013 © Concent, Inc.
- 20. IA Juku in Kagoshima PAGE: 21
プロジェクトの流れとIAの役割
プロジェクトの流れについて
大きく3つのフェーズに分かれていて、各フェーズごとに必要な検討を行いアウトプットを作ります。
コンセントのUXプロジェクト
戦略 設計 ビジュアルデザイン
サービス アクティビティ インタラクション
デザイン デザイン デザイン
• サービス自体の価値定義 • サービス実現のためのシナリオ定義 • 具体的に操作する画面や、
• ユーザー価値、ビジネス価値 • 利用文脈調査に基づき、 インターフェイスをプロトタイプに
双方から検討 メンタルモデルやシナリオを検討 基づき検討
• エスノグラフィ調査に基づき • IAに反映 • 利用シナリオに基づき、
方針策定 複数のプロトタイプを用意し比較検討
納品物 納品物 納品物
• エスノグラフィ調査レポート • 利用シナリオ • UI比較検討レポート
• 価値マップ(ジャーニーマップ) (UXフロー、ストーリーボード) • プロトタイプ
• サービス戦略定義書 • 情報アーキテクチャ設計
2013 © Concent, Inc.
- 21. IA Juku in Kagoshima PAGE: 22
プロジェクトの流れとIAの役割
Web IA設計の流れについて
Web IA設計の全体像と流れは以下のようになっています。
前提条件
(調査・分析) コンセプト定義 情報アーキテクチャ設計
サイト
ストラクチャ
ユーザー
User
ユーザー
エクスペリエンス ナビゲーション 画面設計
コンテンツ コンテキスト 方針
Contents Context
ラベル
※具体的なアウトプットの例を別紙にて紹介します
2013 © Concent, Inc.
- 22. IA Juku in Kagoshima PAGE: 23
もっとIAを知りたい
2013 © Concent, Inc.
- 23. IA Juku in Kagoshima PAGE: 24
おすすめの参考書籍
「もっとIAのことを詳しく知りたい!」…という方に、以下の本をおすすめします。
IAの基本をもっと知りたい 現場でのIAの使い方を知りたい
IA100 Web情報アーキテクチャ IA THINKING
IAの全体像、概念を知る 具体的な設計の落とし方を知る IAの実務での実践方法を知る
2013 © Concent, Inc.
- 24. IA Juku in Kagoshima PAGE: 25
参考サイト
ちなみに「IA100」の Youtube 版があります。
2013 © Concent, Inc.
- 25. IA Juku in Kagoshima PAGE: 26
参考サイト
「IA」や「HCD」を推進している団体のWebサイトもチェックしてみてください。
IAAJ:Information Architecture Association Japan HCD-Net:人間中心設計推進機構
2013 © Concent, Inc.
- 26. IA Juku in Kagoshima PAGE: 27
参考サイト
弊社Webサイトでも、色々な情報を発信しています。
株式会社コンセント
2013 © Concent, Inc.
- 27. IA Juku in Kagoshima PAGE: 28
Thank you!
2013 © Concent, Inc.