オフィスの壁にかけたテレビは長いこと何も映さないままで、もったいない状態が続いていました。そこで最近、コンバージョン率、トラフィック、リアルタイムの訪問者数など、重要な数字をテレビに表示する計画を立て始めました。最初はダッシュボードなんて簡単な要件だと考えていました。バックエンドでデータを整理するのに2〜3日、フロントエンドで D3.js を使ってグラフを描けばよいと。さらに簡単にしたいなら、Google Analytics のカスタムレポートを使ってもいいと思っていました。ところが調べてみると、思ったほど単純な話ではありませんでした。順を追ってご紹介します。
ダッシュボードとは、さまざまなデータや情報を1つのページにまとめたものです。多くの情報系企業では、従業員が重要な情報をひと目で確認できるように、テレビにダッシュボードを掛けています。重要なお知らせを発表するときに使うこともあります。テレビではなく、管理画面のトップページにただ表示されるダッシュボードもあります。その場合はユーザーがログインすると、すぐに重要な情報を確認できます。たとえば WordPress の管理画面トップには、最新の投稿やコメントなどが表示されます。
ダッシュボードの目的
ダッシュボードを設計する前に、「なぜダッシュボードが必要なのか」を考えておく必要があります。そうしないと、どのデータを載せるかを決められません。スペースには限りがあります。1ページに今日のトラフィックを出すのか、今月のトラフィックを出すのか、それとも訪問者のブラウザ別の内訳を出すのか。これらはすべて、ダッシュボードの「なぜ」と会社のビジネスモデルによって決まります。私は、ダッシュボードには次の2つの目的があると考えています。
- チームの結束：エンジニアリング部門が開発した新機能がついに公開され、みんながテレビの前に集まって数字が伸びていくのを見つめる――そんな場面を想像してください。テレビに表示する公開型のダッシュボードの主な目的は、チームの一体感を高めることだと思います。たとえばアクティブ会員数、直近で公開された機能トップ5、今この瞬間のオンライン人数などは、すべてこの目的のためにあります。
- 警告の役割：暇つぶしに Google Analytics を開いて、今日の訪問者が急に減っていることに気づく、ということがあるでしょうか。あるいは Skylight（Ruby on Rails のパフォーマンス監視ツール）を開いて、新しく公開した機能の動作が遅いと気づく、ということは？ テスターや分析担当者がいる会社でもない限り、普通はこうした数字を見る人はいません。たいていは、クレームの電話がかかってきてようやく問題に気づきます。しかしダッシュボードのテレビはオフィスに置かれているので、みんなが出社するたびに一度は目に入るはずです。警告となるデータを表示する絶好の機会です！ たとえば最新の顧客クレームや、サイトの稼働率の前月比較などを表示できます。今月の稼働率が先月より低いことにエンジニアが気づけば、自然と警戒するようになるでしょう。
媒体の特性を考える
目的のほかに、媒体についてもはっきりさせておく必要があります。ダッシュボードの設計を始めたころ、テレビに表示することをすっかり忘れていました。以前のように、管理画面のトップページに置いてみんなが操作するものだと思っていたのです。この2つは設計の論理が正反対です。いちばんの違いは、媒体がテレビならインタラクティブな機能はまったく使えないことです。結局のところ、テレビをリモコンで操作したいとは思わないでしょう。一方、ユーザーのパソコン画面に表示するなら、日付の選択や複数ページの切り替えなど、便利な機能を組み込めます。媒体がテレビでも、狭い画面に多くのデータを載せるための効果はいろいろあります。たとえば数秒ごとに自動でページをめくる機能や、流れるようなグラフなどです。適切な効果を使えば、小さなテレビ画面により多くのデータを表示できます。さらに媒体は、サイズやフォントサイズなどの要素にも影響します。私はインターフェースを設計するとき感覚に頼りがちですが、パソコンで美しく見えるデザインが、テレビでも美しいとは限りません。パソコン画面では大きく見えた文字も、テレビでは見る人が自分の席から見ることになるため、少し読みにくくなることがあります。こうした点は、ある程度の経験が必要ですし、公開後に調整することも少なくありません。
データの見せ方
データの見せ方もまた重要なテーマです。円グラフや折れ線グラフを描けばよいというほど単純ではありません。目的が違えば、見せ方も変わります。データそのものは単なるデータにすぎません。適切な見せ方をしてこそ、期待する効果が得られます。たとえばリアルタイムの訪問者数を例にしましょう。それを見せるのは「わあ、こんなに人がいる！」という感覚を作りたいからでしょうか。それとも、サイトの負荷を把握したいからでしょうか。感覚を作りたいなら、数字だけを表示してもあまり効果はありません。「比較」の要素が必要です。たとえば今この1秒と直前の1秒の差を折れ線グラフで示し、現在の数字も併せて表示します。時間の差を比べることで、見る人は「わあ、急に人が増えた！」と感じられます。
金額を例にしましょう。金額を表示するとき、190,000,000 のような数字をそのまま出すでしょうか。それとも「1.9億」のような形式にするでしょうか。両者には明らかな差があると思います。数字だけでは読み手にはあまり響かず、「ただの数字の並び」になってしまいます。しかし「1.9億」と書けば、ずっとわかりやすくなります。さらに比喩を加えることもできます。新聞や雑誌でよく見る「節約できた紙を積み上げると台北101が何棟分にもなる」といった表現は、まさに同じ手法です。
便利なツール
「工欲善其事，必先利其器（仕事を良くしたければ、まず道具を研げ）」という言葉がありますが、ダッシュボードの開発にも目的の達成を助けてくれるツールがたくさんあります。ここでは私が良いと思ったものをいくつか紹介します。- Shopify/Dashing：Shopify が開発したダッシュボード・フレームワークです。データを流し込むだけで、すばやくダッシュボードを生成できます。残念ながら、Shopify はすでに保守を停止しています。Dashing に似たものとして Freeboard、Dashku などもありますが、深くは調べていないので紹介は控えます。キーワードとして「dashboard framework」で検索してみてください。
- Airbnb/Superset：はい、これは Airbnb が公開しているデータ可視化ソフトウェアです（自分でホストする必要があります）。元の名前は Caravel でした。技術者でない人でも、より速く簡単にデータを可視化して観察できるように設計されています。グラフの種類が多く組み込まれているので、これを使えばダッシュボードをすばやく作成できます。
- Kibana：Superset に似たソフトウェアです（自分でホストする必要があります）。同じくユーザーがすばやくグラフを作成できます。主な違いは、Kibana は Elasticsearch を基盤としているため、全文検索に強いことです。対応するグラフの種類は Superset より少ないですが（プラグインを入れることはできます）、開発には時間がかかります。コミュニティや安定性は Superset より高いです。個人的には、Kibana はエンジニア向け、Superset は非エンジニア向けだと思います。
- Google Data Studio：Google が新しく出した、まさに神器と呼べるツールです。さまざまなグラフをすばやく描けます。最大の特長は、Google Analytics や Google BigQuery などの関連サービスとシームレスに連携できることです。自分のデータベース（MySQL）にも接続でき、短時間でデータが動的に読み込まれるオンラインレポートを作れます！ 私は個人的にこれを使ってダッシュボードを設計しました（笑）。ただし Google Data Studio でダッシュボードを設計すると、いくつか問題もあります。柔軟性が足りないのです。たとえばページサイズを調整できず、直近でマージされた機能を5つ並べたいときは、かなりのダーティーハックを使いました。
- D3.js：描画の話をするなら、強力な D3.js に触れないわけにはいきません！ D3 を使えば、ほしいグラフをすばやく描けます。しかも D3.js は最下層から描画するので、思いどおりのグラフを自由に作れます。
- C3.js：D3.js は低レベルすぎるため、柔軟なレポートを作れる反面、習得のハードルが高く、開発も遅くなりがちです。C3.js は D3.js を基盤にしつつ、API がより使いやすくなっています。似たものとして NVD3.js、Plotly.js などもあります。
テレビへの表示方法
最後に、そして最も重要なこととして、ダッシュボードができたあとにどうやってテレビに表示するのかという問題があります。HDMI でノートパソコンをつなぐのでしょうか。それではあまり経済的ではありません。ダッシュボードを表示するためだけに、一日中テレビのそばにパソコンを置いておくのでしょうか。Raspberry Pi や簡単なホストマシンを使うことを考える人もいるでしょう。しかし実際には、手のひらサイズの Chromecast があれば十分です。（注：最近は 4K に対応した Chromecast Ultra も購入できます）Chromecast では Receiver App を開発できます。この Receiver App は実質的には HTML で、いわば Chromecast 自体がブラウザです。つまり、ダッシュボードを Receiver App として設計し最適化すれば、一日中テレビに表示し続けられます！
さらに、スマート TV の中にはブラウザを内蔵しているものもあります。それを使ってダッシュボードを表示すれば、別途パソコンをつなぐ必要すらありません！