---
title: 情報技術演習 第10回「情報可視化/体験メディア」
tags: 
author: [Hidekazu Kubota](https://www.docswell.com/user/sosuisen)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4LE31RD975.jpg?width=480
description: 2007年度の京都大学文学部情報技術演習の講義のために作成したスライドです。
published: November 17, 21
canonical: https://www.docswell.com/s/sosuisen/5EEP85-2021-11-17-154159
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4LE31RD975.jpg)

情報技術演習
第10回「情報可視化／体験メディア」
2007/12/11
久保田秀和
文学部／情報学研究科
kubota@ii.ist.i.kyoto-u.ac.jp
http://www.ii.ist.i.kyoto-u.ac.jp/~kubota/


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V8EDXYP8JG.jpg)

本日の講義・演習
•
•
•
•
情報可視化
（講義シリーズのまとめ）
体験メディア
最終報告会発表資料の準備


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4V7PP6NW78.jpg)

情報可視化
• 情報を視覚的にはっきりと判るように表現し，
共有すること
(a) アイコン
(b) 美的に訴えかける表現
(c) 「見える化」
• 思考の道具として図を用いること
(d) 複雑な問題の見通しを良くする手法
(e) 情報をインタラクティブに吟味する手法


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L2JV23K9JQ.jpg)

(a) アイコン
• 読み手の合意や通念に基づいて共有される表現
– 時代の変化の影響を受ける可能性のある具体的な絵
– 読み手の合意に基づいて利用されるアイコン
• 信号・交通標識
– 「壊れ物」と「禁煙」といった抽象的な概念を表すアイコン
（分類，図版は安西祐一郎ら 「情報の創出とデザイン」 より）


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Z5EGR3Q4JL.jpg)

(b) 美的に訴えかけるもの
• クリップアート，装飾
情報爆発
• 情報可視化が人間へ向けた表現である以上，美しい見た目で
あることは一般に重要


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V4JQV5KR7P.jpg)

(c) 「見える化」
• リアルタイムな，現場的な情報可視化
• 遠藤功 「見える化」 東洋経済新報社，2005．
– 企業活動の現場における問題解決のための情
報共有
≒ グループウェアにおけるアウェアネス（前回講義）
– 共有すべき情報の一つとして 「信号情報」
• 異常や問題が発生した／解決された
という事実
• 即時性や臨場感が求められる
• トヨタ自動車の「アンドン」
– 製造ラインの状態を現場全体で見え
るようにする
– 例えば，停止の原因： 非常停止，
ワークなし，満量，ライン異常
(図版は同書より)


# Page. 7

![Page Image](https://bcdn.docswell.com/page/DK74M9PQJ1.jpg)

情報可視化
• 情報を視覚的にはっきりと判るように表現し，
共有すること
(a) アイコン
(b) 美的に訴えかける表現
(c) 「見える化」
• 思考の道具として図を用いること
(d) 複雑な問題の見通しを良くする手法
(e) 情報をインタラクティブに吟味する手法


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PLJ18K9LEG.jpg)

(d) 複雑な問題の見通しを良くする手法
• 棒グラフ，円グラフ，ベン図，表
• ブロック図，ステートチャート
PositLogのシステム構成と情報の流れの
概要が表現されている
PositLogのステートチャート（一部）．閲覧
画面，ログイン画面，編集画面など画面間
の遷移順序やルールが表現されている


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8GJWZDQQJ2.jpg)

図言語の分類
• 図のなかでも意味単位（図素）や構文法（図素の配置
規則）がはっきりしたもの
– 行列系
• 行列の空間的表現
– 座標系
• 座標の空間的表現
– 連結系
• グラフの空間的表現
– 領域系
• 集合の空間的表現


# Page. 10

![Page Image](https://bcdn.docswell.com/page/W4EZ1GW373.jpg)

練習：行列系・座標系
• Excelを用いて行列と棒グラフを作成する
（MKさんの第4回課題レポートのデータより作成）


# Page. 11

![Page Image](https://bcdn.docswell.com/page/KY76LYGZJV.jpg)

練習：連結系・領域系
• PowerPointを用いて連結系表現，領域系表現を作
図する
PowerPointの
オートシェイプを
利用


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5G751GV9E4.jpg)

(e) 情報をインタラクティブに吟味する手法
• 模造紙を用いたブレインストーミング
模造紙と付箋紙を利
用した例．


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V9J21Y357R.jpg)

ブレインストーミング
• 発散思考によって事実を明らかにしたりアイデアを生
成する方法．広く用いられる．
• 四原則
–
–
–
–
批判厳禁
自由奔放
質より量
結合発展


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5DEYZG167M.jpg)

(e) 情報をインタラクティブに吟味する手法(続き)
• ＫＪ法
– 川喜田二郎 「発想法」 中公新書，1967．
– 図解（俯瞰する）と文章化（ストーリーを作る）の反復による
問題の探索・解決スパイラル
図解
文章化
1. アイデアの紙片を集積
2. グループ化
3. 空間配置
（図版は川喜田二郎「続・発想法」より）
まとまった文章を種として，
発展的に問題を探索


# Page. 15

![Page Image](https://bcdn.docswell.com/page/2VJN3GQ1J8.jpg)

(e) 情報をインタラクティブに吟味する手法(続き)
• マインドマップ（トニー・ブザン，1970年代～）
– 放射型の図解・作図法
– 作図の気軽さ，美的な側面を（他の諸手法よりも）重視する
本演習シリーズの準備に用
いたマインドマップ．
話題の全体像を作図後，番
号を振って講義スライドのプ
ロットを計画している．


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GYE99WDYE3.jpg)

ズーミング
• 情報を複数の視点から吟味可能とするために，着目
点（フォーカス）を自由に操作可能とするための計算
機科学的な手法
• 詳細化手法による分類
– 物理的ズーミング
– 論理的ズーミング
• 再配置手法による分類
– 線形ズーミング
– 非線形ズーミング


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5GE89N3K7D.jpg)

物理的ズーミング
• 要素の形状を，注目部分のみ拡大，他は極小化
– 元の形状的特徴が維持されやすい
• Fisheye Views [Furnas 1986]
（オリジナル文献の図版が直感的でないので，安西
祐一郎ら 「情報の創出とデザイン」 より引用．）


# Page. 18

![Page Image](https://bcdn.docswell.com/page/MLELWPVPJR.jpg)

論理的ズーミング
• 要素の内容を，注目部分のみ具体化，他は抽象化
– 図形↔文字のような質的な変換が行われる
• KLIEGエディタ [豊田ら 1986]
画像は豊田正史氏のページ http://www.tkl.iis.u-tokyo.ac.jp/~toyoda/ より


# Page. 19

![Page Image](https://bcdn.docswell.com/page/54JM94G2EW.jpg)

線形ズーミング
• 一次式で表される直線的な（地図のような）拡大縮小
• 要素間の上下左右の位置関係は保存
• Pad [Perlin ら 1993]， Pad++ [Bederson ら 1994]
– Padを用いたWebナビゲーション
http://mrl.nyu.edu/~perlin/zoom/SiteTour.html
– 写真整理への応用
http://www.cs.umd.edu/hcil/photomesa/
Pad++を用いたディレクトリ表現
（図版は論文より）


# Page. 20

![Page Image](https://bcdn.docswell.com/page/ZPJRGWZ5E9.jpg)

非線形ズーミング
• 大量の情報を効率よく並べるため，歪み配置を行う
– 三角関数，双曲線関数などが用いられる
• Focus + Context アプローチ
– 歪み配置によって効率よくフォーカスを作り出すと同時に，
コンテキスト（要素間の結合や全体的な位置関係）も維持
する
– 前述のFisheye Views
– Hyperbolic Tree [Lampingら 1995]
• Inxight社によるデモ
http://www.inxight.com/VizServerDemos/demo/nasa/index.html


# Page. 21

![Page Image](https://bcdn.docswell.com/page/NPEXXP9XEX.jpg)

ズーミングの適用
• 対象領域にあわせて，物理的-論理的，線形非線形を組み合わせ
• PositLogは物理的-線形ズーミング
– 図や絵のレイアウトを重視するため


# Page. 22

![Page Image](https://bcdn.docswell.com/page/63EKWDP9ED.jpg)

その他，応用例
tafiti
• 美的な訴えかけ
– 元は単なるリスト
•
論理的ズーミング
– スライダで枝刈り
– タイトルにマウスを合わせると内
容概要を表示
•
受動的視聴
– ゆるやかに回転する
Microsoftのサーチエンジンフロントエンド実験
http://www.tafiti.com/


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4L731RX9J5.jpg)

講義シリーズのまとめ
Webインタラクションの技術と思想
Web上での知的活動は，人と計算機が互いに歩み寄りながら加速度的
に発展している
•
人と計算機にとって取り扱いやすい情報の表現形式
– HTML, CSS, XML, Semantic Web
– タグ
•
計算機がことばを取り扱う方法
– JavaScript, 正規表現，形態素解析，tf-idf
•
計算機が人の意図や言葉をとらえる方法
– タグ，Page Rank, コミュニケーションモデル，日常活動のモデル
•
グループで作業するための枠組み（CSCW）
– 基盤となる情報ネットワーク（TCP/IP）
– Wiki, グループウェア
•
計算機に支援された情報可視化


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V87DXY28EG.jpg)

実世界の情報とWebの情報
• 実世界の知識のうち，Webで手に入るものはごくわずかであ
る
• 個人が見て，聞いて，操作した経験，没入した体験，体得され
たノウハウをWebに載せるには？
– あるいはWebを超えるような人工システムが必要？
↓
体験メディア／ライフログ


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4VJPP61WJ8.jpg)

日常記憶
• 我々は体験のなかに生きる
– あまり意識はしていないくとも，日常生活において記憶されるエピ
ソードは，量的にも質的にも多大
• 記憶障害と認知症への対処
– 安田清（千葉労災病院/ATR）
– http://homepage3.nifty.com/yasudakiyoshi/stage001/stage_001.htm


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L2EV23Y9EQ.jpg)

体験を記録する（１）
• Forget-me-not [Lamming 1994]
– 日常記憶支援
• （オフィスを主な対象として）誰とどこで会って何をしたか？
• ハンドヘルドデバイスにログを記録．閲覧，検索可能．
– http://lamming.com/mik/
– ムービーも参照


# Page. 27

![Page Image](https://bcdn.docswell.com/page/Z57GR394EL.jpg)

体験を記録する（２）
• 加速度センサや生理的データ（皮膚電位の変化）な
どの低次のデータから人の意図や行動の高次のパ
ターンを発見，映像などと共に記録
– 前回のアウェアネスの話も参照
マイクと加速度センサを用い
た会議の状況認識
[Nicky Kern 2002]


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V4EQV5WRJP.jpg)

体験を記録する（３）
• AT（Attentive Townvehicle） [長尾 2004]
–
–
–
–
個人用移動体と体験記録・行動支援システムを一体化
http://www.nagao.nuie.nagoya-u.ac.jp/projects/at.xml
個人化，記録，追従，ナビゲーション
ムービーも参照
AT9号機．写真は http://blog.nagao.nuie.nagoyau.ac.jp/nagao/archives/2007/09/atwii.html より


# Page. 29

![Page Image](https://bcdn.docswell.com/page/DKJ4M9KQE1.jpg)

体験を記録する（４）
• もの探し支援インタフェースにおける機能とデ
ザインの両立 [河野 2006]
– 腰部装着カメラによる把持物撮影
– http://www.hcilab.jp/~kono/Research/AugmentedMemo
ry/index.html
– ビデオも参照


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PLE18KXL7G.jpg)

体験を記録する（５）
• PhotoChat [伊藤，角 2006]
– 写真と手描きをリアルタイムでやりとりすることによる，現場的な体験
の共有
• 博物館，展示会，野外活動など利用
– http://www.ii.ist.i.kyoto-u.ac.jp/~ito/photochat/photochat.html
– ムービーも参照


# Page. 31

![Page Image](https://bcdn.docswell.com/page/8GEWZDNQE2.jpg)

体験を記録する（６）
• 会話量子化器 [久保田，齊藤 2007]
– 会話をその場で記録するためのボタンデバイス
• 意図した範囲を記録するにはどうすればよいか？
• 過去へ遡及して記録開始・終了可能
– http://www.interactionipsj.org/archives/paper2007/aural/0037/index.html
– ムービーも参照


# Page. 32

![Page Image](https://bcdn.docswell.com/page/W47Z1G33J3.jpg)

体験を再生，想起する
• 思い出ビデオ[桑原ら 2005]
「思い出ビデオ」
ATRロボティクス研究所


# Page. 33

![Page Image](https://bcdn.docswell.com/page/KYJ6LYXZEV.jpg)

体験を再生，想起する（２）
• 情報可視化とも深く関わる
漫画技法を用いた体験映像要約
[小関, 角 2005]
カレンダーを用いた写真・テキスト
管理 [中村 2006]
http://calendar2.org/


# Page. 34

![Page Image](https://bcdn.docswell.com/page/5GJ51GX974.jpg)

課題：情報の可視化
• 最終報告会のための発表資料をPowerPointで作成
する
–
–
–
–
中間報告会での発表を最後までまとめてください
PositLogでの議論の内容を反映させてください
図表も積極的に活用してください
〆切は1/7（月）17：00
• 最終報告会
– 1月8日（火）
– 持ち時間は一人最大20分で，うち15分を発表，5分をディ
スカッションの時間とします


# Page. 35

![Page Image](https://bcdn.docswell.com/page/V9E21YX5JR.jpg)

参考文献
• 杉山公造 「グラフ自動描画法とその応用」 コロナ社，
1993．
• 安西祐一郎ら 「情報の創出とデザイン」 岩波講座マ
ルチメディア情報学，岩波書店，2000．
• 遠藤功 「見える化」 東洋経済新報社，2005．
• 川喜田二郎 「発想法」 中公新書，1967．
– KJ法の教科書
• トニー・ブザン 「ザ・マインドマップ」 ダイヤモンド社，
2005．


