EVENT REPORT

インフォグラフィックの価値と課題 1/2 櫻田潤
――World IA Day 2016 Japan(Tokyo)vol.2 1/2

【プレゼンター】櫻田潤

EVENT REPORT

インフォグラフィックの価値と課題 1/2 櫻田潤
――World IA Day 2016 Japan(Tokyo)vol.2 1/2

【プレゼンター】櫻田潤

World IA Dayは2012年にスタートした全世界同時開催のIA(情報アーキテクチャー)のイベントです。今年は世界、6大陸、28カ国、57都市で同時開催されました。2016年のグローバルテーマは「Information Everywhere, Architects Everywhere」、そして日本では「いまフィルターバブルを考える、これからのIAの役割とは」とローカルテーマを題してさまざまなプレゼンテーション、議論が行われました。ログレポート第二回は、櫻田潤氏によるプレゼンテーション「インフォグラフィックの価値と課題」の前半をお届けします。

※このセミナーは2016年2月に行われたもののため、文中の数字やサービス構造等に関しては、最新ではない可能性がございます。

OVERVIEW

2016.02.20(土)

プレゼンター:
櫻田潤(NewsPicksインフォグラフィックス・エディター)

INDEX

  1. インフォグラフィックス・エディターとは?
  2. NewsPicksの構造
  3. コンテンツ制作の実例
  4. データ・ビジュアライゼーションとインフォグラフィックの違い
  5. フローから見る、両者の違い
  6. コンセプトの相違点

インフォグラフィックス・エディターとは?

櫻田:みなさんよろしくお願いします。今日は「インフォグラフィックの価値と課題」というテーマでフィルターバブルの話を混ぜながらお話したいと思います。今日は3つのことについてお話します。まず、インフォグラフィックス・エディターってどんな仕事なのかっていうのをすこし紹介した後、インフォグラフィックというのとデータビジュアライゼーションという2つのアプローチは近しい組み合わせで語られるんですけど、実はそこにある違いについてお話をして、最後に価値と課題ということで締めたいなと思っています。

まず、インフォグラフィックス・エディターという職種は、ぼくの知る限り日本にはありません。NewsPicksで特別につくってもらい働いています。ニューヨークタイムズとかウォールストリートジャーナルとかだと、グラフィックスエディターとか、あとビジュアルエディター、データエディターなどと呼ばれる職種がが近いものだと思います。2010年にですね、自分のサイト、ビジュアルシンキング(visualthinking.jp)というサイトを立ち上げてここでいろんな情報の発信を個人的にはじめたのがいまの仕事につながっています。最初のころは、ひたすら読んだ本を図解してアップするみたいなことをやっていました。それが2010年なので今から5、6年前ですね。たとえば、ドラッカーを読んでそれを図解して発信するみたいなことをひたすらやってから、だんだんとピクトグラム、アイコンとかをつくるようにシフトしていきました。

ビジュアルシンキング.jp

それで図解とこういうのをひたすら1年くらい趣味でやっていたんですけど、要はですね、これ(ピクトグラム)とかも丸と四角の組み合わせで表現できたりとか、図解もそんなに複雑なことをしなくても、丸とかバツとかシンプルなものだけで表現されていると、パーツの組み合わせでいろんな情報を表現できるんだということに気がついたんですね。もうちょっと複雑なものに挑戦しようと思って、『ソーシャルネットワーク』という映画を見た直後くらいにつくってみようと思ったんです。ザッカーバーグとその関係者、ファウンダーなどをまとめてみて、その後どうなったかも含めて一覧にしたらどうなるんだろう? ということを趣味的にやってみました。これが初めてインフォグラフィックみたいなものをつくろうと思ったきっかけです。また、関ヶ原の戦いのビジュアライズも試してみました。家康軍と三成軍を絵で示してみたんです。のちほど、詳しく事例としてお話します。

NewsPicksの構造

そんなこんなで本を出したりして、2014年の冬からはNewsPicksに加わっています。NewsPicksとは何かと言われると、ソーシャル経済ニュースと答えていますが、ちょっと一言で表現しづらいのが、サービスとしてネックだなと思っているんです(笑)。

NewsPicksのTOPページ

イメージとしてはここですね。まず、このNewsPicks Web版の画面ですけど、いろんなユーザーが記事をピックすることで、記事を引っ張ってくるんです。その記事に対してどう思うかというのがコメントとして投稿ができます。例えば、この記事だと110人がPickしていて、ユーザーアイコンが並んでいきます。こういった記事が数多くあります。これは、プラットフォームの側面ですよね。

また、NewsPicksのタイムラインにはTwitterとかFacebookみたいに、ぼくがフォローしてる人がPickした記事や投稿したコメントなどの情報がどんどん流れてくるようになっています。Pick&Commentというのは、記事をPickすることや記事に対してコメントを投稿する、昔からあるはてなブックマーク的な存在で、こっちがTwitterとかFacebook的なタイムラインの世界観です。さらにNewsPicksのコンテンツは国内外のメディアの記事を配信するプラットフォームの役割のほかに、編集部で作っているオリジナルコンテンツがあります。これは、NewsPicksの中に編集部がありまして、そこで自分たちでつくったコンテンツを配信しているんです。だいたいこういった要素が詰まったようなサービスを提供しているのがNewsPicksですね。いまWebの画面を解説しましたが、設計としてはモバイルファーストです。スマートフォンで使うことを一番前提としていますが、アプリ以外だとWeb版とタブレット版を用意しています。ぼくがやっているのは、NewsPicksオリジナルコンテンツの部分です。

コンテンツの話をしていきましょう。フィルターバブルと照らし合わせてなんですが、プラットフォーム全体、NewsPicks全体も、先ほどの長谷川さんの話にもあったようにフィルターバブル、フィルターに関与しているんですが、特にぼくはコンテンツ制作をやっているので、その視点で話をしていきたいなと思います。

コンテンツ制作の実例

たとえばこれ、ぼくがつくった「Google買収戦略20の事実」というページです。ビジュアルとテキストと組み合わせて、モバイルに最適化して縦スクロールしながら閲覧できる絵巻物みたいな感じですね。実際はもっとすごい長いんです。ユーザーに気軽に見てもらえるようなコンテンツというところでスタートして、こういったものを、ひたすらつくっています。

Google買収戦略20の事実

また、昨年、一昨年と連続してUber特集というものをやりました。これはそのときにつくったものです。Uberの実力はどんなだろうということで、競合のLyftというサービスと運賃の比較をしたり、ドライバーが稼げる額を比較したり、海外への展開などをまとめたような記事を月に4、5本つくっています。

インフォグラフィックの事例

改めてまとめると、ぼくはインフォグラフィックス・エディターとして働いてますが、メインとしてはその情報をビジュアルを用いてわかりやすく、あるいは正しいであろうというようなことを伝える仕事をしています。簡略化すると、ビジュアルをつかった記事を書いているということですね。なぜ職種名に「エディター」と付いているかというと、インフォグラフィックの記事をつくるにあたっては、まず最初に企画があって、それから情報を集めて取捨選択し、ストーリーをつくってデザインしていくというプロセスがあるんですが、ぼくの仕事の半分以上は、このプロセスすべてを一人でやっています。なので、ただデザインだけ、グラフィックだけをつくっているのではなく、より上流工程からという意識がありますので、「エディター」とつけてほしいと頼んでいます。そのため編集会議にも毎回出ますし、編集長や他のエディターとも対等に話をする関係になっています。

データ・ビジュアライゼーションとインフォグラフィックの違い

もう少し具体的なところで、2つのアプローチについてお話します。ぼくは常々、データ・ビジュアライゼーションとインフォグラフィックの違いを意識しないといけないな、と気をつけています。どういうことかというと、まずデータ・ビジュアライゼーション。これはNewsPicksに入る前にWIREDで仕事をしたときのものです。2012年に、大統領選挙戦でオバマさんとロムニーさんの献金がどの州からどのくらい出てきたかをマッピングしたものをつくりました。これはデータ・ビジュアライゼーションであって、インフォグラフィックではありません。

一方、これはNewsPicksに入ってからやったのですが、サッカーの日本代表の国内組のフォワードを比較しています。たとえば宇佐美選手はペナルティエリア外からのゴール数が全選手中で一位だったというのをまとめたもので、このようなストーリー性があるものをインフォグラフィックとぼくは呼んでいます。

大統領選挙戦とサッカー日本代表の事例

特にユーザーはそんなに意識する必要はないんですが、作り手や発信者はこの2つを意識しておく必要があるなと思っています。

どういうことかというと、これはEpicGraphic.comというサイトの画像ですが、違いを上手く表しています。データ、インフォメーション、プレゼンテーション、ナレッジを分けて考えていて。まずデータは材料ですね。パンケーキでいうと卵や粉にあたります。それが、ある程度料理されたのがインフォメーションです。プレゼンテーションの段階は生クリームやナッツがのっけられたりとデコレーションされた状態です。そして、それが食べられることでナレッジになる……ということです。データ・ビジュアライゼーションというのは、データとインフォメーションの間くらいの状態なんですね。卵と粉をいかにうまく混ぜるかというのがデータビジュアライゼーションの段階に当たります。インフォグラフィックになると、このインフォメーションとプレゼンテーションがちょっと合わさっている感じをイメージするといいです。

つまり、お客さんに対する出し方の違いです。どこまで料理をして完成品とするか。完成品の定義もありますが、求めている相手に合った状態で出すのが大事です。なので「原材料から知りたい、そこから自分であとは料理するからいいよ」という人にプレゼンテーションしても、ウッとなるわけです。「そこまでやらなくていいけれど面倒なことはしたくない。最後ちょっと食べるところだけしたい」という人には、ケーキを完成形にして出さなきゃいけないので、そうした出し方を意識しています。

フローから見る、両者の違い

インフォグラフィックをつくる場合、実際のフローとしてはデータ収集、分析、編集、プレゼン、デザイン、があります。このフローでいうとデータ・ビジュアライゼーションは、どちらかというとデータを集めてきて分析できる状態をつくるまでを指しています。なので、さきほどの例でも言いましたが、卵と粉を買ってきて、それをどんな配合で混ぜたらいいかっていうのがデータ・ビジュアライゼーションの段階です。さて、それを使って考えたり、受け取った人がなにかアクションを上流工程からやらなきゃいけない。改めて比較していくと、データ・ビジュアライゼーションは一見での理解は難しい。実際の記事でデータ・ビジュアライゼーションとともに文章があり、ひとつの記事となっていて、一通り見たり読んだりしていくと理解できるようなものになっています。なので読者は、一緒に考えなきゃいけないんです。

一方、インフォグラフィックと呼んでいるほうを見ると「あ、宇佐美選手一位なんだ、ワンタッチゴール、永井選手一位なんだ」ということを、特に考える必要はないですよね。見た人が「あ、そうなんだ」という風にすぐ受け取れる状態になっている。

データ・ビジュアライゼーションとインフォグラフィックの違い

インフォグラフィックは編集とプレゼンまでをつくり手が仕上げて、伝えるために使う道具になっているので、そこから先のアクションを期待することになります。プレゼンに対してどうするか。データ・ビジュアライゼーションは割と受け手が考えなければいけない。そのためフィルターバブルの話でいうと、データ・ビジュアライゼーションのほうがまだそれほどフィルターがかかっていません。インフォグラフィックは編集が入るので、その時点でつくり手のフィルターはかからざるを得ないですね。こうした違いがあります。

コンセプトの相違点

コンセプトの違いもあります。データ・ビジュアライゼーションは、グーグルやFacebookの世界と同様にアルゴリズムで解決するものです。ルールのもとにコードを書いてつくるので、先ほどお話した大統領選の献金のマッピングも次の選挙でやれといわれたら、データを流し込めば違う結果をすぐ取り出せるような状態になっています。一方、インフォグラフィックのストーリーテリングは、ある程度の枠組みや起承転結があっても、毎回考えてつくるというコンセプトの違いがあります。

ケーススタディーとして、冒頭で登場した関ヶ原の戦いの事例を挙げましょう。データ収集、分析、編集、プレゼンという4つのプロセスですが、まず関ヶ原の戦いを目で見てわかるようにつくるためにデータ収集をします。

関ヶ原の戦い

これは昔プライベートでつくったもので、Wikipedia上のデータを利用したものですが、まずはそうしてデータを集めてくる。その時点でもうある種フィルターがかかってますよね。Wikipediaは、だれかが必要な情報を載せているだけで信頼性を保証するものではありませんから。それでも、まずはこのようにデータを取ってきます。次にもう一つ別のデータとして、これもWikipediaですが、積極的に裏切った人はだれかとか、戦わなかったのはだれかとか、そういう情報もどんどん集めていきます。ただWikipediaから取ってきたとはいえ、ぼくがつくり手としてもある程度の歴史の流れを知っていたので、まだいい方だとは思います。もし、まったく知らない、海外のなんとか戦争とかっていうものを同じようにやったら、よりおかしな方向に向かう可能性があります。次に分析です。Excelに移して兵力順に並べ、実際に裏切ったのは小早川秀秋とこの辺の黒の部分、グレーのところは実は戦場には出てたけど、戦わなかった勢力だ、というようにソート・分類をしていきます。これをプログラムに流し込めば、ベースはもうできてしまいます。これがデータ・ビジュアライゼーション。分析結果のレポートですよね。

これを見ると、ぼくの解説が必要です。たとえばこちらが徳川家康軍、こちらが石田三成軍、黒の人が裏切った人、グレーの人が戦わなかった人です。このように解説するために使われるので、たとえば分析結果を共有しながら次の戦略を練るシチュエーションなどには、データ・ビジュアライゼーションが適しています。ただ、これをいきなり出されると補足の説明が必要なので、インフォグラフィックとしては弱い。そのため、この関ヶ原の戦いの事例では、もうすこしデータ・ビジュアライゼーションとインフォグラフィックを掛け合わせたような表現を試みました。まず、戦闘開始時点はこうでした、というのを用意しています。次に、裏切った人はこの黒とグレーの人です。よって、実質では東軍がこれくらい多かったと見なしてもいいので、三成が勝つのは難しい。こうした説明を付け加えることによって、インフォグラフィックに変化します。ここまであれば、見る方はよりスッと入れます。

ただつくった当時はデータの下に時系列のストーリーを加えたんですけど、もし、いまつくるのであればストーリーをメインにつくりますね。つくった当時は、データ・ビジュアライゼーションをメインに持ってきて、インフォグラフィックを補足でつけた形でした。つまり、ケースバイケースです。たとえば、データの正しさが確実に担保されているケースでは、データメインで「それに対して私はこういうことを考えました」という意見とともに「みなさんどう考えますか?」と提示するのもありだと思います。そうすると、よりフィルターがかかっていない状態でこれはひとつの参考意見だ、という提示の仕方もできます。これがインフォグラフィックです。

(2016年2月20日@amu)

続きはこちら

 

【そのほかのプレゼンテーション、ディスカッション】

  • 櫻田潤氏、松浦茂樹氏、坂田一倫氏、長谷川敦士氏:

1/6 メディアの信頼性を模索する
2/6 メディアの責任とは
3/6 コンテンツの役割と設計倫理
4/6 フィルターバブル時代を生き残るためのリテラシー
5/6 情報の倫理
6/6 IAの役割

 

amu

未来を編む

「編集 」「デザイン 」「ビジネス 」 関連の記事を
もっと読む