「SPEED METER by NAVITIME」UXのこだわりを支えるデザインと技術の話
こんにちは、キャンプ大好きスキスキ丸です。ナビタイムジャパンでカーナビ系アプリ開発を担当しています。
クルマ離れが進んでいると言われる昨今、身の回りはモノで溢れ、昔ほど物欲のない人が多くなってきているのも納得かもしれません。
それでも、海や山、行きたいところを自由自在に風を切って走るあの快感は、クルマでしか得られません。
クルマに乗る楽しさをみんなで再開発したい！という思いから、先日2/9(水)Android向けに、”SPEED METER by NAVITIME” をリリースしました！
"SPEED METER by NAVITIME" とは
GPSによる位置情報とマップマッチを利用したスピードメーターアプリです。
制限速度を超過したときや、オービスが近づいた時に警告してくれます。
走行を記録/再生する機能も搭載していて、後から振り返ることができます。
"SPEED METER by NAVITIME"はあなたの運転をビジュアライズし、ドライブの楽しさを増幅させるためのアプリです。
ここが違う！4つのポイント
1. 実際の制限速度で速度超過を警告
全国の制限速度データをもとに、走行している道路に応じた制限速度で警告します。
実際の制限速度で警告されるので、うっかりスピード違反になるのを防げます。
2. オービス通知
走行中の道路上のオービスに近づくと音で警告します。
拡大可能な地図上にもオービスの位置を表示するので安心です。
3. 走行を追体験
記録した走行を空撮しているようななめらかなアングルでログ再生が可能で、過去の走行を追体験できます。
4. 好みの見た目にカスタマイズ
スピードメーター画面のパーツ色は、カラーパレットで直感的に好みの色にカスタマイズできます。
あなた好みの色にカスタマイズし、唯一無二のカーガジェットにしましょう。
こだわったポイント
既に、世の中にはスピードメーター系のアプリはごまんとあり、数百万ダウンロードを記録している強者もいる市場でした。
その中に参入する上で大切なコンセプトを、以下のように掲げました。
- Visualize Your Drive -
ハンドルを握りアクセルを踏む高揚感
海や山まで風を切って走るあの快感
そんな運転を "魅せる" サービスにする
スピードメーター画面のデザイン
サービスを検討していく中で最もこだわったのはデザインでした。
特にメインの顔であるスピードメーター画面のデザインは、数ヶ月に渡り作っては壊してを繰り返しました。
デザイン検討当初は、表示したいデータを自分好みに選択し配置できる、汎用性の高いパーツレイアウトを意識したデザインでした。
当時は、GPS情報からどんな情報を取れるか明確になっていなかったので、汎用的なパーツは利便性に長けていましたが、使っていて気持ち良いと感じるには至りませんでした。
次に、背景やオブジェクトが有機的に動くエフェクトを用いたらどうか、という案の元、背景を波の表現にしたり、メーター部分のモヤが動く等のアニメーションを用いてみました。
個人的にはかなりカッコいい印象に近づけたと感じましたが、我々が思うターゲット層が好むデザインとは違うのではないか、という印象でした。
我々が思うターゲット層とは、クルマや運転自体が好きで、クルマの状態を視覚化するために様々な外付けメーターを取り付けたり、カッコいい見た目にするためインテリア/エクステリアにこだわっているドライバーを想定しています。
そのターゲット層は、前述の波やモヤ等の有機的なデザインより、画面の中に実物のメーターがあるかのような、物理的でメカニックなデザインが好まれるのではないか、と考えました。
スマホアプリでありながらも、あえて物理的な印象を与えるデジタルフォントを用いたり、暗闇の中に光るネオンサインを表現したりと、試行錯誤を重ねてようやく納得のいくデザインにできました。
最終的には汎用性に富んだパーツ、見た目を華やかにするアニメーション、ターゲット層の好みを意識した装飾、とデザイン決定に至るまでの案は十分に活かせていると実感しました。
また、メーターの動きやボタンタップに対する反応についても、随所にアニメーションを用いることで、使っていて気持ち良い印象を与えられるよう工夫しました。
ログ再生画面の地図アニメーション
ログ再生画面のカメラワークはナビタイムの地図コンポーネントの地図操作系機能をふんだんに使っています。
1. 中心座標移動
2. 方角
3. 仰角
4. ポーラー角
5. ズーム
「1. 中心座標移動」について、記録した緯度経度でそのまま移動させると、曲がり角等で画面がカクつき、見ていて心地よくありません。
そこで、記録した緯度経度リストから移動平均を算出し、移動する中心座標を滑らかになるよう工夫しています。
$$
ma = \frac{1}{n}\{x_i+\sum_{j=1}^k(x_{i-j}+x_{i+j})\}
$$
一見難しそうな式ですが、リストの各要素をその前後数件の平均に置き換えるだけで移動平均を求められます。
これを緯度リストと経度リストそれぞれ算出させることで、滑らかに地図移動させることができます。
上記の操作を組み合わせ地図移動させることで、まるで空撮しているかのようなカメラワークを実現しています。
"実際の制限速度"で警告
速度超過すると、スピードメーター画面の色が警告色に変わりユーザーに警告します。
競合アプリにも速度超過時に警告する機能はありますが、あくまで"自分が設定した速度"に限るアプリが多いです。
その点、”SPEED METER by NAVITIME”は、"実際の制限速度"で警告してくれるため、交通違反をしてしまうリスクを低減させることができます。
警告色は基本的に"赤"ですが、本アプリはメーター色を好みの色にカスタマイズできる機能があり、赤系の色が設定されている場合に速度超過を認知しにくくなってしまいます。
そこで、"赤系の色が設定されている場合、警告色を黄色にする"という工夫をしています。
"赤系"という感覚的な閾値をプログラムするため、以下の条件で"赤系"を定義しました。
$$
Redish = R - (G + B) < 0.4\\\
{\footnotesize 0.0 < R,G,B < 1.0}
$$
こうすることで、どんな色が設定されても速度超過時の警告に気付きやすくなりました。
今後の展望
現状、記録したログは端末内にのみ保存されますが、サーバー保存に移行し、ログインすればどの端末でも自分のログを見れるよう改善を検討しています。
また、カスタマイズ機能は色変更だけでなく、メーターのデザイン自体を選択して変更できるようにすることで、より自分好みのカーガジェットにカスタマイズできる機能を検討しています。
ぜひ一度アプリを使ってみてください！