ある勉強会にて、IAについてのプレゼンテーション＋カードソーティングを用いたエクササイズを実施したときの資料です。

1. 理解のデザインとしての
情報アーキテクチャ
Design for Understanding :
A fundamental of Information Architecture.
Satoru MURAKOSHI
2014/03/25
©All rights reserved by carlo.buffa

2. 情報アーキテクチャとは何か
情報を伝えるということ：エクササイズ
IA思考を養うには
Agenda

3. 村越 悟
インフォメーションアーキテクト
メインフレーム系PG → Web制作会社 → デジタルエージェンシー
World IA Day 2014 Tokyo ローカルコーディネーター
Member of Information Architecture Institute
寄稿
講演
HCD認定人間中心設計専門家（挑戦中）

5. Live IA

6. 4.8 On Sale.
（寄稿：事業会社におけるUXデザインの取り組み）

7. 情報の伝え方
今日のテーマ
©All rights reserved by carlo.buffa

8. 情報アーキテクチャ
考え方としての
Photo by Scarygami

10. 情報アーキテクチャとは
「情報をわかりやすく伝え」、
「受け手が情報を探しやすくする」ための表現技術
- IAAJ

11. - パターンを整理して、複雑なものを明快にする
- 理解への経路を見つけるための構造や経路をつくる
- 明快さ、理解、情報の組織化を専門とした職業
- Richard Saul Wurman

12. 理解のためのデザイン
Design for Understanding

13. USER CONTENT
CONTEXT
利用シーンの理解
どういう使われ方をするのか？
何を提供すれば
相手にうまく意図が伝わるのか
誰に伝えるのか？
相手を理解し、共感する

14. 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

15. トップダウン
ボトムアップ
Big IA
Small IA
ビジネス・戦略視点
制作物・成果物視点

16. ©Peter Morville

17. ？
意図 意味
Intention Meaning

18. どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
©All rights reserved by carlo.buffa

19. 情報を集める
情報を理解する
情報を分類する
情報を組織化する
データ
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
具象
抽象
情報を表現する
ビジュアル
デザイン

20. 情報の分類「軸」を探し出す
伝える相手を想定して、情報を整理する

21. ５つの帽子がけ
5 hats of Classification.
Corbis Images

22. L
A
T
C
H

23. L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層

24. L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層
客
観
分
類

25. L
A
T
C
H
・・・場所
・・・アルファベット順
・・・時間
・・・カテゴリー
・・・階層
主
観
分
類

26. 情報を理解する
情報を分類する
情報を組織化する
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
カードソーティング
ワイヤーフレーム

27. カードソーティング
Card Sorting Method

28. 分類
ラベリング
関連性

29. ワイヤーフレーム
Wireframing

30. 設計意図を作り手が
共有するための共通言語
情報の伝え方、
理解の道筋を作るための設計図

31. １：情報の分類軸を探し出す
２：伝える相手を想定した分類を検討する
３：情報を組織化する
Exercise

32. Ice Break

33. あなたを絵だけで自己紹介してください。
※白紙の紙にひとつあなたがどんな人かわかる絵を書いてください。
※所属や業務内容、専門用語などは含めないようにしてください。
※２分間で描いて、グループ内で紹介しあってください。
「私はこういう人です」
絵を描く（２分） → グループに紹介する（1人1分）

34. Exercise
１：情報の分類軸を探し出す
２：伝える相手を想定した分類を検討する
３：情報を組織化する

35. カードソーティングゲームキット
上平 崇仁（専修大学）: 2013
© Takahito Kamihira

36. © Takahito Kamihira
20種類の犬のカードがあります。
犬のカードを共通点を探して、分類して下さい。
考えつく限りの分類を試し、試した分類軸を紙に
書き出して下さい。
!
【手順】：10分で作業してください。
- 机の上でカードを並べ変えて、いろいろな分類軸を探す
- 探し出した分類軸をワークシートに書く

37. 多様な分類軸
© All rights reserved by Harri_1970

38. Exercise
１：情報の分類軸を探し出す
２：伝える相手を想定した分類を検討する
３：情報を組織化する

39. © Takahito Kamihira
20種類の犬がいる「犬カフェ」
をオープンしようと考えています。
!
犬を飼っている人、犬好きだけど犬を飼っていない人をターゲット
にカフェにいる犬たちを紹介したいと思っています。
ターゲットを想定して、犬の情報の分類を
考えてください。
その際、ターゲットのニーズやシチュエーション
も考慮して分類をしてください。
!
【手順】：20分で作業してください。
- ターゲットのニーズや、カフェを利用するシチュエーションを
想定して、ワークシートに書く。
- ニーズやシチュエーションに応じて犬のカードを机の上で分類
し、分類に付箋で見出しを付ける。

40. ターゲットのニーズやシチュエーションの整理（メモ）
犬好き
カフェを利用する
シチュエーション
犬飼ってる
飼ってない
カフェでしたいこと
カフェに求めるもの
ターゲット

41. 切り口（見出し） 切り口（見出し） 切り口（見出し）
カード
○○な人の
ための犬カフェ

42. 伝えたい相手がもっとも
しっくりくる分類を「探す、見つける」
© All rights reserved by Tyson J

43. 見えている分類
見えていない分類
© Takahito Kamihira
小型犬 フワフワ

44. Exercise
１：情報の分類軸を探し出す
２：伝える相手を想定した分類を検討する
３：情報を組織化する

45. © Takahito Kamihira
スマートフォン向けのサイトで、犬カフェの紹介をしたいので情報
を整理し、サイトの画面設計を行いたいと思っています。
犬カフェサイトのトップページでカフェにいる犬の紹介を掲載したい
と思っています。
Exercise２で検討したカード分類をもとにこのページのワイヤーフ
レームをスケッチして下さい。
!
【前提条件】
- ターゲットは、自分が住んでいる近所のカフェや動物とふれあえる施設をいろい
ろ探しており、情報収集をしている段階です。
!
20分で作業してください。

46. LOGO

47. 発表
となりのグループ同士で、できた案を発表しあって下さい。
1グループ２分をめどに発表してください。

48. 伝え方≒フォーカス
© All rights reserved by Max Gerber Smith

49. LOGO
こんなワンちゃんがいます
フワフワ癒し 活発遊び好き 温厚大人しい
カフェ名：場所
抱っこ体験やカフェの犬と遊ぶ、一緒にまったりお茶を飲む、
などのシーンを想定、分類軸を設定
犬好きがグっとくるようにカワイイ写真で興味を持たせなが
ら、性格や犬種などの最低限のメタ情報を網羅するヨークシャーテリア：○○ちゃん
甘えん坊で○○

50. 伝える相手とコンテキストの理解ができて、
はじめてワイヤーフレームが書ける
ペルソナ
（誰に伝えるか）
ジャーニーマップ
（どうやって伝えるか）
ワイヤーフレーム
（何を伝えるか）

51. どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
伝え方の軸 伝え方
を決める を検討する
伝え方の軸
カードソーティング ワイヤーフレーム

52. 情報を集める
情報を理解する
情報を分類する
情報を組織化する
データ
ユーザ・
コンテキスト
の把握
コンテンツ
設計
画面設計
具象
抽象
情報を表現する
ビジュアル
デザイン

53. ©All rights reserved by Gregorio Jiménez
一筆を入れる瞬間

54. 終わりに

55. IA思考を養うには
©All rights reserved by C E Andersen

56. 記憶
経験
空間
Corbis Images

60. 自身の経験の積み重ねから、
情報を理解、判断する

61. 目の前にいる人とのコミュニケーションが
うまくいくかどうかは、
相手が何を理解できないのかを
きちんと理解するというこちら側の能力にかかっている。
- Richard Saul Wurman「それは情報ではない」

63. 我々が自らにこうしているのだと言い聞かせている
思考や行動からではなく、
実際に行っている思考や行動から影響を受けるかたちで、
医療用機器、コンピューター、乗り物、
コミュニケーション用のツールをデザインする必要がある
- 伊藤 攘一 「小さき精神を出し抜くデザイン」

64. - Wikipedia

65. 探索 対話観察
Exploration Observation Conversation
好奇心
Curiosity

66. 探究心と試行錯誤
Creative Confidence : IDEO

67. ？
意図 意味
Intention Meaning

68. どう見せるか、何を見せるか
よりも「何を伝えるか」が重要
©All rights reserved by carlo.buffa

69. 基礎を積み重ねること
©Jiro Dreams of Sushi

70. Richard Saul Wurman - それは情報ではない
Richard Saul Wurman - 理解の秘密 マジカル・インストラクション
Peter Morville - Understanding Information Architecture
上平 崇仁 - カードソーティングゲームキット
赤瀬川原平 - 超芸術トマソン
Peter Morville - Information Architect
赤瀬川原平 - 路上観察学入門
Resources.
坂本 貴史 - モバイルIAシンキング
長谷川 敦士 - IA100
楽しいBADUIの世界 - http://badui.org

71. Thanks for your attention.
Facebook: murakoshi.satoru
Twitter : @future79
©All rights reserved by carlo.buffa