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