Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
理解のデザインとしての
情報アーキテクチャ
Design for Understanding :
A fundamental of Information Architecture.
Satoru MURAKOSHI
2014/03/25
©A...
情報アーキテクチャとは何か
情報を伝えるということ:エクササイズ
IA思考を養うには
Agenda
村越 悟
インフォメーションアーキテクト
メインフレーム系PG → Web制作会社 → デジタルエージェンシー
World IA Day 2014 Tokyo ローカルコーディネーター
Member of Information Archite...
Live IA
4.8 On Sale.
(寄稿:事業会社におけるUXデザインの取り組み)
情報の伝え方
今日のテーマ
©All rights reserved by carlo.buffa
情報アーキテクチャ
考え方としての
Photo by Scarygami
情報アーキテクチャとは
「情報をわかりやすく伝え」、
「受け手が情報を探しやすくする」ための表現技術
- IAAJ
- パターンを整理して、複雑なものを明快にする

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

- 明快さ、理解、情報の組織化を専門とした職業
- Richard Saul Wurman
理解のためのデザイン
Design for Understanding
USER CONTENT
CONTEXT
利用シーンの理解
どういう使われ方をするのか?
何を提供すれば
相手にうまく意図が伝わるのか
誰に伝えるのか?
相手を理解し、共感する
Visual Design
Interface Design Navigation Design
Information Design
Interaction
Design
Information
Architecture
Functional...
トップダウン
ボトムアップ
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分間で描いて、グループ内で紹介しあってください。
「私はこういう人です」
...
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
カードソーティングゲームキット
上平 崇仁(専修大学): 2013
© Takahito Kamihira
© Takahito Kamihira
20種類の犬のカードがあります。
犬のカードを共通点を探して、分類して下さい。
考えつく限りの分類を試し、試した分類軸を紙に
書き出して下さい。
!
【手順】:10分で作業してください。
 - 机の上でカ...
多様な分類軸
© All rights reserved by Harri_1970
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
© Takahito Kamihira
20種類の犬がいる「犬カフェ」
をオープンしようと考えています。
!
犬を飼っている人、犬好きだけど犬を飼っていない人をターゲット
にカフェにいる犬たちを紹介したいと思っています。
ターゲットを想定して、...
ターゲットのニーズやシチュエーションの整理(メモ)
犬好き
カフェを利用する
シチュエーション
犬飼ってる
飼ってない
カフェでしたいこと
カフェに求めるもの
ターゲット
切り口(見出し) 切り口(見出し) 切り口(見出し)
カード
○○な人の
ための犬カフェ
伝えたい相手がもっとも
しっくりくる分類を「探す、見つける」
© All rights reserved by Tyson J
見えている分類
見えていない分類
© Takahito Kamihira
小型犬 フワフワ
Exercise
1:情報の分類軸を探し出す
2:伝える相手を想定した分類を検討する
3:情報を組織化する
© Takahito Kamihira
スマートフォン向けのサイトで、犬カフェの紹介をしたいので情報
を整理し、サイトの画面設計を行いたいと思っています。
犬カフェサイトのトップページでカフェにいる犬の紹介を掲載したい
と思っています。
Exe...
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
自身の経験の積み重ねから、
情報を理解、判断する
目の前にいる人とのコミュニケーションが
うまくいくかどうかは、
相手が何を理解できないのかを
きちんと理解するというこちら側の能力にかかっている。
- Richard Saul Wurman「それは情報ではない」
我々が自らにこうしているのだと言い聞かせている
思考や行動からではなく、
実際に行っている思考や行動から影響を受けるかたちで、
医療用機器、コンピューター、乗り物、
コミュニケーション用のツールをデザインする必要がある
- 伊藤 攘一 「小さき...
- 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 Arch...
Thanks for your attention.
Facebook: murakoshi.satoru
Twitter : @future79
©All rights reserved by carlo.buffa
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Design for Understanding:理解のデザインとしての情報アーキテクチャ
Upcoming SlideShare
Loading in …5
×

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

10,261 views

Published on

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

Published in: Design
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 理解のデザインとしての 情報アーキテクチャ Design for Understanding : A fundamental of Information Architecture. Satoru MURAKOSHI 2014/03/25 ©All rights reserved by carlo.buffa
  2. 2. 情報アーキテクチャとは何か 情報を伝えるということ:エクササイズ IA思考を養うには Agenda
  3. 3. 村越 悟 インフォメーションアーキテクト メインフレーム系PG → Web制作会社 → デジタルエージェンシー World IA Day 2014 Tokyo ローカルコーディネーター Member of Information Architecture Institute 寄稿 講演 HCD認定人間中心設計専門家(挑戦中)
  4. 4. Live IA
  5. 5. 4.8 On Sale. (寄稿:事業会社におけるUXデザインの取り組み)
  6. 6. 情報の伝え方 今日のテーマ ©All rights reserved by carlo.buffa
  7. 7. 情報アーキテクチャ 考え方としての Photo by Scarygami
  8. 8. 情報アーキテクチャとは 「情報をわかりやすく伝え」、 「受け手が情報を探しやすくする」ための表現技術 - IAAJ
  9. 9. - パターンを整理して、複雑なものを明快にする
 - 理解への経路を見つけるための構造や経路をつくる
 - 明快さ、理解、情報の組織化を専門とした職業 - Richard Saul Wurman
  10. 10. 理解のためのデザイン Design for Understanding
  11. 11. USER CONTENT CONTEXT 利用シーンの理解 どういう使われ方をするのか? 何を提供すれば 相手にうまく意図が伝わるのか 誰に伝えるのか? 相手を理解し、共感する
  12. 12. 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
  13. 13. トップダウン ボトムアップ Big IA Small IA ビジネス・戦略視点 制作物・成果物視点
  14. 14. ©Peter Morville
  15. 15. ? 意図 意味 Intention Meaning
  16. 16. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 ©All rights reserved by carlo.buffa
  17. 17. 情報を集める 情報を理解する 情報を分類する 情報を組織化する データ ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 具象 抽象 情報を表現する ビジュアル デザイン
  18. 18. 情報の分類「軸」を探し出す 伝える相手を想定して、情報を整理する
  19. 19. 5つの帽子がけ 5 hats of Classification. Corbis Images
  20. 20. L A T C H
  21. 21. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層
  22. 22. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層 客 観 分 類
  23. 23. L A T C H ・・・場所 ・・・アルファベット順 ・・・時間 ・・・カテゴリー ・・・階層 主 観 分 類
  24. 24. 情報を理解する 情報を分類する 情報を組織化する ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 カードソーティング ワイヤーフレーム
  25. 25. カードソーティング Card Sorting Method
  26. 26. 分類 ラベリング 関連性
  27. 27. ワイヤーフレーム Wireframing
  28. 28. 設計意図を作り手が 共有するための共通言語 情報の伝え方、 理解の道筋を作るための設計図
  29. 29. 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する Exercise
  30. 30. Ice Break
  31. 31. あなたを絵だけで自己紹介してください。 ※白紙の紙にひとつあなたがどんな人かわかる絵を書いてください。 ※所属や業務内容、専門用語などは含めないようにしてください。 ※2分間で描いて、グループ内で紹介しあってください。 「私はこういう人です」 絵を描く(2分) → グループに紹介する(1人1分)
  32. 32. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  33. 33. カードソーティングゲームキット 上平 崇仁(専修大学): 2013 © Takahito Kamihira
  34. 34. © Takahito Kamihira 20種類の犬のカードがあります。 犬のカードを共通点を探して、分類して下さい。 考えつく限りの分類を試し、試した分類軸を紙に 書き出して下さい。 ! 【手順】:10分で作業してください。  - 机の上でカードを並べ変えて、いろいろな分類軸を探す  - 探し出した分類軸をワークシートに書く
  35. 35. 多様な分類軸 © All rights reserved by Harri_1970
  36. 36. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  37. 37. © Takahito Kamihira 20種類の犬がいる「犬カフェ」 をオープンしようと考えています。 ! 犬を飼っている人、犬好きだけど犬を飼っていない人をターゲット にカフェにいる犬たちを紹介したいと思っています。 ターゲットを想定して、犬の情報の分類を 考えてください。 その際、ターゲットのニーズやシチュエーション も考慮して分類をしてください。 ! 【手順】:20分で作業してください。  - ターゲットのニーズや、カフェを利用するシチュエーションを
 想定して、ワークシートに書く。
 - ニーズやシチュエーションに応じて犬のカードを机の上で分類 し、分類に付箋で見出しを付ける。
  38. 38. ターゲットのニーズやシチュエーションの整理(メモ) 犬好き カフェを利用する シチュエーション 犬飼ってる 飼ってない カフェでしたいこと カフェに求めるもの ターゲット
  39. 39. 切り口(見出し) 切り口(見出し) 切り口(見出し) カード ○○な人の ための犬カフェ
  40. 40. 伝えたい相手がもっとも しっくりくる分類を「探す、見つける」 © All rights reserved by Tyson J
  41. 41. 見えている分類 見えていない分類 © Takahito Kamihira 小型犬 フワフワ
  42. 42. Exercise 1:情報の分類軸を探し出す 2:伝える相手を想定した分類を検討する 3:情報を組織化する
  43. 43. © Takahito Kamihira スマートフォン向けのサイトで、犬カフェの紹介をしたいので情報 を整理し、サイトの画面設計を行いたいと思っています。 犬カフェサイトのトップページでカフェにいる犬の紹介を掲載したい と思っています。 Exercise2で検討したカード分類をもとにこのページのワイヤーフ レームをスケッチして下さい。 ! 【前提条件】
 - ターゲットは、自分が住んでいる近所のカフェや動物とふれあえる施設をいろい ろ探しており、情報収集をしている段階です。 ! 20分で作業してください。
  44. 44. LOGO
  45. 45. 発表 となりのグループ同士で、できた案を発表しあって下さい。 1グループ2分をめどに発表してください。
  46. 46. 伝え方≒フォーカス © All rights reserved by Max Gerber Smith
  47. 47. LOGO こんなワンちゃんがいます フワフワ癒し 活発遊び好き 温厚大人しい カフェ名:場所 抱っこ体験やカフェの犬と遊ぶ、一緒にまったりお茶を飲む、 などのシーンを想定、分類軸を設定 犬好きがグっとくるようにカワイイ写真で興味を持たせなが ら、性格や犬種などの最低限のメタ情報を網羅するヨークシャーテリア:○○ちゃん
 甘えん坊で○○
  48. 48. 伝える相手とコンテキストの理解ができて、 はじめてワイヤーフレームが書ける ペルソナ (誰に伝えるか) ジャーニーマップ (どうやって伝えるか) ワイヤーフレーム (何を伝えるか)
  49. 49. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 伝え方の軸 伝え方 を決める を検討する 伝え方の軸 カードソーティング ワイヤーフレーム
  50. 50. 情報を集める 情報を理解する 情報を分類する 情報を組織化する データ ユーザ・ コンテキスト の把握 コンテンツ 設計 画面設計 具象 抽象 情報を表現する ビジュアル デザイン
  51. 51. ©All rights reserved by Gregorio Jiménez 一筆を入れる瞬間
  52. 52. 終わりに
  53. 53. IA思考を養うには ©All rights reserved by C E Andersen
  54. 54. 記憶 経験 空間 Corbis Images
  55. 55. 自身の経験の積み重ねから、 情報を理解、判断する
  56. 56. 目の前にいる人とのコミュニケーションが うまくいくかどうかは、 相手が何を理解できないのかを きちんと理解するというこちら側の能力にかかっている。 - Richard Saul Wurman「それは情報ではない」
  57. 57. 我々が自らにこうしているのだと言い聞かせている 思考や行動からではなく、 実際に行っている思考や行動から影響を受けるかたちで、 医療用機器、コンピューター、乗り物、 コミュニケーション用のツールをデザインする必要がある - 伊藤 攘一 「小さき精神を出し抜くデザイン」
  58. 58. - Wikipedia
  59. 59. 探索 対話観察 Exploration Observation Conversation 好奇心 Curiosity
  60. 60. 探究心と試行錯誤 Creative Confidence : IDEO
  61. 61. ? 意図 意味 Intention Meaning
  62. 62. どう見せるか、何を見せるか よりも「何を伝えるか」が重要 ©All rights reserved by carlo.buffa
  63. 63. 基礎を積み重ねること ©Jiro Dreams of Sushi
  64. 64. Richard Saul Wurman - それは情報ではない Richard Saul Wurman - 理解の秘密 マジカル・インストラクション Peter Morville - Understanding Information Architecture 上平 崇仁 - カードソーティングゲームキット 赤瀬川原平 - 超芸術トマソン Peter Morville - Information Architect 赤瀬川原平 - 路上観察学入門 Resources. 坂本 貴史 - モバイルIAシンキング 長谷川 敦士 - IA100 楽しいBADUIの世界 - http://badui.org
  65. 65. Thanks for your attention. Facebook: murakoshi.satoru Twitter : @future79 ©All rights reserved by carlo.buffa

×