20121022 ia meets_html5_short

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

ナナイロデザインワークス / 7dw

«  自己紹介

«  IAとは

«  IAから見る、Webの世代遷移

«  レスポンシブのIAなお話。

«  HTML5時代のIAについて

«  まとめ

自己紹介

ナナイロデザインワークス / 7dw

薬師神　裕樹 ディレクター / デザイナー 2000頃よりWeb制作に従事。

ECサイト制作、ネットベンチャー、大手SIer。

情報設計フェーズ、ディレクション。

2012年6月より広島にUターン。

IA とは。

デザインに必要な情報を設計する事　＝　工程

情報設計をする人　＝　スキル、ポジション

アイエー

IA とは。

IAとは

Information Architect インフォメーションアーキテクト

Information Architecture インフォメーションアーキテクチャ

デザインに必要な情報を設計する事　＝　工程

情報設計をする人　＝　スキル、ポジション

アイエー

IA とは。

IAとは

IA THINKING

IAとは

«  建物の設計

«  建物のコンセプト

«  建物内の導線

«  建物の構造設計

«  建物の間取り

«  建物の使いやすさ

インフォメーションアーキテクト ホームページの建築家

建築家 アーキテクト

IA インフォメーションアーキテクト

«  ホームページの設計

«  ホームページのコンセプト

«  ホームページ内のユーザー行動シナリオ

«  ホームページのサイト構成

«  ホームページのページ構成（UI）

«  ユーザビリティ、アクセシビリティ

インフォメーションアーキテクチャ アーキテクチャ

GRAND ARCHITECTS

IAとは

Information Architectureで

デザイン全体のコンテキストを

設計・可視化し紡ぐ。

IAとは

HP作りたい

Client

IAとは

HP作りたい

Client Webサイト

IAとは

Client

HP作りたい

Webサイト

IAとは

Client

HP作りたい

ビジュアルデザイン

Webサイト

IAとは

Client

HP作りたい

ビジュアルデザイン

『何を』

『誰に』

『どのように』

ヒアリング

Webサイト

IAとは

Client

HP作りたい

ビジュアルデザイン

『何を』

『誰に』

『どのように』

ヒアリング

Webサイト

？

IAとは

Client

HP作りたい

ビジュアルデザイン

サイトの目的

ユ｜ザ｜ニ｜ズ

戦略 ヒアリング

『何を』

『誰に』

『どのように』

Webサイト

ビジュアルデザイン

ユ｜ザ｜ニ｜ズ

インタ｜フェ｜ス

デザイン

ナビゲ｜ション

デザイン

サイトの目的

機能仕様

コンテンツ

要求

インタラクション

デザイン

情報

ア｜キテクチャ

情報デザイン

IAとは

Client

HP作りたい

ヒアリング 要求 構造 骨格 デザイ

ン 戦略

『何を』

『誰に』

『どのように』

Webサイト

ビジュアルデザイン

ユ｜ザ｜ニ｜ズ

インタ｜フェ｜ス

デザイン

ナビゲ｜ション

デザイン

サイトの目的

機能仕様

コンテンツ

要求

インタラクション

デザイン

情報

ア｜キテクチャ

情報デザイン

IAとは

Client

HP作りたい

Webサイト

ヒアリング 要求 構造 骨格 デザイ

ン 戦略

『何を』

『誰に』

『どのように』

デザイン全体のコンテキストを

設計・可視化し紡ぐ。

ビジュアルデザイン

ユ｜ザ｜ニ｜ズ

インタ｜フェ｜ス

デザイン ナビゲ｜ション

デザイン

サイトの目的

機能仕様

コンテンツ

要求

インタラクション

デザイン

情報

ア｜キテクチャ

情報デザイン

戦略 要求 構造 骨格 デザイン

@Jesse James Garrettより一部可変

IAとは

ビジュアルデザイン

テンプレ｜ト

デザイン仕様

ペルソナ

企画書／提案書

導線設計

詳細設計

サイトマップ

ファイルリスト

サイトストラクチャ

コンテンツマップ

ユ｜ザ｜シナリオ

要件定義

Webサイト

アプリケーション

→

→

ユ｜ザビリティ

アクセシビリティ

ワイヤ｜フレ｜ム

ナビゲ｜ション設計

ラベリング

プロセス

工程/ フェーズ

ディレクターとして関与

IAとしての関与

タスク/ 成果物

ユーザーエクスペリエンスデザインの5つのモデル要素

UX デザイン

UX デザイナー

IAとは

«  ユーザーの利用状況に合わせた機能の提供。

«  利用者満足度の向上。

«  使い勝手の向上

«  問い合わせの減少。

«  変化する情報に対応。

«  長期にわたっての使いやすさの向上（UI）

IAの問題解決。

IAとは

«  プロジェクト内のビジョンが明確になる。

«  コミュニケーションロスが減る。

«  デザインのコンテキストが明確になる。

«  プロジェクト全体をデザイン出来る。

«  クライアントにも明確に仕様等の確認が出来るのでエンドレスな手戻り等が発生しない。

«  好みや立場の違いではなく、本質的な会話が出来る。

«  クライアント、ディレクター、コーダー、エンドユーザー、関わる人達みんながハッピーになる、かもしれない。

IAがもたらす効果。

IAとは

Information Architectureで

デザイン全体のコンテキストを

設計・可視化し紡ぐ。

IA から見る

Webの世代遷移。

IAから見る、Webの世代遷移

世界発のウェブサイト 1991年 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

http://www.evolutionoftheweb.com/?hl=ja

IAから見る、Webの時代遷移

html html4.01 html5 W3C 勧告。

xhtml html5

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA UXD

webトレンド

スマホアプリ

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA UXD

webトレンド

Webサイトの 世代

GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋

第1世代 第2世代 第3世代 第4世代 第5世代

スマホアプリ

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA/UXD

webトレンド

Webサイトの 世代

GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋

第1世代 第2世代 第3世代 第4世代 第5世代

作る事が目的

スマホアプリ

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA/UXD

webトレンド

Webサイトの 世代

GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋

第1世代 第2世代 第3世代 第4世代 第5世代

作る事が目的 様々情報を掲載 情報発信 ・見た目 ・楽しさ ・インタラクティブ

スマホアプリ

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA/UXD

webトレンド

Webサイトの 世代

GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋

第1世代 第2世代 第3世代 第4世代 第5世代

作る事が目的 様々情報を掲載 情報発信 ・見た目 ・楽しさ ・インタラクティブ

ユーザビリティ/ アクセシビリティの追求 成果の追求 ユーザー利用サービス ・SNS ・EC ・ブログ

スマホアプリ

IAから見る、Webの時代遷移

テキストとリンク

テーブルコーディング

Web標準

1991

2000

2010

2012

2014

html html4.01 Xhtml? html5

Flash RIA

スマホ

CSS3

セマンティック レスポンシブ

jQuery

cssレイアウト

AJAX 位置情報

クラウド

サービス

閲覧環境 パソコン 携帯

モバイルサイト

タブレット Retina

EC SNS

口コミ

ブログ Twitter

Facebook

OGP API Web2.0

IA/UXD

webトレンド

第1世代 第2世代 第3世代 第4世代 第5世代

作る事が目的 様々情報を掲載 情報発信 ・見た目 ・楽しさ ・インタラクティブ

ユーザビリティ/ アクセシビリティの追求 成果の追求 ユーザー利用サービス ・SNS ・EC ・ブログ

魅力的な情報発信 ユーザー視点 よりユーザー視点 ・ライティング ・右脳的 ・認知論 ・感情

Webサイトの 世代

GRAND ARCHITECTS「時代と共に変化するWebサイト」より一部抜粋

スマホアプリ

IAから見る、Webの時代遷移

第5世代 Web 第4世代 Web以前

http://www.microsoft.com/japan/web/webcamp2/default.aspx

html4.01(一部xhtml) html5

IAから見る、Webの時代遷移

第5世代 Web 第4世代 Web以前

http://www.microsoft.com/japan/web/webcamp2/default.aspx

html4.01(一部xhtml)

ハイパーリンクを埋め込む事の出来るドキュメントを作成する為の言語。

Hyper Text Markup Language

« コンテンツ＝テキスト主体

« デザイン＝コンテンツと分離

html5

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との連動がシームレス。

« コンテンツ＝多用なデータ

« デザイン＝データとデザインが連動

ハイパーリンクを埋め込む事の出来るドキュメントを作成する為の言語。

IAから見る、Webの時代遷移

http://jsdo.it/event/svggirl

http://browserquest.mozilla.org/

IAから見る、Webの時代遷移

第4世代 Web以前

http://www.microsoft.com/japan/web/webcamp2/default.aspx

html4.01(一部xhtml)

コンテンツ

デザイン　

Webサイト　

第5世代 Web html5

IAから見る、Webの時代遷移

第4世代 Web以前 html4.01(一部xhtml)

コンテンツ

デザイン　

Webサイト　

第5世代 Web html5

データ

アプリケーション　

システム＝UX

ユーザビリティ/ アクセシビリティの追求、成果の追求 ユーザー利用サービスの増加 ・SNS ・EC ・ブログ

IAから見る、Webの時代遷移

ユーザビリティ、アクセシビリティの追求に加え、魅力的な情報発信 よりユーザー視点 ・右脳的 ・認知論 ・感情

Webサイトの世代的特徴

第4世代 第3世代 第2世代

様々な情報をどんどんWebに掲載するのが目的

第1世代

作る事が目的

第5世代のウェブサイト

html5によって、ホームページ／サイトの枠を超えた多様性

Web=『ユーザー体験の提供』そのもの

IAから見る、Webの時代遷移

IAから見る、Webの時代遷移

IAから見る、Webの時代遷移

IAから見る、Webの時代遷移

レスポンシブ のIAなお話

http://onair.adclounge.jp/up06-05/

レスポンシブのIAな話。

メリット デメリット

レスポンシブのIAな話。

メリット デメリット

«  １ソースマルチユース

«  検索に強い（Google推奨）

«  コンテンツの統一性

«  フロントエンド対応

レスポンシブのIAな話。

メリット デメリット

«  １ソースマルチユース

«  検索に強い（Google推奨）

«  コンテンツの統一性

«  フロントエンド対応

«  同時に複数画面サイズの検討

«  サイトが重くなる

«  スマホ最適化のような特化した表現には不向き。

«  ユーザーがスマホ専用サイトと認識してしまう（ドメイン指定受信とかの問題）

色々なレスポンシブサイトを

改めてみんなで見てみよう。

レスポンシブのIAな話

レスポンシブのIAな話

レスポンシブのIAな話

レスポンシブのIAな話

Appleはスマホ最適化していない？

html5時代のIAについて。

ユーザビリティ/ アクセシビリティの追求、成果の追求 ユーザー利用サービスの増加 ・SNS ・EC ・ブログ

html5時代のIAについて

ユーザビリティ、アクセシビリティの追求に加え、魅力的な情報発信 よりユーザー視点 ・右脳的 ・認知論 ・感情

Webサイトの世代的特徴

第4世代 第3世代 第2世代

様々な情報をどんどんWebに掲載するのが目的

第1世代

作る事が目的

第5世代のウェブサイト

Html5によって、ホームページ／サイトの枠を超えた多様性

Web=『ユーザー体験の提供』そのもの

Client

HP作りたい

ビジュアルデザイン

ヒアリング

Webサイト

html5時代のIAについて

『何を』

『誰に』

『どのように』

UXDに必須の3要素

http://infomotions.com/musings/rosenfeld/

『何を』 コンテンツ

『誰に』 ユーザー

『どのように』 コンテキスト

html5時代のIAについて

http://infomotions.com/musings/rosenfeld/より可変

お客様／営業／  ディレクター

ユ｜ザ｜

ニ｜ズ、行動

コンテンツ

構造、意味

コンテキスト

文化、テクノロジ｜

情報ア｜キテクチャ　戦略　プロジェクト進行

分類

メタ

デ｜タ

スキ｜ム

シソ｜

ラス

ワイヤ｜

フレ｜ム

青写真

全体像

デザイン

実装

インタ｜

フェ｜ス

Webサイト

アプリケーション

デザイナー コーダー  プログラマー お客様／ユーザー

構築プロセス

誰に

何を

どのように

ディレクター

html5時代のIAについて

ヒアリング 戦略 設計 デザイン・実装

は、可視化されにくい。

は、分断されやすい。

さらに、第５世代では

細分化、多様化、複雑化。

コンテンツ 『何を』

ユーザー 『誰に』

コンテキスト 『どのように』

html5時代のIAについて

UXDの３つの大きな課題。

http://infomotions.com/musings/rosenfeld/, IA THINKINGより可変　

可視化されにくい。

可視化される領域。

それぞれのポジションで捉え方が違ってくる。

自分の得意分野のみにドライブして思考する。

html5時代のIAについて

お客様／営業／  ディレクター

ユ｜ザ｜

ニ｜ズ、行動

コンテンツ

構造、意味

コンテキスト

文化、テクノロジ｜

情報ア｜キテクチャ　戦略　プロジェクト進行

分類

メタ

デ｜タ

スキ｜ム

シソ｜

ラス

ワイヤ｜

フレ｜ム

青写真

全体像

デザイン

実装

インタ｜

フェ｜ス

Webサイト

アプリケーション

デザイナー コーダー  プログラマー お客様／ユーザー

構築プロセス

誰に

何を

どのように

ディレクター

ヒアリング 戦略 設計 デザイン・実装

可視化されにくい領域。

http://infomotions.com/musings/rosenfeld/, IA THINKINGより可変　

html5時代のIAについて

お客様／営業／  ディレクター

ユ｜ザ｜

ニ｜ズ、行動

コンテンツ

構造、意味

コンテキスト

文化、テクノロジ｜

情報ア｜キテクチャ　戦略　プロジェクト進行

分類

メタ

デ｜タ

スキ｜ム

シソ｜

ラス

ワイヤ｜

フレ｜ム

青写真

全体像

デザイン

実装

インタ｜

フェ｜ス

Webサイト

アプリケーション

デザイナー コーダー  プログラマー お客様／ユーザー

構築プロセス

誰に

何を

どのように

ディレクター

ヒアリング 戦略 設計 デザイン・実装

分断されやすい。

分業化、効率化により

工程、人が分断され

コンテキストが薄まる、

もしくは途切れる。

木を見て森を見ない。

コンテンツ 『何を』

ユーザー 『誰に』

コンテキスト 『どのように』

デバイス テクノロジー 文化 社会

閲覧環境 閲覧場所 閲覧シーン 閲覧目的

細分化。 多様化。

複雑化。

ペルソナ メンタルモデル 世代 人間工学 認知論

コンテンツ データ ユーザー体験

趣味 趣向

html5時代のUXDに必須の3要素 html5時代のIAについて

ALEXANDER.C　「オレゴン大学の実験」　

http://infomotions.com/musings/rosenfeld/より可変

構築プロセス

誰に

何を

どのように

＝

生態系のデザイン ユーザー体験。

html5時代のIAについて

ユ｜ザ｜

ニ｜ズ、行動

コンテンツ

構造、意味

コンテキスト

文化、テクノロジ｜

情報ア｜キテクチャ　戦略　プロジェクト進行

分類

メタ

デ｜タ

スキ｜ム

シソ｜

ラス

ワイヤ｜

フレ｜ム

青写真

全体像

デザイン 実装

インタ｜

フェ｜ス

ユーザーエクスペリエンスに必要なハニカム構造

Peter Morville

html5時代のIAについて

可視化されにくい。 分断されやすい。 細分化、多様化、複雑化。

曖昧。 感覚的。 標準化されていない。

html5時代のIAについて

デザインに必要な情報を各種設計で明確にしUXDを支える。

ユーザビリティ

ユーザーシナリオ

導線設計

画面遷移

インタラクション

コンテンツマップ

ペルソナ

文言の統一 Web標準

アクセシビリティ

ラベリング

レスポンシブ

ナビゲーション設計

グルーピング

メタファー

アフォーダンス UIパターン

トーン＆マナー＆クラス感

ライティング

サイト構成

企画 ユーザーニーズ

クラス感

セキュリティ

html5時代のIAについて

まとめ

＞コンテキストを紡ぐ。 IAとは

＞ユーザー体験の提供。 第５世代のWebとは

＞メリット・デメリットを考え 　効果的な導入を。

レスポンシブ

＞UXDを支える為のIAへ。 html5時代のIA

ナナイロデザインワークス / 7dw

http://7dw.jp

info@7dw.jp

http://www.facebook.com/7dw.jp

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

ありがとうございました。

参考文献まとめ

▼スライドで参考にした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/

参考文献まとめ ▼スライドで参考にしたweb文献など　その２

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

参考文献まとめ ▼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/