直感とビジュアライズ 西田善彦 

自己紹介 西田善彦 某IT企業でUIデザイナー＆インタラクションデベロッパーとして勤務 ! facebook: yoshihiko.nishida.54 2 /18 

The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?̲r=0 3 /18 

こんなことありませんか？ 「うーん、よくわからない、、、」 「かっこいいけど、、」 「で、どういう意味？」 「もっと直感的にしてください。」 4 /18 

ビジュアライズはデータを直感的に表現するもの 地図 位置情報にマッピングして、地域ごとの特性を把握しやすく ! 2次元のグラフ X軸とY軸に情報を割り振ることでデータの傾向を把握しやすく ! ヒートマップ 色を使ってデータの傾向を把握しやすく etc… 5 /18 

テック系企業のIPOデータの比較 • X軸：年代 • 円の色：年代 • Y軸：評価額 • 円の大きさ：評価額 The Facebook Offering: How It Compares http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html?̲r=0 6 /18 

こんなところがわかりにくい（と個人的に思う） • 同じ情報なのに別々の表現 • 年代を表すのに色を使っているが、あまりピンとこない • 透明度に意味はない？ • 評価額の単位が指数関数的なので、面積でわかりやすくしている？ データを表現する方法がもったいない 7 /18 

直感的なビジュアライズをするために データや情報には特性がある 量的、質的、連続的、カテゴリ的、LATCH・・・・ ! 表現にも特性がある 形状、大きさ、配置、色相、明度、彩度・・・ ! 表現は感覚と繋がっている 距離が近い＝関係がありそう 距離が遠い＝関係なさそう データを適切な感覚を与える表現とマッチングさせる 8 /18 

44の事例を調査 • 書籍やインターネットなどから、表現方法が異なる 44のビジュアライズの事例を収集 • 使われている表現、意味、気付きを分析 9 /18 

表現によく割り当てられる情報 次元 点・円 四角 直線 曲線 面 オブジェクト 人 サイト ジャンル 会社 役職 消費量 球 イベント 共作関係 時系列 メール関係 推移 関係 イベント間の 関係 つながり リンク 引用関係 送受信の関係 受信関係 単語 フォルダ 州 位置・配置 大きさ 長さ 太さ 円で均等配 モジュール 置 の量 時系列 影響力 着弾位置 回数 類似度 アクセス数 位置座標 時系列 部門 形状 面積 色相 グループ 分類 速度 滞在時間 人・会社 の分類 支援の強さ 差の度合い 消費量 イベントの類 情報量 似度 彩度・明度 回数 滞在時間 高い/低い 編集者 意見の近さ 送受信の間 共有量 隔 州 包含関係 地形 作業順序 州 10 /18 使用率 容量 編集量 フォルダの 関係 包含関係 当選陣営 作業内容 

表現方法が与える直感的な視点と気づき 順番 間隔 位置 距離 密度 遠近 角度 線 面 太さ 長さ 大きさ 高さ 形状 色相 色 傾斜 寒暖 彩度 トーン 明度 明暗 11 /18 連続性がある、ない 序列がある、ない 詰まっている 偏っている 関係がある、ない 近い、遠い 急速、緩やか 関係が強い、弱い 量が多い、少ない 量に差がある、ない 均等、不均等 系列・ジャンル 同じ種類か異なる種類か 高い、低い 熱い、冷たい 濃い、薄い はっきり、ぼんやり 強い、弱い 

オブジェクトの種類と気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 点・円 四角 人や物体 そのもの 対象となる オブジェクトがある 直線 つながり 時系列 連続性がある/ない 曲線 つながり 連続性がある/ない 面 形状を持ったもの 量を持ったもの 量が多い/少ない 12 /18 

点・円・四角のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 位置 座標 類似度 偏り 密/疎 大きさ 数量 影響度 多い/少ない 影響が強い/弱い 13 /18 

直線のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 座標 つながり、連続性 長さ 数量 類似度 多い/少ない 影響が強い/弱い 遠い/近い 角度 （点の位置関係？） 急速/緩やか 位置 太さ 関係値 （やりとりの回数など） 14 /18 関係が強い/弱い 

曲線のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 位置 座標 遠い／近い 曲率 （ベジェ計算?） 急速/緩やか 大きさ 関係値 （やりとりの回数など） 関係が強い/弱い 15 /18 

面のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 形状 カテゴリ 種類が同じ/種類が異なる 面積 数量 容量 多い/少ない 16 /18 

色のプロパティと気づきの関係 ビジュアル 当てはめやすいデータ ビジュアルが与える気づき 色相 ジャンル 種類が同じ/種類が異なる 明度 数量 包含関係 同系統 有効/無効 彩度 数量 包含関係 同系統 重要である/重要でない グラデー 寒暖 変化 ション 高低 偏り 17 /18 

直感的なビジュアライズのポイント • 無作為にビジュアライズしても、わかりにくいものしかできない。 ! • 各表現のプロパティと与える気づきを知ることで、 より直感的にビジュアライズすることができる（はず）。 18 /18 

ご清聴ありがとうございました。