「選挙余剰金」データ可視化ページの技術・デザイン解説
先日、東洋経済オンラインにて新しいデータ可視化ページを公開しました。
内容の説明はリンク先に譲るとして、ここでは技術およびデザインの面からこのビジュアルページの解説をします。制作メモのようなものとお考えください。
※ここに書いている内容に誤解や不適切な点が含まれる場合、それらの責任はすべて筆者個人に属します。
元となったデータ
データは取材記者グループ「フロントラインプレス」が日本大学・岩井研究室およびSlowNews社の協力を得つつ全国から公開資料を集め、また議員事務所に取材した結果をまとめたもの。ものすごい調査と取材量で、データ自体に極めて高い価値がある。こうした貴重なデータを扱えるのは、データ可視化エンジニア・デザイナーの冥利に尽きる。「このデータをいかに余さずユーザーに体験してもらうか？」が今回のポイントであり、最後まで腐心した点。
Excelでファイルを受け取り、PythonとSQLで加工し、JSONに書き出している。
テーマ
「センセーショナルなスクープにはしない、特定の議員を不必要に糾弾することはしない」という記事の方針にならい、抑制的なデザインとした。
全体のバックグラウンドは薄いグレーとし、白のブロック要素を適宜入れた。各種の分類は、わかりやすいように色分けしつつ淡めの色合いに揃えた。
制作期間
データの加工、ページの設計、デザインなど込みで、他の仕事もしながら1.5ヶ月くらいで作成した。２週間でプロトタイプを作成、その後１ヶ月ほど関係者の指摘も得ながら改良を繰り返した。実際にかけた時間は100時間前後。
全体の構成
データ構造から、ユーザーの動きを大きく３段階に分けた。名前、政党、地域など、様々な切り口から議員を検索し、サマリー情報と一覧を表示し、一覧から個別の議員を選択すると詳細情報が表示される。
投資などで使われる企業検索のサイトと構造的には似ている。証券コード、社名、業種など様々な切り口を経て最終的にはひとつの会社（銘柄）に行きつく。
やらなかったこと：
上記の導線を頻繁に行きつ戻りつすることが想定されたのでモーダルウインドウは採用しなかった。これは感覚にもよるが、モーダルを閉じるよりも、スクロールで上に戻るほうがユーザーの行動負荷が低いと判断した。
タブ
タブを押すと、縦位置をタブに合わせつつ、選択されたタブが中央に来るようにした。SmartNewsのタブのUIにヒントを得た。
最初は文字が多く、ごちゃっとした印象になって困った。かといって「議員の名前」「政党」とだけ表示すると、スッキリはするが一見して何が出来る場所なのかわかりにくい。「から探す」だけフォントサイズを小さくしたりと、細かな工夫をしてバランスをとった。地図からの選択にはJapan Mapを使った。
やらなかったこと：
「ページの途中に横スクロールが発生する」のがベストなのか確信が持てず、縦型にしたりアイコン型にしたりと色々模索したが、結局タブ型が最もわかりやすいという結論に達した。このあたりのセオリーなり実例なりがあれば試してみたい。
検索結果のサマリー情報（１）散布図
散布図はP5.jsで作った。何らかの傾向が出ると思ったが、政党別・地域別くらいのくくりだと目立った傾向はなさそう。P5.jsの弱点はレスポンシブにするのが難しいこと。想定最小サイズのモバイル端末でギリギリ文字がかぶらない構成にするのに気を遣った。
なお、名前で検索された場合はサマリー情報の意味があまりないので表示しない仕様にした。
検索結果のサマリー情報（２）収支金額
ただ数字を表示するだけだとわかりにくいので、平均値と比較させた（ちなみに中央値も算出したが、そこまで平均と変わらなかった）。散布図もそうだが、何らかの情報を表示する際には「全体の中での位置付け」がわかることが重要。
これはCSSで書いている。あらかじめ最大値を把握しておき、JavaScriptで個別の値に応じてwidthを変えることでバーチャートっぽくしている。このくらいのシンプルなチャートならCSSで書いてもさほど問題ない。
検索結果のサマリー情報（３）円グラフ
これはChart.jsで作った。結局、サマリー情報の中でP5.js、CSS、Chart.jsと３種類も使ってしまった。これは「こんな見せ方も出来るかな」とサマリーに載せる要素を１つずつ足していったため。ちょっと反省。
議員の一覧
議員一覧も横スクロールできるようになっているが、タブほどには必須情報ではないため、慣性スクロールは実装していない。
また、余談だが「議員を検索する仕組み」について２点ほど学びがあった。まず、合区（合同選挙区）。通常、参議院議員選挙においては都道府県が選挙区の単位となるが、徳島県と高知県のみ２県で１つの選挙区となる。また、いわゆる比例復活の議員（選挙区と比例代表の両方で出馬し、選挙区で落選したが比例代表で当選した議員）に関しては、選挙区の情報もどこかに載せた方がユーザーにとっては便利。今回は「比例・南関東（神奈川1区）」といった具合に比例区と選挙区を併記した。
個別議員のフラグ
フラグの色を踏襲しつつ、BootstrapのAlertをヒントに作った。アイコンはMaterial DesignのIconsを使わせてもらった。
全体として、もっと緻密に設計をして手戻りを少なく実装できるとよいのですが、動的なデータ可視化に関するセオリーやデファクトスタンダードはまだ少ないため、プロトタイプから何度も試行錯誤を繰り返しているのが現状です。このnoteでは、データ可視化制作者のためのメモも載せていければよいと思っています。
この記事が気に入ったらサポートをしてみませんか？