Find Your Ability: IA for a novice Web Creator

Information Architecture
プロのWebサイト・アプリ設計を学ぶ、
駆け出しWebクリエイターのためのIA勉強会
IA for a novice Web Creators

Nobuya Sato
Experience Designer

November 22nd. 2012

自己紹介
•  佐藤伸哉 (@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

IA勉強会、IAセオリーの紐解き
•  Learning Information Architecture


本日のトピック
•  情報アーキテクチャとは？
•  インフォメーションアーキテクトの役割
•  IAのプロセス
•  IAの主な成果物
•  IAに求められるコアスキル


情報アーキテクチャとは？


情報アーキテクチャとは…

•  複雑なデータの固有のパターンをまとめて内容を明確
にする人

•  第三者が情報を得るための筋道を自分で見つけられる
ように、情報の構造を示す地図を作成する人

•  誰でもが理解しやすいように情報を提供しそれらをま
とめる人

『Information Architects』（1996年）
リチャード・ソール・ワーマン
建築家＆情報構築家



•  複雑なデータの固有のパターンをまとめて内容を明確
にする人

•  第三者が情報を得るための筋道を自分で見つけられる
ように、情報の構造を示す地図を作成する人
情報を理解すること
•  誰でもが理解しやすいように情報を提供しそれらをま
とめる人

『Information Architects』（1996年）
リチャード・ソール・ワーマン
建築家＆情報構築家



•  情報の構成、インデックス、ラベリングシステム、ナ
ビゲーションシステムといった情報の組み立て方法を
設計し、情報のブラウズと検索を支援する人文科学

•  ナビゲーションシステム、ビジュアルシステム、ペー
ジレイアウト、タイトル法則、そしてラベリングシス
テムの首尾一貫した法則を開発すること

『情報アーキテクチャ』（1998年）
ルイス・ローゼンフェルド
ピーター・モービル



•  情報の構成、インデックス、ラベリングシステム、ナ
ビゲーションシステムといった情報の組み立て方法を
設計し、情報のブラウズと検索を支援する人文科学

情報を整理し、法則を作ること
•  ナビゲーションシステム、ビジュアルシステム、ペー
ジレイアウト、タイトル法則、そしてラベリングシス
テムの首尾一貫した法則を開発すること

『情報アーキテクチャ』（1998年）
ルイス・ローゼンフェルド
ピーター・モービル



•  サービスや機能にユーザーの視点を反映し、首尾よく
情報を見つけて、問題なく目的を達成できるよう、十
分配慮して計画された構造を作ること

『Designing Web Usability』（1999年）
ヤコブ・ニールセン



•  サービスや機能にユーザーの視点を反映し、首尾よく
情報を見つけて、問題なく目的を達成できるよう、十
分配慮して計画された構造を作ること

問題を解決すること
『Designing Web Usability』（1999年）
ヤコブ・ニールセン



•  コンテンツとインタラクションのためのナビゲーショ
ンと構成や仕組みといった、潜在的なシステムを表現
する計画を設計すること

•  インフォメーションアーキテクトはインタラクティブ
な経験がどのように機能するかを設計し、ユーザーの
経験を構築するデザイナー

『Sapient Information Architecture Practice Deﬁnition and Framework』（2000年）
リリアン・スベック



•  コンテンツとインタラクションのためのナビゲーショ
ンと構成や仕組みといった、潜在的なシステムを表現
する計画を設計すること

機能を計画し、経験を設計すること
•  インフォメーションアーキテクトはインタラクティブ
な経験がどのように機能するかを設計し、ユーザーの
経験を構築するデザイナー

『Sapient Information Architecture Practice Deﬁnition and Framework』（2000年）
リリアン・スベック



•  情報を理解すること
•  情報を整理し、法則を作ること
•  問題を解決すること
•  機能を計画し、経験を設計すること

複雑な情報をシンプルにして、利用状況や目的に合わせて、
判りやすくすること

使いやすい経験を計画、設計すること

ちょっとUX的な話…


インフォメーションアーキテクトの役割

•  使いやすい経験を計画し、設計する人…

© Paul Boag


•  デザインプロセス全体を通して、一貫してユーザーの
代表としての意識をもち、ユーザーやシステムにとっ
て必要な情報を整理し、必要な機能を明確にし、それ
らを最良なユーザー体験に落とし込むために、ユーザ
ー中心のデザイン開発を推進する人



決して、情報の整理する人、情報を整える人ではない。

→ 情報を理解し、全体を把握し、全体を掌握する人


インフォメーションアーキテクトの仕事

•  使いやすい経験を計画し、設計する人…

→ 使い勝手（機能性と利便性）のデザイン
→ ユーザーが経験する体験をいかに形にするか、
落とし込みのデザイン

目に見えない使い勝手（利便性と機能性）を
設計する人

誰かのために情報を整理して資料を作る人

Webにおける情報設計の作業とは
•  達成すべき2つの目的

1.  ユーザーの体験を常にデザインプロセスの念頭に置
いて、作り手側の都合で使い勝手が悪くならないよ
うに、何度となくユーザーの立場に立ち戻り、情報
のあり方を検討し、最適な状態を維持する
→ 要らないものを作らない！

2.  実装前にデザインや構造の検証をすることで、実装
時における時間と開発リースを節約する
→ 無駄を無くす！


Webサイトにおける情報設計のプロセス

•  一般的な（理想的な）Webサイト設計プロセス
•  大きく5つの工程

目的ユーザー機能サイト構造ページ構造
の設計の設計の設計の設計の設計

情報の分解情報の分析情報の分類情報の再構成情報の再設計

上流／戦略から（クライアント直で）

コンテンツレベルから（代理店経由で）

変更／追加レベルから
（制作会社経由で）


1. ビジネスの目的やユーザーゴールの設計



A.  実際にアクセスするユーザーの仮説形成
B.  ユーザー体験の目標の定義（何ができるか）
C.  既存サイト／既存サービスの調査
D.  競合サイト／競合サービスの調査

→ 競合調査、ユーザー調査、ゴール定義書



2. ユーザー像／ターゲット層の設計



A.  ターゲットとなるオーディンス層の設定
B.  ペルソナの開発（…のためのユーザー調査）
C.  ユーザーシナリオの設計

→ ペルソナ、ユーザーシナリオ、ユーザー要件定義書
ユーザージャーニー、ジャーニーマップ



3. フィーチャーと機能の設計（いわゆる企画）



A.  フィーチャーと機能の開発
B.  競合フィーチャー・セットの調査
C.  フィーチャーの優先順位付けとフェーズ分け
D.  コンテンツインベントリー（目録）の作成
E.  機能要件定義書の作成

→ 機能リスト、機能仕様書、要件定義書


4. サイトレベルの構造設計



A.  ユーザーフローの設計（構造のウォークスルー）
B.  ナビゲーション構造、ナビゲーションスキーム
C.  コンテンツラベリングの開発
D.  サイトマップの作成（ハイレベル／詳細レベル）
E.  コンテンツマトリックス、コンテンツマッピング

→ コンセプトモデル、サイトマップ、フロー図、画面遷移図、
コンテンツマトリックス、コンテンツリスト、etc


5. ページレベルの構造設計



A.  ワイヤーフレーム、ページレイアウトの作成
B.  ページデザインの決定
C.  ページレベルのコンポーネントの開発
D.  プロトタイプの作成／開発
E.  全体最適化

→ ワイヤーフレーム、ページレイアウト、画面設計図、
画面詳細仕様書、ページスキマティックス

IAの主な成果物

1.  市場調査、競合調査、ユーザー分析上流設計
2.  ペルソナ、ユーザーシナリオ（戦略設計）
3.  ユースケース、ユーザーフロー
4.  機能リスト、コンテンツリスト
全体設計
5.  コンセプトモデル、ハイレベルサイトマップ
6.  ワイヤーフレーム
7.  詳細サイトマップ情報設計
8.  機能要件定義書、仕様書
9.  ページデザイン（コンポーネント設計）
詳細設計
10. デザインガイドライン



1.  市場調査、競合調査、ユーザー分析
2.  ペルソナ、ユーザーシナリオ
7.  詳細サイトマップ


ペルソナ


ペルソナ、ポイントと目的

実在するユーザーの調査に基づいて、ターゲットとなる
人となりを共有する。

•  「自分」で本当のユーザーを知る
•  本当のユーザーを忘れないため
•  わからない部分をクリヤーにする
•  ユーザーを勝手に決めないため
•  仮説で物事を決めない


ハイレベルサイトマップ


ハイレベルサイト、既存サイトの確認


ハイレベルサイトマップ、ポイントと目的

ハイレベルサイトマップには2レイヤー
「既存サイトの確認」と「新しい構造の提案」

既存サイトの確認

•  現状を頭で整理／把握する
•  今のコンテンツを説明できるようにする
•  問題になりそうな部分を理解にする
•  全体のボリューム／ページ数を把握する


ハイレベルサイトマップ、ポイントと目的.2

ハイレベルサイトマップには2レイヤー
「既存サイトの確認」と「新しい構造の提案」

新しい構造の設計、全体構造の設計

•  全体を把握／俯瞰して物事を判断
•  将来的な拡張を検討できるように
•  全体方針や方向性、戦略立案のために
•  フェーズに分けて現実が見えるように


ワイヤーフレーム


ワイヤーフレーム、ポイントと目的

ユーザーがページ上でどのような情報をどのように取得
していくか、目に見える形にしていく。

•  ページにどんな要素が必要か？
•  共通要素の整理
•  リンク構成やナビゲーションの整理
•  破綻や矛盾がページごとにないか？
•  クライアントとのコミュニケーションツール


詳細サイトマップ


詳細サイトマップ、ポイントと目的

具体的な情報の「箱」を作って拡張していく。
ユーザーがサイト上でどこでコンテンツにだどり着くか
を決める。

•  全体の設計のため
•  共通コンテンツの整理
•  小規模サイトのページ制作管理のため
•  制作チーム以外がサイト構造を確認するため



1.  市場調査、競合調査、ユーザー分析
2.  ペルソナ、ユーザーシナリオ
7.  詳細サイトマップ


IAに求められる4つのコアスキル

1.  デザイン力とデザインマネージメント能力
2.  リーダーシップとプロジェクトマネージメント能力
3.  ユーザー調査の計画と実行力
4.  調整力


Webデザインとスマホ向けデザインの違い

•  レスポンシブデザイン（RD）

http://www.nissan.co.th/


Webサイトのデザイン
•  PCのモニターサイズに依存するも広々。


スマホ向けのデザイン
•  端末上の液晶のサイズ以上には表示できない。


大きな画面に向けたデザイン
•  マウスによる広範囲な移動ポイント、沢山の選択


小さな画面に向けたデザイン
•  単刀直入！時間短縮！


参考になる書籍
「IA100 ユーザーエクスペリエンスデザインのための
情報アーキテクチャ設計」
•  長谷川敦士（コンセント）／著
•  ビー・エヌ・エヌ新社 (2009)


「IAシンキング Web制作者・担当者のためのIA思考術」
•  坂本貴史（ネットイヤーグループ）／著
•  ワークスコーポレーション (2011)


「Webサイト設計のためのデザイン&プランニング∼
ドキュメントコミュニケーションの教科書」
•  佐藤伸哉／監訳 Dan M. Brown／著
•  マイナビ (2012)


「Webデザイナーのための情報アーキテクチャ入門
成功するサイト構築術」
•  佐藤伸哉／監訳 Peter Van Dijck／著
•  翔泳社 (2005)


Thank You

Nobuya Sato
Experience Designer
nobsato@gmai.com
http://twitter.com/nobsato

http://about.me/nobsato
http://slideshare.com/nobsato


Find Your Ability: IA for a novice Web Creator

More Related Content

Similar to Find Your Ability: IA for a novice Web Creator (20)

More from Nobuya Sato (16)

Find Your Ability: IA for a novice Web Creator