infographics prototyping （デモはustreamにあります）

infographicsPrototyping

TOMITA Makoto��

まずは...PTAのコーナーから..

あなたはどのタイプですか?（複数回答可）

1. クリエイター（デザイナー、イラストレーター等）

2. UX UI（ユーザーインターフェース）デザイナー

3. エンジニア（プログラマー）

4. 統計の専門（データサイエンティスト）

5. インフォグラフィックスを活用したいディレクター、編集者

6. その他、インフォグラフィックスに興味があり

ダイアグラム?データビジュアライゼーション？

イラストレーション？ノーテーション?

図版?データジャーナリズム?

奇麗なグラフ?インタラクティブ?

自動的に書き出されるグラフィック?

infographics?

ビッグデータ?

様々な人々がInfographicsの制作に関わり多様な場で活用できるためには?

OttoNeurath オットーノイラート

1882-1945オーストリア

世界の表象　オットーノイラートとその時代, 武蔵野美術大学美術資料図書館 2007

OttoNeurath オットーノイラート


時は第一次世界大戦。

統制経済についての国民への啓発、教育活動を目的に

戦争経済ミュージアムが設立されノイラートは館長となった。

ノイラートは、学者や高官ではない一般の市民が

自国及び世界の状況を正しく、

そして素早く理解できるよう

インフォグラフィックスを用いた。

“

”

トランスフォーマーはいわば編集局であり、企画立案と

編集を受け持つ。データや加工以上にこの存在があって

はじめて作業が明快な方向性を帯びることになる。


八束はじめ

歴史家、統計専門家、地理学者などの「アカデミー」と

呼ばれる学術専門家、アルンツを中心とするデザイナ

ー、そしてその両者を媒介する役目を持つ「変換者：ト

ランスフォーマー」と呼ばれる専門家からなる大規模な

チームが編成された。

Designer

Engineer

Academia

Directer

infographics

データマイニング

データビジュアライゼーション

ダイナミック表現

コミュニケーション・デザイン的アプローチ統計・データ的アプローチ

技術的アプローチ

編集・戦略的アプローチ

インタラクティブ表現

視覚的方向性

企画・テーマ設定企画・テーマ設定

Datascientist

IDEA Sketch

Designer

Brush UP!

or 書き出したデータ等

自分の得意分野に合うインフォグラフィックスを作るには？

実践的に利用できるツール＆サービスとは？（DEMO付き）

デザインの手法に関しては過去のツタグラ、OpenCUイベントが参考になりますのでOpen CUのUstreamのRecorded Liveをチェック！

Today’s Theme

A

さまざまなインフォグラフィックス

インタラクティブ＆ダイナミックにデータを視覚化する

ある対象を様々なグラフを使って包括的に示す

1つのテーマに関する情報を1つの図にまとめて示す

B C

※もちろんそれぞれのコンビネーションもあります！

ちょっと強引ですが３つにわけてみました

1つのテーマに関する情報を1つの図にまとめて示すA

トリップグラフィックス > 本当に世界一高い展望台はドコ？ http://tg.tripadvisor.jp/Tower/ 2013年2月20日

Diagram

Style

http://tg.tripadvisor.jp/tea/


１つの軸を中心に複合的な視点で示す。基本の指標に複数の指標を加えることでその関係性を考えさせるグラフィックに。

比較などに有効世界、都道府県、年代別、年齢別等

新たな視点を生み出すデータを新たに算出する元のデータにはない新たなデータを算出する。


トリップグラフィックス > 本当に世界一高い展望台はドコ？ http://tg.tripadvisor.jp/Tower/ 2013年2月20日

Diagram

Style




『idea アイデア』（2007年9月号）より(元は世界大百科年鑑1973に掲載). C.C BY. SA http://f.hatena.ne.jp/elmikamino/20081027202349　 2013年2月20日

Diagram

Style

図のコードを新たに考える棒グラフや円グラフではない視覚表現（ダイアグラム的）



A 1つのテーマに関する情報を1つの図にまとめて示す

世界のママの子供の数（と一人当たりの教育費、と世帯収入etc）

For Example

世界のODAの費用とその用途

各国の医療費と平均寿命の関係

B あるテーマや対象を様々なグラフを使って包括的に示す

TECHBARGAINS > 2012 OLYMPICS INFOGRAPHIC http://www.techbargains.com/infographics/olympics 2012年2月20日

Story S

tyle



http://www.techbargains.com/infographics/olympics




テーマとストーリーが明快理解できる＞考えさせる

１つのテーマに対して様々なグラフでまとめて見せる円グラフや棒グラフなどシンプルなグラフも

Story S

tyle






イラストやピクトグラムの活用イラストが得意な人にもデータを読むのが苦手な人にも

Story S

tyle

トリップグラフィックス > 20歳の旅行スタイル http://tg.tripadvisor.jp/20/ 2013年2月20日



子育てママが外出時に困ることは？

For Example

日本のODAはどんなことをしているの？

先進国と日本のODAの違いとは？


piktochart.com

Tool & S

ervice

フリーのウェブアプリケーション

テンプレートからデザインを選択してインフォグラフィックスを制作できる

ピクトグラムなどは予め用意されておりドラッグ＆ドロップで制作することができる。

日本語にも対応

ノンデザイナーや協業プロトタイピングにも活用


The New York Times > Four Ways to Slice Obama’s 2013 Budget Proposal http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html 2012年2月20日

C

Interactive Style






The New York Times > Four Ways to Slice Obama’s 2013 Budget Proposal http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html 2012年2月20日

インタラクティブにデータを見せる俯瞰して理解できると同時に、個々のグラフにフォーカスしてデータの数値を確認したり、時系列にその変化を知ることができる。

公開されているプログラムなどを用いて図を自動的に書き出す円公開済みの視覚化のスクリプトを用いたりWEB上で提供されている視覚化ツールを用いる。

C

Interactive Style






データマイニングツールを用いてデータの特徴を把握するデータサイエンティストとの協業スタイルも。

データビジュアライゼーションのツールを用い視覚化の参考にするデータビジュアライゼーションツールに統計データをインプットして様々なグラフパターンを見てみる。

C インタラクティブ＆ダイナミックにデータを視覚化する

Interactive Style





Gapminder

Tool & S

ervice

フリーのスタンドアロンアプリケーション

すでに登録された年代別、国別の様々なデータを二軸で視覚化

時代ごとの変化をムービーで見ることができる。

Many Eyes / www-958.ibm.com

Tool & S

ervice

ビジュアライゼーションのウェブサービス。

エクセルのデータをコピー&ペースとし、視覚化のスタイルを選ぶことでダイナミックに書き出される。

timeline.verite.co

Tool & S

ervice

タイムラインで何がおこったかを見せることができるウェブサービス

データの入力はGoogle ドキュメントにタイトルやキャプション、リンク先をを入力するだけで完成

Adobe EdgeAnimate

Tool & S

ervice

インタラクティブ＆モーションコンテンツの制作ツール

タイムラインで動きの指定が可能（Flashライクな作り）

Javaのリアルタイム書き出しでモバイルへの対応も可能

Creative Cloudアカウントで無料で使える（今だけ！急げ！）

highcharts.com

Tool & S

ervice

一般的な棒グラフや円グラフの視覚化のサンプルであるが、データの俯瞰と詳細な確認の双方を確認する表現

マウスを重ねるとデータの詳細をマウスオーバーで確認ができる。

さらに、javaScriptのソースも直接編集することができる。（JsFiddleを使用）

Google Visualization API Gadget Gallery

Tool & S

ervice

グーグルドキュメントに保存したデータを視覚化するためのAPI。

自分のGoogle Docsにコピーしてすぐに使えるようになっている。もちろんデータの変更も可能。

インフォグラフィックスの制作プロセスに新しい手法？

Data Visualizaiton Program

Design

１つのデータを、様々な視覚化プログラム（公開されているJSなど）に当てはめ、検証し、ダイナミックでインタラクティブに視覚化する事例が増えるのでは。（この流れはHTMLとCSSの関係に似ていると思う）

デザイナはー書き出されたグラフィックをヒントにRe-Designすることも。

[email protected]

@tomitamakoto

mailto:[email protected]

mailto:[email protected]

infographics prototyping （デモはustreamにあります）

Documents