SlideShare a Scribd company logo
理解のデザインとしての
情報アーキテクチャ
Design for Understanding :
A fundamental of Information Architecture.
Satoru MURAKOSHI
2014/03/25
©All rights reserved by carlo.buffa
情報アーキテクチャとは何か
情報を伝えるということ:エクササイズ
IA思考を養うには
Agenda
村越 悟
インフォメーションアーキテクト
メインフレーム系PG → Web制作会社 → デジタルエージェンシー
World IA Day 2014 Tokyo ローカルコーディネーター
Member of Information Architecture Institute
寄稿
講演
HCD認定人間中心設計専門家(挑戦中)
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Live IA
4.8 On Sale.
(寄稿:事業会社におけるUXデザインの取り組み)
情報の伝え方
今日のテーマ
©All rights reserved by carlo.buffa
情報アーキテクチャ
考え方としての
Photo by Scarygami
Design for Understanding:理解のデザインとしての情報アーキテクチャ
情報アーキテクチャとは
「情報をわかりやすく伝え」、
「受け手が情報を探しやすくする」ための表現技術
- IAAJ
- パターンを整理して、複雑なものを明快にする

- 理解への経路を見つけるための構造や経路をつくる

- 明快さ、理解、情報の組織化を専門とした職業
- Richard Saul Wurman
理解のためのデザイン
Design for Understanding
USER CONTENT
CONTEXT
利用シーンの理解
どういう使われ方をするのか?
何を提供すれば
相手にうまく意図が伝わるのか
誰に伝えるのか?
相手を理解し、共感する
Visual Design
Interface Design Navigation Design
Information Design
Interaction
Design
Information
Architecture
Functional
Specification
Content
Requirement
User Needs
Site Objectives
表層
骨格
要件
戦略
構造
具象
抽象
The Elements of User Experience / Jesse James Garret
トップダウン
ボトムアップ
Big IA
Small IA
ビジネス・戦略視点
制作物・成果物視点
©Peter Morville
?
意図 意味
Intention Meaning
どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
©All rights reserved by carlo.buffa
情報を集める
情報を理解する
情報を分類する
情報を組織化する
データ
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
具象
抽象
情報を表現する
ビジュアル
デザイン
情報の分類「軸」を探し出す
伝える相手を想定して、情報を整理する
5つの帽子がけ
5 hats of Classification.
Corbis Images
L
A
T
C
H
L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層
L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層
客
観
分
類
L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層
主
観
分
類
情報を理解する
情報を分類する
情報を組織化する
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
カードソーティング
ワイヤーフレーム
カードソーティング
Card Sorting Method
分類
ラベリング
関連性
ワイヤーフレーム
Wireframing
設計意図を作り手が
共有するための共通言語
情報の伝え方、
理解の道筋を作るための設計図
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
Exercise
Ice Break
あなたを絵だけで自己紹介してください。
※白紙の紙にひとつあなたがどんな人かわかる絵を書いてください。
※所属や業務内容、専門用語などは含めないようにしてください。
※2分間で描いて、グループ内で紹介しあってください。
「私はこういう人です」
絵を描く(2分) → グループに紹介する(1人1分)
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
カードソーティングゲームキット
上平 崇仁(専修大学): 2013
© Takahito Kamihira
© Takahito Kamihira
20種類の犬のカードがあります。
犬のカードを共通点を探して、分類して下さい。
考えつく限りの分類を試し、試した分類軸を紙に
書き出して下さい。
!
【手順】:10分で作業してください。
 - 机の上でカードを並べ変えて、いろいろな分類軸を探す
 - 探し出した分類軸をワークシートに書く
多様な分類軸
© All rights reserved by Harri_1970
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
© Takahito Kamihira
20種類の犬がいる「犬カフェ」
をオープンしようと考えています。
!
犬を飼っている人、犬好きだけど犬を飼っていない人をターゲット
にカフェにいる犬たちを紹介したいと思っています。
ターゲットを想定して、犬の情報の分類を
考えてください。
その際、ターゲットのニーズやシチュエーション
も考慮して分類をしてください。
!
【手順】:20分で作業してください。
 - ターゲットのニーズや、カフェを利用するシチュエーションを

想定して、ワークシートに書く。

- ニーズやシチュエーションに応じて犬のカードを机の上で分類
し、分類に付箋で見出しを付ける。
ターゲットのニーズやシチュエーションの整理(メモ)
犬好き
カフェを利用する
シチュエーション
犬飼ってる
飼ってない
カフェでしたいこと
カフェに求めるもの
ターゲット
切り口(見出し) 切り口(見出し) 切り口(見出し)
カード
○○な人の
ための犬カフェ
伝えたい相手がもっとも
しっくりくる分類を「探す、見つける」
© All rights reserved by Tyson J
見えている分類
見えていない分類
© Takahito Kamihira
小型犬 フワフワ
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
© Takahito Kamihira
スマートフォン向けのサイトで、犬カフェの紹介をしたいので情報
を整理し、サイトの画面設計を行いたいと思っています。
犬カフェサイトのトップページでカフェにいる犬の紹介を掲載したい
と思っています。
Exercise2で検討したカード分類をもとにこのページのワイヤーフ
レームをスケッチして下さい。
!
【前提条件】

- ターゲットは、自分が住んでいる近所のカフェや動物とふれあえる施設をいろい
ろ探しており、情報収集をしている段階です。
!
20分で作業してください。
LOGO
発表
となりのグループ同士で、できた案を発表しあって下さい。
1グループ2分をめどに発表してください。
伝え方≒フォーカス
© All rights reserved by Max Gerber Smith
LOGO
こんなワンちゃんがいます
フワフワ癒し 活発遊び好き 温厚大人しい
カフェ名:場所
抱っこ体験やカフェの犬と遊ぶ、一緒にまったりお茶を飲む、
などのシーンを想定、分類軸を設定
犬好きがグっとくるようにカワイイ写真で興味を持たせなが
ら、性格や犬種などの最低限のメタ情報を網羅するヨークシャーテリア:○○ちゃん

甘えん坊で○○
伝える相手とコンテキストの理解ができて、
はじめてワイヤーフレームが書ける
ペルソナ
(誰に伝えるか)
ジャーニーマップ
(どうやって伝えるか)
ワイヤーフレーム
(何を伝えるか)
どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
伝え方の軸 伝え方
を決める を検討する
伝え方の軸
カードソーティング ワイヤーフレーム
情報を集める
情報を理解する
情報を分類する
情報を組織化する
データ
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
具象
抽象
情報を表現する
ビジュアル
デザイン
©All rights reserved by Gregorio Jiménez
一筆を入れる瞬間
終わりに
IA思考を養うには
©All rights reserved by C E Andersen
記憶
経験
空間
Corbis Images
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
自身の経験の積み重ねから、
情報を理解、判断する
目の前にいる人とのコミュニケーションが
うまくいくかどうかは、
相手が何を理解できないのかを
きちんと理解するというこちら側の能力にかかっている。
- Richard Saul Wurman「それは情報ではない」
Design for Understanding:理解のデザインとしての情報アーキテクチャ
我々が自らにこうしているのだと言い聞かせている
思考や行動からではなく、
実際に行っている思考や行動から影響を受けるかたちで、
医療用機器、コンピューター、乗り物、
コミュニケーション用のツールをデザインする必要がある
- 伊藤 攘一 「小さき精神を出し抜くデザイン」
- Wikipedia
探索 対話観察
Exploration Observation Conversation
好奇心
Curiosity
探究心と試行錯誤
Creative Confidence : IDEO
?
意図 意味
Intention Meaning
どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
©All rights reserved by carlo.buffa
基礎を積み重ねること
©Jiro Dreams of Sushi
Richard Saul Wurman - それは情報ではない
Richard Saul Wurman - 理解の秘密 マジカル・インストラクション
Peter Morville - Understanding Information Architecture
上平 崇仁 - カードソーティングゲームキット
赤瀬川原平 - 超芸術トマソン
Peter Morville - Information Architect
赤瀬川原平 - 路上観察学入門
Resources.
坂本 貴史 - モバイルIAシンキング
長谷川 敦士 - IA100
楽しいBADUIの世界 - http://badui.org
Thanks for your attention.
Facebook: murakoshi.satoru
Twitter : @future79
©All rights reserved by carlo.buffa

More Related Content

PDF
OWASPTop10_Introduction
PPTX
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
PDF
あの日見たMVCを僕たちはまだ知らない for RoR
PDF
シリコンバレーの「何が」凄いのか
PDF
Amazon Aurora Deep Dive (db tech showcase 2016)
PDF
Synapse lakedatabase
PDF
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017
OWASPTop10_Introduction
ドライブレコーダ映像からの3次元空間認識 [MOBILITY:dev]
あの日見たMVCを僕たちはまだ知らない for RoR
シリコンバレーの「何が」凄いのか
Amazon Aurora Deep Dive (db tech showcase 2016)
Synapse lakedatabase
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017

What's hot (20)

PPTX
初心者向けMongoDBのキホン!
PDF
人間中心設計の国際規格ISO9241-210:2010のポイント
PDF
MongoDB〜その性質と利用場面〜
PPTX
Redisの特徴と活用方法について
PDF
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
PDF
ドメイン駆動設計の正しい歩き方
PDF
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
PDF
RESTful Web アプリの設計レビューの話
PDF
アジャイル開発を支えるアーキテクチャ設計とは
PPTX
振り返り(アジャイルレトロスペクティブズ)
PDF
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
PDF
07QGISで遺跡立地分析
PPTX
SKYDISCのIoTを支えるテクノロジー
PDF
データサイエンティスト協会スキル委員会4thシンポジウム講演資料
PDF
AWS Black Belt Online Seminar 2016 Amazon EC2 Container Service
PDF
プロダクトマーケティングマネージャーの役割
PDF
Azureをフル活用したサーバーレスの潮流について
PDF
DDDをScrumで廻す あるいは ScrumをDDDで廻す
PPTX
Azure DevOps ハンズオン Vo.2 ~Azure DevOps Wiki を用いたドキュメントの作成~
PDF
Node RED で実現する製造業の DX
初心者向けMongoDBのキホン!
人間中心設計の国際規格ISO9241-210:2010のポイント
MongoDB〜その性質と利用場面〜
Redisの特徴と活用方法について
AWSにおけるバッチ処理の ベストプラクティス - Developers.IO Meetup 05
ドメイン駆動設計の正しい歩き方
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
RESTful Web アプリの設計レビューの話
アジャイル開発を支えるアーキテクチャ設計とは
振り返り(アジャイルレトロスペクティブズ)
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
07QGISで遺跡立地分析
SKYDISCのIoTを支えるテクノロジー
データサイエンティスト協会スキル委員会4thシンポジウム講演資料
AWS Black Belt Online Seminar 2016 Amazon EC2 Container Service
プロダクトマーケティングマネージャーの役割
Azureをフル活用したサーバーレスの潮流について
DDDをScrumで廻す あるいは ScrumをDDDで廻す
Azure DevOps ハンズオン Vo.2 ~Azure DevOps Wiki を用いたドキュメントの作成~
Node RED で実現する製造業の DX
Ad

Similar to Design for Understanding:理解のデザインとしての情報アーキテクチャ (20)

PDF
Iajuku kagoshima 130316
PPTX
IAについて考えてみました。
PDF
情報アーキテクチャ入門
PDF
Find Your Ability: IA for a novice Web Creator
PDF
IA Workshop, Introduction to Information Architecture (2002)
PPTX
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
PPT
僕の思うところのIA
PDF
新入生歓迎LT祭り2014
PDF
Mobile groundswell
PDF
20130620slide_anysense
PPT
IA Summit 2013 Redux in Tokyo
PDF
WCAN 2010 Summer Session-1: IA
PDF
World IA Day 2013 Japan Opening
KEY
IA Summit 2010 Redux in Tokyo
PDF
Using Mind Maping And UML Effectively in Software Development
PDF
IA Cocktail Hour: IA Summit 2015 talk
PDF
UX Design とは何か?
PDF
情報教育における7つのネット・リテラシー
PPT
20050221.ea
PDF
小松左京が遺した夢
Iajuku kagoshima 130316
IAについて考えてみました。
情報アーキテクチャ入門
Find Your Ability: IA for a novice Web Creator
IA Workshop, Introduction to Information Architecture (2002)
シロクマ本に学ぶエクスペリエンスのための手技法 by 篠原 稔和 - presentation from IA CAMP 2015
僕の思うところのIA
新入生歓迎LT祭り2014
Mobile groundswell
20130620slide_anysense
IA Summit 2013 Redux in Tokyo
WCAN 2010 Summer Session-1: IA
World IA Day 2013 Japan Opening
IA Summit 2010 Redux in Tokyo
Using Mind Maping And UML Effectively in Software Development
IA Cocktail Hour: IA Summit 2015 talk
UX Design とは何か?
情報教育における7つのネット・リテラシー
20050221.ea
小松左京が遺した夢
Ad

More from Satoru MURAKOSHI (20)

PDF
20160217_よりよいプロダクトづくりのためのデザインプロセス
PDF
対話からはじまるデザインプロセス:UX Japan Forum2015
PDF
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
PDF
グッドパッチのデザインカルチャーの作り方
PDF
そもそもディレクターにとって失敗とは何か
PDF
20150806_UXnama_Goodpatch
PDF
UXデザインの居場所:UXなまトーク資料
PDF
UI Crunch#3:プロトタイピングにおける「段階」
PDF
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
PDF
GREE Creators Meetup_Closing
PDF
20141020 spui2014 share
PDF
Rethinking hx uxtokyo_jam
PDF
130810 mi study 3 rules
PDF
121010_ia_lecture_03
PDF
120927_ia_lecture_02
PDF
120827_ia_lecture_01
PDF
120822 MobileFirst_andUX_short_internal
PDF
"MobileFirst and UX Design" - 120725
PDF
"UX and OwnedMedia"-DENTSU Razorfish Seminar_111208
PDF
WebSig24/7 111202ライトニングトーク
20160217_よりよいプロダクトづくりのためのデザインプロセス
対話からはじまるデザインプロセス:UX Japan Forum2015
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
グッドパッチのデザインカルチャーの作り方
そもそもディレクターにとって失敗とは何か
20150806_UXnama_Goodpatch
UXデザインの居場所:UXなまトーク資料
UI Crunch#3:プロトタイピングにおける「段階」
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
GREE Creators Meetup_Closing
20141020 spui2014 share
Rethinking hx uxtokyo_jam
130810 mi study 3 rules
121010_ia_lecture_03
120927_ia_lecture_02
120827_ia_lecture_01
120822 MobileFirst_andUX_short_internal
"MobileFirst and UX Design" - 120725
"UX and OwnedMedia"-DENTSU Razorfish Seminar_111208
WebSig24/7 111202ライトニングトーク

Design for Understanding:理解のデザインとしての情報アーキテクチャ