一番選ばれているHTML5の電子カタログ

つくるを応援するブログ - INSPI

作り方・コツ

情報をわかりやすく伝える、インフォグラフィックの簡単な作り方

11274
views

先日の記事で、海外旅行のプランニングに役立つインフォグラフィックについてご紹介しました。今回は、自分でインフォグラフィックを作る簡単な方法をご紹介します。

インフォグラフィックとは、複雑な情報やデータをひと目見て理解できるようにデザインされたもの。古くは雑誌、書籍、新聞、ポスターから、最近はWebコンテンツの一つとしてもさかんに作られています。

インフォグラフィックの例を一つご紹介。
make_infograph_015
(出典:https://www.behance.net/gallery/Infographic-Facts-about-beer/2233882

シンガポールのデザイナー、Wong Sockyingさんの作品で、ビールについてのさまざまな事実をまとめたものです。

このように、ただ情報を可視化するだけでなく、グラフィックの美しさやインパクトなどで人の注意を引きつけ、最初は興味を持っていないような人にも理解してもらうという狙いがあります(ビジネスにおけるプレゼンテーションなどでインフォグラフィックを見せれば、効果が期待できそうですね)。

そのためには、情報を整理して伝えるべきポイントを明確にする「編集力」と、グラフィックデザインの「表現力」などのスキルが必要になりますが、便利なWebサービスなどを利用して、簡単にインフォグラフィックを作ることもできます。

make_infograph_002
(出典:https://infogr.am/ja/

インフォグラフィックをWeb上で作成できるサービスの一つが「infogr.am」です。機能に制限はありますが、無料でも利用できます。

make_infograph_003
(出典:https://infogr.am/ja/

有料プランに加入すれば、作成したインフォグラフィックを印刷・ダウンロードしたりできるほか、リアルタイムのデータを更新といった高度な機能も利用できます。

例えば、こんなインフォグラフィックが作成できます。

(出典:https://infogr.am/crimes_and_where_theyre_happening

どんな場所で犯罪が起きているかを犯罪タイプごとに閲覧できるインフォグラフィック。calgarysunnewsで作成・公開されています。

さっそくインフォグラフィックを作ってみましょう。
make_infograph_004

まずは、視覚化するデータを用意します。今回は、統計局品目別家計調査(2012-2014)のデータをダウンロードし、その一部のデータを使うことにします。

make_infograph_005

データを加工し、「日本の主要都市のメロンの消費量(金額ベース)」のデータにしました。メロンの消費量といえば、札幌市が一番多いと聞いていましたが、最近は水戸市が一番多いんですね。

make_infograph_006

次に、「infogr.am」で基本テンプレートを選びます。この画像にあるようなシルエットや、グラフ、チャート、表、ゲージなどさまざまな表現を選ぶことができます。

make_infograph_007

デザインテンプレートには、ツリーマップを選択。多くの都道府県を一度に表示させるのに良さそうです。

同サイトでは、エクセルや.csv形式のデータをアップロードして使用することができます(もちろん、編集画面から直接データを入力することも可能です)。

make_infograph_008

作成したデータが反映されました。
消費量の大きさとランキング順がひと目で分かりますね。

make_infograph_009

文字部分も入力しました。
このあたりの文字まわりも、有料プランにするとより詳細な書式設定などが可能になるそうです。

ただ、これだけでは情報を視覚化しただけで、インフォグラフィックと呼ぶには物足りません。そこで、メロンの写真を加えることにします。

make_infograph_010

メロンの写真を用意しました。これをアップロード。

make_infograph_011

写真が1枚あるだけで、かなり目を引くビジュアルになりましたね。

make_infograph_012

無料プランでは、インフォグラフィックの印刷やダウンロードはできませんが、Web上で共有することは可能です。埋め込みコードを取得して、自分のブログやWebサイト上に貼り付けることもできます。

作成したインフォグラフィックを埋め込みコードで貼り付けてみました。メロンの消費量、分かりやすいでしょうか?

こうした作成ツールはとても便利ですが、さらに凝った表現を求めるなら、いろんな工夫や発想が必要になりそうです。

コンセプトの段階でも、いろんな工夫ができます。
例えば、数字の大きさを「東京ドーム●個分」と、例えで表現したり、「1000円でどれだけ買える?」というように、一つの基準を決めて比較する、といった表現を使うと、「データが何を語っているか」をより分かりやすく伝えることができます。

また、視覚的な遊び心や楽しさも、インパクトを出すのに効果的です。
例えば、円グラフでデータを表すのに、こんな写真を使うのはどうでしょう?

make_infograph_013

「円」のモチーフに、円形のピザの写真を使ってみます。

make_infograph_014

ちょっと雑な造りですが、こんな見せ方ができます。単なるベタ塗りの円グラフと比べると、面白みを感じられるのではないでしょうか。

より効果的なインフォグラフィックを作るには、やはり多くの実例を見て参考にするのがよいでしょう。ぜひ、先日の旅のインフォグラフィックの記事のほか、さまざまな実例を探してみて下さい。


インスピはWebデザインとマーケティングの株式会社ルーラーが運営しています

佐藤勝

佐藤 勝Writer

ライター/編集者/何でも屋。Web、デザイン、映像、アート、観光などの記事執筆や、企業・団体のコンテンツ制作など、色々やらせていただいております。 INSPIでは、生活やビジネスに役立つものづくりの情報から、面白スポットやまちづくりまで、さまざまなテーマの記事をお届けします。
http://lamp-creative.com/

← 記事一覧