Data Visualization Japan Meetup 2020（2020年12月28・29日開催）における、田島 将太さんのLTです。
なお本記事は自動字幕をもとに整文していますが、この動画の字幕は認識精度が低く、固有名詞や専門用語の誤認識が多く含まれていました。文脈から復元していますが、細部は動画でご確認ください。
本日は「はじめてのデータビジュアライゼーションが Twitter で100万回見られた話」をします。
特に、編集部とデータジャーナリストが同じ方向を向いて作業するための言語化、それから試行錯誤しながらチャートを作って発信できるツールである Observable について紹介したいと思っています。
自己紹介
昨年まで前職のスマートニュースで事業開発とデータ分析をしていまして、今年はメディアコンサルタントとして、文藝春秋さんやフジテレビさんなど5社ほどのお手伝いをしていました。
完成した記事
こちらが完成した記事です。ハフポストさんの記事の中にチャートが3つ埋め込まれています。
日本のジェンダーギャップを、国際比較の観点や議会の女性割合といった切り口で可視化するもので、テキストとグラフが相互に情報を補いながら理解を促すコンテンツになっています。
真ん中のものはアニメーションになっていて、**これが Twitter で100万回再生されました。**1945年から2020年まで、各国の議会における議員の女性比率の推移が分かるコンテンツです。
企画の発端
普段メディアコンサルティングをしている市場調査から、Web メディアの戦略として取るべき柱の一つがデータジャーナリズムにあると考えていました。
ただ国内の事例を見ると、日経ビジュアルデータさんなどかなり本格的で気合の入ったコンテンツが多く、お話しする編集部の方が「自分たちにはできないんじゃないか」と感じてしまうものが多いように感じていました。
そこで今回は——
- 特設ページを作らない
- CMS の改修をせずに大きなインパクトを出す
- 編集者と協力して一緒に作り上げる
ということを目指して取り組みました。
始める前に言語化したこと
そのために、まず始める前に3点を言語化して共有することから企画を動かしていきました。
- 読者に価値を提供できるか
- チームの理解を得られるか
- 作成コストを抑えられるか
なぜハフポストにデータ可視化が必要なのか
ハフポストが感じていた課題として、扱う社会問題は社会的な合意形成が十分に取れていないものが多く、簡単に主張のぶつけ合いや誹謗中傷に陥りやすいというものがありました。
そこでデータによって、政治的イデオロギーに左右されないアジェンダ設定をすることで、会話の出発点とすることを目指しました。
インパクトの言語化
データビジュアライゼーションによって得られるインパクトを、社会へのインパクトとビジネス上のインパクトに分けて言語化しました。
この段階で実は編集部の理解を得られていたので、ビジネス上のインパクトを KPI に落とし込むところは実際にはやっていないのですが、こういったことを言語化してきました。
読者に提供する価値
データ可視化が読者に提供する価値を、3層で想定しました。
- 機能的価値：テキストを読まなくても興味を持てる／テキストを理解する助けになる
- 感情的価値：社会問題という「正解の分からないトピック」について、客観性の高い理解ができて安心するのではないか
- 社会的価値：データを見ることで他人からどう思われたいか——データに基づいて議論ができる、論理的でスマートな人物だと思われたいという価値を提供できるのではないか
グラフを作る上での指針
グラフを作る上で、まず指針を決定しました。これはまだ私の中では仮の指針で、今回のイベントを通して考えを深めたいと思っています。
- インクルーシブであること ——グラフのタイトルで主張を固定するのではなく、グラフを見た人がいろんな解釈をできるようにする
- 再利用できること ——インパクトを最大限に出すために、1回で終わりではなく何度も使えるように
- わかりやすいこと
- 公共性を持つこと ——ソースや取得先のデータに透明性を持たせる、色覚特性のある方に配慮する、など
ここまでが Why と What の話です。ここからは How のお話をします。
ツール ― Observable
今回データビジュアライゼーションに使ったのが Observable というツールです。
これは何かというと、Jupyter Notebook と GitHub と Excel を混ぜたような、JavaScript で動作するデータジャーナリストのためのツールです。
- Jupyter Notebook のように、ノートブックという形で動き、一つ一つのセルに JavaScript や HTML を定義して対話的にコンテンツを作成できる
- GitHub のように、ノートブックのインポートやフォーク——他人のものを簡単にコピーすること——ができるので、コミュニティの資産の上に立つのが非常に簡単
- Excel のように、リアクティブなデータフローでセルが依存関係の順に実行される。そのため微調整や依存関係の把握が非常に簡単
こういった特徴は、今回のような——初挑戦で要件が変わりやすく、D3.js を学びながらサイトを作成し、CMS の改修をせずにアニメーションを記事に埋め込む——という条件に非常にぴったりでした。
実際に見てみるとこんな感じです。それぞれのセルで関数が定義されていて、右上に依存関係が出てきます。このチャート自体も、コミュニティのサンプルをフォークして自分でカスタマイズして作ったものです。
読者の反応
今回のアニメーションに対する読者の反応です。
- 「日本の女性参画の進みがいかに遅いかが分かりやすかった」
- 「北欧はともかく、メキシコや南アフリカがすごいのが意外だった」
- 「女性が少ないことに何が問題なのか」
- 「候補者に女性が少ないだけなのではないか」
批判的な意見もありましたが、**日本の議会の女性比率が低いという「事実」そのものを疑う発言は、観測範囲では見当たりませんでした。**これは議論の形成に貢献できたのかなと思っています。
そして、こうした反応は次のコンテンツにつながります。
- 「女性が少ないことは何が問題なのか」→ 「（女性が少ないことで）犠牲にしてきた何か」というテーマで新しい記事を書くことで会話を生み出せるかもしれない
- 「候補者に女性が少ないだけなのでは」→ 候補者男女均等法についてハフポストが次に出すことで、議論が進みやすくなるのではないか
学び
今回のアニメーションを通した学びとして——
メディアの皆様へ
- **データのありかを知っているのは編集部です。**協業なくしてコンテンツは生まれません
- ぜひデータ好きをクリエイターとして仲間にしてください
- 遠慮しないで What と Why を伝えてほしい
データジャーナリストの皆様へ
- Observable が非常に使いやすいぞ、ということをお伝えしたいと思います
以上です。