複雑な内容を簡単に説明する40のインフォグラフィック

45-Brilliant-and-Complex-Topics-Explained-Perfectly-By-Infographics_Thumb

ビッグデータの数字のように複雑な内容を分かりやすく説明する。そんなときに用いられるのがインフォグラフィックです。

インフォグラフィックが有用である理由には、世界の人口の65%がビジュアルから学習するタイプの人間であるという事実が関係しています。多くの人にとって、複雑な内容やデータをそのまま提示されても、それを理解することは難しいのです。しかし、その内容を濃縮してグラフィック化すると、途端に理解が簡単になります。

では、そのような素晴らしいインフォグラフィックの例を見ていきましょう。

01. 炭素収支

carbon budget

このインフォグラフィックが優れているのは、ビジュアル的に線を引くことによって読み手が最初から最後まで通して段階的に理解できるようにしている点です。このような強制的な行動喚起は、複雑な問題を分けて説明しようとする場合に非常に重要になります。

02. オールマイティ・ダラー

transparency

この分布図は、彩度が低めの色を用いているにも関わらず素晴らしい効果を上げています。グリーンのグラデーションにより所得階層が表現されており、色が暗くなるほど豊かになっていっているのです。また、ここで特徴的なのは統計データが半円状に表示されている点です。遠くから見ても目に留まりやすいデザインになっていると言えます。

ヒント:抽象的な統計を図表化する場合には、色のグラデーションを用いてみましょう。

03. タイポグラフィとフォント

3_Typography and Font

タイポグラフィを説明するときにインフォグラフィックが無ければ、何が何のことやら分からないでしょう。このインフォグラフィックは、その悩みを見事に解決していると言えます。若々しい色使いと共に複雑な内容を分かりやすい情報量に小分けにしてまとめているため、見ていて理解しやすく、かつ楽しいものになっています。

ヒント:若々しい色使いにすると、特に小学生などに向けてのインフォグラフィックで有効です。

04. バイラルコンテンツマーケティング

4_Understanding Viral Marketing

このインフォグラフィックでも、色を効果的に用いることでバイラルコンテンツマーケティングが何たるかを段階的に説明しています。このインフォグラフィックは全体としての情報量も多くなっていますが、それぞれのセクションだけで簡潔するように情報が統制されているところがポイントです。

ヒント:色を使うことでそれぞれの内容を切り分けて掘り下げ、理解しやすい情報量にまとめてみましょう。

05. 風水で家をスタイルアップ

feng shui

このインフォグラフィックでは、ブルーと薄いグリーンでのパターンが用いられていますが、それが誘導の矢印の役目も果たしているところがポイントです。最後まで見ていくと、その矢印が今度は上に向いているので、ホームページが強調されることにもなっています。

ヒント:矢印の役目を果たす形を用いて、そっと目線誘導をしましょう。

06. クラウドのパワー

6_Crowd Power

ストーリーテリングの技術を用いて、分かりやすい情報の流れを生み出しています。赤い矢印を活用することでストーリーを進めており、読み手はこれを辿るに連れて抽象的な概念であるクラウドを理解していくことになるのです。

ヒント:ストーリーを語るときには、要素を1つか2つに絞ること。

07. インターネットの向こう側

Internet Backbone

躍動的な色使いをダークな背景に合わせて用いながら、白地のテキストを使うことでインフォグラフィックの要素を際立たせることに成功しています。背景色が完全な黒でないため、テキストが白色でも浮きすぎる形にはなっていません。むしろそれが全体を引き締めて目に留まりやすくなっているのです。

ヒント:真っ黒ではないダーク色の背景に白のテキストを組み合わせてみましょう。

08. 異常気候や、地域への影響など

Climate Change

目立つ色使いとストーリーの進め方が巧みで、流し読みしているといつの間にかちゃんと内容を追ってしまうような魅力があります。ブルーとオレンジの組み合わせも最高で、オレンジは親しさを、青は信頼を想起させる点からも有効であると言えるでしょう。

ヒント:色心理学を用いて、よりインパクトのあるインフォグラフィックを作りましょう。

09. Facebookの心理学

facebook psychology

このインフォグラフィックでは、Facebookのデザインを用いてそのトピックに関連づけています。ひとつのインフォグラフィックで大量のフォントを使うのは通常好まれません(多くても3つ程度が良いでしょう)が、ここでは複数のフォントを用いることが奏功しています。それは、冗長になりがちなトピックに対し、フォントを変更することで読み手の注意を引き続けることに成功しているからです。

ヒント:注意を引くために複数のフォントを使うのを試してみましょう。

10. ポピー・ダイアグラム

war deaths

このインフォグラフィックでは、『フランダースの野に』という詩にインスピレーションを受けて、ポピーを用いることで戦争中に没した兵士たちを現しています。ポピーのサイズと色がグラフの中でも重要な数字的意味を持っていて、非凡かつクリエイティブなデザインにより、見る人にも新たな視点を与えることに成功しています。

ヒント:事実を描写するのに詩的な方法は無いか考えてみるのも良いでしょう。

11. ハッシュタグの歴史

history of the inforgraphic

このインフォグラフィックの中ではハッシュタグのマークがあちこちに強調されていて、あらゆる要素にデザインとして溶け込んでいることがわかるでしょう。特に面白いのは、タイムライン自体もハッシュタグの形をしているところです。

ヒント:重要な要素は、インフォグラフィック内で何度も強調しましょう。

12. 世界中の人々にとって一番大切なこと

meaning infographic (1)

重要なコンセプトを表現する上で巧みに色を使い分けていて、それぞれのコンセプトについてのカラーガイドが最初のセクションに来ているところがポイントです。それぞれのセクションの下に確認用にこのガイドがあることで、見た目も綺麗ながら機能的になっています。

ヒント:色を使って重要なコンセプトを現しましょう。

13. serifかsansか

serif vs sans serif

色合いは抑えられていますが、フラットなデザインであることも相まってダイナミックなプレゼンテーションとなっています。このインフォグラフィックではコラムを2つに分けており、それぞれのフォントの違いを比較するように示しているところがポイントです。それぞれのフォントには色が割り当てられており、これも理解の助けになっています。

ヒント:ある要素について色を統一してみましょう。

14. 最も有用な発明

invention history

このインフォグラフィックの情報量はかなりのものですが、分かりやすく揃えられていることで理解しやすい大きさにまとめられています。それぞれのセクションは同じ色でまとめられていて、これによりそれぞれが独立して目立つようになっていながら全体としては統一感が生まれているのです。

ヒント:それぞれのセクションで色を統一すれば、統一感が生まれます。

15. 命の歴史

historyoflife

このインフォグラフィックは、情報の媒体であると共にアートでもあると言えるでしょう。ユーモアとアート的な表現に溢れながら、色を効果的に用いることで地球の歴史を差別化することに成功しています。全体の解像度も高く、ポスターにもぴったりです。

ヒント:紙やポスターにしても綺麗に見えるようなインフォグラフィックを作りましょう。

16. 世界の二酸化炭素排出量

carbon footprint

二酸化炭素排出量のことを、英語でCarbon footprintと表現することがあります。だからこそ、このインフォグラフィックも足(foot)の形をしているのです。円が大きければそれだけ排出量が多いことを示しており、それだけ有害であることが分かりやすくなっています。また、大陸が色別で分けられているところもポイントです。

ヒント:情報をユニークな形で表現してみましょう。

17. フリーランスの人の頭の中

freelance

カラフルでエネルギーを感じるこのインフォグラフィックは、多くの情報を伝えることに成功している一方、読み手に『多すぎる』という感じを与えません。それは、ホワイトスペースとコンテンツのバランスが優れているからです。色合いも同じものが使われており、目に優しくなっています。

ヒント:余白部分を活用して全体のバランスを取りましょう。

18. レスポンシブなウェブサイトとは?

18_What Is a Responsive Website

レトロさとモダンさを同時に感じるインフォグラフィックです。魅力的なイラストと洗練されたタイポグラフィなどにより、目を引くデザインが完成しています。

ヒント:レトロな要素をインフォグラフィックに加えると魅力的に見えることもあります。

19. パーソナリティタイプに合わせた最適なキャリア

personality types infographic

このインフォグラフィックでは、4種類の色を使って16のパーソナリティタイプを現しています。また、色心理学の要素をいれてそれぞれのパーソナリティタイプのコア・バリューをも表現しているのです。

ヒント:色心理学を用いてアイデアを可視化してみましょう。

20. 深層Web(ディープウェブ)とは?

deepweb

深海をメタファーとして用いながら、トピック自体を描くことなく雰囲気を伝えることに成功しています。絵の下部の無秩序な感じが、全てを言い表していると言えるでしょう。

ヒント:ビジュアル的なメタファーを使ってみるのも良いでしょう。

21. 座りすぎ・立ちすぎが良くない理由

21_Why Prolonged Sitting is Unproductive

インフォグラフィックにより、首から脊髄の根元までをおさらいすることができるようになっており、その道中で重要なポイントを押さえられるようになっています。重要な部分をズームアップして見せながら、どういったことが懸念されるのかという説明を加えているのです。

ヒント:グラフィックを用いてメインのテキストの内容を補いましょう。その逆ではいけません。

22. ブロガーの進化

blogging infographic

このインフォグラフィックが説明しているのは、ブロガーにも様々なタイプが居るということです。それぞれのブロガーのグラフィックはステレオタイプ的ですが分かりやすくなっています。

ヒント:要素を擬人化すると伝わりやすくなる場合もあります。

23. 7つのチャクラを理解する

chakra infographic

人間の身体を背景にしてこのインフォグラフィックが表しているのは、チャクラとは何かということと、それぞれのチャクラがどこに宿っているかということです。それぞれのチャクラは別々の色やシンボルで表されており、分かりやすくなっています。

ヒント:異なる要素に別々の色づけをしてみましょう。

24. コンピューター言語を学ぶなら?

what code

このインフォグラフィックの情報量はあまりに膨大ですが、小さくそれぞれのセグメントが分けられているために理解が容易になっています。これにより、知りたい情報に後から立ち戻ることも簡単になっているのです。

ヒント:セクションごとに色を分けてみましょう。

25. 色の組み合わせ

color coordination (1)

このインフォグラフィックでは色の組み合わせや特徴などを説明しており、それぞれの色を目立たせるために背景色がニュートラルな色合いになっています。色相環が8回に渡って用いられているのも特徴的ですが、それぞれが言い表している情報は異なっています。

26. デザインの6原則

26_6 Principles of Design

基本の色の数を抑えていることが全体としてより良い効果を生み出しています。それぞれの要素は単体ではシンプルながら、組み合わせによって強力で一貫性のあるデザインとなっているのです。

ヒント:シンプルなグラフィックを組み合わせることで強力なデザインを生み出しましょう。

27. エモーショナルIQとあなた

emotional intelligence iq

このインフォグラフィックで特徴的なのはタイポグラフィであると言えるでしょう。太字と細字を組み合わせて用いており、様々な色を使いこなしているところがポイントです。基本としては白と黒の文字が、所々違う色になっている点が強調の妙となっています。

ヒント:様々なタイポグラフィを用いることも選択のうちのひとつです。

28. ゲームの神経学

gaming infographic

濃淡様々な青を用いることで、色合いに統一感が生まれています。また、重要なポイントの説明には白いテキストが用いられており、漫画のような要素を取り入れることによって複雑な情報をシンプルにまとめあげているのです。

ヒント:テーマカラーを決めて統一性のあるデザインを生み出しましょう。

29. GMO(遺伝子組み換え生物)について

gmo infographic

土を思わせる背景を用いているところが説明している内容と相まってユニークです。全てのグラフィックがどことなく洗練されていないような印象なのは、これもまたテーマに関連しているのでしょう。

ヒント:同じグラフィック要素を用いることで、テーマを繰り返し伝えましょう。

30. 筆跡の心理学

30_The_Psychology_of_Handwriting

紫や青、白といった色合いが用いられていて、色使いはダイナミックかつ注意を引くように配置されていますが、それでいて強い主張になりすぎないように配慮されています。

ヒント:色を交互に使うというのは面白いアイデアです。

31. あなたの学習タイプは?

learning infographic

学習者のタイプをそれぞれのアイデンティティに対応する色で分けて解説したインフォグラフィックです。それぞれのセクションはその色の濃淡で表現されており、情報が分かりやすくなっています。

ヒント:セクション内で情報を整理するのに色を有効活用しましょう。

32. オーガニックの本当の意味

32_What Does Organic Mean

緑色が表すのはフレッシュさであり、このテーマにぴったりの色であると言えるでしょう。テキストは見やすく白色になっていて、見た目にも楽しいインフォグラフィックです。

ヒント:明るい色を使うことをためらう必要はありません。

33. クイックリファレンスガイド:自分で写真を撮るには

photography infographic

白の背景に色使いもシンプルになっていて、最小限のグラフィックを活用しているため、印刷する際にも手間になりません。多くの情報を小スペースに詰め込んでいて、それがロジカルかつ必要最低限のものになっているところもポイントです。

ヒント:印刷を考えるならば、ミニマルデザインを意識しましょう。

34. 2匹の牛の話

34_Tale Of Two Cows

可愛いグラフィックを用いることが有効である場合もあります。このインフォグラフィックは、資本主義や社会主義といった、社会経済学の理論やシステムの最も有名なタイプについてのジョークとなっています。見ていて楽しく、重くなりすぎないような情報量と雰囲気になっているほか、同じ色が繰り返し用いられていることから冗長な内容が綺麗にまとめられているのです。

35. 左脳と右脳

right left brain infographic

このインフォグラフィックでも、左右でそれぞれ別の色が用いられています。これにより、情報が分かりやすく分けられているのです。

ヒント:グラフィック要素を用いて分かりやすく内容を伝えましょう。

36. 貧困の心理学

Psychology of Poverty

ざらざらした質感のグラフィック要素をスムーズな見た目に見えるバックグラウンドと組み合わせているのは、裕福層と貧困層の不均衡を表しています。ある重要で奥深い心理を表現しているデザインでありながら、オレンジとブルーの色がテーマに対して重すぎないように用いられています。

ヒント:特に内容が難しい場合、フレンドリーな色を使うことで、より内容に注目してもらうことが大切です。

37. 食糧危機の表と裏

37_Two Sides of the Food Crisis

赤と青を効果的にコントラスト的に用いることで、この問題の二面性を表しています。情報量も多くなっていますが、グラフィックによって情報を分割しているため情報過多にならないようになっているのです。

ヒント:グラフィックを用いて情報のブロックを区分けしましょう。

38. ビッグデータの未来

Big Data

様々な大きさのグラフィックが用いられており、全体的に見た目が面白いインフォグラフィックとなっています。特にサイズの大きな画像に目が留まりやすくなっていることで、まず見てもらうという目的を達成することに成功しているのです。

ヒント:目を引く大きなグラフィックを、インフォグラフィックのテーマと関連づけて活用してみましょう。

39. 肥満:複雑ながら克服は可能

Obesity

このインフォグラフィックでは、フラットなデザインの中で多くの色を用いてプレゼンテーションを行っています。それぞれのビジュアルエレメントがストーリーを語っており、互いに関連しているものも存在します。

ヒント:フラットなグラフィック要素を用いると、モダンな印象になります。

40. 本はどう生まれるのか?

40_How_Books_Are_Made

Lin Wilson of Funnel Incorporated

このインフォグラフィックでは多くのことが同時に起こっていますが、赤い線を辿っていけば基本的な内容を理解できるようになっています。そして、内容も決して退屈させるものではありません。

ヒント:方向を表す矢印を活用して、見る人の目線を誘導し続けましょう。

デザイン作成の切り札