SlideShare a Scribd company logo
1 of 19
Download to read offline
情報アーキテクチャ入門
@mnmandahalf
目次
1. 情報アーキテクチャとは
2. 情報アーキテクチャの設計プロセス
情報アーキテクチャとは
情報アーキテクチャとは?
● Information Architecture、略称IA
● 情報をわかりやすく伝えるための技術やデザインに関する分野
● アメリカの建築家・グラフィックデザイナー・編集者であるRichard Saul Wurmanに
よって、1962年に提唱される
● 図書館情報学にルーツをおく
● 1998年に Information Architecture for the World Wide Web の初版が刊行
○ Web情報アーキテクチャの走り、通称白熊本、 2016年に第4版が出版される
  1)データの持っているパターンを整理し、複雑なものを明快にする人
2)人が知識への経路を見つけるための情報の構造や地図をつくる人
3)時代の要請により21世紀に新しく生まれつつある、明快さ、理解そして組織化の
科学を専門とした職業
長谷川 敦士. IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 (Japanese Edition) (Kindle の位置No.163-165). Kindle 版.
Wurmanの定義した情報アーキテクト
● 利用者が情報を探し、活用できるようにする
○ 使い勝手が向上し、ユーザーが欲しい情報にアクセスできる
○ サイトを学習できる
○ 問い合わせが減少する
● 情報提供者が自分の意図通りに情報を提示できる
○ 意図しているメッセージ・コンテンツを適切に伝えられる
○ ユーザーに正しく見つけてもらえる
○ どうして失敗したか/どうしてうまくいったのかわかる
● サイト内での情報の変化、増減によるクオリティ低下を防ぐ
○ 情報の追加・更新があっても設計が破綻しない
Webサイトにおける情報アーキテクチャの役割
● UXデザインはIAより後発の概
念であり、IAを包含する概念
● UXデザイン5層モデルを用いる
場合は3段階目に置かれること
が多い
情報アーキテクチャと
UXデザインの関係
図1
図2
図1・図2)IAシンキング W e b 制 作 者 ・ 担 当 者 のため の I A 思 考 術
情報アーキテクチャのコアコンセプト
● 構造化(Structuring)
○ 製品やサービス内の情報に対し、適切な粒度レベルを設定し、それぞれをどのように関連づけるか
○ 例:「レシピ」-「材料」-「手順」
● 組織化(Organizing)
○ これらの要素を意味があって他と区別できるカテゴリーにグループ分けし、ユーザーが「どこで」「何
を」見ているか理解できるコンテクストを創造すること
○ 例:「包丁もまな板も使わないレシピ」「オーブンを使う手の込んだレシピ」
● ラベリング(Labeling)
○ そのカテゴリーおよびカテゴリーへのナビゲーション要素をなんと呼ぶか
○ 例:「時短レシピ」「ごちそうレシピ」「ほったらかしレシピ」
情報アーキテクチャの
設計プロセス
情報アーキテクチャの設計プロセス
ユーザー分析
ユーザーのモデル化
コンテンツ分析
コンテンツの
リスト化・組織化
コンテキスト分析
ビジネス要件・制約事項の
明示化
サイトコンセプト定
義
ナビゲーション
設計
サイト
ストラクチャ
設計
ラベル
設計
画面設計
分析フェーズ 統合フェーズ
分析フェーズ①
分析フェーズ② 分析フェーズ③
統合フェーズ①
統合フェーズ②
統合フェーズ③
統合フェーズ④
統合フェーズ⑤
分析フェーズ①
ユーザー分析
● ユーザー分析の目的
○ デザインにおいての方針や優先順位を明示化するため、ユーザーの振る舞いや特性・心理状況を
モデル化する(≒ 抽象化する)こと
○ 「誰が」「いつどんな状況で」「どんなニーズをもって」情報に接するかを知る
● プロセス
○ 調査 ⇨ 分析 ⇨ モデル化
● 代表的手法
○ 定性調査・・・グループインタビュー、コンテクスチュアル・インクワイアリーなど
○ 定量調査・・・ユーザビリティテスト、ログ分析、アンケート /モニター調査など
○ 分析・・・カードソーティング /KJ法、統計処理
● 成果物
○ ペルソナ、メンタルモデル、コンテクスチュアル・インクワイリーでのワークモデル
分析フェーズ②
コンテンツ分析
● コンテンツ分析の目的
○ サイトで扱う情報を整理し、その性質や関係性などを明らかにすること
● コンテンツの性質
○ 既存サイトに存在する情報
○ サイト事業者が持っているが公開していない情報
○ 全く新しいコンテンツ
● ステップ
○ 情報の組織化・分類
○ 変更・追加の可能性の加味
○ コンテンツモデリング
○ コンテンツ・インベントリの作成
● 成果物
○ コンテンツ・インベントリ(目録)
分析フェーズ③
コンテキスト分析
● コンテキスト分析の目的
○ 設計・デザインを行うにあたっての制約・状況を明確にすること
● ステップ
○ プロジェクト目的の明確化(ビジネス要件定義)
■ ビジネス的に達成したい数値目標やユーザーに与えたい価値を定義する
○ 正しい現状の認識
■ 現状のサイト課題やあげられている効果を発見する
● 成果物
○ 要件定義書、クリエイティブ・ブリーフなど
統合フェーズ①
サイトコンセプト定義
● サイトコンセプトとは
○ コンテンツ、ターゲットとするユーザーの属性、制約事項を前提に定義される、プロジェクトのビジョ
ン。以下の要素を示す必要がある
■ ビジネスゴール
■ ユーザーへ与えたい経験(ユーザーニーズの解決)
■ サイトで実現する機能
■ ブランド価値の表現
● サイトコンセプトの表現形態
○ コンセプトダイアグラム
○ ユーザーエクスペリエンスフロー
○ シナリオ
○ メタファー
■ 「無駄な転職を撲滅する」
図)長谷川 敦士. IA100 ユーザーエクスペリエンスデザインのための情報アー
キテクチャ設計 (Japanese Edition) (Kindle の位置No.1996). Kindle 版.
統合フェーズ②
サイトストラクチャ設計
● 一般的なサイトストラクチャのパターンの中から適切なものを選択し組み合わせる
● サイトストラクチャの役割
○ サイト内のユーザーの動線定義
○ サイト内でのカテゴリの整理
○ カテゴリトップ、リストページ、詳細ページ等のページタイプ定義
○ コンテンツ量の定義
○ 画面フロー定義
統合フェーズ③
ナビゲーション設計
● ページ間のリンクの設計
● 基本的なパターンとして3つのナビゲーションエリアと7つのナビゲーションがある
● コンテンツや動線の優先順位をあらかじめ明確化し、ナビゲーション要素をその優
先順位にしたがって配置していく
● 一貫性を持たせることでユーザーにルールを学習してもらう
● また、小刻みにユーザビリティテスト等を実施してルールを見直していく
統合フェーズ④
ラベル設計
● メニューなどに用いられるカテゴリ名称やリンク・ボタンなどの名称を定義する
● 「その文言を見て内容が想起できるか」を判断基準にする
● サイト内で一貫性を持たせるため、統制語彙の辞書を用意する
○ 「お問い合わせ」「メール送信」
○ 「お気に入り」「気になる」「キープ」「ブックマーク」
統合フェーズ⑤
画面設計
● 以下の観点を踏まえてワイヤーフレームを作成する
○ UXから考えたページデザイン
■ どこから来てどこへ行くのか
○ ページタイプから考えたページデザイン
■ ポータル型・リスト型・コンテンツ型など
○ 各ページの文書構造
■ 大見出し、小見出し、本文など
○ ナビゲーションエリア定義
○ UIデザイン
■ ボタンやリンク、フォームの形状など
■ パターンの中から最適なものを選択
○ グラフィックデザイン
■ 色彩計画、タイポグラフィなど視覚伝達に関するデザイン
参考書籍

More Related Content

What's hot

人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイントMasaya Ando
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方Mayumi Okusa
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAOre Product
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019Masaya Ando
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチYoshiki Hayama
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるYoshiki Hayama
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回Yoshiki Hayama
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回Yoshiki Hayama
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザインHironobu Aoki
 
ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』Yoshitaka Kawashima
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさYoshiki Hayama
 
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022Yusuke Suzuki
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家Yoshiki Hayama
 
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUXUXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUXYoshiki Hayama
 
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう? Masaya Ando
 
エスノグラフィーの実施手順
エスノグラフィーの実施手順エスノグラフィーの実施手順
エスノグラフィーの実施手順大輔 浅井
 
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所Tarumoto Tetsuya
 

What's hot (20)

人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント人間中心設計の国際規格ISO9241-210:2010のポイント
人間中心設計の国際規格ISO9241-210:2010のポイント
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』ソフトウェア開発における『知の高速道路』
ソフトウェア開発における『知の高速道路』
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
 
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUXUXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
 
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけど エンジニアの私ができることってなんでしょう?
 
エスノグラフィーの実施手順
エスノグラフィーの実施手順エスノグラフィーの実施手順
エスノグラフィーの実施手順
 
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
 
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
 

情報アーキテクチャ入門