More Related Content
Similar to Find Your Ability: IA for a novice Web Creator (20)
More from Nobuya Sato (16)
Find Your Ability: IA for a novice Web Creator
- 2. 自己紹介
• 佐藤伸哉 (@nobsato)
• UXデザイン、デザイン戦略、IA
– 1994年からWebデザイン
– Webエージェンシーて、主に大規模な企業サイトの
情報設計や企業のグローバル戦略を実行
– Sonyのデザイン部門てグループ横断のAndroidのプ
ラットフォーム戦略やタブレット戦略
– 米Seesmicて日本語化やAndroidやWP7のアプリ開発
– UXとデザイン戦略の会社、Secret Lab, Inc.を設立
– 現在、米AKQAでUE統括ディレクターとして東京オ
フィスの立ち上げに参画
Copyright © 2012 Secret Lab, Inc. All rights reserved. 2
- 4. 本日のトピック
• 情報アーキテクチャとは?
• インフォメーションアーキテクトの役割
• IAのプロセス
• IAの主な成果物
• IAに求められるコアスキル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 4
- 5. 情報アーキテクチャとは?
Copyright © 2012 Secret Lab, Inc. All rights reserved. 5
- 6. 情報アーキテクチャとは…
• 複雑なデータの固有のパターンをまとめて内容を明確
にする人
• 第三者が情報を得るための筋道を自分で見つけられる
ように、情報の構造を示す地図を作成する人
• 誰でもが理解しやすいように情報を提供しそれらをま
とめる人
『Information Architects』(1996年)
リチャード・ソール・ワーマン
建築家&情報構築家
Copyright © 2012 Secret Lab, Inc. All rights reserved. 6
- 7. 情報アーキテクチャとは…
• 複雑なデータの固有のパターンをまとめて内容を明確
にする人
• 第三者が情報を得るための筋道を自分で見つけられる
ように、情報の構造を示す地図を作成する人
情報を理解すること
• 誰でもが理解しやすいように情報を提供しそれらをま
とめる人
『Information Architects』(1996年)
リチャード・ソール・ワーマン
建築家&情報構築家
Copyright © 2012 Secret Lab, Inc. All rights reserved. 7
- 8. 情報アーキテクチャとは…
• 情報の構成、インデックス、ラベリングシステム、ナ
ビゲーションシステムといった情報の組み立て方法を
設計し、情報のブラウズと検索を支援する人文科学
• ナビゲーションシステム、ビジュアルシステム、ペー
ジレイアウト、タイトル法則、そしてラベリングシス
テムの首尾一貫した法則を開発すること
『情報アーキテクチャ』(1998年)
ルイス・ローゼンフェルド
ピーター・モービル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 8
- 9. 情報アーキテクチャとは…
• 情報の構成、インデックス、ラベリングシステム、ナ
ビゲーションシステムといった情報の組み立て方法を
設計し、情報のブラウズと検索を支援する人文科学
情報を整理し、法則を作ること
• ナビゲーションシステム、ビジュアルシステム、ペー
ジレイアウト、タイトル法則、そしてラベリングシス
テムの首尾一貫した法則を開発すること
『情報アーキテクチャ』(1998年)
ルイス・ローゼンフェルド
ピーター・モービル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 9
- 11. 情報アーキテクチャとは…
• サービスや機能にユーザーの視点を反映し、首尾よく
情報を見つけて、問題なく目的を達成できるよう、十
分配慮して計画された構造を作ること
問題を解決すること
『Designing Web Usability』(1999年)
ヤコブ・ニールセン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 11
- 12. 情報アーキテクチャとは…
• コンテンツとインタラクションのためのナビゲーショ
ンと構成や仕組みといった、潜在的なシステムを表現
する計画を設計すること
• インフォメーションアーキテクトはインタラクティブ
な経験がどのように機能するかを設計し、ユーザーの
経験を構築するデザイナー
『Sapient Information Architecture Practice Definition and Framework』(2000年)
リリアン・スベック
Copyright © 2012 Secret Lab, Inc. All rights reserved. 12
- 13. 情報アーキテクチャとは…
• コンテンツとインタラクションのためのナビゲーショ
ンと構成や仕組みといった、潜在的なシステムを表現
する計画を設計すること
機能を計画し、経験を設計すること
• インフォメーションアーキテクトはインタラクティブ
な経験がどのように機能するかを設計し、ユーザーの
経験を構築するデザイナー
『Sapient Information Architecture Practice Definition and Framework』(2000年)
リリアン・スベック
Copyright © 2012 Secret Lab, Inc. All rights reserved. 13
- 14. 情報アーキテクチャとは…
• 情報を理解すること
• 情報を整理し、法則を作ること
• 問題を解決すること
• 機能を計画し、経験を設計すること
複雑な情報をシンプルにして、利用状況や目的に合わせて、
判りやすくすること
使いやすい経験を計画、設計すること
Copyright © 2012 Secret Lab, Inc. All rights reserved. 14
- 15. ちょっとUX的な話…
Copyright © 2012 Secret Lab, Inc. All rights reserved. 15
- 30. Webサイトにおける情報設計のプロセス
1. ビジネスの目的やユーザーゴールの設計
目的 ユーザー 機能 サイト構造 ページ構造
の設計 の設計 の設計 の設計 の設計
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
A. 実際にアクセスするユーザーの仮説形成
B. ユーザー体験の目標の定義(何ができるか)
C. 既存サイト/既存サービスの調査
D. 競合サイト/競合サービスの調査
→ 競合調査、ユーザー調査、ゴール定義書
Copyright © 2012 Secret Lab, Inc. All rights reserved. 30
- 31. Webサイトにおける情報設計のプロセス
2. ユーザー像/ターゲット層の設計
目的 ユーザー 機能 サイト構造 ページ構造
の設計 の設計 の設計 の設計 の設計
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
A. ターゲットとなるオーディンス層の設定
B. ペルソナの開発(…のためのユーザー調査)
C. ユーザーシナリオの設計
→ ペルソナ、ユーザーシナリオ、ユーザー要件定義書
ユーザージャーニー、ジャーニーマップ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 31
- 32. Webサイトにおける情報設計のプロセス
3. フィーチャーと機能の設計(いわゆる企画)
目的 ユーザー 機能 サイト構造 ページ構造
の設計 の設計 の設計 の設計 の設計
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
A. フィーチャーと機能の開発
B. 競合フィーチャー・セットの調査
C. フィーチャーの優先順位付けとフェーズ分け
D. コンテンツインベントリー(目録)の作成
E. 機能要件定義書の作成
→ 機能リスト、機能仕様書、要件定義書
Copyright © 2012 Secret Lab, Inc. All rights reserved. 32
- 33. Webサイトにおける情報設計のプロセス
4. サイトレベルの構造設計
目的 ユーザー 機能 サイト構造 ページ構造
の設計 の設計 の設計 の設計 の設計
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
A. ユーザーフローの設計(構造のウォークスルー)
B. ナビゲーション構造、ナビゲーションスキーム
C. コンテンツラベリングの開発
D. サイトマップの作成(ハイレベル/詳細レベル)
E. コンテンツマトリックス、コンテンツマッピング
→ コンセプトモデル、サイトマップ、フロー図、画面遷移図、
コンテンツマトリックス、コンテンツリスト、etc
Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
- 34. Webサイトにおける情報設計のプロセス
5. ページレベルの構造設計
目的 ユーザー 機能 サイト構造 ページ構造
の設計 の設計 の設計 の設計 の設計
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
A. ワイヤーフレーム、ページレイアウトの作成
B. ページデザインの決定
C. ページレベルのコンポーネントの開発
D. プロトタイプの作成/開発
E. 全体最適化
→ ワイヤーフレーム、ページレイアウト、画面設計図、
画面詳細仕様書、ページスキマティックス
Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
- 35. IAの主な成果物
1. 市場調査、競合調査、ユーザー分析 上流設計
2. ペルソナ、ユーザーシナリオ (戦略設計)
3. ユースケース、ユーザーフロー
4. 機能リスト、コンテンツリスト
全体設計
5. コンセプトモデル、ハイレベルサイトマップ
6. ワイヤーフレーム
7. 詳細サイトマップ 情報設計
8. 機能要件定義書、仕様書
9. ページデザイン(コンポーネント設計)
詳細設計
10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 35
- 36. IAの主な成果物
1. 市場調査、競合調査、ユーザー分析
2. ペルソナ、ユーザーシナリオ
3. ユースケース、ユーザーフロー
4. 機能リスト、コンテンツリスト
5. コンセプトモデル、ハイレベルサイトマップ
6. ワイヤーフレーム
7. 詳細サイトマップ
8. 機能要件定義書、仕様書
9. ページデザイン(コンポーネント設計)
10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 36
- 37. ペルソナ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 37
- 39. ハイレベルサイトマップ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 39
- 43. ワイヤーフレーム
Copyright © 2012 Secret Lab, Inc. All rights reserved. 43
- 45. 詳細サイトマップ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 45
- 47. IAの主な成果物
1. 市場調査、競合調査、ユーザー分析
2. ペルソナ、ユーザーシナリオ
3. ユースケース、ユーザーフロー
4. 機能リスト、コンテンツリスト
5. コンセプトモデル、ハイレベルサイトマップ
6. ワイヤーフレーム
7. 詳細サイトマップ
8. 機能要件定義書、仕様書
9. ページデザイン(コンポーネント設計)
10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 47
- 48. IAに求められる4つのコアスキル
1. デザイン力とデザインマネージメント能力
2. リーダーシップとプロジェクトマネージメント能力
3. ユーザー調査の計画と実行力
4. 調整力
Copyright © 2012 Secret Lab, Inc. All rights reserved. 48
- 61. Thank You
Nobuya Sato
Experience Designer
nobsato@gmai.com
http://twitter.com/nobsato
http://about.me/nobsato
http://slideshare.com/nobsato
Copyright © 2012 Secret Lab, Inc. All rights reserved. 61