Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
IAから見た、Webの世代遷移と   HTML5時代のIAについて    ナナイロデザインワークス / 7dw
«  自己紹介«  IAとは«  IAから見る、Webの世代遷移«  レスポンシブのIAなお話。«  HTML5時代のIAについて«  まとめ
自己紹介ナナイロデザインワークス / 7dw       薬師神 裕樹       ディレクター / デザイナー       2000頃よりWeb制作に従事。       ECサイト制作、ネットベンチャー、大手SIer。       情報設計フ...
IA とは。
IAとは  IA とは。  アイエー         デザインに必要な情報を設計する事 = 工程         情報設計をする人 = スキル、ポジション
IAとは        IA とは。          アイエー                 デザインに必要な情報を設計する事 = 工程                 Information Architecture           ...
IAとは               インフォメーションアーキテクト                 ホームページの建築家                   建築家               IA                   アーキ...
IAとは       Information Architectureで   デザイン全体のコンテキストを          設計・可視化し紡ぐ。
IAとは HP作りたい Client
IAとは HP作りたい          Web Client   サイト
IAとは HP作りたい          Web Client   サイト
IAとは HP作りたい          ビ          ジ          ュ          ア          ル          デ          ザ          イ          ン            ...
IAとは HP作りたい                     ビ          『誰に』       ジ                     ュ                     ア              『何を』   ル ...
IAとは HP作りたい                     ?                         ビ          『誰に』           ジ                         ュ           ...
IAとは HP作りたい                  サ        ビ          『誰に』    イ        ジ                  ト    ユ                       |   ュ   ...
IAとは HP作りたい                                 イ                                 ン         イ                          機    デタ...
IAとは HP作りたい                                 イ                                 ン         イ                          機    デタ...
IAとは                    ユーザーエクスペリエンスデザインの5つのモデル要素                                                                         ...
IAとは           IAの問題解決。       «  ユーザーの利用状況に合わせた機能の提供。       «  利用者満足度の向上。       «  使い勝手の向上       «  問い合わせの減少。       «...
IAとは       IAがもたらす効果。       «  プロジェクト内のビジョンが明確になる。       «  コミュニケーションロスが減る。       «  デザインのコンテキストが明確になる。       «  プロジェク...
IAとは       Information Architectureで   デザイン全体のコンテキストを          設計・可視化し紡ぐ。
IA から見るWebの世代遷移。
IAから見る、Webの世代遷移                                                                             世界発のウェブサイトhttp://www.w3.org/Hi...
IAから見る、Webの時代遷移html                  html4.01 xhtml      html5   html5                                                  W3...
IAから見る、Webの時代遷移          1991                                    2000                                                     ...
IAから見る、Webの時代遷移                1991                                                      2000                             ...
IAから見る、Webの時代遷移                1991                                                      2000                             ...
IAから見る、Webの時代遷移                1991                                                      2000                             ...
IAから見る、Webの時代遷移                1991                                                      2000                             ...
IAから見る、Webの時代遷移                1991                                                      2000                             ...
IAから見る、Webの時代遷移    第4世代 Web以前                                             第5世代 Web        html4.01(一部xhtml)               ...
IAから見る、Webの時代遷移    第4世代 Web以前                                             第5世代 Web        html4.01(一部xhtml)               ...
IAから見る、Webの時代遷移    第4世代 Web以前                                                第5世代 Web        html4.01(一部xhtml)            ...
IAから見る、Webの時代遷移
http://jsdo.it/event/svggirl
http://browserquest.mozilla.org/
IAから見る、Webの時代遷移    第4世代 Web以前                                             第5世代 Web        html4.01(一部xhtml)               ...
IAから見る、Webの時代遷移 第4世代 Web以前           第5世代 Web  html4.01(一部xhtml)     html5      コンテンツ             データ       デ イ          ザ...
IAから見る、Webの時代遷移 Webサイトの世代的特徴  第1世代           第2世代       第3世代         第4世代 作る事が目的        様々な情報を    ユーザビリティ/    ユーザビリティ、    ...
IAから見る、Webの時代遷移
IAから見る、Webの時代遷移
IAから見る、Webの時代遷移
IAから見る、Webの時代遷移
レスポンシブ のIAなお話
http://onair.adclounge.jp/up06-05/
レスポンシブのIAな話。   メリット        デメリット
レスポンシブのIAな話。     メリット              デメリット «  1ソースマルチユース «  検索に強い(Google推奨) «  コンテンツの統一性 «  フロントエンド対応
レスポンシブのIAな話。     メリット                デメリット «  1ソースマルチユース        «  同時に複数画面サイズの検討 «  検索に強い(Google推奨)   «  サイトが重くなる «  ...
色々なレスポンシブサイトを改めてみんなで見てみよう。
レスポンシブのIAな話
レスポンシブのIAな話
レスポンシブのIAな話
レスポンシブのIAな話
Appleはスマホ最適化していない?
html5時代のIAについて。
html5時代のIAについて Webサイトの世代的特徴   第1世代           第2世代       第3世代         第4世代 作る事が目的         様々な情報を    ユーザビリティ/    ユーザビリティ、   ...
html5時代のIAについて HP作りたい                     ビ          『誰に』       ジ                     ュ                     ア             ...
html5時代のIAについて                            UXDに必須の3要素                                  『誰に』            『何を』                ...
html5時代のIAについて       ヒアリング             戦略        設計       デザイン・実装     お客様/営業/	                                            ...
html5時代のIAについて     UXDの3つの大きな課題。                 は、可視化されにくい。  ユーザー  『誰に』         コンテンツ         『何を』                 は、分断され...
html5時代のIAについて       ヒアリング             戦略        設計        デザイン・実装     お客様/営業/	                                           ...
html5時代のIAについて       ヒアリング             戦略        設計        デザイン・実装     お客様/営業/	                                           ...
html5時代のIAについて          html5時代のUXDに必須の3要素           ユーザー             コンテンツ           『誰に』             『何を』          ペルソナ ...
ALEXANDER.C 「オレゴン大学の実験」 
html5時代のIAについて     構               誰     築     プ               に               ニ                                     |    ...
html5時代のIAについて                 ユーザーエクスペリエンスに必要なハニカム構造Peter Morville
html5時代のIAについて 可視化されにくい。 分断されやすい。 細分化、多様化、複雑化。                 曖昧。                 感覚的。                 標準化されていない。
html5時代のIAについて デザインに必要な情報を各種設計で明確にしUXDを支える。                    企画   ユーザーニーズ            サイト構成           アフォーダンス            ...
まとめ
IAとは >コンテキストを紡ぐ。
第5世代のWebとは     >ユーザー体験の提供。
レスポンシブ  >メリット・デメリットを考え   効果的な導入を。
html5時代のIA >UXDを支える為のIAへ。
ありがとうございました。IAから見た、Webの世代遷移と   HTML5時代のIAについて    ナナイロデザインワークス / 7dw            http://7dw.jp            info@7dw.jp   http...
参考文献まとめ▼スライドで参考にしたweb文献など  P7 IAの役割  GRAND ARCHITECTS 非公開資料  P18 user experience 5 Planes Model  http://www.jjg.net/elemen...
参考文献まとめ▼スライドで参考にしたweb文献など その2  P63 UDXに必要な3要素。  P64 可視化の三角形  http://infomotions.com/musings/rosenfeld/P69  P69 オレゴン大学の実験の図...
参考文献まとめ▼UXDに関する様々なインフォグラフィック  ・UXDの様々な概念図  http://overkast.jp/2012/07/ux-concept-map/  ・UXDの成果物の参考例:トレジャーマップ  http://blog....
20121022 ia meets_html5_short
20121022 ia meets_html5_short
20121022 ia meets_html5_short
20121022 ia meets_html5_short
20121022 ia meets_html5_short
Prochain SlideShare
Chargement dans…5
×

20121022 ia meets_html5_short

2 382 vues

Publié le

Web Touch Meeting #51 × Mozilla勉強会

「IAから見たWebの世代遷移と、html5時代のIAについて」

Publié dans : Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

20121022 ia meets_html5_short

  1. 1. IAから見た、Webの世代遷移と HTML5時代のIAについて ナナイロデザインワークス / 7dw
  2. 2. «  自己紹介«  IAとは«  IAから見る、Webの世代遷移«  レスポンシブのIAなお話。«  HTML5時代のIAについて«  まとめ
  3. 3. 自己紹介ナナイロデザインワークス / 7dw 薬師神 裕樹 ディレクター / デザイナー 2000頃よりWeb制作に従事。 ECサイト制作、ネットベンチャー、大手SIer。 情報設計フェーズ、ディレクション。 2012年6月より広島にUターン。
  4. 4. IA とは。
  5. 5. IAとは IA とは。 アイエー デザインに必要な情報を設計する事 = 工程 情報設計をする人 = スキル、ポジション
  6. 6. IAとは IA とは。 アイエー デザインに必要な情報を設計する事 = 工程 Information Architecture インフォメーションアーキテクチャ 情報設計をする人 = スキル、ポジション Information Architect インフォメーションアーキテクトIA THINKING
  7. 7. IAとは インフォメーションアーキテクト ホームページの建築家 建築家 IA アーキテクト インフォメーションアーキテクト アーキテクチャ インフォメーションアーキテクチャ «  建物の設計 «  ホームページの設計 «  建物のコンセプト «  ホームページのコンセプト «  建物内の導線 «  ホームページ内のユーザー行動シナリオ «  建物の構造設計 «  ホームページのサイト構成 «  建物の間取り «  ホームページのページ構成(UI) «  建物の使いやすさ «  ユーザビリティ、アクセシビリティGRAND ARCHITECTS
  8. 8. IAとは Information Architectureで デザイン全体のコンテキストを 設計・可視化し紡ぐ。
  9. 9. IAとは HP作りたい Client
  10. 10. IAとは HP作りたい Web Client サイト
  11. 11. IAとは HP作りたい Web Client サイト
  12. 12. IAとは HP作りたい ビ ジ ュ ア ル デ ザ イ ン Web Client サイト
  13. 13. IAとは HP作りたい ビ 『誰に』 ジ ュ ア 『何を』 ル デ ザ イ ン 『どのように』 ヒアリ Web Client ング サイト
  14. 14. IAとは HP作りたい ? ビ 『誰に』 ジ ュ ア 『何を』 ル デ ザ イ ン 『どのように』 ヒアリ Web Client ング サイト
  15. 15. IAとは HP作りたい サ ビ 『誰に』 イ ジ ト ユ | ュ の ア 『何を』目 ザ | ル 的 デ ニ | ザ イ ズ ン 『どのように』 ヒアリ ング 戦略 Web Client サイト
  16. 16. IAとは HP作りたい イ ン イ 機 デタ 『誰に』 サ 能 ザラ 情 ン デタ ビ 仕 イク 報 ザ| イ ンシ イフ ジ ト ユ 様 デ ュ 『何を』 の | ョ ン ザ ンェ | ア イ 目 ザ ア ン ス ル 的 | | デ ニ コ キ ナ ザ テ情 要ン | ビ イ デゲ ク報 ズ 求テ チ ザ| ン ン イ 『どのように』 ツ ャ ンシ ョ ン ヒアリ ング 戦略 要求 構造 骨格 デザイ ン Web Client サイト
  17. 17. IAとは HP作りたい イ ン イ 機 デタ 『誰に』 サ 能 ザラ 情 ン デタ ビ 仕 イク 報 ザ| イ ジ ト 『何を』 の デザイン全体のコンテキストを ユ | 様 ンシ ョ デ ザ イフ ンェ ュ ア ン イ | 目 ザ ア ス ル 的 設計・可視化し紡ぐ。 ナ | ニ コ | キ ン デ ザ テ情 要ン | ビ イ デゲ ク報 ズ 求テ チ ザ| ン ン イ 『どのように』 ツ ャ ンシ ョ ン ヒアリ ング 戦略 要求 構造 骨格 デザイ ン Web Client サイト
  18. 18. IAとは ユーザーエクスペリエンスデザインの5つのモデル要素 UX デザイン イ ン 機 デタ イ → 能 ン サ ザラ 情 デタ ビ イ 仕 イク 報 ザ| ジ ト 様 ンシ デ イフ ュ ユ ョ ンェプロセス の | ン ザ イ | ア 目 ザ ン ル アプリケーション ス 的 | ア デ ニ | ザ | コ キ情 ナ イ 要ン ン テ報 ビ → ズ デゲ ク 求テ チ ザ| ン イ ャ ツ ンシ ョ ン Webサイト工程/ 戦略 要求 構造 骨格 デザインフェーズ 企 ペ 要 ユ コ サ フ サ 詳 導 ラ ナ ワ ア ユ デ テ ビ 画 ル 件 | ン イ ァ イ 細 線 ベ ビ イ ク | ザ ン ジ ディレクター 書 ソ 定 ザ テ ト イ ト 設 設 リ ゲ ヤ セ ザ イ プ ュ として関与タスク/ / ナ 義 | ン ス ル マ 計 計 ン | | シ ビ ン レ ア 提 シ ツ ト リ ッ グ シ フ ビ リ 仕 | ル成果物 案 ナ マ ラ ス プ ョ レ リ テ 様 ト デ IAとしての 書 リ ッ ク ト ン | テ ィ ザ 関与 オ プ チ 設 ム ィ イ ャ 計 ン UX デザイナー@Jesse James Garrettより一部可変
  19. 19. IAとは IAの問題解決。 «  ユーザーの利用状況に合わせた機能の提供。 «  利用者満足度の向上。 «  使い勝手の向上 «  問い合わせの減少。 «  変化する情報に対応。 «  長期にわたっての使いやすさの向上(UI)
  20. 20. IAとは IAがもたらす効果。 «  プロジェクト内のビジョンが明確になる。 «  コミュニケーションロスが減る。 «  デザインのコンテキストが明確になる。 «  プロジェクト全体をデザイン出来る。 «  クライアントにも明確に仕様等の確認が出来るのでエンドレス な手戻り等が発生しない。 «  好みや立場の違いではなく、本質的な会話が出来る。 «  クライアント、ディレクター、コーダー、エンドユーザー、関 わる人達みんながハッピーになる、かもしれない。
  21. 21. IAとは Information Architectureで デザイン全体のコンテキストを 設計・可視化し紡ぐ。
  22. 22. IA から見るWebの世代遷移。
  23. 23. IAから見る、Webの世代遷移 世界発のウェブサイトhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html 1991年
  24. 24. IAから見る、Webの時代遷移html html4.01 xhtml html5 html5 W3C 勧告。http://www.evolutionoftheweb.com/?hl=ja
  25. 25. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ Retina
  26. 26. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ RetinaWebサイトの 第1世代 第2世代 第3世代 第4世代 第5世代世代GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋
  27. 27. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA/UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ RetinaWebサイトの 第1世代 第2世代 第3世代 第4世代 第5世代世代 作る事が目的GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋
  28. 28. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA/UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ RetinaWebサイトの 第1世代 第2世代 第3世代 第4世代 第5世代世代 作る事が目的 様々情報を掲載 情報発信 ・見た目 ・楽しさ ・インタラクティブGRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋
  29. 29. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA/UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ RetinaWebサイトの 第1世代 第2世代 第3世代 第4世代 第5世代世代 作る事が目的 様々情報を掲載 ユーザビリティ/ 情報発信 アクセシビリティの追求 成果の追求 ・見た目 ユーザー利用サービス ・楽しさ ・SNS ・インタラクティブ ・EC ・ブログGRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋
  30. 30. IAから見る、Webの時代遷移 1991 2000 2012 2014 2010Web標準 CSS3 html html4.01 Xhtml? html5 テキストとリンク cssレイアウト モバイルサイト セマンティック クラウドwebトレンド テーブルコーディング Flash jQuery レスポンシブ Web2.0 API RIA 位置情報 OGP AJAX 口コミ IA/UXD Twitterサービス EC ブログ SNS Facebook スマホアプリ タブレット閲覧環境 パソコン 携帯 スマホ RetinaWebサイトの 第1世代 第2世代 第3世代 第4世代 第5世代世代 作る事が目的 様々情報を掲載 ユーザビリティ/ 魅力的な情報発信 情報発信 アクセシビリティの追求 ユーザー視点 成果の追求 よりユーザー視点 ・見た目 ユーザー利用サービス ・ライティング ・楽しさ ・SNS ・右脳的 ・インタラクティブ ・EC ・認知論 ・ブログ ・感情GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋
  31. 31. IAから見る、Webの時代遷移 第4世代 Web以前 第5世代 Web html4.01(一部xhtml) html5http://www.microsoft.com/japan/web/webcamp2/default.aspx
  32. 32. IAから見る、Webの時代遷移 第4世代 Web以前 第5世代 Web html4.01(一部xhtml) html5 Hyper Text Markup Language ハイパーリンクを埋め込む事の出 来るドキュメントを作成する為 の言語。 «  コンテンツ=テキスト主体 «  デザイン=コンテンツと分離http://www.microsoft.com/japan/web/webcamp2/default.aspx
  33. 33. IAから見る、Webの時代遷移 第4世代 Web以前 第5世代 Web html4.01(一部xhtml) html5 Hyper Text Markup Language 扱えるデータの多様化に伴い、 ハイパーリンクを埋め込む事の出 アプリケーションの実行環境が 来るドキュメントを作成する為 wwwやクラウドの環境でも可能 の言語。 になった。 OSとの連動がシームレス。 «  コンテンツ=テキスト主体 «  コンテンツ=多用なデータ «  デザイン=コンテンツと分離 «  デザイン=データとデザインが連動http://www.microsoft.com/japan/web/webcamp2/default.aspx
  34. 34. IAから見る、Webの時代遷移
  35. 35. http://jsdo.it/event/svggirl
  36. 36. http://browserquest.mozilla.org/
  37. 37. IAから見る、Webの時代遷移 第4世代 Web以前 第5世代 Web html4.01(一部xhtml) html5 コンテンツ デ イ   ザ ン Webサイト http://www.microsoft.com/japan/web/webcamp2/default.aspx
  38. 38. IAから見る、Webの時代遷移 第4世代 Web以前 第5世代 Web html4.01(一部xhtml) html5 コンテンツ データ デ イ   ザ ン アプリケーション  Webサイト  システム=UX
  39. 39. IAから見る、Webの時代遷移 Webサイトの世代的特徴 第1世代 第2世代 第3世代 第4世代 作る事が目的 様々な情報を ユーザビリティ/ ユーザビリティ、 どんどん アクセシビリティの アクセシビリティ Webに掲載 追求、成果の追求 の追求に加え、魅 力的な情報発信 するのが目的 ユーザー利用サービ スの増加 よりユーザー視点 ・SNS ・右脳的 ・EC ・認知論 ・ブログ ・感情 第5世代のウェブサイト html5によって、ホームページ/サイトの枠を超えた多様性 Web=『ユーザー体験の提供』そのもの
  40. 40. IAから見る、Webの時代遷移
  41. 41. IAから見る、Webの時代遷移
  42. 42. IAから見る、Webの時代遷移
  43. 43. IAから見る、Webの時代遷移
  44. 44. レスポンシブ のIAなお話
  45. 45. http://onair.adclounge.jp/up06-05/
  46. 46. レスポンシブのIAな話。 メリット デメリット
  47. 47. レスポンシブのIAな話。 メリット デメリット «  1ソースマルチユース «  検索に強い(Google推奨) «  コンテンツの統一性 «  フロントエンド対応
  48. 48. レスポンシブのIAな話。 メリット デメリット «  1ソースマルチユース «  同時に複数画面サイズの検討 «  検索に強い(Google推奨) «  サイトが重くなる «  コンテンツの統一性 «  スマホ最適化のような特化した表 «  フロントエンド対応 現には不向き。 «  ユーザーがスマホ専用サイトと認 識してしまう(ドメイン指定受信 とかの問題)
  49. 49. 色々なレスポンシブサイトを改めてみんなで見てみよう。
  50. 50. レスポンシブのIAな話
  51. 51. レスポンシブのIAな話
  52. 52. レスポンシブのIAな話
  53. 53. レスポンシブのIAな話
  54. 54. Appleはスマホ最適化していない?
  55. 55. html5時代のIAについて。
  56. 56. html5時代のIAについて Webサイトの世代的特徴 第1世代 第2世代 第3世代 第4世代 作る事が目的 様々な情報を ユーザビリティ/ ユーザビリティ、 どんどん アクセシビリティの アクセシビリティ Webに掲載 追求、成果の追求 の追求に加え、魅 力的な情報発信 するのが目的 ユーザー利用サービ スの増加 よりユーザー視点 ・SNS ・右脳的 ・EC ・認知論 ・ブログ ・感情 第5世代のウェブサイト Html5によって、ホームページ/サイトの枠を超えた多様性 Web=『ユーザー体験の提供』そのもの
  57. 57. html5時代のIAについて HP作りたい ビ 『誰に』 ジ ュ ア 『何を』 ル デ ザ イ ン 『どのように』 ヒアリ Web Client ング サイト
  58. 58. html5時代のIAについて UXDに必須の3要素 『誰に』 『何を』 ユーザー コンテンツ 『どのように』 コンテキストhttp://infomotions.com/musings/rosenfeld/
  59. 59. html5時代のIAについて ヒアリング 戦略 設計 デザイン・実装 お客様/営業/   コーダー   ディレクター デザイナー お客様/ユーザー ディレクター プログラマー ニ ユ 情 | 誰 ズ 、 | 報 ア に 行 ザ | デメ 動 | キ |タ構 テ ク タ フワ築 コ チ 分 レイ デ ャ |ヤ ザプ 構ン 造   類 ム| イ フイ アプリケーション ェンロ 何 意テ 、 戦 ス ン |タ を 味ン 略セ   キ | 実 ス|ス ツ プ ム 全青 装 ロ 体写 文コ ジ 像真 ェ ラシ 化ン 、 ク スソ Webサイト | クテ ど テ ト の 進 ロキ ノ よ 行 う ジス | に ト http://infomotions.com/musings/rosenfeld/より可変
  60. 60. html5時代のIAについて UXDの3つの大きな課題。 は、可視化されにくい。 ユーザー 『誰に』 コンテンツ 『何を』 は、分断されやすい。 コンテキスト 『どのように』 さらに、第5世代では 細分化、多様化、複雑化。
  61. 61. html5時代のIAについて ヒアリング 戦略 設計 デザイン・実装 お客様/営業/   コーダー   ディレクター デザイナー お客様/ユーザー ディレクター プログラマー ニ ユ 情 誰 | ズ 、 | 報 ア 可視化されにくい。 に 行 ザ | デメ 動 | キ |タ構 テ タ築 ク フワ デ それぞれのポジショ コ チ 分 レイ ザ ャ |ヤプ 構ン 造   類 ム| イ フイ アプリケーション ンで捉え方が違って ェンロ 何 意テ 、 戦 ス ン |タセ を 味ン 略   キ 実 ス| くる。 |ス ツ プ ム 全青 装 ロ 体写 文コ ジ 像真 ラシ 化ン 、 ェ ク スソ Webサイト 自分の得意分野のみ | クテ ど テ ト の 進 にドライブして思考 ロキ ノ よ 行 ジス う | する。 に ト 可視化されにくい領域。 可視化される領域。 http://infomotions.com/musings/rosenfeld/, IA THINKINGより可変 
  62. 62. html5時代のIAについて ヒアリング 戦略 設計 デザイン・実装 お客様/営業/   コーダー   ディレクター デザイナー お客様/ユーザー ディレクター プログラマー ニ ユ 情 | 誰 ズ 行 、 | ザ 報 ア 分断されやすい。 に 動 | デメ | キ |タ構 テ ク タ フワ築 コ チ 分 レイ デ 分業化、効率化により ャ |ヤ ザプ 構ン   類 ム| イ フイ アプリケーションロ 造 ン ェン 工程、人が分断され 意テ 何 、 戦 ス |タ を 味ン 略セ   キ | 実 ス| コンテキストが薄まる、ス ツ プ ム 全青 装 ロ 体写 もしくは途切れる。 文コ ジ 像真 ェ ラシ 化ン 、 ク スソ Webサイト | クテ ど テ ト の 進 ロキ 木を見て森を見ない。 ノ よ 行 う ジス | に ト http://infomotions.com/musings/rosenfeld/, IA THINKINGより可変 
  63. 63. html5時代のIAについて html5時代のUXDに必須の3要素 ユーザー コンテンツ 『誰に』 『何を』 ペルソナ コンテンツ メンタルモデル データ 多様化。 細分化。 世代 ユーザー体験 人間工学 認知論 趣味 コンテキスト 趣向 『どのように』 デバイス 閲覧環境 テクノロジー 閲覧場所 文化 閲覧シーン 閲覧目的 社会 複雑化。
  64. 64. ALEXANDER.C 「オレゴン大学の実験」 
  65. 65. html5時代のIAについて 構 誰 築 プ に ニ | ユ 情 ロ ズ 、 | 報 ア 行 ザ セ 動 | | キ デメ |タ ス テ タ ク フワ コ チ 分 レイ デ ャ |ヤ ザ = 類 何 構ン 造   ム| イ ン フイ ェン 意テ 、 戦 ス 生 を 味ン 略   キ 実 |タ ス| 態 ツ プ | ム 全青 装 系 ロ 体写 文コ ジ 像真 の ェ ラシ 化ン 、 ク スソ デ クテ テ ト | ザ ど ロキ ノ 進 行 イ の ジス | ユーザー体験。 ン ト よ う にhttp://infomotions.com/musings/rosenfeld/より可変
  66. 66. html5時代のIAについて ユーザーエクスペリエンスに必要なハニカム構造Peter Morville
  67. 67. html5時代のIAについて 可視化されにくい。 分断されやすい。 細分化、多様化、複雑化。 曖昧。 感覚的。 標準化されていない。
  68. 68. html5時代のIAについて デザインに必要な情報を各種設計で明確にしUXDを支える。 企画 ユーザーニーズ サイト構成 アフォーダンス UIパターン ユーザーシナリオ トーン&マナー&クラス感 画面遷移 クラス感 導線設計 ペルソナ ラベリング ライティング メタファー インタラクション ナビゲーション設計 アクセシビリティ グルーピング ユーザビリティ コンテンツマップ Web標準 レスポンシブ セキュリティ 文言の統一
  69. 69. まとめ
  70. 70. IAとは >コンテキストを紡ぐ。
  71. 71. 第5世代のWebとは >ユーザー体験の提供。
  72. 72. レスポンシブ >メリット・デメリットを考え  効果的な導入を。
  73. 73. html5時代のIA >UXDを支える為のIAへ。
  74. 74. ありがとうございました。IAから見た、Webの世代遷移と HTML5時代のIAについて ナナイロデザインワークス / 7dw http://7dw.jp info@7dw.jp http://www.facebook.com/7dw.jp
  75. 75. 参考文献まとめ▼スライドで参考にしたweb文献など P7 IAの役割 GRAND ARCHITECTS 非公開資料 P18 user experience 5 Planes Model http://www.jjg.net/elements/pdf/elements.pdf P23 世界初のWebサイト http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htm P30 webの世代の特徴 GRAND ARCHITECTS「時代と共に変化するWebサイト」 GRAND ARCHITECTS 非公開資料 P33 HTML5登場の意義とWeb標準とのつきあいかた http://www.microsoft.com/japan/web/webcamp2/default.aspx http://www.ustream.tv/recorded/19174668 P24 Webの進化 http://evolutionofweb.appspot.com/ P45 モバイルとデスクトップのトラフィック予想 http://onair.adclounge.jp/up06-05/5/
  76. 76. 参考文献まとめ▼スライドで参考にしたweb文献など その2 P63 UDXに必要な3要素。 P64 可視化の三角形 http://infomotions.com/musings/rosenfeld/P69 P69 オレゴン大学の実験の図 [姿勢編]理由無き要求は機能化してはいけない http://itpro.nikkeibp.co.jp/article/COLUMN/20080828/313626/▼IAについての参考書籍 ・IA THINKING http://goo.gl/VPxdS ・IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 http://goo.gl/TyL8s ・情報アーキテクチャ http://goo.gl/oDuc4 ・パターンによる実践的インタラクションデザイン http://goo.gl/dUaEg ・デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計 http://goo.gl/RFaSY
  77. 77. 参考文献まとめ▼UXDに関する様々なインフォグラフィック ・UXDの様々な概念図 http://overkast.jp/2012/07/ux-concept-map/ ・UXDの成果物の参考例:トレジャーマップ http://blog.iaspectrum.net/uxdeliverables/▼IA・UXDに関する参考ブログ ・IAの第一人者 ネットイヤーの坂本さん http://www.bookslope.jp/ ・電子書籍「エクスペリエンス ポイント」著者 長谷川さん http://www.yasuhisa.com/could/

×