Find Your Ability: IA for a novice Web Creator
Upcoming SlideShare
Loading in...5
×
 

Find Your Ability: IA for a novice Web Creator

on

  • 2,381 views

Find your Ability ! forクリエイター #6;プロのWebサイト・アプリ設計を学ぶ、駆け出しWebクリエイターのためのIA勉強会 発表資料(2012年11月22日)

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

Statistics

Views

Total Views
2,381
Views on SlideShare
2,176
Embed Views
205

Actions

Likes
34
Downloads
45
Comments
0

5 Embeds 205

http://sasapyon3.blogspot.jp 159
https://twitter.com 39
https://si0.twimg.com 3
http://twitter.com 2
http://sasapyon3.blogspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Find Your Ability: IA for a novice Web Creator Find Your Ability: IA for a novice Web Creator Presentation Transcript

  • 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
  • ちょっとUX的な話… Copyright © 2012 Secret Lab, Inc. All rights reserved. 15
  • 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
  • インフォメーションアーキテクトの役割•  使いやすい経験を計画し、設計する人… © Paul Boag Copyright © 2012 Secret Lab, Inc. All rights reserved. 20
  • インフォメーションアーキテクトの役割•  デザインプロセス全体を通して、一貫してユーザーの 代表としての意識をもち、ユーザーやシステムにとっ て必要な情報を整理し、必要な機能を明確にし、それ らを最良なユーザー体験に落とし込むために、ユーザ ー中心のデザイン開発を推進する人 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. ビジネスの目的やユーザーゴールの設計 目的 ユーザー 機能 サイト構造 ページ構造 の設計 の設計 の設計 の設計 の設計情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計 A.  実際にアクセスするユーザーの仮説形成 B.  ユーザー体験の目標の定義(何ができるか) C.  既存サイト/既存サービスの調査 D.  競合サイト/競合サービスの調査 → 競合調査、ユーザー調査、ゴール定義書 Copyright © 2012 Secret Lab, Inc. All rights reserved. 30
  • Webサイトにおける情報設計のプロセス2. ユーザー像/ターゲット層の設計 目的 ユーザー 機能 サイト構造 ページ構造 の設計 の設計 の設計 の設計 の設計情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計 A.  ターゲットとなるオーディンス層の設定 B.  ペルソナの開発(…のためのユーザー調査) C.  ユーザーシナリオの設計 → ペルソナ、ユーザーシナリオ、ユーザー要件定義書  ユーザージャーニー、ジャーニーマップ Copyright © 2012 Secret Lab, Inc. All rights reserved. 31
  • Webサイトにおける情報設計のプロセス3. フィーチャーと機能の設計(いわゆる企画) 目的 ユーザー 機能 サイト構造 ページ構造 の設計 の設計 の設計 の設計 の設計情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計 A.  フィーチャーと機能の開発 B.  競合フィーチャー・セットの調査 C.  フィーチャーの優先順位付けとフェーズ分け D.  コンテンツインベントリー(目録)の作成 E.  機能要件定義書の作成 → 機能リスト、機能仕様書、要件定義書 Copyright © 2012 Secret Lab, Inc. All rights reserved. 32
  • Webサイトにおける情報設計のプロセス4. サイトレベルの構造設計 目的 ユーザー 機能 サイト構造 ページ構造 の設計 の設計 の設計 の設計 の設計情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計 A.  ユーザーフローの設計(構造のウォークスルー) B.  ナビゲーション構造、ナビゲーションスキーム C.  コンテンツラベリングの開発 D.  サイトマップの作成(ハイレベル/詳細レベル) E.  コンテンツマトリックス、コンテンツマッピング → コンセプトモデル、サイトマップ、フロー図、画面遷移図、   コンテンツマトリックス、コンテンツリスト、etc Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
  • Webサイトにおける情報設計のプロセス5. ページレベルの構造設計 目的 ユーザー 機能 サイト構造 ページ構造 の設計 の設計 の設計 の設計 の設計情報の分解 情報の分析 情報の分類 情報の再構成 情報の再設計 A.  ワイヤーフレーム、ページレイアウトの作成 B.  ページデザインの決定 C.  ページレベルのコンポーネントの開発 D.  プロトタイプの作成/開発 E.  全体最適化 → ワイヤーフレーム、ページレイアウト、画面設計図、   画面詳細仕様書、ページスキマティックス Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
  • 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)http://www.nissan.co.th/ Copyright © 2012 Secret Lab, Inc. All rights reserved. 49
  • 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 YouNobuya SatoExperience Designernobsato@gmai.comhttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slideshare.com/nobsato Copyright © 2012 Secret Lab, Inc. All rights reserved. 61