インフォグラフィックの作り方

Source

インフォグラフィックを作る上で考慮すべき6つのポイントを抑え、魅力的で興味を持ってもらえるグラフィックを作る。

インフォグラフィックは複雑なデータや情報を分かりやすく視覚化する。テンポの速い現代社会において、グラフィックデザイナーは物事の要点を易しく効率的に伝える必要がある。

本記事では、いくつかの例を元にインフォグラフィックの特性を追い、最後に例題を用いたインフォグラフィックの作成プロセスを簡単に紹介したい。

文字→グラフィック


インフォグラフィックな履歴書 ― Tibor van den Brink作(via Behance

上の例はインフォグラフィックのようにデザインされた、あるグラフィックデザイナーの履歴書だ。自身に関するデータをスタイリッシュな図で巧みに示しており、無味乾燥なデータが生き生きと伝わってくる。

この視覚化によってTibor van den Brink氏の履歴書には色彩と美的魅力が加わっている。その2つの要素のおかげで、昔ながらの履歴書からおのずと際立ち、見る人を引きつける履歴書となっている。

シンプルな円グラフの効果で、Tibor氏がオランダ語に100%堪能で英語は約88%流暢ということが一目瞭然だ。他にも趣味を表すアイコンや、さまざまなプログラムやデザインコンセプトのスキルレベルを”メーター”で示すなど、工夫が凝らされている。

例えば、Tibor氏のPhotoshop、Illustrator、InDesignのスキルレベルが75%程度であることがすぐに見て取れる。自身に関する様々な情報を簡潔かつ斬新な形で伝えており、長々とAdobeツールの使用歴を書き連ねるに比べはるかに優っている。

百聞は一見にしかず


ルービックキューブの仕組み ― Alvaro Herrero作(via Behance

「百聞は一見にしかず」という有名なことわざは誰もが知っているが、これはインフォグラフィックの力を雄弁に物語っている。人間は視覚に頼る生き物であり、テキストを理解するには時間と認知処理が必要となる一方、イメージは素早く直感的に理解できることが多い。

上の例では、一連の図を使ってルービックキューブの仕組みを説明している。これらの図では視覚的に手早く情報を示しているが、ルービックキューブの複雑さを考えると言葉で説明するとなれば少なくとも1,000語は必要ではないだろうか。その上このインフォグラフィックはカラフルで目に楽しく、文字で解説するより望ましいことは間違いない。

フロー


靴を作る過程のインフォグラフィック ― Anton Yermolov作(via Behance

インフォグラフィックでは流れ(フロー)を視覚的に表現できる。これはインフォグラフィックをデザインする時に念頭に置きたい重要事項だ。デザイナーはデザインの各要素と同様に、デザインを見る人の視線の流れを考慮する必要がある。

上の例では靴の製作過程を3つのステップで表現している。視線は最上段のタイトルから始まり、屋根の上の大きな靴に移るだろう。大きな靴の次には、建物3階の、ステップ3の過程に目が行き、ステップ2、ステップ1とたどり着くだろう。

このインフォグラフィックはカラフルで美しいが、フローに明らかな問題がある。ステップ3とステップ1の配置が問題なのだ。ステップ3を建物の1階に、ステップ1を大きな靴に近い最上階に配置することが解決策の1つとして考えられる。

さらに言えば、各グラフィックはテキストデータなどの情報を必ずしも雄弁には伝えていない。例えば、「3. Producing(製作)」のステップを見ると、椅子に座った2人が靴を手にしているが、このステップについてProducing(製作)という単語以上の情報や印象を与えられないかもしれない。同じことが「2. Designing」と「1. Sketching」にも当てはまるだろう。

感情


森のインフォグラフィック ― Anton Egorov作(via Behance

優れたインフォグラフィックは、情報に加えて感情も描き出す。つまり、インフォグラフィックを見ると即時・迅速に理解できることから、見る人に直感的な反応をもたらすのだ。

上の例では、作り込まれたリアリティのあるグラフィックを用いることで、土地所有の割合をシンプルに示しながらも、このデータに複雑な感情を持たせている。多くの人は米国の土地所有がこのように区分されていることを知らないかもしれない。そして、地面が切り離され柵で囲われているイメージを見て、懸念を抱いたり、このテーマについてもっと学びたいと感じたりしても不思議ではない。

アイコン

インフォグラフィックには、テキストとアイコンを組み合わせることでデータを分かりやすく示すスタイルもある。下の例では、嘘の見抜き方の説明にその手法を活用している。

ステップ1では、ハンドジェスチャーを文章で説明する代わりに、3つの絵を効果的に使っている。結局こうしたジェスチャーは文章よりイラストで示した方が分かりやすいのだ。


「嘘の見抜き方」のインフォグラフィック ― Lisa Woomer作(via Behance

ステップ2ではまた別の方法を使っており、グラフィックと説明文を直接つなげている。嘘をついている人の目が見る各方向の「キャプション」としてテキストを用いているのだ。これも効果的な方法であり、目のグラフィックの周囲に円形のいい流れが出来ている。

ステップ4は、グラフィックを違った形で使っている。「Listen for Vocal Indicators」(声の指標に注目する)を視覚的に表現するため、音波のイメージを用いているのだ。これはデータや情報を実際に示しているわけではないため、ステップ1のグラフィックほど効果的ではない。とはいえ視覚的に引きつけたり他の部分との一貫性を生み出す点で価値があるだろう。

魅力的にする


Valentina D’Efilippo作(via Behance

インフォグラフィックは機能性や実用性以外を目的とした使い方もできる。データを美しく魅力的に表すことだ。上のインフォグラフィックは、春のタイムラインに対する気候変動の影響を、鳥や木や気温に関するデータセットを用いた「日時計」で視覚的に表現している。

情報としては憂慮すべき内容であるが、グラフィックは優しくもあり率直で魅力的だ。カラーパレットはテンポよく洗練されており、幾何学的な花は見る人をデザインに引き込む。この作品は見た目に魅力的であることから、単にテキストを配置した場合に比べて、より多くの読者がデータに興味を持ちそうだ。

では、作ってみよう

以下のチュートリアルでは、Photoshopを使ってインフォグラフィックを作ってみる。表現するのはマンハッタンのWashington Square
ParkからブルックリンのWILLIAMSBURGまで自転車で行く場合と列車で行く場合を比較したデータである。Google Mapsによれば、この2地点間を自転車で移動すると18分、列車で移動すると30分かかる。

では、インフォグラフィックを使ってこのデータをどう表せるか考えてみよう。

t1

まず、Google MapsのスクリーンショットをPhotoshopファイルにペーストし、彩度を下げる。最初に紹介したTibor氏の例で学んだ、色と美的魅力を参考に比較するルートは黄色で目立たせてみよう。

マップの枠も黄色とし、上端には文字を入れるスペースを空ける。コンテンツは、コントラストを出すためダークグレーの背景の上に配置し、かすかな紙のテクスチャをオーバーレイして「地図」の雰囲気を加える。

t2

次に「嘘の見抜き方」の例を念頭に、データを明確化するアイコンを導入しよう。今回は自転車と列車のミニマルなアイコンにする。このクリエイティブフローに合わせて、長さの異なる「道」をアイコンに添えるが、道の長さはそれぞれの所要時間に大体比例させる。

色は組み合わせのよい青緑色を入念に選んだ。このデータをできるだけ魅力的にするということを忘れないようにしよう。

t3

最後にテキストを加える。簡潔なタイトルを選び、所要時間は大きくて読みやすいフォントにする。このインフォグラフィックは、マップのルート、比較している交通手段、所要時間など、多くのテキストベースのデータをグラフィックにしている点で上出来だ。

また、データを魅力的にするという目標も達成している。カラフルでプロフェッショナル、そしてすっきりしたシンプルなデザインとなっている。

まとめ

インフォグラフィックには多くの形式がある。イラスト、図表、色、アイコン付きテキスト、さらには写真も使われる。デザイナーは、様々なタイプのインフォグラフィックを理解し、それぞれについて効果のあるケースとないケースを区別できるようにしておくと役に立つはずだ。

今度インフォグラフィックを見かけた際には、本記事を参考にそれらを分析し、自らのインフォグラフィックのデザインスキルを高められることを確認しよう。


今回ご紹介したインフォグラフィックを見て何を感じただろうか? ぜひコメントをお寄せいただきたい。