Infographics Workshop 2015.02.18 at digitalhollywood

Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックス・ワークショップ
InfoGraphics Workshop

米倉明男

米倉明男 Akio Yonekura
AOLのアートディレクターとしてWebアプリケーションのUI設計を担当したのち2007年独立。
フリーランスとして多くの企業Webサイトやアプリケーションのコンサルティング、デザイン設計、
プログラミングを手掛ける。
日本グラフィックデザイナー協会（JAGDA）正会員
和光大学芸術学科、デジタルハリウッド非常勤講師
http://neuegraﬁk.jp
profile

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

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

インフォグラフィックとは
インフォグラフィックとは、ダイアグラムと呼ばれた整理された図表類を表す。
情報を的確に構造化して時にはユーモアを添えて表現を行う。
視覚化された客観的な根拠によってコンセプトやメッセージが伝わりやすくなる。

インフォグラフィックスのポータルサイト
visual.ly
http://visual.ly/
Good / infographics
http://www.good.is/infographics
infogra.me
http://infogra.me/

参照：「ツタグラ」 http://www.tsutagra.go.jp/about
ダイアグラム
イラストを用いて図解説明する
グラフ
数値で比較や変化を表す
チャート
図形で相互の関係を説明する
地図
位置関係を表す
表
情報を縦軸横軸で区分する
ピクトグラム
象形で意味を表す
インフォグラフィックスの種類

参照：「polar area diagram」 Florence Nightingale
http://upload.wikimedia.org/wikipedia/commons/1/17/Nightingale-mortality.jpg
インフォグラフィックスの歴史鶏頭図
フローレンス・ナイチンゲール作
クリミア戦争での兵士の死亡原因
を円グラフ化した。
鶏のトサカの様に見えるので鶏頭
図と呼ばれている

参照：「Napoleon's invasion of Russia」 Charles Minard
http://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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Infographics Workshop 2015.02.18 at digitalhollywood

Similaire à Infographics Workshop 2015.02.18 at digitalhollywood (20)

Infographics Workshop 2015.02.18 at digitalhollywood