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

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

similar documents