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

Find Your Ability: IA for a novice Web Creator

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

Page 1: Find Your Ability: IA for a novice Web Creator

Information Architecture

プロのWebサイト・アプリ設計を学ぶ、 駆け出しWebクリエイターのためのIA勉強会

IA for a novice Web Creators

Nobuya Sato Experience Designer

November 22nd. 2012

Page 2: Find Your Ability: IA for a novice Web Creator

自己紹介 •  佐藤伸哉 (@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

Page 3: Find Your Ability: IA for a novice Web Creator

IA勉強会、IAセオリーの紐解き •  Learning Information Architecture

Copyright © 2012 Secret Lab, Inc. All rights reserved. 3

Page 4: Find Your Ability: IA for a novice Web Creator

本日のトピック •  情報アーキテクチャとは? •  インフォメーションアーキテクトの役割 •  IAのプロセス •  IAの主な成果物 •  IAに求められるコアスキル

Copyright © 2012 Secret Lab, Inc. All rights reserved. 4

Page 5: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは?

Copyright © 2012 Secret Lab, Inc. All rights reserved. 5

Page 6: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  複雑なデータの固有のパターンをまとめて内容を明確にする人

•  第三者が情報を得るための筋道を自分で見つけられるように、情報の構造を示す地図を作成する人

•  誰でもが理解しやすいように情報を提供しそれらをまとめる人

『Information Architects』(1996年)  リチャード・ソール・ワーマン  建築家&情報構築家

Copyright © 2012 Secret Lab, Inc. All rights reserved. 6

Page 7: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  複雑なデータの固有のパターンをまとめて内容を明確にする人

•  第三者が情報を得るための筋道を自分で見つけられるように、情報の構造を示す地図を作成する人

•  誰でもが理解しやすいように情報を提供しそれらをまとめる人

『Information Architects』(1996年)  リチャード・ソール・ワーマン  建築家&情報構築家

Copyright © 2012 Secret Lab, Inc. All rights reserved. 7

情報を理解すること

Page 8: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  情報の構成、インデックス、ラベリングシステム、ナビゲーションシステムといった情報の組み立て方法を設計し、情報のブラウズと検索を支援する人文科学

•  ナビゲーションシステム、ビジュアルシステム、ページレイアウト、タイトル法則、そしてラベリングシステムの首尾一貫した法則を開発すること

『情報アーキテクチャ』(1998年)  ルイス・ローゼンフェルド  ピーター・モービル

Copyright © 2012 Secret Lab, Inc. All rights reserved. 8

Page 9: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  情報の構成、インデックス、ラベリングシステム、ナビゲーションシステムといった情報の組み立て方法を設計し、情報のブラウズと検索を支援する人文科学

•  ナビゲーションシステム、ビジュアルシステム、ページレイアウト、タイトル法則、そしてラベリングシステムの首尾一貫した法則を開発すること

『情報アーキテクチャ』(1998年)  ルイス・ローゼンフェルド  ピーター・モービル

Copyright © 2012 Secret Lab, Inc. All rights reserved. 9

情報を整理し、法則を作ること

Page 10: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  サービスや機能にユーザーの視点を反映し、首尾よく情報を見つけて、問題なく目的を達成できるよう、十分配慮して計画された構造を作ること

『Designing Web Usability』(1999年)  ヤコブ・ニールセン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 10

Page 11: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  サービスや機能にユーザーの視点を反映し、首尾よく情報を見つけて、問題なく目的を達成できるよう、十分配慮して計画された構造を作ること

『Designing Web Usability』(1999年)  ヤコブ・ニールセン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 11

問題を解決すること

Page 12: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること

•  インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー

『Sapient Information Architecture Practice Definition and Framework』(2000年)  リリアン・スベック

Copyright © 2012 Secret Lab, Inc. All rights reserved. 12

Page 13: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  コンテンツとインタラクションのためのナビゲーションと構成や仕組みといった、潜在的なシステムを表現する計画を設計すること

•  インフォメーションアーキテクトはインタラクティブな経験がどのように機能するかを設計し、ユーザーの経験を構築するデザイナー

『Sapient Information Architecture Practice Definition and Framework』(2000年)  リリアン・スベック

Copyright © 2012 Secret Lab, Inc. All rights reserved. 13

機能を計画し、経験を設計すること

Page 14: Find Your Ability: IA for a novice Web Creator

情報アーキテクチャとは…

•  情報を理解すること •  情報を整理し、法則を作ること •  問題を解決すること •  機能を計画し、経験を設計すること

Copyright © 2012 Secret Lab, Inc. All rights reserved. 14

複雑な情報をシンプルにして、利用状況や目的に合わせて、判りやすくすること

使いやすい経験を計画、設計すること

Page 15: Find Your Ability: IA for a novice Web Creator

Copyright © 2012 Secret Lab, Inc. All rights reserved. 15

ちょっとUX的な話…

Page 16: Find Your Ability: IA for a novice Web Creator

Copyright © 2012 Secret Lab, Inc. All rights reserved. 16

Page 17: Find Your Ability: IA for a novice Web Creator

Copyright © 2012 Secret Lab, Inc. All rights reserved. 17

Page 18: Find Your Ability: IA for a novice Web Creator

Copyright © 2012 Secret Lab, Inc. All rights reserved. 18

Page 19: Find Your Ability: IA for a novice Web Creator

Copyright © 2012 Secret Lab, Inc. All rights reserved. 19

Page 20: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

•  使いやすい経験を計画し、設計する人…

Copyright © 2012 Secret Lab, Inc. All rights reserved. 20

© Paul Boag

Page 21: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

•  デザインプロセス全体を通して、一貫してユーザーの代表としての意識をもち、ユーザーやシステムにとって必要な情報を整理し、必要な機能を明確にし、それらを最良なユーザー体験に落とし込むために、ユーザー中心のデザイン開発を推進する人

Copyright © 2012 Secret Lab, Inc. All rights reserved. 21

Page 22: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

決して、情報の整理する人、情報を整える人ではない。 → 情報を理解し、全体を把握し、全体を掌握する人

Copyright © 2012 Secret Lab, Inc. All rights reserved. 22

Page 23: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

Copyright © 2012 Secret Lab, Inc. All rights reserved. 23

Page 24: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

Copyright © 2012 Secret Lab, Inc. All rights reserved. 24

Page 25: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

Copyright © 2012 Secret Lab, Inc. All rights reserved. 25

Page 26: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの役割

Copyright © 2012 Secret Lab, Inc. All rights reserved. 26

Page 27: Find Your Ability: IA for a novice Web Creator

インフォメーションアーキテクトの仕事

•  使いやすい経験を計画し、設計する人…

→ 使い勝手(機能性と利便性)のデザイン → ユーザーが経験する体験をいかに形にするか、

落とし込みのデザイン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 27

目に見えない使い勝手(利便性と機能性)を 設計する人

誰かのために情報を整理して資料を作る人

Page 28: Find Your Ability: IA for a novice Web Creator

Webにおける情報設計の作業とは •  達成すべき2つの目的

1.  ユーザーの体験を常にデザインプロセスの念頭に置いて、作り手側の都合で使い勝手が悪くならないように、何度となくユーザーの立場に立ち戻り、情報のあり方を検討し、最適な状態を維持する → 要らないものを作らない!

2.  実装前にデザインや構造の検証をすることで、実装時における時間と開発リースを節約する → 無駄を無くす!

Copyright © 2012 Secret Lab, Inc. All rights reserved. 28

Page 29: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス

•  一般的な(理想的な)Webサイト設計プロセス •  大きく5つの工程

Copyright © 2012 Secret Lab, Inc. All rights reserved. 29

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

上流/戦略から(クライアント直で)

コンテンツレベルから(代理店経由で)

変更/追加レベルから (制作会社経由で)

Page 30: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス

1. ビジネスの目的やユーザーゴールの設計

Copyright © 2012 Secret Lab, Inc. All rights reserved. 30

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

A.  実際にアクセスするユーザーの仮説形成 B.  ユーザー体験の目標の定義(何ができるか) C.  既存サイト/既存サービスの調査 D.  競合サイト/競合サービスの調査

→ 競合調査、ユーザー調査、ゴール定義書

Page 31: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス

2. ユーザー像/ターゲット層の設計

Copyright © 2012 Secret Lab, Inc. All rights reserved. 31

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

A.  ターゲットとなるオーディンス層の設定 B.  ペルソナの開発(…のためのユーザー調査) C.  ユーザーシナリオの設計

→ ペルソナ、ユーザーシナリオ、ユーザー要件定義書  ユーザージャーニー、ジャーニーマップ

Page 32: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス

3. フィーチャーと機能の設計(いわゆる企画)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 32

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

A.  フィーチャーと機能の開発 B.  競合フィーチャー・セットの調査 C.  フィーチャーの優先順位付けとフェーズ分け D.  コンテンツインベントリー(目録)の作成 E.  機能要件定義書の作成

→ 機能リスト、機能仕様書、要件定義書

Page 33: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス

4. サイトレベルの構造設計

Copyright © 2012 Secret Lab, Inc. All rights reserved. 33

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

A.  ユーザーフローの設計(構造のウォークスルー) B.  ナビゲーション構造、ナビゲーションスキーム C.  コンテンツラベリングの開発 D.  サイトマップの作成(ハイレベル/詳細レベル) E.  コンテンツマトリックス、コンテンツマッピング

→ コンセプトモデル、サイトマップ、フロー図、画面遷移図、   コンテンツマトリックス、コンテンツリスト、etc

Page 34: Find Your Ability: IA for a novice Web Creator

Webサイトにおける情報設計のプロセス 5. ページレベルの構造設計

Copyright © 2012 Secret Lab, Inc. All rights reserved. 34

情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計

ユーザーの設計

機能 の設計

サイト構造の設計

ページ構造の設計

目的 の設計

A.  ワイヤーフレーム、ページレイアウトの作成 B.  ページデザインの決定 C.  ページレベルのコンポーネントの開発 D.  プロトタイプの作成/開発 E.  全体最適化

→ ワイヤーフレーム、ページレイアウト、画面設計図、   画面詳細仕様書、ページスキマティックス

Page 35: Find Your Ability: IA for a novice Web Creator

IAの主な成果物

1.  市場調査、競合調査、ユーザー分析 2.  ペルソナ、ユーザーシナリオ 3.  ユースケース、ユーザーフロー 4.  機能リスト、コンテンツリスト 5.  コンセプトモデル、ハイレベルサイトマップ 6.  ワイヤーフレーム 7.  詳細サイトマップ 8.  機能要件定義書、仕様書 9.  ページデザイン(コンポーネント設計) 10. デザインガイドライン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 35

上流設計 (戦略設計)

全体設計

情報設計

詳細設計

Page 36: Find Your Ability: IA for a novice Web Creator

IAの主な成果物

1.  市場調査、競合調査、ユーザー分析 2.  ペルソナ、ユーザーシナリオ 3.  ユースケース、ユーザーフロー 4.  機能リスト、コンテンツリスト 5.  コンセプトモデル、ハイレベルサイトマップ 6.  ワイヤーフレーム 7.  詳細サイトマップ 8.  機能要件定義書、仕様書 9.  ページデザイン(コンポーネント設計) 10. デザインガイドライン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 36

Page 37: Find Your Ability: IA for a novice Web Creator

ペルソナ

Copyright © 2012 Secret Lab, Inc. All rights reserved. 37

Page 38: Find Your Ability: IA for a novice Web Creator

ペルソナ、ポイントと目的 実在するユーザーの調査に基づいて、ターゲットとなる人となりを共有する。

•  「自分」で本当のユーザーを知る •  本当のユーザーを忘れないため •  わからない部分をクリヤーにする •  ユーザーを勝手に決めないため •  仮説で物事を決めない

Copyright © 2012 Secret Lab, Inc. All rights reserved. 38

Page 39: Find Your Ability: IA for a novice Web Creator

ハイレベルサイトマップ

Copyright © 2012 Secret Lab, Inc. All rights reserved. 39

Page 40: Find Your Ability: IA for a novice Web Creator

ハイレベルサイト、既存サイトの確認

Copyright © 2012 Secret Lab, Inc. All rights reserved. 40

Page 41: Find Your Ability: IA for a novice Web Creator

ハイレベルサイトマップ、ポイントと目的

ハイレベルサイトマップには2レイヤー 「既存サイトの確認」と「新しい構造の提案」 既存サイトの確認 •  現状を頭で整理/把握する •  今のコンテンツを説明できるようにする •  問題になりそうな部分を理解にする •  全体のボリューム/ページ数を把握する

Copyright © 2012 Secret Lab, Inc. All rights reserved. 41

Page 42: Find Your Ability: IA for a novice Web Creator

ハイレベルサイトマップ、ポイントと目的.2

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

Copyright © 2012 Secret Lab, Inc. All rights reserved. 42

Page 43: Find Your Ability: IA for a novice Web Creator

ワイヤーフレーム

Copyright © 2012 Secret Lab, Inc. All rights reserved. 43

Page 44: Find Your Ability: IA for a novice Web Creator

ワイヤーフレーム、ポイントと目的

ユーザーがページ上でどのような情報をどのように取得していくか、目に見える形にしていく。

•  ページにどんな要素が必要か? •  共通要素の整理 •  リンク構成やナビゲーションの整理 •  破綻や矛盾がページごとにないか? •  クライアントとのコミュニケーションツール

Copyright © 2012 Secret Lab, Inc. All rights reserved. 44

Page 45: Find Your Ability: IA for a novice Web Creator

詳細サイトマップ

Copyright © 2012 Secret Lab, Inc. All rights reserved. 45

Page 46: Find Your Ability: IA for a novice Web Creator

詳細サイトマップ、ポイントと目的

具体的な情報の「箱」を作って拡張していく。 ユーザーがサイト上でどこでコンテンツにだどり着くかを決める。 •  全体の設計のため •  共通コンテンツの整理 •  小規模サイトのページ制作管理のため •  制作チーム以外がサイト構造を確認するため

Copyright © 2012 Secret Lab, Inc. All rights reserved. 46

Page 47: Find Your Ability: IA for a novice Web Creator

IAの主な成果物

1.  市場調査、競合調査、ユーザー分析 2.  ペルソナ、ユーザーシナリオ 3.  ユースケース、ユーザーフロー 4.  機能リスト、コンテンツリスト 5.  コンセプトモデル、ハイレベルサイトマップ 6.  ワイヤーフレーム 7.  詳細サイトマップ 8.  機能要件定義書、仕様書 9.  ページデザイン(コンポーネント設計) 10. デザインガイドライン

Copyright © 2012 Secret Lab, Inc. All rights reserved. 47

Page 48: Find Your Ability: IA for a novice Web Creator

IAに求められる4つのコアスキル 1.  デザイン力とデザインマネージメント能力 2.  リーダーシップとプロジェクトマネージメント能力 3.  ユーザー調査の計画と実行力 4.  調整力

Copyright © 2012 Secret Lab, Inc. All rights reserved. 48

Page 49: Find Your Ability: IA for a novice Web Creator

Webデザインとスマホ向けデザインの違い •  レスポンシブデザイン(RD)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 49

http://www.nissan.co.th/

Page 50: Find Your Ability: IA for a novice Web Creator

Webサイトのデザイン •  PCのモニターサイズに依存するも広々。

Copyright © 2012 Secret Lab, Inc. All rights reserved. 50

Page 51: Find Your Ability: IA for a novice Web Creator

Webサイトのデザイン •  PCのモニターサイズに依存するも広々。

Copyright © 2012 Secret Lab, Inc. All rights reserved. 51

Page 52: Find Your Ability: IA for a novice Web Creator

スマホ向けのデザイン •  端末上の液晶のサイズ以上には表示できない。

Copyright © 2012 Secret Lab, Inc. All rights reserved. 52

Page 53: Find Your Ability: IA for a novice Web Creator

スマホ向けのデザイン •  端末上の液晶のサイズ以上には表示できない。

Copyright © 2012 Secret Lab, Inc. All rights reserved. 53

Page 54: Find Your Ability: IA for a novice Web Creator

スマホ向けのデザイン •  端末上の液晶のサイズ以上には表示できない。

Copyright © 2012 Secret Lab, Inc. All rights reserved. 54

Page 55: Find Your Ability: IA for a novice Web Creator

大きな画面に向けたデザイン •  マウスによる広範囲な移動ポイント、沢山の選択

Copyright © 2012 Secret Lab, Inc. All rights reserved. 55

Page 56: Find Your Ability: IA for a novice Web Creator

小さな画面に向けたデザイン •  単刀直入!時間短縮!

Copyright © 2012 Secret Lab, Inc. All rights reserved. 56

Page 57: Find Your Ability: IA for a novice Web Creator

参考になる書籍 「IA100 ユーザーエクスペリエンスデザインのための  情報アーキテクチャ設計」 •  長谷川敦士(コンセント)/著 •  ビー・エヌ・エヌ新社 (2009)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 57

Page 58: Find Your Ability: IA for a novice Web Creator

参考になる書籍 「IAシンキング Web制作者・担当者のためのIA思考術」 •  坂本貴史(ネットイヤーグループ)/著 •  ワークスコーポレーション (2011)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 58

Page 59: Find Your Ability: IA for a novice Web Creator

参考になる書籍 「Webサイト設計のためのデザイン&プランニング~    ドキュメントコミュニケーションの教科書」 •  佐藤伸哉/監訳 Dan M. Brown/著 •  マイナビ (2012)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 59

Page 60: Find Your Ability: IA for a novice Web Creator

参考になる書籍 「Webデザイナーのための情報アーキテクチャ入門    成功するサイト構築術 」 •  佐藤伸哉/監訳 Peter Van Dijck/著 •  翔泳社 (2005)

Copyright © 2012 Secret Lab, Inc. All rights reserved. 60

Page 61: Find Your Ability: IA for a novice Web Creator

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