「スマートニュース ワクチンダッシュボード」制作メモ

8月4日に「スマートニュース ワクチンダッシュボード」をリリースしました。首相官邸や厚生労働省から発表されているワクチン接種状況に関するデータを一覧できるダッシュボードです。

スマートニュース ワクチンダッシュボード - 新型コロナウイルスのワクチン接種状況

前回（前職で作った感染状況ダッシュボード）と同様に、設計・デザイン・データの選定・実装（正確には今回はデータの自動取得などにかかるシステムをエンジニアに作ってもらった）などを行いましたが、5月〜6月ごろにかけて制作する上で考えていたことをメモとして書きます。

全体の設計について

基本的には新型コロナの感染状況と似た形式のデータなので、構造は前回のダッシュボードとそこまで変わらない。他の見せ方も検討したが、「マルチデバイス対応」「概要から詳細への流れ」「初見でもわかりやすく、かつ何度も見たリピーターでも冗長に思わないこと」「データが追加・変更される可能性」などを考慮すると、最終的には大体このような形に落ち着くのではないかと思う。

前回はダークモードを基調としたデザインだったが、今回はスマートニュースのカラーイメージ（白背景＋カラフル）に合わせてライトモード基調にした。

接種がある程度進んだ段階でワクチン接種状況を熱心に見るのは誰かを考えると、おそらくワクチンを打つかどうか迷っている人ではないかと仮説を立てた。したがって、どちらかといえば若年層が見るページであることを念頭に、コントラストを抑え目にしつつパステルカラー調の色合いにしようと判断した。ちなみに以前バズった「大学生の服の色は大体こんな感じ」みたいなツイートから一部の色を抽出している。

余談だが今回は「ワクチンダッシュボード」と明確に名前をつけた。なぜかというと、前回は名前を「新型コロナウイルス 国内感染の状況」と、タイトルというよりは概要説明にしてしまい、各所で説明するときに苦労したから。

デザインについて

白背景は色の調整に苦労した。特にPCで開発しているときとモバイル端末で見たときの差がどうもダークモードより激しい（気のせいかもしれないが）。やはり僕はゲームで慣れているHUDデザイン的なトーンの方が合っているのかもしれない。

「都道府県の一覧」は、今回最も悩んだところのひとつ。以前から、地図表現で都道府県別のデータを表示することに難しさというかもどかしさを感じていた。日本はアメリカなどと異なり、国土が細長いので地図表示したときに無駄な余白が多くなる。また都道府県の面積差も大きいので、どうしたって北海道は目立つし、沖縄県や香川県はズームしないとクリックすることも難しい。

そこで今回は思い切って地図表示をなくし、グラフの一覧という形ですべての都道府県を表示することにした。47都道府県をフラットに並べると、モバイル端末ではスクロールが長くて冗長な印象を与える。そのため地方別に縦と横の二次元スクロール（TikTokとかでよく見るやつ）を採用して、PC端末での一覧性とモバイル端末での簡潔性を両立させた。

画像のダウンロードは、ちょっと手間をかけて実装した機能。p5.jsで動的に画像を生成できるようにしている。前回はこの機能を入れていなかったので、スクリーンショットの画像がTwitterなどで拡散されたときに出典がわからなかったり、都合のよい期間だけ切り取られたりしていた。それなら「スクリーンショットよりも早くて手軽な公式の画像ダウンロード機能を用意してしまおう」と考えて作った。時間的制約から今は接種回数推移のグラフしか実装できていないが、機会があれば他のグラフも同様にしたい。

データについて

ファーストビュー＝ユーザーがページを開いて最初に見える範囲に何が映るかはめっちゃ大事、という話を何回かTwitterや講演でしている気がする。一番最初に表示されるデータは、あえて「接種回数」でも「1回以上接種した人」でもなく「2回接種した人」にした。制作時（5月〜6月）はまだ接種自体が進んでいなかったこともあり、ほとんどのメディアが1+2回目の合計接種回数または1回以上接種した人をキーナンバーとしていた。しかし最終的に我々が見るべきKPIは2回接種した人＝ワクチン接種が完了した人とその割合なのだから、そこをまず最初に見せるべきだろうと判断した（最近ではデルタ株の蔓延によって、それも崩れつつあるが……）。

都道府県別の接種数は、実はこのサイトの最大の特徴のひとつかもしれない。なぜか：首相官邸のサイトでは都道府県のデータは週ごとに更新されるが、以前のデータは上書きされて消されてしまうから。まだこのサイトの制作にも着手していなかったころ、嫌な予感がして私や同僚が手作業でバックアップをとっておいたのが幸いして、過去分をすべて網羅することができた。

おそらく都道府県の接種数を過去分含めて掲載できているメディアはあまりないだろう。少なくとも僕が確認したいくつかの大手メディアでは最新分のみが表示されていた。

今後の課題

もちろん今回のプロダクトが完璧というわけではない。やりたかったが実現できなかったこともいくつかある。上で書いた画像ダウンロードの拡充もそうだし、たとえばOur World in Dataなどのデータを使って世界の接種状況を掲載すること、データやソースコードを公開すること、都道府県の一覧をもっと高機能にすることなど。新しいプロダクトを作るたびにまだまだ修行不足であることを痛感させられる。