インフォグラフィックとは？意味・具体例・図解との違いを解説

「インフォグラフィック」と聞くと、どんなデザインを思い浮かべますか？

数字をグラフにしたり、手順を図と矢印でつないだり。身近なところにも、情報を目で見て伝える工夫が使われています。

インフォグラフィックとは？意味と図解との違い

インフォグラフィックとは、情報やデータを図・グラフ・イラストなどで視覚的に伝える表現です。

Information（情報）とGraphic（図や画像）を組み合わせた言葉で、複雑な情報をわかりやすく伝えるために使われます。

下図のようにグラフやアイコンを組み合わせて一枚にまとめたものは全体を見渡しながら、気になる情報を読み取れます。

「インフォグラフィック形式でまとめる」というときも、こうした図やグラフを使って情報を見せることを指します。

インフォグラフィックと図解の違い

図解は、ものごとの関係や仕組みを図で説明すること。インフォグラフィックも同じ目的を持ち、図解やグラフを含む広い意味で使われます。

両者は重なる部分が大きく、イラストの有無だけで分けられるものではありません。

下図のように、図解にアイコンやイラストを組み合わせるのも作り方のひとつです。

図形だけで示すより、何を表しているのかをイメージしやすくできます。見た目の工夫を、情報の伝わりやすさにつなげることが大切です。

会議の内容を図や絵で記録する「グラフィックレコーディング」も、情報を視覚的に整理する手法のひとつです。

「インフォグラフィックス」との違い
英語ではinfographicが単数形、infographicsが複数形です。日本語では、どちらの呼び方も使われています。

インフォグラフィックの種類と身近な例

インフォグラフィックの見せ方は、何を伝えたいかによって変わります。代表的な例を見てみましょう。

見せ方	伝えたい内容	身近な例
比較	違い・共通点	商品やサービスの比較
割合	全体に占める内訳	アンケート結果
時系列	時間による変化	年表・売上の推移
手順・流れ	作業の順番	申し込みから利用開始まで
地図	場所や地域の特徴	施設案内・地域別データ

標識・地図・グラフも身近な視覚表現

施設の標識では、ピクトグラムでトイレや出口などを示しています。文字を読まなくても、場所や用途が伝わる工夫ですね。

地図では、建物の位置や道のつながりを見せられます。文章で道順を説明するより、全体の位置関係をつかみやすくなります。

株価などの数値も、グラフにすると上がった時期や下がった時期を見つけやすくなります。

地図と統計データを組み合わせる

複数の見せ方を組み合わせることもできます。例えば、地図に統計データを重ねたものです。

地域名と数字の一覧にするだけでなく、場所と数値の違いを一緒に示せるのが特徴です。

人口や観光客数など、地域ごとの特徴を伝えたいときに向いています。

同じ情報でもテイストを変えられる

インフォグラフィックは、同じ内容でもさまざまなテイストで表現できます。

仕事の資料なら簡潔な図形、子ども向けの教材なら親しみやすいイラストなど、読む人に合わせて見せ方を選べます。

絵を上手に描くことだけが大切なわけではありません。何を目立たせ、どの順番で見てもらうかもデザインのポイントです。

インフォグラフィックを使うメリット

情報を視覚化すると、全体のつながりや数値の違いを伝えやすくなります。

全体のつながりを一緒に見られる

個々の項目だけでなく、全体の構成や要素のつながりを見せられます。

「木を見て森を見ず」ということわざがありますが、インフォグラフィックなら全体の「森」から見渡せます。

全体像をつかんでから細かな説明を読むと、いま読んでいる内容がどの部分に当たるかもわかりやすくなります。

違いや流れを比べやすくなる

数字を棒の長さで比べたり、矢印で手順をつないだり。情報に合う図を選ぶことで、注目してほしい違いや順序を示せます。

割合を見せたいなら円グラフ、時間による変化なら折れ線グラフなど、伝えたい内容から表現を選ぶのが基本です。

短い見出しや数値ラベルを添えると、何についての図なのかも伝わります。

要点をまとめて伝えたり共有したりできる

図に要点をまとめると、本文を読み込む前に概要を見せられます。当ブログでも、説明の全体像を伝えるために図解を使っています。

また、要点を一枚にまとめれば、SNSやプレゼン資料でも同じ内容を共有できます。

画像だけで見ても内容が伝わるように、テーマ・主要な数字・短い説明を入れておきましょう。

インフォグラフィックの作り方と使えるツール

作成の流れは、目的を決めてから情報を集め、見せ方を考えて仕上げるという順番です。

目的を決めてからデザインする5つの工程

ここでは、架空のアンケート結果「Aが50％、Bが30％、Cが20％」を例に、作り方を見ていきます。

数字の差を見た目で誇張しない

アイコンの大きさで量を示す場合は、縦横の倍率に注意が必要です。

並べ方・拡大方法	面積
同じアイコンを2個並べる	合計で2倍
アイコンの幅と高さをそれぞれ2倍にする	4倍

2倍の量を示したいなら、同じ大きさのアイコンを2個並べるとわかりやすくなります。数字は2倍なのに、見た目は4倍にならないようにしましょう。

配置・配色・文字の見せ方を学ぶなら、デザインの基本も参考にしてみてください。

細かな形や配置まで作り込むならIllustrator

パーツの形や配置まで自分で作り込みたい人には、Adobe Illustratorがおすすめです。

ベクター素材なら、アイコンやピクトグラムをパーツ単位で編集できます。色をそろえたり、形を変えたり、別のパーツと組み合わせたりできるのが利点です。

自分で作成した図形や文字と組み合わせ、細部まで統一したデザインに仕上げられます。

導入費用については、Illustratorの料金プランと購入方法をご覧ください。

テンプレートや使い慣れたソフトでも作れる

テンプレートから作りたい人や、普段の資料に図を加えたい人は、次のツールも使えます。

ツール	向いている作り方
Adobe Express	テンプレートの文字・色・素材を変更する
Canva	テンプレートに図表やアイコンを組み合わせる
PowerPoint	スライド内で図形・グラフ・SmartArtを使う

Adobe ExpressとCanvaは無料プランでも作成できます。無料のテンプレートや素材を選べば、費用をかけずに始められます。

テンプレートからの作成方法は、Adobe Expressの使い方で詳しく解説しています。Canvaにもインフォグラフィック用の作成ツールがあります。

PowerPointでは、図形やグラフに加えて、手順や関係を図にできるSmartArtが使えます。プレゼン資料と一緒に編集したい人に向いています。

素材サイトのアイコンやピクトグラムを使う

アイコンをすべて自作するのは大変ですよね。素材サイトのパーツを使うと、図に必要な要素をそろえやすくなります。

Adobe Stockには、写真だけでなくベクター素材やイラストもあります。無料コレクションから選ぶこともできます。

パーツの色や形まで変えるなら、ベクター形式の素材が便利です。有料・無料だけで決めず、編集のしやすさや作風も見て選びましょう。

参考になるインフォグラフィックのサイトと本

作品を見ると、情報の選び方や見せ方のアイデアが広がります。制作事例を見たい人と、基礎から学びたい人に向けて紹介します。

KARTZの制作実績から見せ方を学ぶ

「infogra.me」は、インフォグラフィック制作チームKARTZのサイトです。企業や官公庁向けの制作実績を閲覧できます。

KARTZのインフォグラフィック制作実績を見る

色やイラストだけでなく、何を大きく見せているか、どの順番で情報を並べているかにも注目してみてください。

目的に合わせて選ぶインフォグラフィックの本

基礎を学ぶ入門書、歴史を知る本、作例を眺める本では、得られる内容が異なります。