【BiTT】俺のクローン作るしかなくね!?
【BiTT】俺のクローン作るしかなくね!?

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

たか

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

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

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

※この記事は、2013年9月27日に公開された記事を再編集したものです。

 

オリジナルのデザインを作りたい!

自分の手でデザインしたい実はクリエイティブなお仕事がしたい誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました!

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

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

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

ダイアグラム

イラストを用いて物事を解説する手法です。
これが理想のデザイナーワークステーションだ!?

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

チャート

相関図やフローチャート、年表などで多く使用されます。
消費社会の変遷にみる、日本の小売とレジの歴史

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

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

各国で暮らすコストがわかるインフォグラフィック!

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

グラフ

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

何が変わった!? 東京スカイツリー1周年

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

地図

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

ピクトグラム

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

what

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

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

round

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

3. 富士山の記録

4

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

4. ZIPPOの販売個数

5

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

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

6

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

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

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

visually

visually

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

infogra.me

infograme

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

KISSmetrics

kissmetrics

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

INFOGRAPHIC.JP

infographicjp

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

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

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

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

infogr.am

infogram

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

Piktochart

piktochart

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

まとめ

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

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

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

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

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

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

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

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

 
【株式会社LIGについて】

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

3 0 0 0