Information Architecture プロのWebサイト・アプリ設計を学ぶ、駆け出しWebクリエイターのためのIA勉強会      IA for a novice Web Creators             Nobuya Sa...
自己紹介•  佐藤伸哉 (@nobsato)•  UXデザイン、デザイン戦略、IA –  1994年からWebデザイン –  Webエージェンシーて、主に大規模な企業サイトの    情報設計や企業のグローバル戦略を実行 –  Sonyのデザイン...
IA勉強会、IAセオリーの紐解き•  Learning Information Architecture                   Copyright © 2012 Secret Lab, Inc. All rights reserv...
本日のトピック•    情報アーキテクチャとは?•    インフォメーションアーキテクトの役割•    IAのプロセス•    IAの主な成果物•    IAに求められるコアスキル            Copyright © 2012 Sec...
情報アーキテクチャとは?      Copyright © 2012 Secret Lab, Inc. All rights reserved.   5
情報アーキテクチャとは…•  複雑なデータの固有のパターンをまとめて内容を明確   にする人•  第三者が情報を得るための筋道を自分で見つけられる   ように、情報の構造を示す地図を作成する人•  誰でもが理解しやすいように情報を提供しそれらを...
情報アーキテクチャとは…•  複雑なデータの固有のパターンをまとめて内容を明確   にする人•  第三者が情報を得るための筋道を自分で見つけられる   ように、情報の構造を示す地図を作成する人         情報を理解すること•  誰でもが理...
情報アーキテクチャとは…•  情報の構成、インデックス、ラベリングシステム、ナ   ビゲーションシステムといった情報の組み立て方法を   設計し、情報のブラウズと検索を支援する人文科学•  ナビゲーションシステム、ビジュアルシステム、ペー   ...
情報アーキテクチャとは…•  情報の構成、インデックス、ラベリングシステム、ナ   ビゲーションシステムといった情報の組み立て方法を   設計し、情報のブラウズと検索を支援する人文科学      情報を整理し、法則を作ること•  ナビゲーション...
情報アーキテクチャとは…•  サービスや機能にユーザーの視点を反映し、首尾よく   情報を見つけて、問題なく目的を達成できるよう、十   分配慮して計画された構造を作ること『Designing Web Usability』(1999年) ヤコブ...
情報アーキテクチャとは…•  サービスや機能にユーザーの視点を反映し、首尾よく   情報を見つけて、問題なく目的を達成できるよう、十   分配慮して計画された構造を作ること                問題を解決すること『Designing ...
情報アーキテクチャとは…•  コンテンツとインタラクションのためのナビゲーショ   ンと構成や仕組みといった、潜在的なシステムを表現   する計画を設計すること•  インフォメーションアーキテクトはインタラクティブ   な経験がどのように機能す...
情報アーキテクチャとは…•  コンテンツとインタラクションのためのナビゲーショ   ンと構成や仕組みといった、潜在的なシステムを表現   する計画を設計すること     機能を計画し、経験を設計すること•  インフォメーションアーキテクトはイン...
情報アーキテクチャとは…•    情報を理解すること•    情報を整理し、法則を作ること•    問題を解決すること•    機能を計画し、経験を設計すること 複雑な情報をシンプルにして、利用状況や目的に合わせて、         判りやすく...
ちょっと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 reserv...
インフォメーションアーキテクトの役割•  デザインプロセス全体を通して、一貫してユーザーの   代表としての意識をもち、ユーザーやシステムにとっ   て必要な情報を整理し、必要な機能を明確にし、それ   らを最良なユーザー体験に落とし込むために...
インフォメーションアーキテクトの役割決して、情報の整理する人、情報を整える人ではない。→ 情報を理解し、全体を把握し、全体を掌握する人        Copyright © 2012 Secret Lab, Inc. All rights re...
インフォメーションアーキテクトの役割      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
インフォメーションアーキテクトの仕事•  使いやすい経験を計画し、設計する人…→ 使い勝手(機能性と利便性)のデザイン→ ユーザーが経験する体験をいかに形にするか、    落とし込みのデザイン   目に見えない使い勝手(利便性と機能性)を   ...
Webにおける情報設計の作業とは•  達成すべき2つの目的1.  ユーザーの体験を常にデザインプロセスの念頭に置    いて、作り手側の都合で使い勝手が悪くならないよ    うに、何度となくユーザーの立場に立ち戻り、情報    のあり方を検討し...
Webサイトにおける情報設計のプロセス•  一般的な(理想的な)Webサイト設計プロセス•  大きく5つの工程 目的      ユーザー         機能                              サイト構造        ...
Webサイトにおける情報設計のプロセス1. ビジネスの目的やユーザーゴールの設計 目的       ユーザー         機能                              サイト構造              ページ構造 の設...
Webサイトにおける情報設計のプロセス2. ユーザー像/ターゲット層の設計 目的      ユーザー         機能                              サイト構造              ページ構造 の設計   ...
Webサイトにおける情報設計のプロセス3. フィーチャーと機能の設計(いわゆる企画) 目的       ユーザー         機能                              サイト構造              ページ構造 ...
Webサイトにおける情報設計のプロセス4. サイトレベルの構造設計 目的       ユーザー         機能                              サイト構造              ページ構造 の設計      ...
Webサイトにおける情報設計のプロセス5. ページレベルの構造設計 目的       ユーザー         機能                              サイト構造              ページ構造 の設計      ...
IAの主な成果物1.  市場調査、競合調査、ユーザー分析     上流設計2.  ペルソナ、ユーザーシナリオ       (戦略設計)3.  ユースケース、ユーザーフロー4.  機能リスト、コンテンツリスト                   ...
IAの主な成果物1.  市場調査、競合調査、ユーザー分析2.  ペルソナ、ユーザーシナリオ3.  ユースケース、ユーザーフロー4.  機能リスト、コンテンツリスト5.  コンセプトモデル、ハイレベルサイトマップ6.  ワイヤーフレーム7.  詳...
ペルソナ       Copyright © 2012 Secret Lab, Inc. All rights reserved.   37
ペルソナ、ポイントと目的実在するユーザーの調査に基づいて、ターゲットとなる人となりを共有する。•    「自分」で本当のユーザーを知る•    本当のユーザーを忘れないため•    わからない部分をクリヤーにする•    ユーザーを勝手に決めな...
ハイレベルサイトマップ      Copyright © 2012 Secret Lab, Inc. All rights reserved.   39
ハイレベルサイト、既存サイトの確認      Copyright © 2012 Secret Lab, Inc. All rights reserved.   40
ハイレベルサイトマップ、ポイントと目的ハイレベルサイトマップには2レイヤー「既存サイトの確認」と「新しい構造の提案」既存サイトの確認•    現状を頭で整理/把握する•    今のコンテンツを説明できるようにする•    問題になりそうな部分を...
ハイレベルサイトマップ、ポイントと目的.2ハイレベルサイトマップには2レイヤー「既存サイトの確認」と「新しい構造の提案」新しい構造の設計、全体構造の設計•    全体を把握/俯瞰して物事を判断•    将来的な拡張を検討できるように•    全...
ワイヤーフレーム      Copyright © 2012 Secret Lab, Inc. All rights reserved.   43
ワイヤーフレーム、ポイントと目的ユーザーがページ上でどのような情報をどのように取得していくか、目に見える形にしていく。•    ページにどんな要素が必要か?•    共通要素の整理•    リンク構成やナビゲーションの整理•    破綻や矛盾が...
詳細サイトマップ      Copyright © 2012 Secret Lab, Inc. All rights reserved.   45
詳細サイトマップ、ポイントと目的具体的な情報の「箱」を作って拡張していく。ユーザーがサイト上でどこでコンテンツにだどり着くかを決める。•    全体の設計のため•    共通コンテンツの整理•    小規模サイトのページ制作管理のため•    ...
IAの主な成果物1.  市場調査、競合調査、ユーザー分析2.  ペルソナ、ユーザーシナリオ3.  ユースケース、ユーザーフロー4.  機能リスト、コンテンツリスト5.  コンセプトモデル、ハイレベルサイトマップ6.  ワイヤーフレーム7.  詳...
IAに求められる4つのコアスキル1.    デザイン力とデザインマネージメント能力2.    リーダーシップとプロジェクトマネージメント能力3.    ユーザー調査の計画と実行力4.    調整力             Copyright ©...
Webデザインとスマホ向けデザインの違い•  レスポンシブデザイン(RD)http://www.nissan.co.th/                           Copyright © 2012 Secret Lab, Inc. ...
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, ...
参考になる書籍「IAシンキング Web制作者・担当者のためのIA思考術」•  坂本貴史(ネットイヤーグループ)/著•  ワークスコーポレーション (2011)         Copyright © 2012 Secret Lab, Inc. ...
参考になる書籍「Webサイト設計のためのデザイン&プランニング∼   ドキュメントコミュニケーションの教科書」•  佐藤伸哉/監訳 Dan M. Brown/著•  マイナビ (2012)         Copyright © 2012 Se...
参考になる書籍「Webデザイナーのための情報アーキテクチャ入門   成功するサイト構築術 」•  佐藤伸哉/監訳 Peter Van Dijck/著•  翔泳社 (2005)          Copyright © 2012 Secret L...
Thank YouNobuya SatoExperience Designernobsato@gmai.comhttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slideshare....
Upcoming SlideShare
Loading in...5
×

Find Your Ability: IA for a novice Web Creator

2,604
-1

Published on

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

Published in: Career
0 Comments
35 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,604
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
48
Comments
0
Likes
35
Embeds 0
No embeds

No notes for slide

Find Your Ability: IA for a novice Web Creator

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

    Clipping is a handy way to collect important slides you want to go back to later.

×