Top Banner
とは IA 2010.01.29.Fri directed by DaisukeNoda
16

201002 About IA

Jul 12, 2015

Download

Design

Daisuke Noda
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 201002 About IA

とはIA2010.01.29.Fridirected by DaisukeNoda

Page 2: 201002 About IA

Q. そもそも IA とは?

A.web サイトの意図をより明確にし、

 活かすための技術。

①インフォーメーションアーキテクチャ(建築) =サイトの構造や情報設計全体を指す

= サイト/情報構造、ナビゲーション、ラベルなどの要素

②インフォメーションアーキテクト(建築家) = 情報アーキテクチャを行う人、設計者

= 情報をわかりやすく、意図通りに提示する人

Page 3: 201002 About IA

つまり、IA とは

IA の目的とは

・ユーザーとコンテンツをつなぐための

 分かりやすさのデザイン。

・クライアントのビジネスゴールと

 ユーザーのゴールの双方を満たす

 使いやすいweb サイトの構築。

Page 4: 201002 About IA

Q. なぜ今 IA が重要視されているのか?A. 人々がweb サイトに対して抱く認識は、 主としてその人の個人的なゴールが 達成されるかどうかにかかっているから。

ユーザーエクスペリエンスと密接な関係にあります。

Page 5: 201002 About IA

IA を理解するにはwebサイトの本質を理解することが重要です。・人々のweb サイトに関する一番の不満は 「探しているものが見つからない」ことである。

・web サイト訪問という体験は、1ページだけで規定

 されるものではなく、訪問した全てのページで決まる。

・web サイトは多種多様のユーザーから構成される膨大な

 オーディエンスがデザインの対象となる。

 ※基幹システムとの大きな違い。

Page 6: 201002 About IA

つまり・インフォメーションアーキテクトがデザインするのは web サイトの全体構造であり、単なるweb ページではない。

・情報アーキテクチャが扱うのはマップや図表ではなく

 コミュニケーションである。

Page 7: 201002 About IA

情報アーキテクチャ入門

Page 8: 201002 About IA

情報アーキテクチャ入門・webサイト構築時の構成要素 ・情報アーキテクチャの 3大要素

簡単に言ってしまえば情報のつなぎ方のデザイン。

また、それぞれのweb サイトの特性により重要視される要素は異なります。

ビジュアル

コミュニケーション

テクノロジー要素情報

アーキテクチャ

1. サイトストラクチャ

(分類/情報構造)

2. ナビゲーション

(情報のつながり)

3. ラベル(ボタンやアイコンの名称/用語)

画面設計

サイトコンセプト

Page 9: 201002 About IA

情報アーキテクチャ入門・サイトストラクチャ = サイトの構成を考える

or

「サイト構造」はサイトの骨格となり、ユーザーにとっては「廊下」であり部屋へ

入るための「扉」になります。サイトのweb 戦略に合わせて構造を検討します。

主な青果物としてはサイトマップや導線シナリオなどがあります。

Page 10: 201002 About IA

情報アーキテクチャ入門・ナビゲーション = サイト内のコンテンツの情報整理と誘導経路「グローバルナビゲーション」「機能ナビゲーション」「フッターナビゲーション」などサイト内のコンテンツの優先順位や、必ず表示を確保しなくてはならない要素や階層ごとの「ローカルナビゲーション」など情報の構造化を図ります。

Page 11: 201002 About IA

情報アーキテクチャ入門・ナビーションの事例「問い合わせ」をメインナビゲーションに配置

「問い合わせ」を機能ナビゲーションに配置

Page 12: 201002 About IA

情報アーキテクチャ入門・ラベル(ボタンやアイコンの名称/用語)複数の情報グループを扱っているwebサイトというメディアの特性上ナビゲーションの

ラベリングや一貫性は非常に重要な要素になります。極力ユーザー視点を導入してラベル名を

決めていきましょう。

Page 13: 201002 About IA

情報アーキテクチャ入門・ワイヤーフレーム = 情報デザインとビジュアルデザインの架け橋ワイヤーフレームはビジュアルデザイン要素を抜いた状態でインターフェイスの情報要素を示す設計図のようなもの。ワイヤーフレームで設計思想をページの構造に落とし込む作業になるのでここがしっかりしていないとビジュアルデザインが優れていても使いにくい、わかりにくいページになってしまう重要な情報アーキテクチャ要素。

1. サイトストラクチャ

(分類/情報構造)

2. ナビゲーション

(情報のつながり)

3. ラベル(ボタンやアイコンの名称/用語)

ワイヤーフレーム ビジュアルデザイン

サイトコンセプト

Page 14: 201002 About IA

情報アーキテクチャ入門・ワイアーフレーム 事例

ワイアーフレーム は情報要素を定義するものであり、ビジュアルデザイン作成時には

必ずしも全ての位置要素などを遵守する必要はありませんが、配置要素を決めるのであれば

デザイナーが作成してもよいかもしれません。

Page 15: 201002 About IA

IA 用語集 ~ 共通言語で会話するために ~

・グローバルナビゲーションシステムホーム画面や検索といった重要なコンテンツに

どのコンテンツからもアクセスできるよう、

全てのページ上で表示されるナビゲーションシステム。

・ローカルナビゲーションシステムユーザーが閲覧しているのと同じ、もしくは近い

カテゴリのコンテンツへの移動を提供するための

ナビゲーションシステム(階層別メニュー)

・ラベリングカテゴリーやそのカテゴリーへのリンクの呼称を決める

ことです。webサイトのユーザーはラベリングされた

名前や表示から、カテゴリー内やリンク先にどのような

情報が存在するかを類推します。

・コンテキスト文脈、あるいは関連性のこと。どのようなwebサイトにおいても、コンテンツや含まれる情報は、コンテキストを伴っています。情報アーキテクチャは、webサイトごとに存在する個別のコンテキストに適合しなければなりません。

・サイトストラクチャサイトマップなどに代表されるサイト構造、サイトの

骨格を定義するもの。webサイトがどのように機能する

のかを定めた説明書のようなものであり非常に重要。

・ユーザエクスペリエンス利用者自身の体験に基づいて使いやすさを向上させていくこと。表現力/操作性に優れたアプリケーションなど,ユーザー・インタフェース、これらの技術の中心になっているのが,「ユーザー中心デザイン」という考え方で、その中心にある考え方。

Page 16: 201002 About IA

参考文献

WebDesigning( ウェブデザイニング )

2010 年 01 月号

本資料に関しては下記の書籍などから多くの文章やイラスト、図などを引用しております。

またコンセントの長谷川 敦士さんのコラムなどにも多くの知恵をお借りしております。

これを機会に IA を深堀していこうと思われた方は、購読をお勧めいたします。

Webデザイナーのための情報アーキテクチャ入門

成功するサイト構築術

Peter Van Dijck ( 著 ), 佐藤 伸哉 ( 編集 ), 中野 恵美子 ( 翻訳 )

ウェブ戦略としての「ユーザーエクスペリエンス」

―5つの段階で考えるユーザー中心デザイン

Jesse James Garrett ( 著 ), ソシオメディア ( 翻訳 )