【完全版】インフォグラフィックとは？作成のコツやまとめサイトも

こんにちは。LIGの岩上です。

インフォグラフィックは情報やデータを視覚的に表現したい場面で用いられ、ごちゃごちゃしているものをシンプルで分かりやすくて伝えやすくまとめる手法です。デザインされたインフォグラフィックは、ある種芸術的だと思います。今回は、そんなインフォグラフィックに関してまとめてみました。

【こちらもおすすめ】
☞ 情報がわかりやすい！インフォグラフィックのまとめサイト11選
☞ 【2021】無料で商用利用可なフリーイラスト素材サイト33選
☞ 【2021】無料で商用利用可なフリーアイコン素材サイト12選

 

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

インフォグラフィックとは、情報やデータを図やイラストを用いることでわかりやすく表現することです。インフォグラフィックは情報が簡潔にまとめられているので、伝えたいことを一目で伝えることができます。電車の路線図やプレゼンの資料などで使用されることが多いです。

インフォグラフィックの種類

ダイアグラム

イラストを用いて物事を解説する手法です。

http://infogra.me/ja/list/11931

こちらは理想のデザイナーの仕事場表現したイラスト。デザイナーがどんなふうに仕事をしているか浮かんでくる人も多いのではないでしょうか。

チャート

相関図やフローチャート、年表などで多く使用されます。

http://infogra.me/ja/list/12245

小売業界の変化に合わせてレジがどう変わっていたかが一目でわかりますね。

表

身近にあるインフォグラフィックの代表です。

http://infogra.me/ja/list/10107

こちらは各国で暮らすときのコストを示した表。円の大きさで、コストがどれくらい違うのかがすぐにわかります。

グラフ

数値をわかりやすく表現するときに使用する機会が多いインフォグラフィック。仕事で利用している人は多いのではないでしょうか。

http://infogra.me/ja/list/11346

東京スカイツリーができて変わったことをグラフを交えてわかりやすく紹介しています

地図

目にすることが多い地図も実はインフォグラフィックのひとつです。

http://visual.ly/royal-residences-london

ピクトグラム

絵文字や絵単語とも呼ばれるピクトグラムもインフォグラフィックのひとつ。

http://visual.ly/global-mobile-app-usage

スマートフォンでよく使うアプリをピクトグラムを使って表現しています。

インフォグラフィックの種類についてはこちらの記事でより詳しく紹介しています。

インフォグラフィックの作成手順

インフォグラフィックの作成手順は以下の通りです。

1. 情報を集める
• 全体の流れが理解できるように集める
2. 分析・整理整頓する
• 情報の取捨選択やフォーカスする部分を決める
3. 切り口を決める
• ターゲットに一番伝わる切り口を考える
4. ピクトグラム化・図解化する
• 先ほど紹介した表現方法を用いてまとめる
5. ビジュアル表現を追加する
• 楽しく見せるためにビジュアル表現を追加する

こちらの記事ではインフォグラフィックの作成方法をより詳しく解説しています。

インフォグラフィックの作成のコツ

情報を整理してデザインを作る

集めた情報をどのようにまとめたらユーザーに伝わるのかを考えましょう。情報を整理しないままデザインを始めても、何を伝えたいのか、何を強調したいのかがわからず、結果としてあまり良くないインフォグラフィックが完成してしまいます。伝えるべき情報や強調したいことを特に押さえておきましょう。

視覚的にインパクトのある表現をする

インフォグラフィックは視覚に訴える手法なので、一目見たときに引き込まれるようなものを作りましょう。ただ、インパクトが強すぎても情報が伝わらないので、シンプルさや色使いなどに気をつけつつ作成してください。

キレイにまとめてあるインフォグラフィック例

インフォグラフィックとはどういうものなのか、サイトの例をご紹介します。試料では見たくない細かなデータも、わくわくしながら見ることができます。

1. インフォグラフィックの利用状況

http://www.slideshare.net/Slideshare/071813-slideshare-making-great-infographics2-iglh

世の中でどれだけインフォグラフィックが使われているのかが分かるグラフです。

2. ワークライフバランスに関して

http://www.slideshare.net/wrike/round-and-about-productivity

色使いがおしゃれで、見出しが目を引きます。

3. 富士山の記録

http://infogra.me/ja/list/11620

数字だけで何を伝えているのかが分かる印象的なインフォグラフィック。

4. ZIPPOの販売個数

http://infographic.jp/gallery/zippo/

zippoと国旗を組み合わせることで、世界中で愛されていることがイメージできます。

5. 1939年と2013年のバットマンの制作費比較

http://visual.ly/how-much-does-it-cost-be-batman

バッドマンの制作費を表したインフォグラフィック。

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

全然足りない！もっとインフォグラフィックのデザインを見てみたい！という方は以下のまとめサイトをご覧になると良いでしょう。

visually

http://visual.ly

インフォグラフィックだけでなくビデオやプレゼンテーションなども網羅したまとめサイトです。

infogra.me

http://infogra.me/

日本語のインフォグラフィックが豊富なサイト。いますぐ活かせそうです。

KISSmetrics

http://blog.kissmetrics.com/infographics/

会員登録をするとマーケティングガイドのPDFも見られるようです。

INFOGRAPHIC.JP

http://infographic.jp

インフォグラフィックに特化した専門サイト。

こちらの記事ではインフォグラフィックのデザインをまとめたサイトを11選紹介しています。

インフォグラフィックをつくってみよう。サービス紹介

Photoshopなど、デザインツールを使わなくても手軽にオンライン上でインフォグラフィックを作成できるツールです。ちょっと慣れが必要ですが、ぜひ試してみて下さい。

infogr.am

https://infogr.am

UIも楽しい。日本語も対応しており、グラフ、マップ、テキスト、写真、動画を組み合わせてインフォグラフィックを作ることができます。

Piktochart

http://piktochart.com

細かな設定が可能です。ただ色々な機能がありできる範囲が広い分、作るのは難しいかも……。

まとめ

インフォグラフィックの手法はサイトだけでなく、資料などにも活かせそうです。細かな数字を伝えたいときなど、特に取り入れてみると良いと思います。

インフォグラフィックの制作を支援します
制作についてのお問い合わせ

【奥深いインフォグラフィックの世界】

※ 情報がわかりやすい！インフォグラフィックのまとめサイト11選

※ 情報を素早く簡単に！初心者でも分かるインフォグラフィックスの分類

※ 図表化で整理！インフォグラフィックをスムーズに作るための手順5つ

※ ピクトグラムのデザインとアイデアを競うイベント「PICTATHON」レポート

※ ピクトグラムとは何かを学ぶ。「ピクタソン沖縄」イベントレポート

 
【株式会社LIGについて】

わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。グラフィックを高く評価された制作実績も！Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る