コラム

目で見て伝える！インフォグラフィックスの魅力

2016.02.06

こんにちは！
クリエイティブ事業部デザイナーのしんぽです。

今回はインフォグラフィックスについて、頭の倉庫の一部に追加したくなる内容でお届けしたいと思ってます。
個人的にはインフォグラフィックスが好きで、普段から面白いインフォグラフィックスを見て、
テンションが上がったりしています。
視覚的に物事を伝える手法のインフォグラフィックス。その魅力をお伝えします。

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

インフォグラフィックスと突然言われても、知らない人もいるかと思いますが、インフォグラフィックスは昔から、私たちの日常のとても近い場所で活躍しています。
みなさんは人類最古のインフォグラフィックスをご存知ですか？
私も、これがそれに当たるとは思ってなかったのですが” 洞窟壁画” だそうです。

https://ja.wikipedia.org/wiki/%E6%B4%9E%E7%AA%9F%E5%A3%81%E7%94%BB
太古の記憶や物語を読み解く手がかりとして研究されている壁画。確かにインフォグラフィックスとして成り立っています。
現代のインフォグラフィックスは、情報を素早く簡単に表現したいときによく使用します。
インフォグラフィックスの基本の素材は、データや文字情報になります。
それらを目で見てわかるように表現するので、視覚的速記表現とも言われています。
インフォグラフィックスとは、インフォメーションとグラフィックスを掛け合わせた造語で、わかりにくい” 情報”
（information）を目で見てわかる” 図画”（Graphic）で表現することで、英語では” Infografics” と表記するのも頷けます。
簡単に言うと、ごちゃごちゃした情報を見るだけでわかる状態にする表現方法ですね。

どういうときに使うの？
例として、当社の17 新卒特設サイト内で使用しているインフォグラフィックスを使用して説明します。
企業の在籍数をわかりやすく伝える場合、左の文字情報で伝えるよりも、インフォグラフィックスを使用した右図のようにする
ことで、目で見てわかりやすい表現ができます。

左の文字情報よりも、右のインフォグラフィックスの方がイラストや図版を用いて、
よりわかりやすくなっていると思いませんか？
17 新卒特設サイトでは上記以外のインフォグラフィックスも使用しておりますので、是非、一度マウスをお運びください。

使うと起こる、こんな良いこと
文字だけではなく、図やイラストを使用するインフォグラフィックス。
目で見てわかるように制作するということは、こんな良いことが待っています。
・言葉の壁を乗り越えて表現できる
・老若男女問わず伝えることができる
・よりわかりやすく伝えることができる

忘れちゃいけない注意事項
インフォグラフィックスの一番の特徴「目で見てわかる」ことばかりに気をとられ、
伝えたい情報がうまく伝えられないものにならないように気をつけましょう。
「目で見てわかる」こともインフォグラフィックスでは重要ですが、伝えたいことを伝えられないものでは、本末転倒です。
伝える内容・情報を整理した上で配色にも気を配って制作しなければ意味がなくなってしまいます。

日常に入り込むインフォグラフィックス
身近にあるインフォグラフィックスの代表的な例をあげるなら、天気予報のマークがそれと呼べるでしょう。

http://www.ci-labo.com/weather/
今回は一例で上記サイトからインフォグラフィックスを拝借しましたが、どの天気予報で使われている図でも、一目でどの地域
がどんな天気なのか、目で見てわかるものに仕上がっています。

また、電車の路線図もインフォグラフィックスと言えるものの一つです。

http://www.tokyometro.jp/station/index.html
こちらも路線ごとに色分けをされ、位置も経路もわかりやすいものになっている、
インフォグラフィックスの代表例と言えます。

種類別のインフォグラフィックス
インフォグラフィックスと一様に言っても、インフォグラフィックスの中にも色々な種類があります。
ですので、種類と適所を見極めて制作する必要があります。

表
縦軸と横軸で情報を整理して見やすく表すときに良く使用します。私たちにとってもっとも身近かもしれません。

http://zenstartup.jp/2011/11/24/f-commerce-2/

グラフ
数値を見比べたり、追ったりするときにわかりやすく、算数でも習うのでこちらも身近に利用しますね。

地図
世界地図・日本地図・路線図など、多種多様ですが、実は地図も古くから利用されています。

http://aworldoftweets.frogdesign.com/

ダイアグラム
2 次元幾何学を用いて情報を整理し、制作するのでプレゼン資料などで良く見かけます。

http://www.theguardian.com/business/interactive/2009/sep/16/public-spending-larry-elliott

ピクトグラム
絵文字や絵言葉を用いて表現するので、標識などで見かける人型の記号もこれにあたります。

http://www.murera.com/starwars/

チャート
相関図・組織図・フローチャート・年表・時間など様々なものを軸に制作されます。

http://chartｰpress.com/2015/06/28/3business/

見てわかるのは当たり前、その上楽しいインフォグラフィックス
最近インフォグラフィックスへの注目度が高まってきているようにも思えるのも、
目で見てわかるだけじゃなく、楽しかったり、美しかったり、新しかったり、そんなインフォグラフィックスが増えてきているせいもあるのではないでしょうか。
そんな見ているのが楽しインフォグラフィックスを紹介します。

世界の雨の日率マップ

http://tg.tripadvisor.jp/precipitation/

世界地図の上に、雫の大きさと色で視覚的にわかりやすく、世界の雨の日率を表現しています。

また、こちらはユニークな見せ方でインフォグラフィックスを用いて、わかりやすく楽しいサイトに仕上がっています。

https://infogra.me/ja/infographics/13403

世界の歴代ヒーロー（？）たちが１００ｍ走、棒高跳び、ハンマー投げなどを競いあっています。
各ヒーローをデフォルトしたイラストを用いて、楽しくわかりやすいインフォグラフィックスに仕上がってます。

web の進化

https://evolutionofweb.appspot.com/?hl=ja

web サイトだからこそ出来る動くインフォグラフィックスです。
ブラウザやネットの成長をアニメーションで動かし、カーソルを合わせるインタラクティブな動作などもあり、グラフの表現方法も独特なインフォグラフィックスに仕上がっています。

ここで紹介したのは、ほんの一部のインフォグラフィックスです。
この他にも面白いインフォグラフィックスはたくさんあるので、気になる方は色々調べてみてください。
こんな風にシンプルでわかりやすく、視覚的にも楽しめるインフォグラフィックスを制作したいものです！

インフォグラフィックスのデザインまとめサイト

現在、世の中にはたくさんのインフォグラフィックスがありますが、
インフォグラフィックスをまとめて見れるサイトを最後に紹介したいと思います。
ユニークで面白いものからシンプルでわかりやすいものまで、その目で確かめてください。

infogra.me
世界最大のインフォグラフィックスコミュニケーションプラットフォーム。

https://infogra.me/

infographic.jp
インフォグラフィックス作成サービスの紹介サイト。インフォグラフィックスの作品ポートフォリオも多数掲載。

http://infographic.jp/

ぐるなび

グルメのインフォグラフィックスギャラリー。流石、グルメサイトです。

http://www.gnavi.co.jp/g-infographic/

ソニー損保
ソニー損保ならではのインフォグラフィックスギャラリー。車に関する色々をインフォグラフィックスでわかりやすくしています。

http://www.sonysonpo.co.jp/infographic/

HOME’ S

これもホームズならではの暮らしや家に関するインフォグラフィックスギャラリー。

http://www.homes.co.jp/contents/infographic/