Data Visualization Japan Meetup 2021（2021年12月29・30日開催）における、矢崎 裕一の講演です。行政事業データベース「JUDGIT!」と、NHKスペシャル「検証 コロナ予算」に連動する Web コンテンツの制作過程についてお話しします。
イベントページの方に最後まで「カミングスーン」というか「何を話すんだ」という状態になっていたかと思いますが、タイトルとしてはこういう形にさせていただきました。「JUDGIT!、そして、コロナ予算の探索的可視化」です。
一つ前の尾上先生のところで JUDGIT! の話があったかと思いますが、私も少し後のタイミングからこのプロジェクトに参加させていただいています。そこから、昨日 NHK スペシャルでコロナ予算の使い道の調査報道の番組がありましたが、その Web コンテンツの方でお手伝いをさせていただいております。
今日はそこに関わった時の話をします。NHK さんのことを私が話すのはおかしいので、あくまで私自身のエピソードとしてお話しさせていただきます。
JUDGIT! とは
名前がいいですよね。どこかで聞いたことがあるような、でも造語みたいで、SEO に強そうで、覚えやすいんだけれどちょっと独特、という。
関わっているメンバーとしては、この Visualizing.JP というのが私のロゴでして、すでに皆さんで進められている中で一番最後に混ぜていただいたという感じです。
構成メンバーとしては——
- 構想日本 ——地方で行政事業レビューをやられていて、民主党政権の時に日本の政府にやり方を提案された。その後、自民党政権になってもずっとその仕組みが続いています
- Tansa（少し前の組織名で言うとワセダクロニクル）——新聞社ご出身のジャーナリストの方たちが立ち上げた NPO の調査報道団体
- 尾上先生のラボ
何ができるか
いろんな切り口で行政事業の検索が行えるようになっています。
下世話な使い方としては、世間を騒がせるニュースがあった時に、関係する名前を打ち込んでみるという興味本位的な使い方もあります。
ここに載っているのは、国の中央省庁を通じて何かのプロジェクトをやる際に、どんなプロジェクトでいくら支払われていて、その先のアウトプットはどうだったかというデータベースです。
ですので実は**民間企業の方にも役立ちます。**大企業にお勤めの方が「自分の会社でこんなプロジェクトをやっていたんだ」と発見したり、競合が国の委託事業としてこんな事業をやっているんだと見つけられたりする。どういうプロジェクトにいくらの予算がつき、何年かけてやったのかが分かるので、今後の入札に役立てることもできる。
グラフで検索
私がお手伝いしているのが「グラフで検索」という機能です。まずざっくりとデータの姿を眺めるところから始めませんかということで、棒グラフを使って複数の切り口を同時に表示しています。
府省庁という単位で絞り込んで、厚生労働省の「子ども・若者育成支援」ならどんなプロジェクトがあるのか、と一覧を出す。あるいは主要施策の切り口から「科学技術イノベーション」をテーマにした事業を見てみると、文部科学省だけでなく、経済産業省や防衛省もこのテーマで予算をつけて事業をやっていることが分かります。
一般的な Web サービス——たとえば食べログのようなレストラン探し——は、割とベストエフォートというか、「その時空いている」「食べたいものに近い」という形で、ずばりを見つける感じでもないと思うんです。
**このサイトの場合は「そのものズバリ」を見つけたい。**そのアプローチとして、データがどういう姿をしているかを確認しながら、少しずつ自分の興味関心をもとにデータを切り刻んでいく——そういう見方ができるサービスになっています。
記者会見とグローバルカンファレンス
発表した時、参議院議員会館で記者会見をしました。隣にいるのが尾上先生、後ろが Tansa の皆さんと構想日本の皆さんです。記者の皆さんも隠し撮りしてみたということで、こんな感じで詰めかけていらっしゃって、記者会見の舞台裏を体験することができました。
Yahoo! ニュース個人という枠組みがあり、専門家をオーサーとして指名し、事前チェックなくそのままパブリッシュできる仕組みがあります。そこで JUDGIT! の話も書かせていただきました。覚えたてのパラグラフ・ライティングで書いてみたという感じになっています。
また調査報道系のグローバルカンファレンスがあり、ワセダクロニクルさんが定期的に行ってコネクションをガンガン作っていくという活動をされています。そこで JUDGIT! も発表したいということで、私も一緒についていって、Tansa の方と2人で英語で発表してきました。漫才じゃないですけど、目の前に机も何もない状態で、怖いなという体験をしてきました。
NHKスペシャル「検証 コロナ予算」
昨日放送されたもので、3回あった補正予算の中でコロナ予算と呼べそうなものについて、報道のアプローチとして中身を調べ、現地でインタビューもする番組でした。
この中で、番組とほぼ同じタイミングで公開された Web コンテンツ——アートディレクション的なところと、データを探索的に操作できる Web コンテンツ——を作らせていただいています。
難しさ
「新型コロナ禍」というテーマのコンテンツをマスに向けて作ると考えた時、いろんな難しさが想起されます。
**まだ完全に終わったと言えないし、亡くなられた方もいらっしゃるし、今も苦しんでいらっしゃる方もいる。**一方で「お金」という独特なテーマを扱う。これを Web のコンテンツとしてどう表現し、取りまとめたらいいのか。
コンセプト
これは私が考えたことですが、NHK の皆さんも同様のことを考えていらして、すごく話が合ったところです。
- コロナ予算と呼ばれているものの全体像を俯瞰したい
- せっかく Web で提供するので、ユーザー・視聴者が自分の興味関心に応じてデータを探索できるといい
- 一人の市民として、コロナ予算との関わり方を見つけ出せると、より自分ごとに引き寄せて考えられるのではないか
番組の演出では、冒頭でお札がうわーっと積み重なってものすごく高くなる CG がありました。あの表現は私もすごく好きで、初めて見た時はゾッとするようなところがありました。
一方で Web でそれをどう表現するか。「77兆円」というのはすごくマクロじゃないですか。日本全体の話でもあるし、これ以上ないくらい集計した値でもある。そこだけ見せられても実感が湧かないし、距離が遠すぎる。
トーン&マナーを言語化する
デザインの「トーン&マナー」——具体的な文字や写真だけでなく、見た目から受ける印象です。「印象」と言うとふわっと聞こえるかもしれませんが、すごく大事な要素で、これをどうするかをまず言語化しようと思いました。
一口に「綺麗」と言っても——
- 洗練されている／シンプル → 今回のプロジェクトに合っている
- 透明感／ピュアさ → 遠くにあって合わない。むしろ感じさせない方がいい
「信頼感がある」と言った時も——
- 整然ときちんと並んでいることから感じる信頼感 → これはいい
- 大人の風格 → そうでもない。学生さんも含め年齢問わず見ていただきたいので、年齢的な属性はあまり関係ない
「楽しい」で言うと——
- 遊び心がある → これが「楽しい」に通じるといい
- 子供向け／ポップ／元気な感じ → 必要ない
こういう啓蒙的なコンテンツだとレゴっぽい色使いがされることもありますが、今回それがふさわしいかというと、そうでもない。
**では、この遊び心を今回のプロジェクトに合った形でどう取り入れるか。**これが一つのテーマでした。
ユーモアの「温度感」
そこでイラストを活用しようと。何らかのユーモアを感じさせることができれば、それが遊び心につながるのではないか。
ただし、ユーモアにも温度感があるわけです。お風呂の湯温と同じで、**熱いのがいい人もいれば、ぬるめで長く入りたい人もいる。**一口に「ユーモア」と言っても、どんな温度感のユーモアなのかが問われます。
人を選ぶユーモアの例
私が好きなのは amadana という家電メーカーです。東芝にいた方が外に出て、インディペンデントなデザイン家電を作られていました。
その万能リモコンの取扱説明書に、注意書きとしてこんなことが書いてあるんです。「自分のガールフレンドはこれでコントロールできません」とか。ちょっとエスプリというか、クスッとくるものがある。
私自身も amadana が好きだったので、防災トートバッグのデザインをさせていただく機会があり、イラストも自分で描きました。自然災害が起きた時にこのトートバッグが役に立つ、と。物が入るのは当たり前なので、**それ以外の使い方をイラストで提案する。**その中に「かぶると一人になれますよ」というのも書いています。
これもユーモアではあるのですが、人を選ぶユーモアだなと。私自身は好きなんですけれど。
たとえば「マスクを口だけでなく鼻にも3つつけたら完全装備です」とか、「マスクが足りなかったのでアベノマスクが助かりました」とか——**これはやはり人を選ぶ。**人によっては不快に思ったり、違う文脈を見出して気持ちがザワザワするかもしれない。今回は合わないだろうというところです。
人を選ばないユーモアを探す
では人を選ばないユーモアとはどんなものか。
なんとなくイメージはあったので、イラストレーターの方をアサインして、その人が持っている世界観を引っ張り出そうと考えました。イラストレーターのカタログサイトで、自分が考える「人を選ばないユーモア」を体現してくれそうな人を探したんです。
面識はなかったのですが連絡が取れて、スケジュール的にはタイトでしたが「問題なくやってくれます」ということでお願いすることにしました。朝日新聞社内でデザイナーとして働かれていて、ちょうどその年の8月に独立、独立3ヶ月目という方でした。私はそのキャリアは全然知らず、単純に作品を見てお願いしました。
たとえば——
- 「弁当パジャマパーティー」 ——二段重ねのお弁当箱を二段ベッドに見立てる
- クリームソーダのアイスを、北極・南極の浮いている氷に見立てる
- ナルキッソス（ナルシストの語源になった人物）が水面を覗き込む様を、スマホで再現
スケール感をずらすんですね。普通ならお弁当の中で寝られないじゃないですか。でもスケールが違うと入れる。現実に存在している行為・ものなんだけれど、少し異化効果が出る。これは誰も傷つけないし、ちょっとしたおかしさを感じることができる。
何を描くか
誰もがこの2年として記憶しているシチュエーションの情景がいいのではないか、ということで——オンラインのビデオチャット（Zoom や Teams）で飲み会をやった、テレワークをした、みんなマスクをつけていた——そういうところをモチーフに選びました。
実際に描いてもらうと、意味は保ったままスケール感を非現実的にすることで、広い間口のユーモア、目を引くキャッチーな分かりやすさ・楽しさを込めることができたのではないかと思います。
もう一つは、正反対の指向性を持つものが同居していることの面白さです。
- 屈強でマッチョな男性が、注射をめちゃめちゃ怖がっている
- 上半身はきちんとジャケットを着込んで、顔の周りに星が出るくらい明るく丁寧に話しているのに、下は寝巻きでゴミが置いてある
- 自動で消毒液が出るハンドサニタイザーに、たまたま歩いてきた猫がかかってしまう——意図しないおかしさ
ちなみに「Zoom 足湯」——足だけ入るお風呂に見立てたもの——を作ってほしかったのですが、**これは採用してくれませんでした。**イラストレーターの方が「もっといいアイデアがある」ということで、別のものを考えてくださいました。
前提として、ジェンダーを感じさせない、男らしさ・女らしさをイラストのトーンから感じさせない中性的なものがいいだろう、というのはもともとありました。
お札にマスクを描く
一方で、もう一つ課題がありました。「整然とレイアウトされていることによる信頼感」も表現しつつ、イラストを通じて「人を選ばないユーモア」も伝えたい。この2つをどう同居させるか。
数日、頭の片隅に置いて考えました。手書きでいくつか描いてみたけれど、しっくりこない。
そこでこんなアイデアが浮かびました。
**お札に人物が描かれていますよね。その人物も、実はこの2年、マスクをしているんじゃないか。**そこでマスクをさせてみた。テーマが「新型コロナとお金」なので、うまくフィットするのではないか。
お札に描かれているのは、過去に功績を遂げた著名な方です。**その中に、私たち一人ひとりが入っていく。**イラストで描いてもらった、コロナ禍で誰もが経験した情景や行為が、お札として刷り込まれている。
お札が整然と並んでいることによる信頼感・シンプルさと、イラスト表現によるユーモア——この2つをうまく混ぜて、一つの表現として統合できないかと考えました。
公開したコンテンツ
① 主要施策が複数省庁にまたがる様子を俯瞰する
あまり複雑にしすぎないで見られるものがいいということで、横軸に中央省庁、縦軸に色分けで主要施策を配置しました。
主要施策は20個ほどあります。色で区別するとして、凡例をつけるか。
正直に20個のカラーバーを並べて「どの色がどの施策です」と示しても、**積み上げ棒グラフとの対応を目で行ったり来たりしながら追うことになる。**それは疲れるし、大変な割に分かったような分からないような感じになりそうでした。
そこで凡例をつけるのではなく、クリック（タップ）していただく。すると該当する施策のみが残った状態になります。
たとえば「地方創生」なら——いまクリックしたのは内閣府ですが、それ以外にもいろんな省庁が同じ「地方創生」でプロジェクトをやっているという偏りが見て取れます。
「沖縄振興」なら、本当に内閣府が一手にやっていて、他はほとんど扱っていない。農林水産省がちょっと扱っているくらい——そういう発見があります。
ここに JUDGIT! へのリンクがついていて、クリックすると**絞り込んだ条件のまま JUDGIT! に飛ぶ。**省庁は内閣府、主要施策は男女共同参画、2021年度に公開された補正予算のレビューシート——というように。7つに絞り込まれているので、一つ一つ見ていけばより理解が深まります。
凡例をつけないのは、もしかしたら約束破りかもしれないのですが、クリック・タップする中から発見してほしいという思いがあります。
② 予算規模に応じた成果は
左右2つの塊に分かれています。
- 左：1つのプロジェクトにかかっている予算額の合計を、多い順に並べたもの
- 右：その事業を通じてどういうアウトプットが出たか、多い順に並べたもの
**問題は、アウトプットの単位がめちゃめちゃたくさんあること。110種類あります。**人数だったり金額だったり——網羅的に一つの単位にできそうなものも当然あるのですが、行政事業レビューシートを記入する官僚の皆さんがそれぞれ別々に書くので、違う単位が使われている。
そうすると施策を横串で通した評価がしづらい。
本来であれば、インプット（お金・リソース）とアウトプット（人数・件数）の比が事業の成果であり、定量的に効果を計測して、2年3年と回すことでパフォーマンスが良くなったか悪くなったか、複数プロジェクトを比較できるはずなんです。
現状は単位が148種類ほどあるので、**クレンジングのしようもなくそのまま入れています。**上のプルダウンで省庁と単位を選ぶと、合致するプロジェクトが下に出てきます。
そして同じプロジェクトを線でつなぐ。これはスロープグラフと呼ばれる手法です。
赤く塗られている線が「予算額は少なめなのに、活動としては大きい数値を出している」もの——右上に線が伸びているものです。金額が少ない割にアウトプットが多い、逆に金額が多い割にアウトプットが少ないというのを俯瞰して見える仕組みにしています。
少し乱暴かもしれませんが、探索する目安にしていただければと。プロジェクト名にマウスポインターを載せると「JUDGIT! で確認する」が出て、クリックするとそのものズバリの行政事業レビューシートが見られます。
制作中のもの ― サンキーダイアグラム
まだ公開していない部分ですが、どこからどこにお金が支払われたかをネットワークとして捉えることができます。
支払先は8,243件ほど。ただしこれも、固有名詞を一つ一つ確かめないと、そもそも8,243なのかどうかも分からない。
たとえば「株式会社」が全角カッコで書かれていたり、漢字一文字で表現されていたり。クレンジングをやっている方からすると「クレンジングしたくてたまらない」感じになると思うのですが、名寄せ特有の難しさがあります。
法人番号が国税庁から API やデータセットで公開されているので、それと突合させれば正式名称は分かる。ただ、そこからさらにどうグルーピングするかという問題もあります。
左に中央省庁が縦に並び、右に地方自治体、労働局、国立系の機関、独立行政法人などが並ぶ。**このグルーピングを作ってデータ化して教えてあげないと、正しく表現できません。**D3.js で作っているのですが、D3 側が「これは地方自治体だよね」と丸めてくれることはない。なのでどうまとめるかというデータも必要になってきます。
これはサンキーダイアグラムと呼ばれるチャートです。有り物のライブラリを使っているので、独自の表現にするために手を入れながら自分の表現に引き寄せていきたいと思っています。
どこの省庁からかで支払先がガラッと変わるので、これだけでも結構面白いという感じがしています。
技術的な共有
Cloud Dataprep
データのクレンジングについて。Cloud Dataprep という Google Cloud のサービスがあります。
今回のコロナのデータはそこまで大きくないのですが、ファイルサイズが大きいデータをクレンジング・名寄せする時にすごく便利なツールです。一番安いプランで月額1万3〜4千円ほどするので高いといえば高いのですが、かなり大きめのデータでもクレンジングや名寄せができます。
システムを組む必要は特になく、Google Cloud Storage や BigQuery に GUI でファイルをアップロードすれば Dataprep で読み込めて、GUI でクレンジング・名寄せ処理が行えます。
Python で同じことをやろうとすると、どんな複雑なコードを書かなければいけないんだろうと戦々恐々とするので、**時間がない時は「使っちゃえ」**ということで、ご紹介させていただきました。
レスポンシブ対応
D3.js などで1から可視化コンテンツを作る時、レスポンシブレイアウトに合わせるのは悩ましいですよね。
可視化コンテンツが表示される Web 標準の画像フォーマット SVG で、まずサイズを指定します。そして preserveAspectRatio ——ブラウザが大きくなったり小さくなったりする時に SVG の拡縮の基準点をどこにするか——を、縦も横も中央にする設定にしておきます。
横幅は追従させるとして、では縦はどうするか。これは横幅に対する比率でやるとうまくいきます。
ただし——大きいディスプレイで見る場合は横幅がかなり長くなる。4:3 で作ると縦がすごく長くなってしまうので、**大きめのディスプレイに対しては縦を短めにして、結果的に横長にする。**1280〜1920px くらいならもう少し縦幅をしっかり取る。スマホのポートレートモードならまた全然違う。
今回は3パターンで出し分けて、最大公約数的なところはいけたかなという感じです。ユーザーが気まぐれにウィンドウサイズを変えることもあるので、それを検知したらサイズを取得し直して SVG に伝えると、いい感じにフィットします。
チャートの状態へのパーマリンク
インタラクティブに操作できるチャートを人にシェアしたい時、毎回トップページ的な「何も操作していない状態」をシェアすると、受け取った側はもう一度自分で最初から見ていかなければならない。
たとえば「男女共同参画のこの状態を人に伝えたい」と思った時、リンクを送るだけでなく「どう操作してみて」と伝えなければならない。
それよりは、URL の中にチャートの状態が組み込まれていて、そのままシェアできるとすごくいい。
いわゆる GET メソッドです。URL の中にクエスチョンマークがあって長々と文字が付いているアレですね。?変数名=値&変数名=値 という書式で、送りたい設定項目が全部書いてある URL です。
この書式に、ユーザーが操作するたびにチャートの状態を常に書き換えています。そうすると常にチャートの状態が URL として保存されているので、見ているユーザーは何も考えずに URL 欄からコピーして人にシェアすればいい。
なお、他の人が勝手に書き換えても大丈夫なように、一応内部でチェックしています。正しい値かどうかを確認し、合致しなかったら初期値を入れるという感じにすれば、悪意やいたずら心を持って書き換えられても問題ないかなと。
まとめ
今日は、まず JUDGIT! というプロジェクトの話を共有させていただいて、そのデータも活用する形での NHK の番組と連動した Web コンテンツについて——デザインプロセスで考えたことと、チャートとして実装する時に気を使った部分をお話しさせていただきました。
以上です。どうもありがとうございます。