infographics workshop 2015.02.18 at digitalhollywood
TRANSCRIPT
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックス・ワークショップ
InfoGraphics Workshop
米倉明男
Info-Graphics Workshop Copyright © Akio Yonekura
米倉明男 Akio Yonekura
AOLのアートディレクターとしてWebアプリケーションのUI設計を担当したのち2007年独立。
フリーランスとして多くの企業Webサイトやアプリケーションのコンサルティング、デザイン設計、
プログラミングを手掛ける。
日本グラフィックデザイナー協会(JAGDA)正会員
和光大学芸術学科、デジタルハリウッド非常勤講師
http://neuegrafik.jp
profile
Info-Graphics Workshop Copyright © Akio Yonekura
1. インフォグラフィックの考え方2. インフォグラフィックの作り方
schedule
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックの考え方 インフォグラフィックとは
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックとは
インフォグラフィックとは、ダイアグラムと呼ばれた整理された図表類を表す。
情報を的確に構造化して時にはユーモアを添えて表現を行う。
視覚化された客観的な根拠によってコンセプトやメッセージが伝わりやすくなる。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスのポータルサイト
visual.lyhttp://visual.ly/
Good / infographicshttp://www.good.is/infographics
infogra.mehttp://infogra.me/
参照:「ツタグラ」 http://www.tsutagra.go.jp/about
ダイアグラムイラストを用いて図解説明する
グラフ数値で比較や変化を表す
チャート図形で相互の関係を説明する
地図位置関係を表す
表情報を縦軸横軸で区分する
ピクトグラム象形で意味を表す
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスの種類
参照:「polar area diagram」 Florence Nightingalehttp://upload.wikimedia.org/wikipedia/commons/1/17/Nightingale-mortality.jpg
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスの歴史 鶏頭図
フローレンス・ナイチンゲール作
クリミア戦争での兵士の死亡原因を円グラフ化した。
鶏のトサカの様に見えるので鶏頭図と呼ばれている
参照:「Napoleon's invasion of Russia」 Charles Minardhttp://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png
ナポレオンのロシア遠征のインフォグラフィック遠征のルートと気温、兵士の減少を図表化している
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスの歴史 ナポレオンのモスクワ進軍
参照:「Otl Aicher and the 1972 Munich Olympics」 http://www.1972municholympics.co.uk/
ドイツ人のグラフィックデザイナー、オトル・アイヒャーがオリンピックにピクトグラムを導入したことで、公共標識として広まった。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスの歴史 ミュンヘン・オリンピック サインシステム
http://visual.ly/fiction-reality-timeline
米国の通信会社AT&Tが公開した、テクノロジーの技術進歩を映画の世界と現実の間で年表でつないだチャート図
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
THE FICTION TO REALITY TIMELINE
http://infogra.me/list/10060
アイドルグループ「モーニング娘。」のメンバーを加入時年齢と期間をチャート図化した。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
一目で分かる モーニング娘。
http://b-u-i-l-d.tumblr.com/image/43574973775
イギリス人グラフィックデザイナーのマイケル.C .プレイスの個人作品。進化するメディアフォーマットに対して、捨てられていく旧フォーマットを悔むコンセプト。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
Build : RIP Dead Format Series
http://evolutionofweb.appspot.com/
Googleが公開したWebブラウザとインターネット技術・言語の進化を表したインタラクティブな年表
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
The evolution of the web - ウェブの進化
http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/index.html
音楽ジャンルの進化と、始まった地域を表したインタラクティブな経過年表。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
The Evolution of Western Dance Music!
https://www.youtube.com/watch?v=ystkKXzt9Wk
メディア・アーティストのアーロン・コブリンが米国の航空経路をProcessingを使ってインタラクティブに表現した。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
Aaron koblin :Flight Patterns
https://www.youtube.com/watch?v=9E9vRNgxTLw
真鍋大度氏率いるライゾマティクスが東京都現代美術館で公開した証券取引データをビジュアライズした作品。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
traders by Rhizomatiks
http://www.moving-picture.com/work/the-color-project-at-ifp-media-center
MPC New YorkがニューヨークのIFPメディアセンターで公開した作品。Google Earthを色解析して、ビジュアライズしている。
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
The Color Project at IFP Media Center by MPC New York
http://www.oreilly.co.jp/books/9784873115047/
インフォグラフィックの考え方
Info-Graphics Workshop Copyright © Akio Yonekura
ビューティフルビジュアライゼーション
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックの作り方 情報を視覚化するプロセス
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
インターフェイスとしてのインフォグラフィックス
地図やマニュアルの様に、ユーザーへの指示や状況の説明をサポートする使う人が間違わずに行動へと移すことができるよう、機能性が重視されるなるべく要素を削って必要最小限に絞る
Chart (チャート) Map(地図)
物事の変化や手順を因果関係にそって系統的に整理したもの
位置関係や部位を写し取る
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
コンテンツとしてのインフォグラフィックス
グラフやチャートのように、事実やデータを組み立て直して主題を楽しく伝えるもの情報伝達にプラスして、見る人に驚きや新鮮さといった興味をひくグラフィカルな表現情報の構造の組み替えや、複数の情報を組み合わせることで斬新な視点が生まれる
情報・データを読み解く
図表化する
思ったこと、気が付いたことを洗い出す
伝えたいメッセージを絞り、コンセプトをまとめる
視覚化したアイデアのラフを描く
ふ~んなるほど
1 2
345
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
インフォグラフィックスを考えるプロセス
Why なぜ?これを伝えるのか 問題を提起する
Who 誰に向けてのメッセージか ターゲットを明確にする
When,Where いつどこで、(どんなシチュエーションで) 見るのか
What ターゲットに何を期待するのか ユーザーシナリオ
How どのようにして 目的を達成するためのアイデア や表現方法
5W1Hの手法でコンセプトをまとめる
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
3 コンセプトをまとめる
情報の組織化 情報の構造化
情報の収集 情報の設計情報の理解 情報の再構築情報の整理・分類
情報の構造化
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
情報の組織化と構造化の流れ
Location 位置による組織化
Alphabet アルファベットによる組織化
Time 時間による組織化
Category 分野による組織化
Hierarchy 階層による組織化
リチャードワーマンによる情報を組織化する定義
情報を詰め込み過ぎると機能としての多様性は実現できるが、逆にユーザーを迷わす原因ともなる本来の目的をシンプルに達成させるための排除や取捨選択も考慮する必要がある
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
LATCH法とは
Attractive 見る人の目と心を惹き付ける
Flow 目の流れに沿う (情報に流れがあり見る人を着地点に導く)
Clear 伝えたい情報を明確にする
Simple 必要な情報だけに簡略化する
Wordless 文字がなくても理解させる
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
デザインのポイント
グループ外メンバーへのプレゼンテーション
コンセプトやメッセージの方向性が間違っていないか、また倫理的に正しいかどうかの客観的な視点が必要
伝えたいメッセージを絞り、コンセプトをまとめる
視覚化したアイデアのラフを描く
34
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
3.5 客観性の必要
Info-Graphics Workshop Copyright © Akio Yonekura
ケーススタディ
キャッチコピー
ポスタータイトル
インフォグラフィックス
参照:「海ゴミの出所を特定、1位は中国」http://nationalgeographic.jp/nng/article/20150216/435668/
ケーススタディ
Info-Graphics Workshop Copyright © Akio Yonekura
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/
ケーススタディ
Info-Graphics Workshop Copyright © Akio Yonekura
「2010年の時点で沿岸諸国から流れ出たプラスチックゴミの量は800万トンにのぼる」
「10年後にはこの量が10倍に膨れ上がるという」
「世界中の海岸線に沿って約30センチごとにスーパーのビニール袋五つ分のゴミが並んでいるようなものだ」
「深海や北極圏の氷の中からも見つかっている。約700種の海洋生物の体内に取り込まれ、悲惨な事態を招いている。」
海洋プラスチックゴミの主な出所
自由奔放 固定観念にとらわれないために、自由な発想を歓迎する
批判禁止 評価・批判はしない、思いつきでも生み出すことに集中する
質より量 数を多く出す。
便乗発展 他の人のアイデアに便乗して発展させる。思考を転がし続ける
ブレインストーミング
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
2 思ったこと、気が付いたことを洗い出す
手描きラフを描いてください
インフォグラフィックスの作り方 ~情報を視覚化するプロセス
Info-Graphics Workshop Copyright © Akio Yonekura
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/
Info-Graphics Workshop Copyright © Akio Yonekura