Upload
nobuya-sato
View
2.115
Download
1
Embed Size (px)
DESCRIPTION
Find your Ability ! forクリエイター #6;プロのWebサイト・アプリ設計を学ぶ、駆け出しWebクリエイターのためのIA勉強会 発表資料(2012年11月22日) (※一部の内容を公開用に削除) http://www.zusaar.com/event/444154 http://www.pasonatech.co.jp/event/index.jsp?no=3690
Citation preview
Information Architecture
プロのWebサイト・アプリ設計を学ぶ、 駆け出しWebクリエイターのためのIA勉強会
IA for a novice Web Creators
Nobuya Sato Experience Designer
November 22nd. 2012
自己紹介 • 佐藤伸哉 (@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
IA勉強会、IAセオリーの紐解き • Learning Information Architecture
Copyright © 2012 Secret Lab, Inc. All rights reserved. 3
本日のトピック • 情報アーキテクチャとは? • インフォメーションアーキテクトの役割 • IAのプロセス • IAの主な成果物 • IAに求められるコアスキル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 4
情報アーキテクチャとは?
Copyright © 2012 Secret Lab, Inc. All rights reserved. 5
情報アーキテクチャとは…
• 複雑なデータの固有のパターンをまとめて内容を明確にする人
• 第三者が情報を得るための筋道を自分で見つけられるように、情報の構造を示す地図を作成する人
• 誰でもが理解しやすいように情報を提供しそれらをまとめる人
『Information Architects』(1996年) リチャード・ソール・ワーマン 建築家&情報構築家
Copyright © 2012 Secret Lab, Inc. All rights reserved. 6
情報アーキテクチャとは…
• 複雑なデータの固有のパターンをまとめて内容を明確にする人
• 第三者が情報を得るための筋道を自分で見つけられるように、情報の構造を示す地図を作成する人
• 誰でもが理解しやすいように情報を提供しそれらをまとめる人
『Information Architects』(1996年) リチャード・ソール・ワーマン 建築家&情報構築家
Copyright © 2012 Secret Lab, Inc. All rights reserved. 7
情報を理解すること
情報アーキテクチャとは…
• 情報の構成、インデックス、ラベリングシステム、ナビゲーションシステムといった情報の組み立て方法を設計し、情報のブラウズと検索を支援する人文科学
• ナビゲーションシステム、ビジュアルシステム、ページレイアウト、タイトル法則、そしてラベリングシステムの首尾一貫した法則を開発すること
『情報アーキテクチャ』(1998年) ルイス・ローゼンフェルド ピーター・モービル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 8
情報アーキテクチャとは…
• 情報の構成、インデックス、ラベリングシステム、ナビゲーションシステムといった情報の組み立て方法を設計し、情報のブラウズと検索を支援する人文科学
• ナビゲーションシステム、ビジュアルシステム、ページレイアウト、タイトル法則、そしてラベリングシステムの首尾一貫した法則を開発すること
『情報アーキテクチャ』(1998年) ルイス・ローゼンフェルド ピーター・モービル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 9
情報を整理し、法則を作ること
情報アーキテクチャとは…
• サービスや機能にユーザーの視点を反映し、首尾よく情報を見つけて、問題なく目的を達成できるよう、十分配慮して計画された構造を作ること
『Designing Web Usability』(1999年) ヤコブ・ニールセン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 10
情報アーキテクチャとは…
• サービスや機能にユーザーの視点を反映し、首尾よく情報を見つけて、問題なく目的を達成できるよう、十分配慮して計画された構造を作ること
『Designing Web Usability』(1999年) ヤコブ・ニールセン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 11
問題を解決すること
情報アーキテクチャとは…
• コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること
• インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー
『Sapient Information Architecture Practice Definition and Framework』(2000年) リリアン・スベック
Copyright © 2012 Secret Lab, Inc. All rights reserved. 12
情報アーキテクチャとは…
• コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること
• インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー
『Sapient Information Architecture Practice Definition and Framework』(2000年) リリアン・スベック
Copyright © 2012 Secret Lab, Inc. All rights reserved. 13
機能を計画し、経験を設計すること
情報アーキテクチャとは…
• 情報を理解すること • 情報を整理し、法則を作ること • 問題を解決すること • 機能を計画し、経験を設計すること
Copyright © 2012 Secret Lab, Inc. All rights reserved. 14
複雑な情報をシンプルにして、利用状況や目的に合わせて、判りやすくすること
使いやすい経験を計画、設計すること
Copyright © 2012 Secret Lab, Inc. All rights reserved. 15
ちょっとUX的な話…
Copyright © 2012 Secret Lab, Inc. All rights reserved. 16
Copyright © 2012 Secret Lab, Inc. All rights reserved. 17
Copyright © 2012 Secret Lab, Inc. All rights reserved. 18
Copyright © 2012 Secret Lab, Inc. All rights reserved. 19
インフォメーションアーキテクトの役割
• 使いやすい経験を計画し、設計する人…
Copyright © 2012 Secret Lab, Inc. All rights reserved. 20
© Paul Boag
インフォメーションアーキテクトの役割
• デザインプロセス全体を通して、一貫してユーザーの代表としての意識をもち、ユーザーやシステムにとって必要な情報を整理し、必要な機能を明確にし、それらを最良なユーザー体験に落とし込むために、ユーザー中心のデザイン開発を推進する人
Copyright © 2012 Secret Lab, Inc. All rights reserved. 21
インフォメーションアーキテクトの役割
決して、情報の整理する人、情報を整える人ではない。 → 情報を理解し、全体を把握し、全体を掌握する人
Copyright © 2012 Secret Lab, Inc. All rights reserved. 22
インフォメーションアーキテクトの役割
Copyright © 2012 Secret Lab, Inc. All rights reserved. 23
インフォメーションアーキテクトの役割
Copyright © 2012 Secret Lab, Inc. All rights reserved. 24
インフォメーションアーキテクトの役割
Copyright © 2012 Secret Lab, Inc. All rights reserved. 25
インフォメーションアーキテクトの役割
Copyright © 2012 Secret Lab, Inc. All rights reserved. 26
インフォメーションアーキテクトの仕事
• 使いやすい経験を計画し、設計する人…
→ 使い勝手(機能性と利便性)のデザイン → ユーザーが経験する体験をいかに形にするか、
落とし込みのデザイン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 27
目に見えない使い勝手(利便性と機能性)を 設計する人
誰かのために情報を整理して資料を作る人
Webにおける情報設計の作業とは • 達成すべき2つの目的
1. ユーザーの体験を常にデザインプロセスの念頭に置いて、作り手側の都合で使い勝手が悪くならないように、何度となくユーザーの立場に立ち戻り、情報のあり方を検討し、最適な状態を維持する → 要らないものを作らない!
2. 実装前にデザインや構造の検証をすることで、実装時における時間と開発リースを節約する → 無駄を無くす!
Copyright © 2012 Secret Lab, Inc. All rights reserved. 28
Webサイトにおける情報設計のプロセス
• 一般的な(理想的な)Webサイト設計プロセス • 大きく5つの工程
Copyright © 2012 Secret Lab, Inc. All rights reserved. 29
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
上流/戦略から(クライアント直で)
コンテンツレベルから(代理店経由で)
変更/追加レベルから (制作会社経由で)
Webサイトにおける情報設計のプロセス
1. ビジネスの目的やユーザーゴールの設計
Copyright © 2012 Secret Lab, Inc. All rights reserved. 30
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
A. 実際にアクセスするユーザーの仮説形成 B. ユーザー体験の目標の定義(何ができるか) C. 既存サイト/既存サービスの調査 D. 競合サイト/競合サービスの調査
→ 競合調査、ユーザー調査、ゴール定義書
Webサイトにおける情報設計のプロセス
2. ユーザー像/ターゲット層の設計
Copyright © 2012 Secret Lab, Inc. All rights reserved. 31
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
A. ターゲットとなるオーディンス層の設定 B. ペルソナの開発(…のためのユーザー調査) C. ユーザーシナリオの設計
→ ペルソナ、ユーザーシナリオ、ユーザー要件定義書 ユーザージャーニー、ジャーニーマップ
Webサイトにおける情報設計のプロセス
3. フィーチャーと機能の設計(いわゆる企画)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 32
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
A. フィーチャーと機能の開発 B. 競合フィーチャー・セットの調査 C. フィーチャーの優先順位付けとフェーズ分け D. コンテンツインベントリー(目録)の作成 E. 機能要件定義書の作成
→ 機能リスト、機能仕様書、要件定義書
Webサイトにおける情報設計のプロセス
4. サイトレベルの構造設計
Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
A. ユーザーフローの設計(構造のウォークスルー) B. ナビゲーション構造、ナビゲーションスキーム C. コンテンツラベリングの開発 D. サイトマップの作成(ハイレベル/詳細レベル) E. コンテンツマトリックス、コンテンツマッピング
→ コンセプトモデル、サイトマップ、フロー図、画面遷移図、 コンテンツマトリックス、コンテンツリスト、etc
Webサイトにおける情報設計のプロセス 5. ページレベルの構造設計
Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計
ユーザーの設計
機能 の設計
サイト構造の設計
ページ構造の設計
目的 の設計
A. ワイヤーフレーム、ページレイアウトの作成 B. ページデザインの決定 C. ページレベルのコンポーネントの開発 D. プロトタイプの作成/開発 E. 全体最適化
→ ワイヤーフレーム、ページレイアウト、画面設計図、 画面詳細仕様書、ページスキマティックス
IAの主な成果物
1. 市場調査、競合調査、ユーザー分析 2. ペルソナ、ユーザーシナリオ 3. ユースケース、ユーザーフロー 4. 機能リスト、コンテンツリスト 5. コンセプトモデル、ハイレベルサイトマップ 6. ワイヤーフレーム 7. 詳細サイトマップ 8. 機能要件定義書、仕様書 9. ページデザイン(コンポーネント設計) 10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 35
上流設計 (戦略設計)
全体設計
情報設計
詳細設計
IAの主な成果物
1. 市場調査、競合調査、ユーザー分析 2. ペルソナ、ユーザーシナリオ 3. ユースケース、ユーザーフロー 4. 機能リスト、コンテンツリスト 5. コンセプトモデル、ハイレベルサイトマップ 6. ワイヤーフレーム 7. 詳細サイトマップ 8. 機能要件定義書、仕様書 9. ページデザイン(コンポーネント設計) 10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 36
ペルソナ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 37
ペルソナ、ポイントと目的 実在するユーザーの調査に基づいて、ターゲットとなる人となりを共有する。
• 「自分」で本当のユーザーを知る • 本当のユーザーを忘れないため • わからない部分をクリヤーにする • ユーザーを勝手に決めないため • 仮説で物事を決めない
Copyright © 2012 Secret Lab, Inc. All rights reserved. 38
ハイレベルサイトマップ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 39
ハイレベルサイト、既存サイトの確認
Copyright © 2012 Secret Lab, Inc. All rights reserved. 40
ハイレベルサイトマップ、ポイントと目的
ハイレベルサイトマップには2レイヤー 「既存サイトの確認」と「新しい構造の提案」 既存サイトの確認 • 現状を頭で整理/把握する • 今のコンテンツを説明できるようにする • 問題になりそうな部分を理解にする • 全体のボリューム/ページ数を把握する
Copyright © 2012 Secret Lab, Inc. All rights reserved. 41
ハイレベルサイトマップ、ポイントと目的.2
ハイレベルサイトマップには2レイヤー 「既存サイトの確認」と「新しい構造の提案」 新しい構造の設計、全体構造の設計 • 全体を把握/俯瞰して物事を判断 • 将来的な拡張を検討できるように • 全体方針や方向性、戦略立案のために • フェーズに分けて現実が見えるように
Copyright © 2012 Secret Lab, Inc. All rights reserved. 42
ワイヤーフレーム
Copyright © 2012 Secret Lab, Inc. All rights reserved. 43
ワイヤーフレーム、ポイントと目的
ユーザーがページ上でどのような情報をどのように取得していくか、目に見える形にしていく。
• ページにどんな要素が必要か? • 共通要素の整理 • リンク構成やナビゲーションの整理 • 破綻や矛盾がページごとにないか? • クライアントとのコミュニケーションツール
Copyright © 2012 Secret Lab, Inc. All rights reserved. 44
詳細サイトマップ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 45
詳細サイトマップ、ポイントと目的
具体的な情報の「箱」を作って拡張していく。 ユーザーがサイト上でどこでコンテンツにだどり着くかを決める。 • 全体の設計のため • 共通コンテンツの整理 • 小規模サイトのページ制作管理のため • 制作チーム以外がサイト構造を確認するため
Copyright © 2012 Secret Lab, Inc. All rights reserved. 46
IAの主な成果物
1. 市場調査、競合調査、ユーザー分析 2. ペルソナ、ユーザーシナリオ 3. ユースケース、ユーザーフロー 4. 機能リスト、コンテンツリスト 5. コンセプトモデル、ハイレベルサイトマップ 6. ワイヤーフレーム 7. 詳細サイトマップ 8. 機能要件定義書、仕様書 9. ページデザイン(コンポーネント設計) 10. デザインガイドライン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 47
IAに求められる4つのコアスキル 1. デザイン力とデザインマネージメント能力 2. リーダーシップとプロジェクトマネージメント能力 3. ユーザー調査の計画と実行力 4. 調整力
Copyright © 2012 Secret Lab, Inc. All rights reserved. 48
Webデザインとスマホ向けデザインの違い • レスポンシブデザイン(RD)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 49
http://www.nissan.co.th/
Webサイトのデザイン • PCのモニターサイズに依存するも広々。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 50
Webサイトのデザイン • PCのモニターサイズに依存するも広々。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 51
スマホ向けのデザイン • 端末上の液晶のサイズ以上には表示できない。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 52
スマホ向けのデザイン • 端末上の液晶のサイズ以上には表示できない。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 53
スマホ向けのデザイン • 端末上の液晶のサイズ以上には表示できない。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 54
大きな画面に向けたデザイン • マウスによる広範囲な移動ポイント、沢山の選択
Copyright © 2012 Secret Lab, Inc. All rights reserved. 55
小さな画面に向けたデザイン • 単刀直入!時間短縮!
Copyright © 2012 Secret Lab, Inc. All rights reserved. 56
参考になる書籍 「IA100 ユーザーエクスペリエンスデザインのための 情報アーキテクチャ設計」 • 長谷川敦士(コンセント)/著 • ビー・エヌ・エヌ新社 (2009)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 57
参考になる書籍 「IAシンキング Web制作者・担当者のためのIA思考術」 • 坂本貴史(ネットイヤーグループ)/著 • ワークスコーポレーション (2011)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 58
参考になる書籍 「Webサイト設計のためのデザイン&プランニング~ ドキュメントコミュニケーションの教科書」 • 佐藤伸哉/監訳 Dan M. Brown/著 • マイナビ (2012)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 59
参考になる書籍 「Webデザイナーのための情報アーキテクチャ入門 成功するサイト構築術 」 • 佐藤伸哉/監訳 Peter Van Dijck/著 • 翔泳社 (2005)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 60
Thank You
Copyright © 2012 Secret Lab, Inc. All rights reserved. 61
Nobuya Sato Experience Designer [email protected] http://twitter.com/nobsato http://about.me/nobsato http://slideshare.com/nobsato