東洋経済COVID-19ダッシュボード制作メモ（２）デザインの変遷
COVID-19のダッシュボード「新型コロナウイルス 国内感染の状況」は、初期デザインから適宜改修を行ってきました。
最初の公開から3カ月以上が経ち、だいぶ初期の形と変わってきたので、ここではデザイン改修の変遷について振り返ります。
2月下旬：リリース
最初のバージョンをリリースしたのは2月27日です。最新版と比べるとシンプルに見えるかもしれません。
ただ配色パターン、グラフと新規／累計の切り替えスイッチ、年齢・性別集計、マップと都道府県別集計など、基本的な要素はおおむね変わりません。
この時点では厚生労働省が年齢、性別、都道府県などの情報が載った感染者リスト（たとえば「神奈川県、30代、男性」など）を取りまとめていたので、すべてのデータをそこから取得していました。ソースコードを見ると、1つのCSVファイルからJavaScriptですべての情報を動的に生成しているのがわかります。「あとはこのファイルだけ更新すれば万事OKや！」と当時は思っていましたが、この甘っちょろい考えはすぐに破綻することになります。
新規／累計の切り替えスイッチも実装していました。
今では東京都やNHKなど多くのサイトで導入されている切り替えスイッチですが、私は制作時にどこかのサイトを参考にした記憶がないので、東洋経済オンラインが初めてかもしれません。もっと前に導入していたサイトがあったら教えてください。
3月上旬：PCR検査人数、退院者数、死亡者数を追加
PCR検査のキャパシティが話題になっていたことや、退院者数・死亡者数も徐々に増えていたことから、3月4日にこれらの指標をグラフに追加しました。一覧性を重視し、できるだけグラフの数を少なくしようと3指標ずつ1つのグラフにまとめました。
これらの情報は感染者一覧では取得できません。ここですでに「1つのデータベースからすべてのグラフを更新すること」という当初の目論見が破綻したことがわかると思います。かといって年齢別や地域別の更新を止めることもできないので、サマリー情報と個別の感染者情報を同時にアップデートするという、ちょっと据わりの悪い作業をしていました。
一方で、反響の大きさを見て英語版も追加しました。
英訳はDeepL Translatorなどを使いつつ不自然な部分を自分で直しています。テキスト量が比較的少ないデータビジュアライゼーションは多言語展開に向いているので、今回に限らず自分のポートフォリオや東洋経済オンラインでの発表作品は時間があれば英訳しています。
英語で取得できる日本のコロナウイルス情報は非常に限られているようで、海外や日本在住の英語話者から問い合わせが多かったことを覚えています。中には私のことを厚生労働省の広報担当か何かと勘違いした人もいましたが…。
3月下旬：グラフ分割、リピーター向けアップデート
3月23日には割と大きなアップデートを行いました。今まで2つのグラフにまとめて表示していた5つの指標を1つずつのグラフに分割し、重症者数のデータを追加しました。また、切り替えスイッチのデフォルトを「累計」から「新規」に変え、注釈はデフォルトでたたみました。大きな流れとしては「初見からリピーター」「一覧から詳細」「累計から新規」の3つです。
まず「初見からリピーター」ですが、ページの公開から1カ月が経ち、何度もアクセスするユーザーが増えていました。また、ある程度は仕方ないことですが、厚生労働省のデータ形式が変わるたびに注記が増えていき、特にPCR検査人数などはグラフ部分よりも注記の面積が広くなっていました。そこで、スクロール時の圧迫感を少しでもなくすために注釈はデフォルトでたたみました。わかりにくいですが、余白もこれにあわせて微妙に調整しています。
次に「一覧から詳細」ですが、リピーターがメインになるにつれて、「一目で概況がわかる」ではなく個々の指標を確認するフェーズに移ったことを感じていました。そこでグラフを6つに分割し、切り替えスイッチのデフォルト表示も「累計」から「新規」に変えています。
また、1つのグラフに複数の系列を一緒に載せることで、本来は不適切な日別計算をする人が散見されていました。たとえば日別のPCR検査人数と陽性者数で日別の陽性率を見ている人がいましたが、両者は報告ベースであり検査人数と陽性者数は必ずしも対応しません。そうした「一緒に見るべきではない指標」をあえて離すことで不適切な計算をしづらいようにしました。この方法だと「相当な熱意をもってやっちゃう人」は止められないですが、ちょっとしたナッジにはなります。
加えてデータソース側の理由として、各指標の有効期間に徐々に食い違いが発生していました。たとえばPCR検査人数は2月から数字自体はあったものの、3月上旬に定義変更がありました。従来はグラフの色を変えることで対応していましたが、3月4日からだけ載せてもまずまず問題ない量のデータがたまってきていたので、それ以前は思い切って落とすことにしました。
一方で、このアップデートはグラフの数を2つ→6つに増やすことになります。初見の印象で「なんかグラフが多い…見るのやめよう」とならないか不安でした。一度サイトを見る習慣をなくしてしまったユーザーは多くの場合二度と戻ってきません。今まで「色々な指標が一覧できて見やすい」という意見はあったが「見づらい」という意見はあまりなく、ましてや「グラフを分けてほしい」などとはまったく言われておらず、かなり迷いました。
結局、コードがすっかり完成してから数日間悩んで、ようやく本番環境の改修を行いました。蓋を開けてみれば不評はあまりなく、コード量も2/3くらいに減ってグラフ描画まわりのロジックをリファクタリングできたので、後の開発はずいぶん楽になりました。
4月上旬：都道府県の詳細データを追加
3月23日には小池百合子東京都知事がロックダウンの可能性に言及し、実際に26日あたりから東京都の感染者数が急増しました。いよいよ本格的な感染者増加のフェーズに入り、都道府県別の数字を気にする声が大きくなったため、都道府県別の情報を拡充し、ページ全体を「全国の状況」「都道府県別の状況」に分けました。
各都道府県の情報は感染者数・退院者数・死亡者数・PCR検査人数と全国版とほぼ変わりませんが、グラフは棒グラフではなく折れ線グラフにして、どの都道府県を表示しても必ずすべての都道府県が薄く表示されるようにしていました。
このような表示にしたのは、基本的に「増加率」ではなく「絶対数」を見てほしかったからです。ふつうに単独でグラフを表示すると、たとえば感染者100人→300人でも1人→3人でもグラフの形は同じになります。そうすると、3人しか感染者がいない県でも「感染者が3倍に激増！」と言われてしまうことを懸念していました。
そこで「他の都道府県と比べるとどうか」を簡易的に確認するために、すべての都道府県を一緒に表示しています。この改修によってさらにグラフの数が多くなるので、全国と都道府県で視覚的に区別がつくようにしたかったという背景もあります。
ちなみに小さなこだわりですが、日本地図部分とグラフ部分は3カラムであっても2カラムであっても横に並ぶように調整しています。
4月〜5月：移動平均線、PCR検査数、実効再生産数を追加
日々のデータも徐々に安定してきたので、これ以降は新しい機能やデータを少しずつ追加していきました。
まず4月26日には移動平均線を追加しました。曜日による検査数などの変動が激しく、1日ごとに「今日は急減！」「急増した…」と一喜一憂する人が多かったので、休日要因を除いて見てもらうために後方7日間平均としています。
5月5日にはPCR検査件数を追加しました。
5月20日には北海道大学・西浦教授のモデルによる実効再生産数を追加しました。翌日には都道府県版もリリースしています。
実際にはこれ以外にも厚生労働省のデータ変更などに対応した改修を行っていましたが、こちらが意図したデザインの改修は主にこのくらいです。
基本的にデザインも開発も（毎日のデータ更新も…）すべて1人でやっているので、最近は何かを改修したら一晩寝かせて、整理されたアタマで翌朝チェックして本番適用する、というリズムで改修しています。
ちなみにソースコードとその修正履歴（Commit履歴）はすべてGitHubで公開しているので、過去の特定時点でのソースはこちらから復元できます。この記事を書く上でも修正履歴が役立ちました。
本当は「どのような方針でデザインを改修しているか」についても続けて書きたかったんですが、ちょっと長くなってしまったので別の記事に分けます。よければGitHubリポジトリへのスターなど、よろしくお願いしますm(_ _)m
この記事が気に入ったらサポートをしてみませんか？