直感的で美しい!インフォグラフィックのデザイン見本を45つまとめました

直感的で美しいインフォグラフィックのデザイン見本45例

インフォグラフィック(Infographics)とは、図表や情報を視覚的に表現する手法のことです。 華やかで直感的に理解できるため、最近ではインターネットの記事や本、プレゼンスライドなど至るところでよく使われます。今回はそんなインフォグラフィックの見本を45つまとめて紹介します。ご参考になれば幸いです。※ 全て掲載許可を得ています。

1. 図表を華やかに見せるインフォグラフィック

10820-NMW8SB-min.jpg

単調な図表でも色づかいを工夫すると美しく見えます。また、人形のアイコンを使って、割合を表現するのは定番ですね。

15100-NQ171S-min.png

同系統の淡い色が使われたインフォグラフィックです。

42734-O3GJL3-min.jpg

エコを表現したフラットなインフォグラフィックです。ただのグラフも、周囲にイラストをのせるだけで断然目を引くものになります。

42659-O3ELZO-min.jpg

こちらは建設をイメージしたもの。アイコンやイラストを使うと、グッと華やかに見えます。

OJMANN1 min

グラフと合わせてかわいいイラストの図が載っています。グラフもカラフルでオシャレですね。

49923 O68ZUV min

円グラフを中心にして、項目ごとにさらに細かく分析をしています。分かりやすいですね。

OJMDIA1のコピー-min.png

落ち着いた配色でやや先進感が感じられます。

43382 O3PZF9 min

こちらはピラミッド型。1つ1つの項目にイラストを載せることで視覚的に分かりやすくなっています。

97984 OKSSRR 630 min

円グラフのまわりに数字を入れない表現で、とてもスッキリ見えますね。

OJMDAT1のコピー min

iPhone画面の上にグラフを載せると目を引きますね。

89185 OIITAL 596 min

配色が美しいインフォグラフィック。イラストは使われておらず、文字や数字を図形表現により華やかに見せています。

OJIP0M1 min

グラフの塗りを半透明にして重ねることで鮮やか美しいものとなっています。

07 min

こちらも鮮やかな色で表現されています。見ているだけで気持ちが良いですね。

INFO 4 150 01 min

比率を直感的に表現するインフォグラフィックです。

OIUG3S0 min

青系統の色できれいにまとまっています。地図やアイコンが多用されており、目を引きますね。

2. イラストが映えるインフォグラフィック

次にイラストがオシャレなインフォグラフィックの例を紹介します。

Foodm 04 min

緑や水色を使うことで直感的に「エコ」なイメージを表現しています。フラットなマップ風のデザインがかわいらしいですね。

99448 OLEQCL 287 min

棒グラフや折れ線グラフがコインにより表現されているあたりがとてもオシャレです。また背景が斜めのストライプ柄になっているのもポイントですね。

96222 OKMZUG 666 min

地球やビーチのイラストが海外旅行を連想させます。思わず文字までじっくり読みたくなりますね。

43797 O3TNL7 min

35372 O01L7D min

こちらも海外旅行を表現したもの。かわいらしいイラストが多用されており、長文の煩わしさがかなり軽減されています。

98052 OL29ZB 5 min

オフィスがきめ細やかに可愛らしく表現されたインフォグラフィックです。

98243 OLBA9P 296 min

こちらは手書き風。使いすぎるとくどいかもしれませんが、目を引くことは間違いありません。

98244 OLBHQW 209 min

お金の使い道を視覚的に表現しています。お金を差し出す手のイラストを中心に据えられており、とても分かりやすいですね。

51029 O6N72Y min

フラットなイラストがオシャレなインフォグラフィックです。

Infographic04 min

世界各地域の気温が分かりやすく表現されています。温度計のイラストにより「気温」がテーマということがすぐに分かりますね。

70663 OD1046 658 min

教育テーマについてアイコンを使ってオシャレに表現されています。グラデーションがかった線が美しいですね。

51827 O6YBLH min

デスクのイラストになじむ形で情報が載せられたインフォグラフィックです。

97556 OL3YT4 283 min

フライト情報がかわいらしく分かりやすく表現されています。

97916 OL0LEC 882 min

貯金について立体的なコインのイラストにより視覚的に表現されています。

97683 OKSJYD 952 min

こちらもお金についてのインフォグラフィック。充電マークをコインで表しているのがとてもうまいですね。

10450 NMI6LO min

イラスト同士を線で結びつけることで「つながり」がうまく表現されています。

42955 O3GN1P min

作物が育つイメージが3段階で表現されています。あざやかな配色がオシャレです。

42080 O3F1HW min

旅の目的地をかわいいイラストで表現したインフォグラフィックです。フラットなイラストがすっきりとしたデザインととてもマッチしています。

3. 手順を表す見本

次に、手順や流れを直感的に分かりやすく表現したインフォグラフィックの例を紹介します。

98552 OL1XXB 196 min

数字と線がうまく使われおり、流れが視覚的に分かりますね。

36722 O0UC8M min

立体的な矢印が面白いインフォグラフィックです。数字はうまく使うと、デザイン要素の1つになるのですね。

67406 OC4VER 713 min

手順がユニークに表現されています。循環する流れを直感的に示したい場合は、円形配置を活用するのが良いですね。

65734 OCN025 892 min

立体的な本を重ねたような表現により、ステップアップしていくイメージがとてもよく伝わります。オシャレでものすごく目を引きますね。

96234 OL0WEL 874 min

こちらは文字をほとんど使わずにイラストだけで手順を表したインフォグラフィック例です。

10520 NMWDFT min

矢印などは使わず、STEP1〜4で手順を表しています。やはりカラフルな表現によりメリハリがつきますね。

37125 O0ZPDZ min

道路のイラストにより「手順」であることを分かりやすく表現しています。マップのマーカーがとてもよくマッチしています。

4. 時系列を表す見本

次に年代や時間を表すインフォグラフィック例を紹介します。

04 min

アイコンと文字を交互に並べることでスッキリと各年代の出来事を表現しています。

68331 OCNMCJ 786 min

うねうねとしたユニークな線の動きが目に留まります。ちょっとした影の入り方なんかも秀逸です。

33257 NZCQTO min

結婚式のタイムスケジュールをやわらかな雰囲気で表現しています。

90272 OJJREA 179 min

資料やプレゼンに組み込みやすそうな、控えめかつ分かりやすいインフォグラフィック例です。

5. 最後に

ここまで45つものインフォグラフィックの見本を紹介してきました。アイコンをうまく使ったものと、カラフルに表現したもの多かったですね。よく使われていた棒人間の素材は以下のサイトから無料でダウンロードして使用できます。

参考
Pictogram
無料で非常口のあの人のような人型アイコンをダウンロードできます。

今後、インフォグラフィックによる表現はますます増えていくでしょう。ぜひ紹介したデザインを参考にオリジナル作品を作ってみてください。

サルワカ