某通信会社アナリスト

後藤真理絵

インフォグラフィックス、データビジュアライゼーションとは？

information + graphics data + visualization データ（＝情報）を その分野に詳しくない人にもわかる形で伝え、 思考やアクションを促すための手法の一つ

http://www.bowlgraphics.net/tsutagra/03/

インフォグラフィックス、データビジュアライゼーションとは？

http://bit.ly/174V8tA

インフォグラフィックス、データビジュアライゼーションとは？

どうやって作るのか？

1. キーメッセージを決める どんなアクションを促したいかのビジョン 2. データを探す 3. キーメッセージの特性がわかるデータ加工の実施 4. キーメッセージを際立たせる情報精査 キーカラー、量的な差を見せる時の比率、カテゴリーの見直し 5. 図形やモチーフを用いたでの表現 グラフだけではなく、地図や図形・アイコンの形、大きさでも表現する

データの可視化で使える（かもしれない）見せ方の組み合わせ

A) 量的な違いを見せる（高さ、長さ、幅、面積、数、ギャップ）

B) 質的な違い（色、形、シンボル等でカテゴリーが違うことを明示）

C) 順序を見せる（ランキング上位、下位。記号順、順番）

D) 地理的関係を見せる（地図上にマッピング）

E) 変化を見せる（時系列グラフ、年表）

F) 流れを見せる（何かのフロー、ステップを解説するもの）

G) 物事の関係を見せる（関係図、モデル図、構造図）

※実数で見せるか、割合で見せるか、比率、○○何個分など基準値で見せるか

※ピクトグラム、国旗

http://www.newyorker.com/sandbox/business/subway.html The New Yorker New York 地下鉄沿線の平均年収グラフ

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=1&

New York Times オバマ政権の2013年度予算案

http://www.nytimes.com/interactive/2012/12/30/multimedia/2012-the-year-in-graphics.html?_r=0

New York Times Visualizationコーナー

http://www.bbc.co.uk/news/10373060

BBC 国家予算の削減が日常生活に与える影響

WHITE HOUSE SHAREABLES オバマ政権の政策を可視化して伝える公式サイト http://www.whitehouse.gov/share/all

オープンデータで「食の日本地図」 家計調査（2005 - 2012年）より http://opendata.nikkei.co.jp/article/kakei-chosa-2005-2012/#did=1.1.1&year=2012

Visualizing.org(ビジュアライズ作品投稿サイト)World Bank Global Development Sprint http://www.visualizing.org/sprint/global-development-sprint

事例

手軽に見てみる・使ってみるために使えるサイト・ツール

サイト名 特徴

visual.ly

★作品投稿・共有機能 一般ユーザーや企業がインフォグラフィックス作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的・動的・動画インフォグラフィックスなど多様。

infogra.me

★作品投稿・共有機能 一般ユーザーや企業がインフォグラフィックス作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的インフォグラフィックスが中心。

infographic.jp

★作品投稿・共有機能 自社制作のインフォグラフィックスを事例として掲載。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。 静的インフォグラフィックスが中心。

サイト名 特徴 その他特徴

Piktochart

★デザインツール提供 テンプレートを選択するとアイコンやピクトグラムなどの素材が提供される。 グラフ自動作成機能がある。 キャンバス上でPhotoshopのように編集して作成するためデザインの自由度は高い。 フリーミアムの形態で無料版と有料版がある。無料版は7つのテンプレートを使用することができ、有料版ではSEO対策も可能。

一般ユーザーがPiktochartで作った作品を自由に投稿できる。 FacebookやTwitterなどソーシャルメディアボタンで拡散可能。

infogr.am

★デザインツール提供 フリーミアムの形態で無料版と有料版がある。 グラフやモデル図、ワードクラウド等の図表作成に特化し、データをアップロードすると自動的に作成される。基本的に決められたパーツの並べ替えで作成するため自由度は低め。

ツールで制作した作品のPublish（Web公開）機能あり FacebookやTwitterなどソーシャルメディアボタンで拡散可能。

easel.ly

★デザインツール提供 テンプレートを選択するとアイコンやピクトグラムなどの素材が提供される。ベータ版。 グラフ自動作成機能はないため、フロー図や概念をまとめる時に最適。 キャンバス上でPhotoshopのように編集して作成するためデザインの自由度は高い。

ツールで制作した作品のPublish（Web公開）機能あり

共有サイト

デザインツール（無料版あり。ブラウザで作成可能）

プログラムができるエンジニアタイプ向け

https://developers.google.com/chart/

Google Chart Tools API

http://d3js.org/

D3.js javascriptライブラリ ※下記サイトに作品事例多数掲載あり

http://d.hatena.ne.jp/Mariyudu/20121015/1350305219

その他のライブラリ、API等 データを可視化する 20 のツールAdd Star（日本語版） ※エンジニア向けのjavascriptライブラリ、言語紹介が豊富なブログ

http://www.netmagazine.com/features/top-20-data-visualisation-tools

※上記の英語元記事