見出し画像

【解説】インフォグラフィックの作り方

2013年に出版した『たのしいインフォグラフィック入門』の重版(11刷)が決まりました。本noteでは重版を記念して、書籍からインフォグラフィック制作のエッセンスを抽出してお届けします。

はじめに

本題に入る前に、本を書いてから8年──その間に起きた状況の変化を話します。

アートボード 8@2x

インフォグラフィックを作る手順をすぐ知りたいという方は読み飛ばして大丈夫です。

僕がインフォグラフィックに出会った2010年代前半は、主に2つの文脈で扱われていました。一つはコンテンツマーケティングで、もう一つがビジュアルジャーナリズムです。

(1)コンテンツマーケティング文脈
今ほどコンテンツマーケティングそのものが浸透していなかったこともあり、バズの道具の一つのように捉えられてしまうことも多く、この領域でのインフォグラフィック活用は良い方向にはあまり進みませんでした。

(2)ビジュアルジャーナリズム文脈
New York Timesを筆頭に、デジタルメディアがビジュアル表現に力を入れるようになりました。背景にはビジネスモデルの転換とメディアの役割の変化があります。無料から有料購読型にシフトする中で、無料メディアや個人の発信と一目で違いがわかるコンテンツが必要になっただけでなく、深掘りした内容やデータを伝えることの重要性が増しました。

コンテンツマーケティングと比べ、ビジュアルジャーナリズム文脈でのインフォグラフィック活用は2010年代後半にかけて育ちました。ただその一方で、多くは購読登録者の目にしか触れておらず、インフォグラフィックの活用シーンを広げることにはつながりませんでした。

インフォグラフィックの価値と可能性は?
インフォグラフィックの価値であり魅力なのは、情報を整理して伝えるという「機能的価値」と、見て楽しいといった「情緒的価値」の両方をバランスよく備えている点です。

アートボード 11@2x

この価値を活かす先として僕がポテンシャルを感じるのは「教育」と「広報・PR」の2領域です。特に、SDGsのように、社会全体で取り組まなくてはならないことに対して、「教育」と「広報・PR」の2つは重要になります。

たとえば、国連の関連機関はインフォグラフィックの活用を続けています。

Path to Zero Hunger by 2030

画像12

Women in politics: 2021

画像14

持続可能な開発目標(SDGs)報告2020

画像15

また、少し前の事例になりますが、オバマ政権下のホワイトハウスがインフォグラフィックを活用していたのも印象に残っています。今見ると、やや細かいデザインだったりもしますが、モバイルやSNSでも見やすいデザインにすれば、政府広報のあり方として現在でも有効な手段だと思います。

WHITE HOUSE SHAREABLES: INFOGRAPHICS

アートボード 12@2x

インフォグラフィックは一過性の流行りと捉えるのではなく、社会変革を促進するための道具の一つとして今後も期待できます。

ただ、デジタルでインフォグラフィックを見るようになって10年ほど経った今も、活用イメージを持っている人や作り手がまだまだ少ない状況ですので、本noteをきっかけに、インフォグラフィックに興味を持つ人が増えたら幸いです。

前置きが長くなりました。ここからは『たのしいインフォグラフィック入門』に書いた内容をベースに、一部書籍出版後の活動をもとにしたアップデートを加えて、以下を述べていきます。

(1)インフォグラフィックとは
(2)インフォグラフィックの種類
(3)インフォグラフィック表現のコツ
(4)インフォグラフィックの作り方
(5)インフォグラフィック制作に必要なスキル
(6)インフォグラフィックの制作ソフト
(7)参考になるサイト・本

(1)インフォグラフィックとは

アートボード 13@2x

『たのしいインフォグラフィック入門』では、インフォグラフィックを「情報をわかりやすく、人に伝わるかたちに視覚化したもの」と定義しました。

最近では「わかりやすさ」を強調するのもよくないと思い、「情報の関係に、形を与えるグラフィック」と言うことが増えました。インフォグラフィックは、見えにくかった関係や事実、物語に形を与えて見えるようにします。

(2)インフォグラフィックの種類

インフォグラフィックには、定番の型があります。情報をどんな切り口で伝えたいかによって、使う型を決めます。

①ボリューム型
量(数値)を切り口にまとめたい時に使います。

アートボード 15@2x

②テーブル型
2つ以上の対象を、複数の基準で比べたい時に使います。

アートボード 16@2x

③タイムライン型
時の流れを軸に、前後関係を明らかにしたい時に使います。

アートボード 17@2x

④リレーション型
つながりを明らかにしたい時に使います。

アートボード 18@2x


⑤マップ型
位置に意味がある情報をまとめたい時に使います。

アートボード 19@2x


⑥ミックス型

インフォグラフィックの基本デザインは①〜⑤です。複数の切り口で情報を伝えたい場合は、それらを組み合わせて表現します。

アートボード 20@2x

(3)インフォグラフィック表現のコツ

インフォグラフィックをデザインする時のコツは、構造と装飾要素を分けて考えることです。構造は、前述のデザインの型で、装飾はイラストやアイコン、色などです。

装飾要素は、パッと見で何に関するインフォグラフィックなのかわかるようにしたり、インフォグラフィックの世界観を作り上げる役割があります。

アートボード 33@2x

他のグラフィック表現と比べた時、インフォグラフィックの特徴は、情報の関係をクリアにして伝えることです。関係を不鮮明にするような無駄な装飾を加えないようにします。

装飾を使う際は、構造を邪魔しないように入れるのがポイントです。インフォグラフィックをデザインする際は、「構造ファースト」と覚えておきましょう。

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

インフォグラフィックのデザインは、6ステップで進めます。

アートボード 23@2x

ここでは具体的に、サッカーのワールドカップ(2018年ロシア大会)に関するインフォグラフィックを例に、一ステップずつ、簡単に見ていきましょう。

このインフォグラフィックでは、ワールドカップを各国の戦いではなく、ブランドの戦いと見立てみました。

アートボード 24@2x

Step 1:利用目的の確認
まず、インフォグラフィックを使って何をしたいか、誰に向けたもので、どんなシーンで使うのかをクリアにしておきます。

今回の例では、ワールドカップ開催期間中に大会を盛り上げるものを作りたいと考えました。サッカーファンに届けばよく、InstagramとTwitter投稿用に作りました。

Step 2:題材の選定
利用目的がはっきりしたら、何を題材にするのかを決めます。サッカーのワールドカップというところまでは決まっていますが、ここではそこから企画を絞り込んで、ユニフォームにフォーカスすることにしました。

この段階では企画はざっくりしたもので問題ありません。最初から企画を固めすぎてしまうと、言いたいことありきのリサーチをしてしまい、リサーチにバイアスがかかったり、思わぬアイデアが生まれる可能性を奪ってしまうため、おおまかな設定にしておくのがポイントです。

Step 3:リサーチ・分析
題材が決まったら、信頼できるソース元から情報を集めます。

サッカーワールドカップのユニフォームに関するインフォグラフィックを作るのであれば、FIFAやスポーツブランドの公式サイトに当たります。

アートボード 25@2x

この時は、出場国のホームとアウェイユニフォームがわかる画像を一カ所に集めて見れるようにしました。

アートボード 26@2x

Step 4:切り口・内容固め
データをもとに、企画を詰めていきます。ユニフォームの色とブランドのデータが集まったので、それらをソートしたり、集計して、切り口を探ります。この時は最終的に、ブランドを切り口にしたインフォグラフィックを作ることに決めました。

アートボード 28@2x

Step 5:表現
単純に各国ユニフォームのブランドを集計した数を比較するボリューム型で表現することも考えましたが、それよりも決勝トーナメント表を使って、どのブランドとどのブランドが戦って勝ち進むのかが見えるように、リレーション型で表現することにしました。

アートボード 34@2x

表現の方向性は、次のようなラフを描いて決めます。

アートボード 30@2x

ラフをもとに、Adobe Illustratorで仕上げたのが次の画像です。

アートボード 24@2x


Step 6:検証

公開する前に、インフォグラフィックに使った情報に間違いがないか、情報を表現に落とし込むプロセスに間違いがなかったか、誤解を生む表現になっていないかなどを検証して、問題がなければ完成とします。

アートボード 32@2x

(5)インフォグラフィック制作に必要なスキル

6ステップに照らして考えると必要なスキルが見えてきます。インフォグラフィック制作は、以下の3つのスキルを使います。

①データや情報をリサーチしてポイントを見つける「分析力」
②企画を立ててコンセプトをつくる「編集力」
③伝えたい内容をグラフィックに落とし込む「表現力」

アートボード 14@2x

これらは制作実務上、必要となるスキルです。これ以外に、倫理観も重要です。

たとえば、2016年のアメリカ大統領選でトランプ陣営がSNSに恣意的なグラフを投稿していたことがわかっています。

Most of Trump’s charts skew the data. And not always in his favor.

アートボード 9@2x

ワシントンポストのこの記事では、数字の差が大きくないにも関わらず、グラフに大きな差が出るように見せていたことが解説されています。

アートボード 10@2x

このグラフを作った人はどんな気持ちだったのでしょうか。権力者に言われるまま作らざるを得なかったのか、自らも積極的に参加したのか。

この例は特別ですが、インフォグラフィックをデザインする際は、意図せず間違ったことを伝えてしまうリスクが伴います。

特に、制作の6ステップを分業にした場合に、情報の格差や責任の分断、立場の上下が生まれて、良くないインフォグラフィックが生まれる可能性が高まるので注意しましょう。

(6)インフォグラフィックの制作ソフト

制作ソフト、ツールはよく質問を受けます。データの受け渡し上の制約や、共同作業などがない場合は、自分の使いやすいものを使えばよいと思います。

僕の場合は、Adobe Illustratorをメインで使っています。

スクリーンショット 2021-03-24 15.10.33

インフォグラフィックを作れるWebサービスとしては、Canvaeasel.lyなどがあります。

アートボード 7@2x

ツールとそれに伴う表現は多様で、iPadのソフトやアナログの道具を使った「Hand-drawn Infographics(手描きインフォグラフィック)」というジャンルもあります。

たとえば、シンガポール拠点の『ideaink』は、グラフィック・レコーディングと並んで、手描きインフォグラフィックをサービスの一つにしています。

アートボード 6@2x

どのツールを使って表現するにせよ、まずは情報の関係をどう整理するのか構造を第一に考えて、仕上げの過程で装飾を加えていくようにします。その際、やり過ぎに注意します。「構造ファースト」の言葉とともに、「アテンションよりエンゲージ」とも覚えておきましょう。無理して獲得したアテンションに意味はありません。

統計学者であり、情報デザインの専門家であるエドワード・タフティさんは、情報の伝達に関係ない行き過ぎた装飾をしたグラフィックのことを、「チャートジャンク」と呼んでいます。

(7)参考になるサイト・本

作り方や気をつけることについてお伝えしました。ここでは、インフォグラフィックに対する理解が深まる3サイトと本3冊を紹介します。

サイト①『Column Five』
インフォグラフィック専門のクリエイティブ・エージェンシーのサイトです。クライアントワークの事例から学ぶことができます。

アートボード 5@2x


サイト②『Visual Capitalist』
インフォグラフィックをフル活用したオンライン・メディアです。メディア用コンテンツとしてのインフォグラフィックの使い道を示してくれています。

アートボード 4@2x


サイト③『Information is Beautiful』
データ・ジャーナリストのデビッド・マキャンドレスさんが始めたサイトです。要素を抑えたデザインが特徴です。

アートボード 3@2x

2012年からは『Information is Beautiful Awards』も開催し、優れたインフォグラフィックやデータ・ビジュアライゼーションに賞を贈っています。受賞作やノミネート作を見ると、特徴的な事例に出会えます。

アートボード 2@2x

また、2010年のTEDトーク『データビジュアライゼーションの美』もあわせておすすめです。

続いて、参考になる本を紹介します。

本①『インフォグラフィックの潮流:情報と図解の近代史』
インフォグラフィックが歴史の中でどう役割や表現を変えていったかを辿ることができます。


本②『ビジュアル・ストーリーテリング──インフォグラフィックが切り拓くビジネスコミュニケーションの未来』

おすすめサイトでも紹介したColumn Five創業者による本です。『インフォグラフィックの潮流』がアナログ時代から時間を掛けて遡っているのに対し、この本では主に2010年代のデジタルのインフォグラフィックについて学べます。


本③『グラフのウソを見破る技術』
ジャーナリストでありデザイナーで、マイアミ大学でビジュアル・ジャーナリズムを教えるアルベルト・カイロさん執筆の本です。表現の倫理について学べます。

おわりに

ここまで読んでいただき、ありがとうございます。

本noteに書いた内容は拙著『たのしいインフォグラフィック入門』の一部を元にしています。書籍では、インフォグラフィック制作の基礎体力作りとして、ピクトグラムや図解についても解説しています。

もっとくわしくインフォグラフィックの作り方を知りたいという方は、書籍版も手にとってもらえたら幸いです。

また、制作の舞台裏を解説するnoteのマガジンもはじめました。日々制作している中で工夫していることや、こだわり、どんな情報をもとに作っているかなどの実践知をお届けしています。

その他、最新の僕の取り組みや案内などをチェックしたい場合は、Twitterや運営サイト『ビジュアルシンキング』をご覧ください。

プロフィール・経歴は👇

インフォグラフィック活用のご相談は👇


😻😻😻
498
インフォメーション・デザイナー/専門は、インフォグラフィックのデザイン。サイト『ビジュアルシンキング』運営。📚著書に『たのしいインフォグラフィック入門』『図で考える。シンプルになる。』ほか。