Transcript 情報の構造化と表現 - 青山学院大学附置情報科学研究センター

第12回 情報デザイン（４）
情報の構造化と表現
寺尾 敦
青山学院大学社会情報学部
[email protected]
1-1 情報構造の捉え方
• 構造化：物事を成り立たせるために必要な要
素を組み立て，ひとまとめのモノにする作業．
– 構造：ある物事が成り立つための組み立てとその
情報要素のしくみ．
• 構造化の目的は，複雑な情報を扱いやすくし，
そのなかにある情報の関係性を示し，わかり
やすくすること．
– 情報の意味を要素に分解し，論理的に納得のい
くしくみと形にまとめる．
• KJ法による構造化のプロセス
1. データの書き出し：１つのデータを１枚のカード
に書く．
2. 分類・ラベリング：類似のカードを集めてカテゴリ
化し，カテゴリ名をつける．
3. 図解化：カテゴリ相互の関係を図示する．
4. 叙述化：図的に表現されたものを文章化する．
1-2 情報の関係性
• ２つ以上の要素を何らかの統一的な観点か
らとらえることができるとき，これら２つの要素
はその観点において「関係がある」．
• 情報要素の相互関係は，大まかに，以下の５
つで表すことができる．
– 並列，順序，分岐，因果，階層（テキスト p.109 の
例を参照のこと）
• 相互関係は図解表現でよりわかりやくすく表
すことができる．
関係の基本図形
• 矢印による表現
A から B への変化
A から B への因果関係
A
B
A
B
対立
相関関係・双方向の因果
A
B
双方向の因果
情報の双方向性
矢印の太さで関係性の強さを表すことができる．破線は弱い印象を与える．
関係の基本図形
• 潜在変数から顕在変数への因果
総熱量
肉類
洋食傾向
乳製品
酒類
洋食傾向が潜在的な原因（潜在変
数＝直接測定されない）．
それが４つの顕在変数に結果とし
てあらわれる．
関係の基本図形
• 顕在変数から潜在変数への因果
総熱量
４つの顕在変数が原因．洋食傾向と
いう潜在変数を規定．（あるいは，４
変数が１変数に合成される）
肉類
洋食傾向
乳製品
酒類
テキスト p.110 にある「拡散」の
表現は，結果から原因に矢印が
伸びるので，わかりにくいと思う．
構造と表現
• 構造と表現の組み合わせにより，情報提示
方法のバリエーションが生まれる（テキスト
p.111）
– 構造：どのように配置するか
– 表現：何を配置するか（何を用いるか）
1-3 情報構造の種類
• LATCH（「掛け金」）：ワーマン（Wurman）による
情報整理手法．構造化の手法．
– 位置（Location）：場所，地域，住所
– アルファベット（Alphabet）
– 時間（Time）
– 分野（Category）
– 階層（Hierarchy）．もともとは連続体（Continuum）
情報の構造化と記憶
• 構造化された情報は記憶されやすい
• Bower, Clark, Lesgold, & Winzenz (1969) の実
験
• ４カテゴリ（動物・衣服・乗物・鉱物）の単語を
覚える
– 体制化条件：カテゴリごとに単語の階層構造を示
す木
– 統制条件：木は用いるが単語はバラバラ
再生された単語の平均数
試行
条件
1
2
3
4
体制化
73.0
106.1
112.0
112.0
ランダム
20.6
38.9
52.8
70.1
• 場所法（Method of Loci）
• よく知っている道にそって，記憶材料を場所
に関連づける
– 道の例：本屋，レコード店から図書館
– 材料例：牛乳，ホットドッグ，ドッグフード，トマト，
バナナ，パン
– 本屋の前に牛乳の水たまり，レコードの上で回る
ホットドッグ，・・・
• 記憶材料を強引に構造化する
情報構造の種類
• 並列・順列・分岐・因果・階層の５関係におけ
る，要素のつながりの表現．
– リニア（直線）構造：複数の情報を一定の順番で
ユーザに見せる．
– ツリー（階層）型：大分類から小分類へ
– 放射（ネットワーク）型：関連する事柄をリンクで結
ぶ．複雑な構造
– 他にもいくつかの種類の構造がある（テキスト
p.114-115 参照）
ウェブサイトのナビゲーションとリンク
• ナビゲーション：ユーザがサイト内を迷うこと
なく目的のコンテンツにたどり着けるよう案内
する．リンクの集合．「案内板」
– グローバルナビゲーション：サイト全体での主要
コンテンツへ案内する
– ローカルナビゲーション：局所的なまとまりの中で
のナビゲーション
アマゾンのグローバルナビゲーション
アマゾンのローカルナビゲーション
ナビゲーションのデザイン(1)
分類項目式ナビゲーション
格納式ナビゲーション
ナビゲーションのデザイン(2)
テキストリンク式ナビゲーション
パンくず式ナビゲーション
2-1 表現の基礎
• 色彩の心理学的特性をデザインに利用する．
• 色彩の３属性
– 色相：色の種，色合い
– 明度：白―黒の次元
– 彩度：あざやかさ．白―灰色―黒は彩度ゼロ．純
色が最も彩度が高い．
• ウェブで探すと，色彩の３属性に関するカラー
図版がいろいろ見つかります．
– 色相環
– マンセル表色系
色の対比とコントラスト
• 色相対比：色と色のコントラスト．違う色相の
２色を隣り合わせると，それぞれの色が本来
の色味を増して輝いて見える．補色の関係に
ある色を並べると，最も強いコントラストが得
られる（補色対比）．
– 補色：２つの色を混ぜたとき灰色（無彩色）になる
色．色相環上で反対側にある色がおおよそ対応
する．
• 他に，明度対比（カラー p.2），彩度対比．
図形要素のまとまりの要因
• 形態の心理学的特性をデザインに利用する．
いくつかの要素がまとまって図として認識され
るとき，要素への分解は意味がない．
• ゲシュタルト心理学
– 全体性重視：全体は要素の和ではない
– 与えられた刺激の時・空的な配置に基づき，いか
にして知覚的な分凝と全体のまとまりが成立する
かを追求．
• ゲシュタルトの法則（ウェブでしらべてみましょ
う）
– 類同の法則（要因）
– 近接の法則
– 閉合の法則
– よい連続の法則
ちょっと横道へ：錯視
• 北岡明佳先生の錯視サイト
http://www.ritsumei.ac.jp/~akitaoka/indexj.html
• ミューラー・リヤー錯視など基本的な錯視は，
サイト内の「錯視のカタログ」を参照のこと
レイアウトの基本４原則
• レイアウトの基本４原則
– 近接：たがいに関連する項目は，グループ化して
まとめる．
– 整列：各要素は整列して配置する．他との視覚的
な関係性を持たせる．
– 反復：一貫性，継続性を持たせる．
– コントラスト：強弱関係をつける．
• 参考：http://webdesignrecipes.com/4-factorof-designing/
2-2 情報表現の種類
• 情報の可視化：人間が直接見ることができな
い現象や事象，あるいは関係性などの情報
を，「見る」ことができる画像・映像・グラフ・表
などにすること．
• 可視化された情報は，情報の受け手によって
解釈される．
セリフ
考えている
こと
• 数値情報は，グラフやチャートに置き換えるこ
とで，わかりやすく，視覚的に表現できる．
– インフォメーショングラフィックス：情報をわかりや
すく伝えるために，文字ではなく，図案化して伝え
る手法．
– 適切でない表現がされていることも多い．
• 参考文献：吉田一「英語のセンター試験の統計グラフ
問題を論評する」（数学セミナー2007年12月号）