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