渋滞マップで対応した「IC間所要時間」表示機能の概要とUIへのこだわり
この記事は、NAVITIME JAPAN Advent Calendar 2024の2日目の記事です。
こんにちは、白くまです。
ナビタイムジャパンで『渋滞情報マップ by NAVITIME』（以下『渋滞マップ』）の開発を担当しています。
今回は、私たちのチームが4月に開発した新機能「IC間所要時間」表示機能についてご紹介します。
プレスリリースも同時に発表いたしましたので、せひご覧ください。
機能概要
「IC間所要時間」表示機能は、高速道路を簡易的に表示した「デフォルメマップ」上に各インターチェンジ（IC）間の通過所要時間（単位：分）をリアルタイムで表示する機能です。
この機能により、同じ「渋滞」ステータスでも、10分で通過できる渋滞と100分以上かかる渋滞を区別できるようになります。その結果、運転計画でより迅速かつ正確な判断が可能になり、一般道に降りるかどうかの判断にも役立ちます。
開発に至った背景
『渋滞マップ』は、渋滞情報に特化したアプリとして、多くのお客様にご利用いただいています。その中で、「デフォルメマップ上にIC間の通過所要時間を表示してほしい」というご要望が、ご意見箱やアンケートで多く寄せられていました。
開発チームでは、このご要望の背景を考え、以下のような場面で必要とされているのではないかと推測しました。
行き先は決まっており、なるべく空いている道路を選ぶために渋滞情報を確認したい
利用するルートが決まっていて、通過予定の道路の混雑状況を出発前に知りたい
これらの場面では、従来の『渋滞マップ』で提供していた渋滞や混雑の有無だけでは十分ではありませんでした。そこで「IC間所要時間」表示機能を追加することで、なるべく空いている道路の選択や、突発的な規制が発生した際のより詳しい渋滞状況の把握に役立つようになりました。
こだわり
「IC間所要時間」表示機能の開発では、特に見やすいUIデザインを最優先に取り組みました。道路線にはすでに渋滞線やアイコンなどが表示されており、それらの情報を邪魔せずにIC間所要時間を追加する必要があったからです。
当初はIC間所要時間をデフォルメマップの道路線の中に収めることを検討しましたが、文字サイズがとても小さくなってしまい、見づらさが課題となりました。
情報が多くても見やすいUIとなるよう、フォントの種類や文字サイズを少しずつ変え、道路線と一部重なりつつも視認性の高いUIを模索しました。
フォントや文字サイズの調整を進めるうちに、次はIC間所要時間どうしで表示が重なってしまう問題が発生しました。
これはIC間所要時間を表示する道路線に以下の特徴があることで起こっており、またこれらの特徴から表示位置を前後に少しずらすだけでは解消できないことがわかっていました。
上下線が隣接している
斜めだったり、途中で折れ曲がりがある
斜めの場合、角度がものによって異なる
IC間の長さが場所によってまちまち
結果的にこの問題の解決策として、ベクトルを使い所要時間の位置を進行方向に向かって左にずらす工夫を行いました。
『渋滞マップ』で利用しているデフォルメマップは、内部的には一枚の画像となっているため、座標さえ計算できれば配置箇所は柔軟に変更できる点を利用した工夫となっています。
また、IC間所要時間の文字色を渋滞線の色に合わせる案も検討しましたが、文字と背景色が同じになり見づらくなる問題がありました。そこで、黒文字に変更し、さらに白い半透明の縁取りを追加することで視認性を向上させました。このように、何度も改善と試行錯誤を重ね、最終的に見やすいUIを実現しました。
今後の展望
「IC間所要時間」表示機能は、以前からお客様からご要望をいただいていた機能ということもあり、リリース直後から「インター間の所要時間が表示され、ますますパワーアップして満足しています。」といったお喜びの言葉を多くいただきました。
お客様のお役に立つことができ、開発チーム一同非常に嬉しく思っています。
引き続き、私たちはお客様の声に耳を傾け、より良いサービスを提供するために努力してまいります。皆様のご支援に心より感謝申し上げます。今後のアップデートも楽しみにしていただければ幸いです。
最後に
昨年度リリースしたAI渋滞予報機能についての記事も執筆しています。この機能は、TBSテレビ「THE TIME,」やフジテレビ「めざましテレビ」でもご紹介いただき、大変ご好評をいただいています！ぜひご覧ください。
『渋滞マップ』は以下よりダウンロードいただけます！
IC間所要時間を含めアプリ内のすべての機能が利用できるプレミアムコースは、初回7日間無料でお試しいただけます。ぜひご利用いただけましたら幸いです。
Android
iOS