はじめに
デザイン室 @tetsu です。
弊社aptpod製品 Visual M2M (以下VM2M) について、ありがたいことにお客様から「デザインが良い」とお褒めをいただくことが多いとのことで、デザインについての記事を書いて欲しい。
そんな話で営業チームからおだてられてオファーがありまして、本記事を書かせていただきます。
VM2M初期のコンセプトから現在の形にいたるまで、振り返りながら書いてみようと思います。
「デザインが良い」と言われた時に、ヴィジュアル（全体の雰囲気、カラー、レイアウトなど見た目の印象）のことを言われている方と、使い勝手を含めたシステム全体のことを指して言われている方といらっしゃると思います。
この記事では、主に前者のヴィジュアル面のデザインに寄った形で、UI（ユーザーインターフェース）の設計について書いています。
前提条件として、お客様のタッチポイントであるUIが美しくストレス無く機能するためには、バックエンドのシステムが安定して稼働していることが不可欠です。
aptpodとしての一番の強みもそのバックエンドシステムintdashにあります。
aptpodのシステムの場合、もうひとつのタッチポイントであるエッジ・デバイス側からのデータが上がってこないと、何もはじまりません。
これらの前提条件が優秀なエンジニアによって支えられていることにより「デザインが良い」が実現していることに、デザイナーとしてはいつも感謝しています。
VM2Mとは
データを可視化するためのダッシュボードであり、Webブラウザ（Google Chrome）で動作するWebアプリケーションです。
用途に応じてカスタマイズ可能なUIで、様々なデータを可視化、解析することができます。
時系列データをライブストリーミング形式で表示、もしくは過去の計測データを読み込んで表示します。
様々な可視化パーツを用いて自由なレイアウトを組むことができます。
VM2M変遷
VM2M 1st
1stとは銘打っていませんが、後に2ndができたので区別するためにこう呼んでいます。
この時点では、Webアプリケーションとしてだけではなくバックエンドのクラウドシステムも含めたSaaSとして、VM2Mと呼称しておりました。
僕としては、旧知であった代表の坂元と久々に会った際に「すごいの作ってるから見て」と言われたのが最初のかかわりです。
ブラウザのアプリケーションでこんなにリッチなデータ可視化ができるんだと、感動したことを覚えています。
2014年の夏前ぐらいの季節だったように記憶していますが、その流れで秋口くらいからデザイナーとしてジョインすることになりました。
現在ではほとんど動いていませんが、フレームワークとして導入された案件など、いくつかのインスタンスで稼働しています。
VM2M 2nd Generation
UIを全面的に刷新しました。
より汎用的に、美しく、未来的に。
そのデザインコンセプトや設計については後述します。
可視化パーツなどは1st時にCanvasで描画していたものをSVGに変更しました。
ベクターデータで描画することにより、高画質化していくディスプレイ環境に対して、拡縮にも耐えうる美しい表現を可能にしました。
VM2M Data Visualizer
バックエンドシステムとしてintdashがリリースされ、フレームワークとしてのVM2Mは役目を終えました。
可視化ツールとしてVM2M Data Visualizerと名称を変えることになりました。
2ndの発展形で、機能や特徴に大きな変更はありません。
VM2Mという名称はaptpodのアプリケーション製品のブランド総称として残っています。
当Web可視化アプリケーションの他に、iOSのアプリのVM2M Motionなどいくつかのアプリケーションがあります（この辺の名称については今後マーケティング的に整理されていく可能性もあります）。
以上のような経緯ゆえに、当Webアプリケーションのことを指してVM2Mと言われていることも多いかと思います（社内ではData Vizと言われています）。
デザインにあたって
データ設定
データをダッシュボードで見るためには、
- エッジ（対象のデバイス）
- データ（パース対象）
- 可視化パーツ
を紐付ける必要があります。
それぞれ表示されるリストから選択します。
たとえば、ある自動車の車速を見る際に、対象となる車とCANからくる車速の信号データ、表示するパーツとしてメータを選択します。
データを可視化するパーツとしては、ライブで瞬時値などを見る際にはメーター表示が適しているケースがあります。
時系列で相関関係を見る場合には、たとえばRPMなど他の関連データと重ねてグラフ表示するかもしれません。
これらをひとつのパネルで自由に変更できるためのUIを考えました。
パーツごとに設定項目が異なるため、それぞれ個別に項目を設定できる案を初めは考えましたが、この時点ではなるべく汎用的な作りにしたかったので、サイドに共通の設定メニューを設け、パーツごとに属性をもたせる作りとしました。
統一されたUIですが、グラフとメーターでは別々の設定項目が表示されます。
※地図パーツなど一部特殊な設定が必要なパーツが存在します。
データに関しては事前にパースするための設定が必要です。
VM2M（及びintdash）の基本的な設計として、通信間はバイナリデータのまま伝送し、クライアント（ブラウザ）側でパースします。 そのために必要なデータ定義ファイルを事前に設定します。 このような設計になっているのは、たとえば自動車のデータの場合など、パースするために必要なDBCファイルの多くはメーカーごとに社外秘であり、アプリケーションの開発当初（2014年〜）から現在に至るまで、クラウドにアップロードすることに制約があることが多いためです。
サーバー側でパース後の計算処理が必要なケースにはAnalytics Servicesを用いて変換しています。
自由で汎用的なレイアウト
ユーザーによって求めるダッシュボードが異なる中で、画面の構成をどのようにすれば汎用性を保ちながらも雑然としないか苦心しました。
割り切ってウィンドウサイズなどを全てユーザーに委ねる方法も検討しました。
全て可変になり自由度がある反面、必要な情報を表示しきれないがゆえのユーザビリティの低下と、雑然と散らかるパネル群は美しくないという懸念がありました。
1stでは決められたグリッドに固定のマス目でそれぞれパーツを設定できる様になっており、整然とデータが表示される様は、前述の通り美しく、ひとつ完成度の高い形でした。
しかし当初から、注目したいパネルを大きく表示したいという需要が、特に動画データに対応したことにより高まっており、1stでは別ウィンドウで2倍の大きさで表示するような対応を取っていましたが、この課題を根本的に解決する必要がありました。
可変サイズのパーツを表示できるようにしつつ、全体のレイアウトとして整然と整う形を目指す上で、グラフィックデザインにおけるグリッドシステムをUIへ適用しました。
グリッドシステムとはヨゼフ・ミューラー＝ブロックマンによって提唱されたレイアウト技法です。 グリッドというのは、格子状のガイドラインです。 グリッドシステムによる秩序が、「美しさ」と「伝達機能」を生み出します。
レイアウト上の仮想のグリッドを見えるように表示し、制約の範囲での自由なレイアウトをユーザーに提供します。
これにより、必要な情報の表示とデザインをコントロールしつつ、カスタマイズ可能なダッシュボードを作ることができるようになりました。
計測データの読み込み/ライブ表示
対象の計測（ライブか過去か、過去の場合はいつの計測か）を選択するUIが必要になります。
ライブの場合は、現在ストリームされているデータをリアルタイムに表示します。
ライブ表示
- 上部のLIVEアイコンをクリックでライブモードに切り替え
計測データ一覧
- 下部のボタン
Stored Dataをクリック（ショートカットキーD）で過去の計測データを表示 - ライブ表示の終了で過去データの一覧を表示
読み込みを開始するための再生ボタンや一時停止ボタン、再生速度などのUIに関しては、世の中にある音楽プレイヤーなどを参考にしつつ、極力シンプルな形を模索しました。
タイムライン
- シークバーで過去の計測データを時間軸から操作
- タイムライン に基準データを設定可能
- フォーカスした時間帯を拡大、切り取り可能
マウス操作で直感的に扱えるようにすることと、キーボードの◀ ▶操作や数値入力で細く設定できることを両立させるためのUIを考える上で、動画の編集アプリケーションなどを参考にしました。
作業スペースの保存
設定したデータやレイアウトなどの作業スペースに関する情報を保存する必要があります。
これらをScreenとして下部のボタンScreen（ショートカットキーS）を押すことで呼び出します。
数値データを並べてみたい場合と、地図などにフォーカスした状態で見たい場合と、それぞれスクリーンを切り替えて表示することができます。
スクリーンはデフォルトでいくつかテンプレートを用意しました。
スクリーンの情報はクラウドに保存して共有、もしくはScreenの構成情報をファイル形式でローカルに保存してファイルで共有・インポートする2通りの方法があります。
ドラッグ＆ドロップ
1stからの特徴的な機能で、ドラッグ＆ドロップで手軽にダッシュボードを構成できます。
この機能を成立させるには、ドラッグ元とターゲットとなるダッシュボードエリアを同時に確保する必要があります。
選択するリストを表示して、そこからダッシュボードへドラッグ＆ドロップする動きです。
左サイドを設定系のエリアとして設計し、フッター（下部）エリアから選択もしくはドラッグ＆ドロップするUIとしました。
マウスで操作できない環境などではドラッグ＆ドロップの操作が難しい場合があり、パネルをクリックすることでデータを配置することも可能にしました。
全体のコンセプト
デザインする上でのお題
これまで述べた機能を成立させるUIを作ることの他に、意識していたことは以下の３点です。
- 未来感のあるデザイン
- ダークな背景
- フォント
具体的には、SFの世界で表現されるようなUIをモチーフにしたいと考えました。
この時期、SF映画をずいぶん沢山観ました。
画面に奥行きとレイヤー感が欲しくて、初期の頃はデータを重ねるデザインなども検討しましたが、実現性とのバランスで過度なレイヤー表現はなくし、グリッド基調とした現在のデザインになりました。
重ねる感じを実現しているもので、動画や地図パーツを背景レイヤーに全面表示する機能があり、データをオーバーレイさせるとデモ映えしますので、ぜひ試してみてください。
実現したいことは、データを格好良く見せることでした。
その動機は主に製造業のメーカー研究開発部門の方々に、格好良いツールを使って仕事してほしいというものでした。
この時点でのペルソナでもありましたが、30〜40代のデータを扱う仕事の方々には幼少時代に見たSF映画やアニメの世界で見たデータの格好良さに憧れる何かがあります（自分自身含む）。
タスクベースなWindowsネイティブの業務ツールが主流な現場には、コレで仕事できるの？というくらいギャップがあったようですが、熱心なファンになってくれたお客様も多くいました。
ダークな背景
2020年現在、各OSやアプリケーション、Webサイトなんかもダークモードがかなり定着してきました。
VM2Mは2014年当初よりダークモードです。
aptpodコーポレートカラーもブラックです（体制的な意味ではなく…）。
データを見る上で、黒い背景というのは目が疲れにくいとか、コントラスト的に視認性が上がるとか、色々な説があります。
また、たいして効果はない等の研究結果もあります。
上のリンク記事からの引用になりますが、理由の大半はこれです。
ダークモードが人気を集める大きな要因は、その美しさにある。「ナイトモードのTwitterは、普通の表示と比べて1,000パーセント、クールだ」という、あるTwitterユーザーの感想は、ダークモードに対するネットユーザーの代表的なリアクションだろう。
フォント
フォントはUIの雰囲気を決める上でとても重要で、日英ともにAXISフォントをベースフォントに採用しています。
未来感を出す上でダークな背景と合わせて、柔らかさと冷たさをもつAXISフォントをベースとすることで、キレのある統一感を出しています。
高速に変化する数字データについては、以前の記事で触れています。
失敗
ここまで振り返ると、答えを持っていてスムーズにデザインしたように見えるかもしれません。
当然ながらそんなことはなく、試行錯誤の繰り返しでした。
仮デザインの実現可能性についてCTO kaji 及びフロントエンドエンジニアのshirokaneからすぐにフィードバックをもらえたので、大変助かりました。
振り返ってみて、その当時の環境ではベストを尽くしたつもりですが、失敗だったなと思う点がいくつかあります。
操作系
2015年当時のトレンドとしてPCのタブレット化を見越して、フッターにメインの操作系を配置するデザインを採用しました（VM2Mの対応ブラウザは、当初よりHTML5のアプリケーションとしての性能を限界まで生かしてチューニングする必要があり、PC向けのGoogle Chrome限定としています）。
タブレットPCで操作することを想定した場合、下部にナビゲーションのようなボタンを配置するUIは、大画面で見ても手元のタブレットでも成立しているように思いました。しかし、現在そこまでタブレットPCも流行らず、横にスクロールする動きはPCブラウザで操作するのには相性が悪く、操作し辛い点があると思っています。
横に表示されるリストはタッチディスプレイやタッチパネルでスワイプするような動きならスムーズでも、PCブラウザでの表現は難しいな、と学びました。
また、横型はリストとしての表示の一覧性も悪く、計測の一覧に関しては横並びと縦並びの一覧画面を切り替えるUIを設けていましたが、横並びのものはメンテナンスしていく都合もあり削除し、縦のみとなりました。
現在下部にある3つのボタンの内、計測の一覧画面だけ押下後のリスト表示の形式が違っていて、全体の操作統一感的にも最初の設計で躓いていたなと思います。
Visual Parts
可視化するためのパーツを初期にまとめてデザインしました。
このへんは正直えいやっと作ってしまったので、今ならもう少し調査とか、ヒアリングに時間をかけてやるべきだった…と思っています。
当時は自動車メーカーの顧客がほとんどで、そこへの意識が強かったと思っています。
もう少しデータ可視化視点で汎用的なパーツを用意できれば良かったと思っています。
パーツは現在も拡充していますが、初期のコンセプトに引きずられる点もあり、開発者に負担がかかってしまっているのが現状です。
ワークフローを作りきれなかった
開発当初は展示会イベントやデモンストレーションとしてインパクトのある可視化ダッシュボードから作っていきました。
おかげさまで好評でもあり、ダッシュボードの機能改善やカスタム対応に追われました。
しかし実際に使おうとすると、データを可視化する前に必要な作業があります。
エッジ（ユーザーやデバイス）の管理や権限設定など、コンフィグレーションツールが整っていませんでした。
一部の必要なコンフィグ機能をVM2MのUIに持たせてしまったので、機能の改善スピードが落ちる結果になりました。
今後
intdashユーティリティ
前章の失敗を課題として、Webアプリケーションとして保守しやすい形で機能ブロックに分けてintdashのユーティリティ開発が進んでいます。
エッジの状態一覧や、管理機能も近く正式にリリースされる予定です。
計測の状態（データの回収状況など）もAPIの拡張に伴って、Data Visualizerの計測一覧（Stored Data）に反映してバージョンアップを重ねてきましたが、計測の管理ツールとして切り分けて開発中です。
デザイン的にもより実用的な形を実現したいと思っています。
VM2M Data Visualizer
コンセプトを一貫したデザインでデータを見た時に感動してくれるお客様がいる、ということは少なからずaptpodの魅力に寄与していると思っています。
パフォーマンス的にブラウザの限界に挑むような全部入りの汎用ツールであるからこそ伝わる魅力があると思っています。
こちらも改良を重ね、近く新しい動きがアナウンスされる予定です。
技術的にもトレンドサイクルの早いWebアプリケーションの世界で、2015〜2016年に設計開始したものが2020年の現在に現役で魅力的に機能しているのは、実装面でチューニングを続けてくれているエンジニアのおかげです。
おわりに
リクエストのあった営業サイドの要望に沿った内容になったどうかは自信がありませんが、デザイン視点でVM2Mのコンセプトと歴史を振り返る形になりました。
今作っているもの、これから作るものを考える上でも考えが整理されたので、機会をいただけて感謝しております。
弊社では今後ウェビナー形式や、オンラインでのデモを企画しております。 Data VisualizerをはじめとしたVM2M アプリケーションに触れていただける機会が増えるかと思います。 少しでもご興味を持っていただけましたら、お問い合わせのほどよろしくお願いいたします。
デザイン室の求人
グラフィックデザインに自信のある、弊社の事業や製品に興味のあるデザイナーを募集しています。
UX/UIは勉強していけば身についていくし、デザイナーがひとりでやるものでもないと思っています。
以下から応募いただければ幸いです。
デザイン室の職務範囲については前回の記事をご参照ください。
応募はためらうけれど、話を聞いてみたいという方がいれば、お問い合わせからデザイン室tetsu宛に連絡ください。
昨今のご時世でリモートワーク中ですので、オンラインで気軽に面談させていただければ嬉しいです！
