Find Your Ability: IA for a novice Web Creator

1. Information Architecture プロのWebサイト・アプリ設計を学ぶ、駆け出しWebクリエイターのためのIA勉強会 IA for a novice Web Creators Nobuya Sato Experience Designer November 22nd. 2012

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

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

12. 情報アーキテクチャとは…•  コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること•  インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー『Sapient Information Architecture Practice Deﬁnition and Framework』（2000年）リリアン・スベック Copyright © 2012 Secret Lab, Inc. All rights reserved. 12

13. 情報アーキテクチャとは…•  コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること機能を計画し、経験を設計すること•  インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー『Sapient Information Architecture Practice Deﬁnition and Framework』（2000年）リリアン・スベック Copyright © 2012 Secret Lab, Inc. All rights reserved. 13

28. Webにおける情報設計の作業とは•  達成すべき2つの目的1.  ユーザーの体験を常にデザインプロセスの念頭に置いて、作り手側の都合で使い勝手が悪くならないように、何度となくユーザーの立場に立ち戻り、情報のあり方を検討し、最適な状態を維持する → 要らないものを作らない！2.  実装前にデザインや構造の検証をすることで、実装時における時間と開発リースを節約する → 無駄を無くす！ Copyright © 2012 Secret Lab, Inc. All rights reserved. 28

29. Webサイトにおける情報設計のプロセス•  一般的な（理想的な）Webサイト設計プロセス•  大きく5つの工程目的ユーザー機能サイト構造ページ構造の設計の設計の設計の設計の設計情報の分解情報の分析情報の分類情報の再構成情報の再設計上流／戦略から（クライアント直で）コンテンツレベルから（代理店経由で）変更／追加レベルから（制作会社経由で） Copyright © 2012 Secret Lab, Inc. All rights reserved. 29

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

41. ハイレベルサイトマップ、ポイントと目的ハイレベルサイトマップには2レイヤー「既存サイトの確認」と「新しい構造の提案」既存サイトの確認•  現状を頭で整理／把握する•  今のコンテンツを説明できるようにする•  問題になりそうな部分を理解にする•  全体のボリューム／ページ数を把握する Copyright © 2012 Secret Lab, Inc. All rights reserved. 41

42. ハイレベルサイトマップ、ポイントと目的.2ハイレベルサイトマップには2レイヤー「既存サイトの確認」と「新しい構造の提案」新しい構造の設計、全体構造の設計•  全体を把握／俯瞰して物事を判断•  将来的な拡張を検討できるように•  全体方針や方向性、戦略立案のために•  フェーズに分けて現実が見えるように Copyright © 2012 Secret Lab, Inc. All rights reserved. 42

44. ワイヤーフレーム、ポイントと目的ユーザーがページ上でどのような情報をどのように取得していくか、目に見える形にしていく。•  ページにどんな要素が必要か？•  共通要素の整理•  リンク構成やナビゲーションの整理•  破綻や矛盾がページごとにないか？•  クライアントとのコミュニケーションツール Copyright © 2012 Secret Lab, Inc. All rights reserved. 44

47. IAの主な成果物1.  市場調査、競合調査、ユーザー分析2.  ペルソナ、ユーザーシナリオ3.  ユースケース、ユーザーフロー4.  機能リスト、コンテンツリスト5.  コンセプトモデル、ハイレベルサイトマップ6.  ワイヤーフレーム7.  詳細サイトマップ8.  機能要件定義書、仕様書9.  ページデザイン（コンポーネント設計）10. デザインガイドライン Copyright © 2012 Secret Lab, Inc. All rights reserved. 47