インフォグラフィックスがユーザーの行動を変える（実例編)

この連載について

この連載ではインフォグラフィックスに馴染みのない方に向けて、基礎的な情報から活用方法まで分かりやすく紹介していきます。前回は、インフォグラフィックスの概要と制作方法について解説しました。今回は、「優れたインフォグラフィックスの特徴と、それによるユーザーへの効果」について事例を交えて説明します。

インフォグラフィックスのおすすめ参考サイト

information is beautifulは、様々なデータの美しいインフォグラフィックスが掲載されているサイトです。Beautiful News dailyでは、毎日チャートが更新されており、「Eco & Climate」「health」などカテゴリー別に閲覧することも可能です。今回はこのサイトの事例をもとに優れたインフォグラフィックスの特徴を見ていきます。

実例で見る優れたインフォグラフィックスのポイント

①情報を早く分かりやすく伝える

【概要／伝えたいこと】
世界で2人目のHIV完治例が出たというニュースを受けつくられた、1日あたりの平均感染症流行病死亡者数のグラフです。「HIVの死亡者数がトップ５に入る多さであること」を伝えて、その治療法が前進した影響の大きさを表現しています。
【インフォグラフィックスの効果】
一本のグラフ棒のみ色を変え、他は薄い色で塗ることで、最も見て欲しいところに自然と目が向くようになっています。目盛り線はありませんが、それぞれの値が棒の中(もしくはすぐ近く)に配置されているため、数値が短時間で読み取れます。

【概要／伝えたいこと】
ゴールデンライスの栄養素とその効果をまとめたもの。「世界の健康にどう貢献するか」という内容となっています。
【インフォグラフィックスの効果】
背景に濃い色を使用し、重要なポイントに明るい色を入れて目立たせています。この例の場合は、紫と黄色が補色の組み合わせになっており、より黄色の部分が強調されています。

【概要／伝えたいこと】
極度の貧困状態に置かれた人の数が大幅に減少したことを伝えるインフォグラフィックス。
【インフォグラフィックスの効果】
「大幅に減少した」ことを伝えるため、数字を目立たせて減少量をロジカルに見せ、さらにパイチャートにより感覚的に伝えています。

②興味を持たせる

【概要／伝えたいこと】
カクテルのレシピをまとめた例。それぞれに必要な材料と、その割合を示しており、ベースドリンクごとの閲覧も可能です。
【インフォグラフィックスの効果】
グラスの形を効果的に使っていて、何を表現しているか直感的に伝わります。ただのレシピではなく、明るい色使いのインフォグラフィックスにすることで、興味がない人でもつい見てしまう楽しい雰囲気となっています。私も作りたくなってしまいました！「どの色が何の材料を表しているか」といった情報まで各イラスト内に納めてあり、短時間で理解できます。

【概要／伝えたいこと】
「一般的に信じられているが実はまちがっている情報」をまとめたページ。円の大きさはGoogleでのヒット数に対応していて、どのくらい広まっている情報なのかを示しています。
【インフォグラフィックスの効果】
ジャンルごとに複数の色を使っていますが、デザインのトーン＆マナーを統一することで全体のイメージが崩れず綺麗にまとまっています。情報量は多めですが、アイコンと完結にまとめられた説明文のおかげで、最後まで飽きずにリズムよく見られます。

③考えや行動のきっかけとなる

【概要／伝えたいこと】
海面上昇についてのインフォグラフィックス。数百年後に想定される状況を都市や世界地図で伝えています。
【インフォグラフィックスの効果】
文章だととっつきにくい海面上昇という固いテーマですが、イラストや地図で表現することで感心をもちやすくなっています。実際にある都市や慣れ親しんだ世界地図を用いていることで、身近な問題として考えるきっかけとなります。

まとめ
このように「見た人の行動を変える優れたインフォグラフィックス」を作るためには、次のことがポイントとなります。
・重要な部分が目立つ色使いとレイアウト(視線の誘導、理解を助ける)
・色数は少なく絞るか、トーンを揃える(見やすさアップ)
・重要度の低い情報は思い切って削る(理解速度アップ)
・色やアイコンの説明は、近くに表示する (理解速度アップ)
・イラストなどの装飾によって引きつける (興味を持たせる)
・比較対象を設けたり、身近な例を上げる (思考や行動のきっかけづくり)