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