Webデザイン インフォグラフィック

おすすめ書籍：インフォグラフィック入門

こんにちは、不憫系デザイナーの小林です…

残業は良くないです！時間をかけたからといっていいものができるとは限らないですからね…。
今年の残りは、この体質の改善を最大目標にして頑張ります。

さて先日、こちらの本を書店で見かけそのまま即買いしてしまいました。

01

たのしいインフォグラフィック入門[ペーパーバック]（櫻田 潤 ：著 ）

案件の中でも、エクセルで渡されたデータをグラフ化したり、情報を視覚的にみせることを求められることが多々あります。
でもイマイチ効果的な作り方がわからないこともあります…。
僕も結構、適当というか、他のサイトとかを参考にして作ったりが多く、しっかりと基本を学んでいなかったのですが、この本はそんなデザイナーや、プレゼン資料を作成するプランナーの方などにも役立つ情報が満載でした。
さすが視覚表現の本だけあって、中身もピクトグラムが多用され大変見やすく理解しやすい内容でした。

この本の内容を踏まえつつ、ざっくりとインフォグラフィックについてご紹介したいと思います。より興味を抱いた方は本書をご覧頂ければと思います。

そもそもインフォグラフィックとは？

インフォグラフィック（英語: infographics）は、情報、データ、知識を視覚的に表現したものである。
インフォグラフィックは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。
また、計算機科学や数学、統計学においても、概念的情報を分かりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。

wikipediaより抜粋

つまり、情報をわかりやすく、視覚的に伝えるものです。これにより、言葉だけでは不十分なコミュニケーションを補うことができます。
また場合によっては、国が違い言葉が通じなくても理解できるものもあります。

百聞は一見に如かず。インフォグラフィックの事例を見てみましょう。

02

http://tg.tripadvisor.jp/chocolate/　より

↑こちらはチョコレートの1片を1kgとして、1人あたりのチョコレート年間消費量ベスト20カ国を紹介しています。
ピクトグラムやグラフを用いたり、いろんなフォントで遊んだり、チョコミントの配色だったりと、見ていて楽しいとても魅力あふれるインフォグラフィックです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

03

http://www.visualthinking.jp/archives/5603（たのしいインフォグラフィック入門：著者サイトより）

↑関ヶ原の戦いの兵力ツリーマップです。シンプルな角丸の組み合わせですが、西軍・東軍の力関係がよ～く分かります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

04

http://sandiegosurfingschool.com/how-big-was-the-biggest-wave-ever-surfed/　より

↑これまでどれくらいの高さの波がサーフィンされたのか、他のスポーツ競技のジャンプと比較したインフォグラフィックです。
自由の女神が効いていますね…。生身（というか水着？）一丁で100フィート （=30.48 メートル）って…

なぜインフォグラフィックが注目されているのか

元々インフォグラフィックは雑誌や教科書など紙媒体でもありましたが、
近年注目されるようになった背景にはWEBが大きく絡んでいます。

SNSの共有の仕組み、検索エンジンの画像検索、それらがインフォグラフィックの価値を高めたようです。
1つの画像データの中に複合的な情報をまとめられるため画像だけで拡散するそれらの情報伝達に適しているためです。

そして、そこに目をつけた団体や企業がPRのため用い始めています。
ベンチャー企業などが自社の仕組みをインフォグラフィック化してものを見かけることができます。

このようにオンライン上で共有（シェア）されることを前提にしたインフォグラフィックが、今や時代の潮流のようです。

インフォグラフィック制作に必要な3つの能力

先に挙げたインフォグラフィックを見るとどれもデザイン性に優れています。
なのでデザイン能力が求められますが、それだけでは足りません。

複雑な情報を取捨選択する解析能力、そしてその解析結果をどのようなストーリーで伝えるか決める編集能力。

以上の3つの能力がインフォグラフィック制作の基本能力と、本書は述べています。

インフォグラフィックの5つの条件

  1. 意味のある視覚要素を用いること
  2. 簡潔で親しみやすく分かりやすいこと
  3. インパクトを与え、目を引くこと
  4. 内容に価値があり、資料として保存しておきたいこと
  5. 見た人に考えるキッカケを与えること

インフォグラフィックはデザインの一環なので、やはり見た人に何かしら与えるコミュニケーションとして成り立たなくてはなりません。

インフォグラフィックの題材

2012 アメリカ大統領選挙│Connect USA

↑http://connectusa.jp/election2012/より。候補者・政党の考え方の違い、大統領決定までの道のりがまとめられています。

著者のサイト：http://www.visualthinking.jp/や、海外インフォグラフィック共有サイト：visual.ly、visualizing.orgをみると様々なジャンルのものを見ることができます。
おもなものとしては

  • 旬な話題　（オリンピックや選挙など、時事的な内容）
  • ハウツー　（ワインの選び方など、「どうやって？」に応える内容）
  • 結果レポート　（製品・サービスの利用実態、SNSの利用結果など、実態を明らかにする内容）
  • 比較検証　（政党の考え方、血液型による性格の比較など、2つ以上のことを徹底比較する内容）
  • 時の経過　（インターネットの歴史など、時間軸に沿って経過をたどる内容）
  • 専門解説　（火力発電の仕組みなど、専門的知識が必要な内容）
  • 早見表　（Photoshopのショートカットキーなど、便利な早見表として利用できる内容）
  • まとめ一覧　（過ごしやすい国のまとめなど、一覧化することで価値が生まれる内容）

が挙げられています。

インフォグラフィックの代表的デザインパターン

periodic-table-of-alcohol_52125c3245a7d

↑http://visual.ly/periodic-table-alcoholより。お酒のジャンル、種類を表組みでわかりやすくまとめています。

デザイナーにはありがたい、主なデザインパターンが、分かりやすい事例つきで枚挙されていました。

  • テーブル型（表）　（2つ以上の対象を、複数の基準で比較するのに適している）
  • ボリューム型　（数値（量）の比較するのに適している）
  • リレーション型　（物事の関係性を明らかにするのに適している）
  • マップ型　（地理的な特性の違いを地図を使用して明らかにするのに適している）
  • タイムライン型　（時の流れに沿って、経過をまとめるのに適している）
  • ミックス型　（上記のパターンを組み合わせた例）

その他

上記以外に、分かりやすい制作フローや、インフォグラフィックに手をつける前の段階として
ピクトグラム編、図解編といった段階で分かれているので、まさに初心者にうってつけの入門書となっています。
何かインフォグラフィックを作ってみたい！と制作意欲をかき立てられる内容で、買って良かったです。

念のため言っておくとステマではありません。

アクトゼロではただいま「Webデザイナー」の採用活動を行っています。

2013/08/20～2013/09/02　の期間限定となっております。
新卒・中途は問いませんので、ぜひぜひお気軽にご連絡ください。

関連記事