1. 某通信会社アナリスト
後藤真理絵

2. インフォグラフィックス、データビジュアライゼーションとは？
information + graphics
data + visualization
データ（＝情報）を
その分野に詳しくない人にもわかる形で伝え、
思考やアクションを促すための手法の一つ

3. インフォグラフィックス、データビジュアライゼーションとは？
http://www.bowlgraphics.net/tsutagra/03/

4. インフォグラフィックス、データビジュアライゼーションとは？
http://bit.ly/174V8tA

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

6. データの可視化で使える（かもしれない）見せ方の組み合わせ
A) 量的な違いを見せる（高さ、長さ、幅、面積、数、ギャップ）
※実数で見せるか、割合で見せるか、比率、○○何個分など基準値で見せるか
B) 質的な違い（色、形、シンボル等でカテゴリーが違うことを明示）
※ピクトグラム、国旗
C) 順序を見せる（ランキング上位、下位。記号順、順番）
D) 地理的関係を見せる（地図上にマッピング）
E) 変化を見せる（時系列グラフ、年表）
F) 流れを見せる（何かのフロー、ステップを解説するもの）
G) 物事の関係を見せる（関係図、モデル図、構造図）

8. 事例
The New Yorker New York 地下鉄沿線の平均年収グラフ
http://www.newyorker.com/sandbox/business/subway.html
BBC 国家予算の削減が日常生活に与える影響
http://www.bbc.co.uk/news/10373060
New York Times オバマ政権の2013年度予算案
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=1&
New York Times Visualizationコーナー
http://www.nytimes.com/interactive/2012/12/30/multimedia/2012-the-year-in-graphics.html?_r=0
WHITE HOUSE SHAREABLES オバマ政権の政策を可視化して伝える公式サイト
http://www.whitehouse.gov/share/all
Visualizing.org(ビジュアライズ作品投稿サイト)World Bank Global Development Sprint
http://www.visualizing.org/sprint/global-development-sprint
オープンデータで「食の日本地図」 家計調査（2005 - 2012年）より
http://opendata.nikkei.co.jp/article/kakei-chosa-2005-2012/#did=1.1.1&year=2012

9. 手軽に見てみる・使ってみるために使えるサイト・ツール
共有サイト
サイト名
特徴
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
公開）機能あり

10. プログラムができるエンジニアタイプ向け
D3.js javascriptライブラリ ※下記サイトに作品事例多数掲載あり
http://d3js.org/
Google Chart Tools API
https://developers.google.com/chart/
その他のライブラリ、API等
データを可視化する 20 のツールAdd Star（日本語版）
※エンジニア向けのjavascriptライブラリ、言語紹介が豊富なブログ
http://d.hatena.ne.jp/Mariyudu/20121015/1350305219
※上記の英語元記事
http://www.netmagazine.com/features/top-20-data-visualisation-tools