寺尾 敦 青山学院大学社会情報学部 atsushi@si.aoyama.ac.jp 第12回　情報デザイン（４） 情報の構造化と表現 寺尾　敦 青山学院大学社会情報学部 atsushi@si.aoyama.ac.jp.

Presentation on theme: "寺尾 敦 青山学院大学社会情報学部 atsushi@si.aoyama.ac.jp 第12回　情報デザイン（４） 情報の構造化と表現 寺尾　敦 青山学院大学社会情報学部 atsushi@si.aoyama.ac.jp."— Presentation transcript:

1 寺尾 敦 青山学院大学社会情報学部 atsushi@si.aoyama.ac.jp
第12回　情報デザイン（４） 情報の構造化と表現 寺尾　敦 青山学院大学社会情報学部

2 1-1 情報構造の捉え方 構造化：物事を成り立たせるために必要な要素を組み立て，ひとまとめのモノにする作業．
構造：ある物事が成り立つための組み立てとその情報要素のしくみ． 構造化の目的は，複雑な情報を扱いやすくし，そのなかにある情報の関係性を示し，わかりやすくすること． 情報の意味を要素に分解し，論理的に納得のいくしくみと形にまとめる．

3 KJ法による構造化のプロセス データの書き出し：１つのデータを１枚のカードに書く．
分類・ラベリング：類似のカードを集めてカテゴリ化し，カテゴリ名をつける． 図解化：カテゴリ相互の関係を図示する． 叙述化：図的に表現されたものを文章化する．

4 1-2 情報の関係性 ２つ以上の要素を何らかの統一的な観点からとらえることができるとき，これら２つの要素はその観点において「関係がある」．
情報要素の相互関係は，大まかに，以下の５つで表すことができる． 並列，順序，分岐，因果，階層（テキスト p.115 の例を参照のこと） 相互関係は図解表現でよりわかりやくすく表すことができる．

5 関係の基本図形 矢印による表現 A から B への変化 A から B への因果関係 対立 相関関係・双方向の因果 双方向の因果
情報の双方向性 矢印の太さで関係性の強さを表すことができる．破線は弱い印象を与える．

6 関係の基本図形 潜在変数から顕在変数への因果 洋食傾向が潜在的な原因（潜在変数＝直接測定されない）．
総熱量 肉類 洋食傾向 乳製品 洋食傾向が潜在的な原因（潜在変数＝直接測定されない）． それが４つの顕在変数に結果としてあらわれる． 酒類

7 関係の基本図形 顕在変数から潜在変数への因果 ４つの顕在変数が原因．洋食傾向という潜在変数を規定．（あるいは，４変数が１変数に合成される）
総熱量 ４つの顕在変数が原因．洋食傾向という潜在変数を規定．（あるいは，４変数が１変数に合成される） 肉類 洋食傾向 乳製品 酒類

8 構造と表現 構造と表現の組み合わせにより，情報提示方法のバリエーションが生まれる（テキスト p.117） 構造：どのように配置するか
表現：何を配置するか（何を用いるか）

9 1-3 情報構造の種類 LATCH（「掛け金」）：ワーマン（Wurman）による情報整理手法．構造化の手法．
位置（Location）：場所，地域，住所 アルファベット（Alphabet） 時間（Time） 分野（Category） 階層（Hierarchy）．もともとは連続体（Continuum）

10 情報の構造化と記憶 構造化された情報は記憶されやすい Bower, Clark, Lesgold, & Winzenz (1969) の実験
４カテゴリ（動物・衣服・乗物・鉱物）の単語を覚える 体制化条件：カテゴリごとに単語の階層構造を示す木 統制条件：木は用いるが単語はバラバラ

11

12 再生された単語の平均数 試行 条件 1 2 3 4 体制化 73.0 106.1 112.0 ランダム 20.6 38.9 52.8
70.1

13 よく知っている道にそって，記憶材料を場所に関連づける
場所法（Method of Loci） よく知っている道にそって，記憶材料を場所に関連づける 道の例：本屋，レコード店から図書館 材料例：牛乳，ホットドッグ，ドッグフード，トマト，バナナ，パン 本屋の前に牛乳の水たまり，レコードの上で回るホットドッグ，・・・ 記憶材料を強引に構造化する

14 情報構造の種類 並列・順列・分岐・因果・階層の５関係における，要素のつながりの表現．
リニア（直線）構造：複数の情報を一定の順番でユーザに見せる． ツリー（階層）型：大分類から小分類へ 放射（ネットワーク）型：関連する事柄をリンクで結ぶ．複雑な構造 他にもいくつかの種類の構造がある（テキスト p 参照）

15 ウェブサイトのナビゲーションとリンク ナビゲーション：ユーザがサイト内を迷うことなく目的のコンテンツにたどり着けるよう案内する．リンクの集合．「案内板」 グローバルナビゲーション：サイト全体での主要コンテンツへ案内する ローカルナビゲーション：局所的なまとまりの中でのナビゲーション

16 アマゾンのグローバルナビゲーション

17 アマゾンのローカルナビゲーション

18 ナビゲーションのデザイン(1) 分類項目式ナビゲーション 格納式ナビゲーション

19 ナビゲーションのデザイン(2) テキストリンク式ナビゲーション パンくず式ナビゲーション

20 2-1 表現の基礎 色彩の心理学的特性をデザインに利用する． 色彩の３属性 色相：色の種，色合い 明度：白―黒の次元
彩度：あざやかさ．白―灰色―黒は彩度ゼロ．純色が最も彩度が高い．

21 ウェブで探すと，色彩の３属性に関するカラー図版がいろいろ見つかります．
色相環 マンセル表色系

22 色の対比とコントラスト 色相対比：色と色のコントラスト．違う色相の２色を隣り合わせると，それぞれの色が本来の色味を増して輝いて見える．補色の関係にある色を並べると，最も強いコントラストが得られる（補色対比）． 補色：２つの色を混ぜたとき灰色（無彩色）になる色．色相環上で反対側にある色がおおよそ対応する． 他に，明度対比（カラー p.2），彩度対比．

23 図形要素のまとまりの要因 形態の心理学的特性をデザインに利用する．いくつかの要素がまとまって図として認識されるとき，要素への分解は意味がない． ゲシュタルト心理学 全体性重視：全体は要素の和ではない 与えられた刺激の時・空的な配置に基づき，いかにして知覚的な分凝と全体のまとまりが成立するかを追求．

24 ゲシュタルトの法則（ウェブでしらべてみましょう）
類同の法則（要因） 近接の法則 閉合の法則 よい連続の法則

25 ちょっと横道へ：錯視 北岡明佳先生の錯視サイト ミューラー・リヤー錯視など基本的な錯視は，サイト内の「錯視のカタログ」を参照のこと

26 レイアウトの基本４原則 レイアウトの基本４原則
近接：たがいに関連する項目は，グループ化してまとめる． 整列：各要素は整列して配置する．他との視覚的な関係性を持たせる． 反復：一貫性，継続性を持たせる． コントラスト：強弱関係をつける． 参考：

27 2-2 情報表現の種類 情報の可視化：人間が直接見ることができない現象や事象，あるいは関係性などの情報を，「見る」ことができる画像・映像・グラフ・表などにすること． 可視化された情報は，情報の受け手によって解釈される． 考えていること セリフ

28 数値情報は，グラフやチャートに置き換えることで，わかりやすく，視覚的に表現できる．
インフォメーショングラフィックス：情報をわかりやすく伝えるために，文字ではなく，図案化して伝える手法． 適切でない表現がされていることも多い． 参考文献：吉田一「英語のセンター試験の統計グラフ問題を論評する」（数学セミナー2007年12月号）