東洋経済COVID-19ダッシュボード制作メモ（１）コンセプトと配色
2月27日、東洋経済オンラインにて新型コロナウイルス感染症（COVID-19）のデータを一覧できる特設ページ「新型コロナウイルス 国内感染の状況」を公開しました。
ありがたいことに「わかりやすい」「毎日見ている」という反応を多数の方からいただいています。2年ほど前から東洋経済オンラインでデータビジュアライゼーション（データ可視化）作品を発表していますが、今回はちょっと驚くほどの反響がありました。
日々のデータ更新、改修やデータ追加などの要望対応、問い合わせや取材依頼など、いまだに落ち着いたとは言えない状況ですが、合間合間に書きためた技術やデザインの趣旨を忘れないうちに記録しておきます。制作メモのようなものとお考えください。
最もストレートな読者対象は「マスに向けてデータビジュアライゼーション作品を公開している個人」となりますが、あまり該当者は多くないと思いますので、たとえば社内向けのダッシュボードを制作する方やUI/UXデザイナーの方など、ひろく情報デザインに関わる方が読んで面白く感じていただけるものになればよいと思っています。
なお、このnoteはあくまでも筆者（荻原）の個人的な見解であり、会社の公式見解ではありません。また僕は割と忘れっぽいので、制作から2ヶ月も経つと記憶が薄れています。事実誤認があったらすみません。
コンセプトは「確定情報から冷静に現状を把握できること」
今回のプロダクトでは、「確定情報をシンプルに提供して、ユーザーが冷静に現状を把握できること」をコンセプトにしました。このサイトを制作した2月下旬ごろは「国内の感染者が◯◯人を突破」「◯◯県で新たな感染者」といった報道が飛び交い、自分も含めて情報の洪水に疲れた人が多かったように思います。そこで、出来るだけシンプルに確度の高い事実を素早く確認できるようなサイトが必要だと考えました。
そのため速報性、独自性、解説（メッセージ）の提示などはいったん捨てて、厚生労働省の報道発表に絞って淡々とビジュアライズすることにしました。印象の強いエフェクトでユーザーを惹きつけるよりは、ストレスなくデータを確認できることを優先しました。
HUDデザイン
「シンプルで冷静に現状を把握でき、かつ飽きない」を実現するため、デザインの基調はいわゆるHUD（Heads Up Display）デザインを参考にしています。SF映画やゲームでよく見る、近未来的なディスプレイのデザインです。「hud design」などで画像検索するとクールな実例がたくさん出てきます。
次の作品は基調デザインをHUD的にしようと今年の初めあたりに（主に『デス・ストランディング』の影響で）考えていましたが、そのおかげでスムーズに配色などが決められてよかったと思っています。
ダークモード配色
配色はHUDデザインを踏襲してダークモードを基調としつつ、プライマリーカラーは蛍光色の青緑、アクセントカラーは明度・彩度が強い補色である明るい黄色としました。
ただし「全国の状況」部分は似たような見た目の棒グラフが連続するためバーの色を変えています。シンプルなデザインを突き詰めると単調になりがちですが、「毎日見る」ことを意識するのであればユーザーを飽きさせない工夫も重要です。
僕自身はデータを見るのが大好きなので、たとえば行政機関が公開するいわゆる「神エクセル」を見るとデータベース化（正規化）したくてたまらなくなるのですが、一般的にはデータを確認することを苦痛に感じる人が多いことには注意が必要です。
地図の配色はフラットに
地図に関しては、通常であれば数値の高い部分は赤、次に高い部分は黄色…と設計することも多いですが、今回は不安を煽らないことを優先して「プライマリーカラーで分ける」「中央値で2段階に分ける」とフラットな配色にしています。
特に「◯◯県に感染者が多い」といったネガティブな情報は住民への差別や風評被害につながります。最悪のケースのひとつが東日本大震災のときに福島県が受けた被害でしょう。データビジュアライゼーションにおけるデザインの正解はひとつではなく、扱うデータの性質や社会的な文脈によって変えていく必要があります。
ステレオタイプを配色で助長しない
以前は年齢別・性別の感染者数も掲載していましたが、このグラフでは男性＝緑色、女性＝黄色で分けています。
今回に限らず、基本的にジェンダーや人種、宗教などに関するステレオタイプを助長するようなデザインはしません。たしかにステレオタイプな色使いをすることで直感的にわかりやすくなる面はあるかもしれませんが、データビジュアライゼーションにおいてはインタラクションや凡例の表示といったデザインで十分にカバーできると考えています。少なくとも私自身は今までの制作において「どうしても男性と女性は青とピンクで分けなくては」という事態が発生したことはありません。
以上、コンセプトと基本的な配色について説明しました。とりとめなくメモを書いていたら長くなってしまったので（周囲にデザインや技術の話をする人がいないので、ついつい喋りたいことがたまってしまう）、残りは次以降とします。
なお、制作の経緯などはこちらのインタビュー記事でもお答えしていますので、興味のある方はぜひご覧ください。
この記事が気に入ったらサポートをしてみませんか？