EVENT REPORT

ネットワーク時代のデータビジュアライゼーション 矢崎裕一―― World IA Day 2017 Japan(Tokyo)

【スピーカー】矢崎裕一

EVENT REPORT

ネットワーク時代のデータビジュアライゼーション 矢崎裕一―― World IA Day 2017 Japan(Tokyo)

【スピーカー】矢崎裕一

2017年2月18 日(土)、amu にて World IA Day 2017 Tokyo が開催されました。日本のローカルテーマとして、「あふれる情報に我々はどう向き合うべきか。いま、あらためて分類を問う」として、このフロー型の情報があふれる現在にどう向き合うのかが議論されました。レポート第2弾は、デザイナー/アーティストとして情報の視覚化を試みている矢崎氏から、「ネットワーク時代のデータビジュアライゼーション」をお送りします。
※このセミナーは2017年2月に行われたもののため、文中の数字やサービス構造等に関しては、最新ではない可能性がございます。

OVERVIEW

2017.02.18(土)

スピーカー:
矢崎裕一(合同会社ノーテーション)

INDEX

  1. デザイナーとなった背景と手がけたデータビジュアライゼーション
  2. データ・ビジュアライゼーションの原理
  3. ビジュアライゼーションとしての表
  4. ネットワーク
  5. あふれる情報への向き合い方
  6. 各分野の「情報」への提案

デザイナーとなった背景と手がけたデータビジュアライゼーション

矢崎:今日は「 ネットワーク時代のデータビジュアライゼーション」ということで話をさせていただきます。まず冒頭にすこしだけ自分のことを話します。
ワインの味を絵で表現した伊藤眞人さんの『ワインを聴く―テースティングの奥義を極める』(学習研究社 1990)という本が、自分がデザイナーになったきっかけです。1997年に社会人として最初に働いた、ホテルのレストランのウェイターだったときに読みました。それまで詳しくなかったお酒を勉強するために読んだのですが、すごくおもしろいなと思ったんです。これがデザイナーになった1つのきっかけでした。
編集的なこともやりたかったのですが、当時高卒だった自分では無理だと諦めてデザイナーになりました。デザイナーとして、ワークフローの川下から川上をみるというのですか、そういう立ち位置をとりたいと思って、数社を転々とし、ビジネス・アーキテクツという会社に入りました。入社したとき、2001年の初頭この会社はできて半年ぐらいでしたが、当時いくつかあった大きな Web のプロダクションの1つでした。ここでは平面構成や色彩構成よりも、どちらかというと情報アーキテクチャ(IA)やユーザインタフェース(UI)に志向性を持ってやっていました。その後、パソコン以外のデバイスの UI をデザインしたかったり、デザインとプログラミングの両方を自分でやりたかったりするのもあって独立して今に至っています。
手がけた作品を紹介します*1。

slide8_kumamonこれは、みんな大好きくまモンですね。モバイルでみていただくと、並んでいる46匹のくまモンにみつめられるという多幸感を味わうことができます。このグラフは、とても人気のあるくまモンが、熊本県以外の都道府県のサイトにどれぐらい使用されているのかを表したものです。こういった棒グラフは、実空間でみたときのように、高くそびえたったものは頂上が遠くにあるので消えてみえなくなります。
今日の IA のグローバルイベントのように、286都市で開催するオープンデータをテーマにしたイベントがあります。日本で取りまとめている方たちに頼まれてロゴのジェネレーターをつくりました。Open Date Day の頭文字 O・D・D を、ジオメトリックな、丸や三角の図形にして都市の名前と緯度・経度でアレンジをした結果、色とサイズとコンポジションが生成されます。生成されたロゴはダウンロードして使っていただくこともできます。これが、3年目にしてグローバルの方に採用されまして、サイトのデザインにも使っていただいています。

———————–
*1 参考:矢崎さんが代表社員を務める合同会社ノーテーションのポートフォリオページ http://notation.co.jp/work/
———————–

データ・ビジュアライゼーションの原理

今日は IA のイベントですが、データ・ビジュアライゼーションの簡単な原理・原則をお伝えします。なにかコンテンツがあって、それをユーザーがみるときのユーザーの状態と、対象物への知識によって、2×2でマトリックスをつくってみました。

slide12_tutaeruユーザーが対象について能動的に接しようとしていて、ある程度は知っている状態であれば、ユーザーは詳しい説明をいくらでも聞いてくれます。それ以外の場合には端的な訴求か、もしくはエンターテイメント性の高い訴求が必要になってきます。もうすこし詳しく説明すると、たとえば時間も文字数も制限がなく、伝えたいことを全部伝えるような「詳しい説明」に対して、同じことを30秒で説明する、5分で伝えるといった抽象化されたものが「端的な説明」です。データ・ビジュアライゼーションも抽象化を視覚的に行っているものといえます。IA の世界でも有名だと思うのですが、このことをデータ・ビジュアライゼーション版として書き換えてみました。

slide15_datakara左にあるのが「そのまま」の状態で、詳しい説明なので、なかなか読む気が起きなかったり、記憶に残りづらかったりします。でも視覚的に抽象化(可視化)を行うことで、情報になります。さらにそれに対してなんらかの操作を行って、自分の属性や経験に近しいところで感じられると、ある種の経験になり、長期記憶に残ったりします。それを多くの人たちが共有することで常識になっていきます。

slide16_visualization

「ビジュアライゼーション」とは、もともとはサイエンスの世界でサイエンティフィック・ビジュアライゼーションというものがありました。そして1999年ごろにスライドの右にあります、インフォメーション・ビジュアライゼーションを提唱した人がいました。サイエンティフィック・ビジュアライゼーションが、たとえば地球上のどこかの様子や宇宙の様子、もしくは生物の体の中の様子など物理的に存在しているものを可視化している一方、右は現実に存在していない抽象的な情報系統を使っていますよね。こういった現実空間に物理的に存在していない対象物を使って、抽象的に可視化したものがインフォメーション・ビジュアライゼーションだと定義する人たちが現れました。

slide17_datavisialaization現在の2017年からみると、この2つを分ける意味はあまりありません。データ・ビジュアライゼーションはサイエンティフィック・ビジュアライゼーションとインフォメーション・ビジュアライゼーションが扱う全体を統一的に扱っているからです。たとえば、右はアメリカの地図ですが、この間の大統領選挙の投票の結果を反映しているものです。地図とは今まで自然科学の成果を可視化する為に使われてきましたが、それを選挙の投票結果のようなある種の社会科学的なデータと組み合わせて表現する、かつそれがインタラクティブになる表現が出てきています。2017年においては過去に人類がいろんな領域において行ってきた可視化が、俯瞰した視点を持ちながら、コンピューターで処理できるようになりました。サイエンティフィック・ビジュアライゼーションとインフォメーション・ビジュアライゼーションを統一して可視化の技術をつくっていく、データ・ビジュアライゼーション的な世界観ができつつあります。

ビジュアライゼーションとしての表

slide20_dataでは、データをいかに可視化するのかということについてお話します。データ構造別に、分類をしてみました。上から系統樹的に分かれていきまして、左側から、表というのはいわゆるエクセルみたいなものを考えてもらえればいいと思います。真ん中にあるのは地理空間データといいまして、緯度経度を含んでいるものです。実際には業界特有の特殊なフォーマットを使っています。一番右が関係性やネットワークなどです。

slide22_data話をわかりやすくするために、表について深掘りをしていきます。同じデータのファイルだとしても、左側の表では縦のレコードに並んでいるのは都道府県別なので、これはカテゴリーのデータといえます。一方で、右側の表は、年度別にレコードが並んでいるので時系列のデータとして扱います。

slide25_chartそれを先ほど出てきたデータ構造に、そこから得たいインサイトごとに表の種類を分けてみました。表の数値データの一番下の6つです。データからどんなインサイトを得たいのか、分布状況、構成、あるいは比較、もしくは順序を知りたいのか、分類をしたいのか、時系列の変化をみたいのかによって、仮に6つの分類をしています。それぞれのインサイトに合わせて表現できるチャートがだいたい決まっていて、ここでは代表的なものを挙げます。
左に “Dimention” と書いてあって、表のフォーマットのデータの縦の切り口です。数がそれぞれのチャートにいくつ入るのかが決まっています。これをみていただくと、特殊なたくさん入るものもありますが、だいたい1〜3くらいでいっぱいになってしまうことがわかります。たとえば、総務省統計局からエクセルのファイルを落としてきて、全部をどれか1つのチャートに入れようと思っても入りきらないことがあります。
じゃあどうやって、こういったチャートを使って表現するのか。やり方はいろいろあります。あるチャートに1ディメンションなり2ディメンションなりをいれて、収まって終わりの場合や、同じチャートを何回も使うような場合もあります。あとはもっとたくさんのディメンションの入るチャートを使ったり、あるいは複数の種類のチャートを組み合わせて、1個のデータの固まりをいろんなチャートを使って表現したりというやり方もあるんじゃないかと思います。

ネットワーク

slide29_network先ほど出てきた、ツリー・チェイン・ネットワークのうちのネットワークの可視化についてお話します。これは世の中にあるチャートを分類した表です。ネットワークの可視化の中にもツリー構造を維持したまま可視化できるものも、できないものもあります。先ほど三中先生からお話も出ましたが、ネットワークの話はもともと離散数学のグラフの問題として扱うことができます。

slide31_kawa

この図の青いのが川だと思ってください。川に8つの橋がかかっていて、同じ橋を2回通らずに渡って、最初にいた位置に戻ってくることができるかどうかという、子どものような自由な発想で問いかけた人がいました。それをドイツのレオンハルト・オイラー(Leonhard Euler)が数学的に解きました。図のなにも色がないところは陸地ですが、仮に丸い点として抽象化します。橋を渡るのを線で表現します。橋を7つ渡るというのを抽象化します。では、この問いの解答です。これだと一筆書きのような感じですが、グラフの問題としていまのようなものを解いていくのが起源でした。

slide33_sosiogramこのすぐあとに、これに影響を受けてソシオグラムというものをつくった人がいました。これはある小学校の男女の人間関係を可視化したものです。計量社会学の先駆けといわれています。ネットワークは抽象化した技術なので自然学でも社会学でも扱える。最近だとデーティング・サイエンスと呼ばれるものも登場しています。日本で最近、恋愛工学と称するものが現れていますが、これは別なものかなと考えています。

slide35_networkツリーをネットワークとして使うという話で、先ほどツリーと区別しなくてもいいのではないかという話もあったのですが、その例を僕も用意していました。左の方がツリーで緑色が濃いところがルートになっていて、そこが子孫という形で広がっていってるのですが、まったく同じ構造を持つネットワークとして扱うこともできます。つまり、ネットワーク・サイエンス的にツリーは使うことができる、スタティックなツリーではなくてある種動的なツリーとして扱うこともできるんじゃないかなと思います。

あふれる情報への向き合い方

yazaki1_IMG_0985

今日のイベントのローカルテーマであった「この情報あふれる時代に我々はこれらとどう向き合っていくのか」にいくつか事例を出しながら答えていきます。
1つ目は、「定性情報を定量的に眺める」ということです。定性情報とは文字のデータです。文字のデータをそのまま眺めても全体の特徴をつかめないので、定量的に扱い、俯瞰した視点と一つひとつのディティールをみる視点をいったりきたりできるナビゲーションをつくります。俯瞰して、関係性を眺めるのです。
2つ目は「極限まで全体最適化する」ということです。9.11のツインタワーがあった場所に、犠牲になった方たちを追悼するリフレクティング・プールというものがあって、そこに犠牲者の名前が刻まれています。アルファベット順ではなく、社会的なつながりによって並び順が決められています。まず被害にあわれた場所や乗っていた飛行機別、遺族からのリクエストでだれとだれを配置してほしいというのが1,200件以上来て、これらをなるべく同時に満たすようにコンピューターを使ったという事例があります。

slide45_46_map次に「視点を変えて、見方も変える」ということの例として、富山県南砺市で8個の町と村が平成の大合併をした際に、公共施設が重複してしまい、余ってしまうことがありました。それを減らさないと年間40億の赤字が出てしまう。行政は、公共施設を減らすことについて一見合理的なルールで市民を説得しようとしました。たとえば、小学校や病院は大事なので残しましょう、公民館はあってもなくてもいいので、民間に買い取ってもらう。でなければ無くしましょう、などということです。しかし、無くなってしまう施設の近隣住民や、つくるときにかかわった人からは中々合意が得られません。なぜなら市全体にどう最適化するかということは、行政・お上の視点であって、一人ひとりの市民にとってはあまり関係のない話だからです。
では集計の仕方を変えて自分の家から車で30分で行ける範囲に公共施設はいくつあるのか、情報をフィルタリングしてあげるとどうでしょうか。これをどう市民に伝えるのかという問題はあるのですが、実は市民はこういう形でみたことはないのではないかと思います。こういう形でみて、行政の決めたルールとしてもみる。両方の見方でみると、本当の公平性が現れてくるのではないのかなと思います。

slide47_mapもう1つ、グラフィックデザイナーの杉浦康平*2が1960年代に『週刊朝日』に掲載したイラストがあります。これは東京を中心に近くの別の都市、札幌や金沢、大阪などへ移動するときにかかった時間によって地図の形が変形しています。たとえば Google マップといったものを想像してみてください。東京を Google マップでみると、たとえば隅に横浜がうつりこんでいると思うんです。今度は、横浜をみてみると東京をみたときの景色と変わらないと思うのですね。ですが杉浦康平のイラストは、自分がどこにいるのかによってそこからみえる景色がまったく違うことを示している。それはみえる景色に自分がいる場所・属性が反映されているからです。こういう形であれば、主観的なものであっても共有できるのではないかと思っています。1つ目の富山県南砺市の例では自分ごとにするためにフィルターをかけるという話と、2つ目の杉浦康平さんの話では、主観的なものの見方を共有することでほかの視点を得られるのではないかなという話でした。
「価値判断の軸を同時にたくさん持つ」ということも提案できます。去年の夏にリオデジャネイロオリンピックがありましたが、Google がこういったコンテンツをつくりました。オリンピックのメダル獲得数は、どうしても国同士の競技なので国ごとに獲得したメダルの数を競うと思いますが、Google がやっているのは仮に各国の人口あるいは GDP が同じだとしたら、この順位はどう変わるかということを示しています。人口でみていくと、バハマが頑張ったんだなというのがわかりますし、GDP でみていくと、フィジーは頑張ったといえると思います。オリンピックのメダルの結果は一緒ですが、そこに至る国ごとのスペック、人口や GDP、スポーツ人口やスポーツの施設の数といったものと掛け合わせたときに、順位はどう変わるのかということ。ここにはメダルの単純な集計が、果たして本当に正解なのかという問題提起があると思います。どれか1つが正解でそれ以外が間違いというわけではなくて、いろんな見方を同時にしたらいいんじゃないかと思います。
ここまで複数のデータの掛け合わせから、新しい指標をみつけるという話をしてきました。オリンピックのメダルの結果と、世界銀行などに代表されている各国の GDP や人口などまったく別のデータを掛け合わせることによって新しい指標・単位をつくることもできるのです。

———————–
*2 杉浦康平 1950年代からレコードジャケットや、ブックデザインなど第一線で独創的な活躍をした。また、曼陀羅をはじめとするアジアの図像研究にもとりくんでいる。
———————–

各分野の「情報」への提案

最後に国立国会図書館の話をします。ここは地下1階から地下8階まで、日本の出版物をすべて収集しているのですが、それとは別に Web サイトをクロールしているんですね。15年近くやっているのでデータがたまっています。そこから知見、なにか意味のあるものをみいだしたいと思っているのだけど、中々むずかしいということがあります。それは国立国会図書館に限ったことではなくて世界でもそうなんです。世界各国にある大きい公立の図書館も Web のアーカイブという役割を担っていて、年に1回 IIPC*3 という組織で集まり、データの活用のナレッジを共有しています。Web の世界では iPhone をはじめとしたここ10年の進化があったと思います。しかし、”archive.org” *4の人が言うに、Web のアーカイブの世界においては、中々技術的なブレイクスルーがない。”archive.org” の技術を ISOなどで標準化して、みんなでそれを使って、Web をアーカイブにしている状態なんですが、そこから情報を分類したりなにか意味を見出したりすることがあまりできていないような状況だそうです。

slide57_chart日本では図書館は日本十進分類法というやり方で分類されています。表をみると、階層の下のものをあえて2つに分けて上に繰り上げるとか、あとは医学的なものが本当は自然科学ではないのに入っていたりとか、言語の分類の仕方もこれで本当にいいのかということがあります。今の時代、もっと整備できるんじゃないかなと思います。あとは出版物だけでなく、Web サイトのような単体でもネットワークの構造を持っているし、サイト同士もネットワーク的な関係を持っているものに対してどういう情報の整備の仕方をしたらいいのかということがあるかなと思います。すこし大げさな言葉になりますが、徐々に、出版物から Web へと人類の知的な財産が移行していっていると思うので、それをいかに分類するかが今後大事になってくるんじゃないかなと思います。
というところで、最後にローカルのテーマこの情報があふれる時代に我々はどのようにこれらと向き合っていくのか」に対して以下を提案したいと思います。

yazaki2_IMG_1054

・俯瞰の視点で関係性を眺める
・膨大な組み合わせの中から人の手ではできないような全体最適を得る
・自分ごとにするためにフィルターをかける
・主観的なものの見方を共有する=多視点
・複数のデータの掛け合わせから新しい指標を
・人類の知的財産が出版物から Web に移行
以上になります。ありがとうございました。

———————–
*3 IIPC(International Internet Preservation Consortium )国際インターネット保存コンソーシアム。各国の国立図書館が連携し、インターネット情報の収集・保存・提供の技術的課題の解決をはかり、普及させていくための組織。http://netpreserve.org/

*4 archive.org (The Internet Archive)インターネット・アーカイブ。WWW・マルチメディア資料のアーカイブのひとつを運営している非営利団体。本部はサンフランシスコ。https://archive.org
———————–

(2017年2月18日@amu)

こちらの講演は以下のサイトからスライドをご覧いただけます。
Slideshare “World IA Day 2017 Tokyo Yuichi Yazaki”
Youtube 発表動画 ネットワーク時代のデータビジュアライゼーション 矢崎裕一

WIAD2017の他のレポートもあわせてお読みください。
情報過多時代の「分類」をめぐる課題――World IA Day 2017 Tokyo レポート 佐藤史
ダイアグラム思考――分類と系統の世界観 1/2 三中信宏 
ダイアグラム思考――分類と系統の世界観 2/2 三中信宏

amu

未来を編む

「編集 」「デザイン 」「学び 」 関連の記事を
もっと読む