4kaku design

マーケティングを勉強しているWebデザイナーのノート

話題のインフォグラフィックスとその導入法 ~データ・ビジュアライゼーションの今~

WCAN AutumnでWARLD LIMITED伊藤辰也さんのセッション「WEB制作者が知っておきたい、インフォグラフィックス〜データ・ビジュアライゼーションの今〜」を聞いてきました。
データとの付き合い方が問われる現在、「見せて伝える」インフォグラフィックスの重要性とツールについてまとめます。

インフォグラフィックスって何?

文字だけでは伝えにくい情報を、直感的にわかる情報に変換する

たとえば「2005年には日本の人口のうち60歳以上の割合は26.9%でしたが、2030年には39.8%、2050年には50.4%になる見込みです」という情報も文章で書くとイマイチぴんと来ませんが、グラフで推移を見せればぐっとわかりやすくなります。(こちら
そして、混同されがちな「データビジュアライゼーション」と「インフォグラフィックス」はそれぞれ以下のように定義されています。

  • データビジュアライゼーション
    =可視化することで、データの持つ性質や価値を見いだす
  • インフォグラフィックス
    =既に性質・価値を把握しているデータを、見た人に「よりわかりやすく」伝える

インフォグラフィックスに必要なもの

  1. ユーザが欲している情報、伝えたい情報の策定
    (データの把握、仮説、ペルソナ)
  2. デザイン
    (伝えたい情報にフォーカスをあてて、コンセプトを決める)

重要なのは「数字を相対的に見せる」こと。データには値の上下で文脈が必要なので、ひとつの重要な数字をぽんと見せてもそれが高いのか低いのかわからないからです。

良質なインフォグラフィックスが集められたサイト。
Infographics & Data Visualization | Visual.ly
ツタグラ [伝わるINFOGRAPHICS]

勢いを増すデータビジュアライゼーション

データビジュアライゼーションをWebに取り入れるべき理由

  • データが取りやすくなった
  • リアルタイムでの収集・解析、非同期通信、表現技術を簡単に扱えるツールが登場

インフォグラフィックスは「見せるための情報(作品)」という性質が強いですが、データ分析の段階でも可視化する(データビジュアライゼーション)ことは性質や価値を見出す役に立ちます。SVGやCanvasなどの最新技術を用いたツールをいくつか挙げていただいたので、紹介していきます。

データビジュアライズのためのツール

D3.js

データとDOM(HTMLの構造)を関連づけ、さまざまな可視化表現を可能とする非常に柔軟性の高いライブラリ。試しに少し触ってみましたが、jQueryを触ったことがある人なら馴染みがある使い心地だと思います。
D3.js


Highcharts JS

シンプルな使い勝手で、リッチなアニメーションを伴ったチャートを作れます。
Highcharts JS


Google Charts

安定した動作で多種類なチャート生成を可能にするオンラインAPI。Googleなのでやはりマップには強いそうです。
Google Charts


Raphael

JavaScriptを使って簡単にSVG(とVML)を描画するためのライブラリ。IE6でも描画ができる模様。
Raphael


sigma.js

ネットワーク図をビジュアル化できるJavaScriptライブラリ。HTML5 Canvasベースです。
sigma.js


まとめと感想

面白いと思って作ったデータビジュアライズはお客さんにも伝わる!

デザインとプログラミングの知識ももちろん大切ですが、どういう知識を・どういう形で伝えるかのコンセプトがしっかりしていれば、ユーザーには伝えたい情報が伝わるはずです。

お客さんに見せる際にインフォグラフィックスが有効だというのは知識としてありましたが、その前段階の分析でもデータビジュアライズが活用できるというのは驚きでした。今回はJSライブラリを中心に紹介しましたが、簡単にインフォグラフィックスを利用・体験できるinfogr.amのようなWebサービスもあるので、どんどん使っていきたいところです。