Infographics Workshop 2015.02.18 at digitalhollywood

Info-Graphics Workshop Copyright © Akio Yonekura

インフォグラフィックス・ワークショップ

InfoGraphics Workshop

　米倉明男


米倉明男　Akio Yonekura

AOLのアートディレクターとしてWebアプリケーションのUI設計を担当したのち2007年独立。

フリーランスとして多くの企業Webサイトやアプリケーションのコンサルティング、デザイン設計、

プログラミングを手掛ける。

日本グラフィックデザイナー協会（JAGDA）正会員

和光大学芸術学科、デジタルハリウッド非常勤講師

http://neuegrafik.jp

profile


1.　インフォグラフィックの考え方2.　インフォグラフィックの作り方

schedule


インフォグラフィックの考え方インフォグラフィックとは

インフォグラフィックの考え方


インフォグラフィックとは

インフォグラフィックとは、ダイアグラムと呼ばれた整理された図表類を表す。

情報を的確に構造化して時にはユーモアを添えて表現を行う。

視覚化された客観的な根拠によってコンセプトやメッセージが伝わりやすくなる。



インフォグラフィックスのポータルサイト

visual.lyhttp://visual.ly/

Good / infographicshttp://www.good.is/infographics

infogra.mehttp://infogra.me/

参照：「ツタグラ」　http://www.tsutagra.go.jp/about

ダイアグラムイラストを用いて図解説明する

グラフ数値で比較や変化を表す

チャート図形で相互の関係を説明する

地図位置関係を表す

表情報を縦軸横軸で区分する

ピクトグラム象形で意味を表す



インフォグラフィックスの種類

参照：「polar area diagram」　Florence Nightingalehttp://upload.wikimedia.org/wikipedia/commons/1/17/Nightingale-mortality.jpg



インフォグラフィックスの歴史　鶏頭図

フローレンス・ナイチンゲール作

クリミア戦争での兵士の死亡原因を円グラフ化した。

鶏のトサカの様に見えるので鶏頭図と呼ばれている

参照：「Napoleon's invasion of Russia」　Charles Minardhttp://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png

ナポレオンのロシア遠征のインフォグラフィック遠征のルートと気温、兵士の減少を図表化している



インフォグラフィックスの歴史　ナポレオンのモスクワ進軍

参照：「Otl Aicher and the 1972 Munich Olympics」　http://www.1972municholympics.co.uk/

ドイツ人のグラフィックデザイナー、オトル・アイヒャーがオリンピックにピクトグラムを導入したことで、公共標識として広まった。



インフォグラフィックスの歴史　ミュンヘン・オリンピック　サインシステム

http://visual.ly/fiction-reality-timeline

米国の通信会社AT&Tが公開した、テクノロジーの技術進歩を映画の世界と現実の間で年表でつないだチャート図



THE FICTION TO REALITY TIMELINE

http://infogra.me/list/10060

アイドルグループ「モーニング娘。」のメンバーを加入時年齢と期間をチャート図化した。



一目で分かる　モーニング娘。

http://b-u-i-l-d.tumblr.com/image/43574973775

イギリス人グラフィックデザイナーのマイケル.C .プレイスの個人作品。進化するメディアフォーマットに対して、捨てられていく旧フォーマットを悔むコンセプト。



Build : RIP Dead Format Series

http://evolutionofweb.appspot.com/

Googleが公開したWebブラウザとインターネット技術・言語の進化を表したインタラクティブな年表



The evolution of the web - ウェブの進化

http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/index.html

音楽ジャンルの進化と、始まった地域を表したインタラクティブな経過年表。



The Evolution of Western Dance Music!

https://www.youtube.com/watch?v=ystkKXzt9Wk

メディア・アーティストのアーロン・コブリンが米国の航空経路をProcessingを使ってインタラクティブに表現した。



Aaron koblin :Flight Patterns

https://www.youtube.com/watch?v=9E9vRNgxTLw

真鍋大度氏率いるライゾマティクスが東京都現代美術館で公開した証券取引データをビジュアライズした作品。



traders by Rhizomatiks

http://www.moving-picture.com/work/the-color-project-at-ifp-media-center

MPC New YorkがニューヨークのIFPメディアセンターで公開した作品。Google Earthを色解析して、ビジュアライズしている。



The Color Project at IFP Media Center by MPC New York

http://www.oreilly.co.jp/books/9784873115047/



ビューティフルビジュアライゼーション


インフォグラフィックの作り方　情報を視覚化するプロセス

インフォグラフィックスの作り方　～情報を視覚化するプロセス


インターフェイスとしてのインフォグラフィックス

地図やマニュアルの様に、ユーザーへの指示や状況の説明をサポートする使う人が間違わずに行動へと移すことができるよう、機能性が重視されるなるべく要素を削って必要最小限に絞る

Chart （チャート） Map（地図）

物事の変化や手順を因果関係にそって系統的に整理したもの

位置関係や部位を写し取る



コンテンツとしてのインフォグラフィックス

グラフやチャートのように、事実やデータを組み立て直して主題を楽しく伝えるもの情報伝達にプラスして、見る人に驚きや新鮮さといった興味をひくグラフィカルな表現情報の構造の組み替えや、複数の情報を組み合わせることで斬新な視点が生まれる

情報・データを読み解く

図表化する

思ったこと、気が付いたことを洗い出す

伝えたいメッセージを絞り、コンセプトをまとめる

視覚化したアイデアのラフを描く

ふ～んなるほど

1 2

345



インフォグラフィックスを考えるプロセス

Why なぜ？これを伝えるのか　問題を提起する

Who 誰に向けてのメッセージか　ターゲットを明確にする

When,Where いつどこで、（どんなシチュエーションで）見るのか

What ターゲットに何を期待するのか　ユーザーシナリオ

How どのようにして目的を達成するためのアイデアや表現方法

5W1Hの手法でコンセプトをまとめる



3 コンセプトをまとめる

情報の組織化情報の構造化

情報の収集情報の設計情報の理解情報の再構築情報の整理・分類

情報の構造化



情報の組織化と構造化の流れ

Location 位置による組織化

Alphabet　アルファベットによる組織化

Time 時間による組織化

Category　分野による組織化

Hierarchy 階層による組織化

リチャードワーマンによる情報を組織化する定義

情報を詰め込み過ぎると機能としての多様性は実現できるが、逆にユーザーを迷わす原因ともなる本来の目的をシンプルに達成させるための排除や取捨選択も考慮する必要がある



LATCH法とは

Attractive 見る人の目と心を惹き付ける

Flow 目の流れに沿う　（情報に流れがあり見る人を着地点に導く）

Clear 伝えたい情報を明確にする

Simple 必要な情報だけに簡略化する

Wordless 文字がなくても理解させる



デザインのポイント

グループ外メンバーへのプレゼンテーション

コンセプトやメッセージの方向性が間違っていないか、また倫理的に正しいかどうかの客観的な視点が必要

伝えたいメッセージを絞り、コンセプトをまとめる

視覚化したアイデアのラフを描く

34



3.5 客観性の必要


ケーススタディ

キャッチコピー

ポスタータイトル

インフォグラフィックス

参照：「海ゴミの出所を特定、1位は中国」http://nationalgeographic.jp/nng/article/20150216/435668/



1位　中国　8.8万トン

2位　インドネシア　3.2万トン

3位　フィリピン　1.9万トン

4位　ベトナム　1.8万トン

5位　スリランカ　1.0万トン

6位　エジプト　1.6万トン

7位　マレーシア　0.9万トン

7位　ナイジェリア　0.9万トン

9位　バングラデシュ　0.8万トン

：

20位　アメリカ合衆国　0.3万トン

海洋プラスチックゴミの主な出所

参照：「海ゴミの出所を特定、1位は中国」http://nationalgeographic.jp/nng/article/20150216/435668/



「2010年の時点で沿岸諸国から流れ出たプラスチックゴミの量は800万トンにのぼる」

「10年後にはこの量が10倍に膨れ上がるという」

「世界中の海岸線に沿って約30センチごとにスーパーのビニール袋五つ分のゴミが並んでいるようなものだ」

「深海や北極圏の氷の中からも見つかっている。約700種の海洋生物の体内に取り込まれ、悲惨な事態を招いている。」

海洋プラスチックゴミの主な出所

自由奔放固定観念にとらわれないために、自由な発想を歓迎する

批判禁止評価・批判はしない、思いつきでも生み出すことに集中する

質より量数を多く出す。

便乗発展他の人のアイデアに便乗して発展させる。思考を転がし続ける　

ブレインストーミング



2 思ったこと、気が付いたことを洗い出す

手描きラフを描いてください



4 視覚化したアイデアのラフを描く

参考文献

インフォグラフィックス　情報をデザインする視点と表現

情報デザインの教室

Visual.ly http://visual.ly/

Good.is http://www.good.is/infographics

ツタグラ http://www.tsutagra.go.jp/

infogra.me http://infogra.me

ビジュアルシンキング http://www.visualthinking.jp/

Carl DeTorres http://www.carldetorres.com/

Factbook http://factbook.jp/


Infographics Workshop 2015.02.18 at digitalhollywood

Design

Transcript of Infographics Workshop 2015.02.18 at digitalhollywood