インフォグラフィックの作り方｜5つの型と数字を図にする手順

資料に数字を並べたのに、「で、結局どういうこと？」と聞き返された。そんな経験はありませんか？

数字は、文章のままだと大きさが伝わりません。読む人が頭の中で並べ直して、やっと差が分かります。
その手間をなくすのがインフォグラフィックです。特別な絵心は要りません。型を1つ選んで、数字を絞って、色を2色にする。この3つで、伝わる図になります。

このレッスンでは、インフォグラフィックの意味、よく使う5つの型、作る手順の順で見ていきます。最後に自分の1日を図にする練習もあるので、手を動かして覚えていきましょう。

インフォグラフィックは、読ませずに伝えるための図

インフォグラフィックは、情報を意味する「インフォメーション」と、図を意味する「グラフィック」を合わせた言葉です。日本語にすると「図解」がいちばん近い言い方になります。
複数形のインフォグラフィックスという表記も見かけますが、指しているものは同じです。どちらで書いても間違いではありません。

上の図を見てください。左は「スマホ68%、パソコン24%、タブレット8%」を文章で書いたもの。右は同じ内容を横棒にしたものです。
左は3つの数字を覚えて比べる作業が要ります。右は棒の長さの差が、そのまま割合の差です。読む前に大小が分かりますよね。

インフォグラフィックの目的は、きれいに見せることではありません。読む人が考える手間を減らすことです。ここを外すと、飾りの多いだけの図になります。

図解との違いはどこか

「図解とインフォグラフィックは何が違うの？」とよく聞かれます。厳密な線引きはありませんが、現場では次のように使い分けています。

呼び方	中身	使う場面
図解	言葉や関係を図にしたもの全般。数字がなくてもよい	手順の説明、仕組みの説明
インフォグラフィック	データや数字が中心。グラフを含む1枚の作品にまとめる	調査結果の発表、広報物、SNS投稿

ざっくり言えば、図解のうち数字を扱うものがインフォグラフィックです。呼び分けにこだわる必要はありません。作るときの手順は同じです。

身近なところにもたくさんある

特別なものではありません。毎日目にしているはずです。

どれも「文章で書くと長い情報」を、見た瞬間に分かる形にしています。路線図が分かりやすいのは、実際の距離を捨てて、乗り換えの順番だけを残しているからです。捨てる情報を決めるのが、作る側の仕事ですね。

よく使う5つの型

ゼロから考えなくて大丈夫です。使う型はだいたい5つに決まっています。手元のデータがどれに当てはまるかで選びます。

型	向いているデータ	よく使う形
比較	項目ごとの大小を見せたい	棒グラフ
推移	時間による変化を見せたい	折れ線グラフ
割合	全体に対する内訳を見せたい	円グラフ、帯グラフ
手順	順番と分かれ道を示したい	フローチャート
分布	場所や量のかたよりを示したい	地図、点の図

型を見分ける練習も、手元のもので足ります。天気予報の週間気温は推移（折れ線）、選挙速報の議席数は比較（棒）、スマホの設定にあるバッテリーの使用状況は割合（帯グラフ）です。帯グラフは、横1本の帯を割合で区切った図のことですね。

4番目のフローチャートだけ少し補足します。これは作業の順番を四角で並べ、判断が必要なところを分岐として書く図です。「申し込む → 審査 → 通ったら発送、通らなければ連絡」のように、進み方が枝分かれする説明に使います。
手順が一本道なら、番号つきの箇条書きで足ります。分岐があるときだけフローチャートにしてください。

1枚の図に型は1つだけ。棒グラフと折れ線と円グラフを1枚に詰め込むと、どこを見ればいいか分からなくなります。伝えたいことが2つあるなら、図を2枚に分けてください。

作る手順は4つ

いきなりツールを開かないでください。順番を守ると、途中で作り直さずに済みます。

1. 伝えたい1文を先に決める。「スマホから見る人が7割」のように、図を見た人に持ち帰ってほしい言葉を書き出します。ここが決まらないうちにグラフを作ると、何を強調すればいいか決められません
2. 数字を3〜5個に絞る。手元の数字を全部載せると、主役が消えます。載せない数字を決めるほうが大事です
3. 型を1つ選ぶ。さっきの5つから、1文に合うものを選びます
4. 色を2色にする。主役だけ濃い色、残りは同じ薄い色にします

4のところでつまずく人が多いので、もう少し書きますね。項目ごとに違う色を塗ると、全部が同じ強さで主張して、結局どれも目立ちません。色は区別のためではなく、強調のために使うと決めてしまうと迷わなくなります◎

ツールは何でも構いません。CanvaでもGoogleスライドでもExcelでも作れます。大事なのは1〜3の順番のほうです。

伝わらない図になる3つの原因

作ったのに伝わらないとき、たいてい原因はこの3つのどれかです。

立体にして見た目を盛る

円グラフを立体にすると、手前の項目が実際より大きく見えます。棒グラフに影をつけると、棒の長さの端がぼやけます。
直し方は簡単で、立体と影をやめて平らに戻すだけ。地味に見えても、こちらのほうが正確に伝わります。

目盛りの始まりをゼロにしていない

棒グラフの目盛りを50から始めると、52と58の差が実際の何倍にも見えます。読む人は棒の長さの比で受け取るので、これは事実と違う印象を与えます。
棒グラフの目盛りはゼロから。差が小さくて見えないときは、棒をやめて数字を大きく書くほうが誠実です。

単位と出典が抜けている

「68」とだけ書いてあると、%なのか人数なのか分かりません。調査の出典がないと、その数字を信じてよいかも判断できません。
図の下に小さく単位・調査時期・出典を入れてください。文字は小さくて構いません。あるかないかが問題です。

できあがったら、この4つを確認してみてください。

ミニ実践：自分の1日を図にする

10分の練習です。題材は自分の1日。データを探さなくていいので、すぐ始められます。

1. 昨日1日の時間の使い方を、紙に書き出します。睡眠・仕事・食事・移動・スマホ・その他の6項目くらいで十分です
2. 合計が24時間になるように、それぞれの時間を書きます。感覚で構いません
3. 伝えたい1文を決めます。「移動とスマホで4時間使っていた」のように、自分が驚いたことを1文にします
4. 型を選びます。1日の内訳なので割合の型（帯グラフ）が合います。24時間を横1本の帯にして、6項目を左から順に並べます
5. 1文で選んだ項目だけ濃い色にして、残りは同じ薄い色にします
6. 帯の下に「昨日の記録・自己申告」と書きます。これが出典です

紙とペンで大丈夫です。定規で線を引いて、24時間を24マスに区切るとそのまま帯グラフになります💡
できたら、家族や同僚に見せて「何が言いたい図に見える？」と聞いてみてください。決めた1文と違う答えが返ってきたら、強調する場所がずれています。

この練習のいいところは、データを疑う目が育つところです。自分で作ってみると、世の中のグラフの目盛りや色の使い方が気になり始めますよ。

よくある質問

インフォグラフィックとは何ですか？

データや情報を、図やグラフの形にまとめたものです。文章で読むと時間がかかる内容を、見た瞬間に分かる形にします。
ポイントは、載せる情報を減らすところにあります。全部を図にするのではなく、伝えたい1文に必要な数字だけを残します。

インフォグラフィックを日本語で言うと何ですか？

「図解」または「情報図」と訳します。定訳はなく、実務では「インフォグラフィック」とそのまま呼ぶことがほとんどです。
資料の中で使うなら「図解」で通じます。相手に合わせて言い換えて大丈夫です。

図解とインフォグラフィックの違いは何ですか？

図解のほうが広い言葉です。仕組みや手順を絵にしたものも図解に含まれます。
インフォグラフィックは、その中でも数字やデータが中心のものを指します。作る手順は同じなので、呼び分けに悩む必要はありません。

絵が下手でも作れますか？

作れます。イラストは要りません。
四角・線・丸だけで作った図のほうが、読み取りやすいことも多いです。イラストを足すのは、内容が固まって余裕が出てからで間に合います。

次に学ぶこと

このレッスンの要点をまとめます。

• インフォグラフィックは、読む人が考える手間を減らすための図
• 型は5つ（比較・推移・割合・手順・分布）。1枚に1つだけ
• 手順は、伝えたい1文 → 数字を絞る → 型を選ぶ → 色を2色にする
• 立体・ゼロ始まりでない目盛り・出典なしは避ける

図の中で使う小さな絵は、アイコンとピクトグラムのレッスンで扱います。項目の横に何を置くか迷ったら読んでみてください。
ここまでで装飾とビジュアルの章は終わりです。次の章はWebページの構成から始まります。作ったものを実際のページのどこに置くかの話に進みます。

ほかのレッスンはデザインの基本コース目次から選べます。順番に進めても、気になるところだけ読んでも大丈夫です。