『NAVITIME ドライブサポーター』の「ガソリン価格なぞって検索」開発の裏側
こんにちは、フランツと026(オフロ)スキーです。
ナビタイムジャパンで『NAVITIMEドライブサポーター』というカーナビアプリの開発・運用を担当しています。
突然ですが、昨今のガソリン価格事情を皆さんはどのように感じているでしょうか？個人的には、補助金があるとはいえ以前に比べるとまだまだ高く「少しでも給油金額を抑えたい！！」と思っています。
そんなときに便利な機能「ガソリン価格なぞって検索」を2023年8月31日に『NAVITIMEドライブサポーター』でリリースしました！
本日は、リリース後に様々な反響があった「ガソリン価格なぞって検索」のご紹介と、その開発に至った経緯や開発中の裏話などをお話します。
ガソリン価格なぞって検索とは？
「ガソリン価格なぞって検索」は、地図上を指でなぞって検索したい範囲を指定すると、その範囲内のガソリンスタンドを安い順に検索できる機能です。
地図上をなぞって検索できるので、自宅や目的地を中心にしたり、これから行きたい方面や、行きやすそうな場所で安いスタンドを見つけたりしたいときなどにとても便利です。
道路に沿って範囲を指定したり、県境もまたいで検索したりできるので、従来の周辺検索よりも広範囲で柔軟に安いガソリンスタンドを探すことができます。
また、検索中の地図には全国のガソリン平均価格をヒートマップにして表示できます。ざっくりとしたエリアで価格の傾向を見ながら検索範囲を決められるので「どのあたりで給油しよう？」「その付近での最安値はどこだろう？」といった給油の計画を立てるときにも役立ちます。
非常に便利で使いやすい機能ですが、実現に向けて試行錯誤を繰り返しました。
対応までの経緯
2021年の初めには140円/L台だったガソリン価格は値上りしつづけ、翌年の1月には170円/L以上となり、ガソリン補助金が始まりました。
ガソリン価格の値上げが続く中、少しでも給油時の参考として役立てばと思い、『NAVITIMEドライブサポーター』では2021年10月にガソリン価格の高い/安いエリアを可視化した「ガソリン価格マップ」機能をリリースしました。
しかし、一時は落ち着いていたガソリン価格は再び上がり始め、2023年の8月には1リットル当たり185円を超えるほどの高騰となりました。
地域による価格差も広がり、隣接する長野県と新潟県では1リットルあたり最大17.6円の価格差がある状況となっていました。
さらに、同年9月にはガソリン補助金も終わる予定(※2023年10月現在は同年12月末まで延長となりました)となっており、多くの人が今後のガソリン価格に不安を感じていました。
最初に考えていたこと
こうした背景から、ドライバーのために安いガソリンスタンドを探すことができる機能の検討を始めました。
当初は安いガソリンスタンドとルート探索を組み合わせて、ユーザーに「最適なガソリンスタンド」を提案する機能として検討を始めました。
ルート探索と組み合わせるところがナビタイムジャパンらしくていいよねと思っていたのですが、すぐに問題に直面しました。
その問題とは、安いけど遠いガソリンスタンドをどうするかです。
現在地やルートから離れた位置のガソリンスタンド価格が安かった場合、ルートを変えて所要時間が増えてもそのガソリンスタンドを経由するのかは、非常に頭を悩ませました。
検討中には様々な見解がチームから出てきました。
「安いガソリンスタンドを見つけたいなら良いのでは？」
「でも安くても遠すぎたら行きたくないよね」
「現在位置から遠くてもルート沿いなら途中で寄れる」
「ルート沿いじゃなくてもちょっと道を変えて安いガソリンスタンドがあるなら行きたい」
「高いと思ってもガソリンの残量次第では入れざるをえない場合もある」
「ガソリン価格と距離のバランスは重要」
「そもそもどのくらいから遠いの？」
つまり「最適なガソリンスタンド」は、そのときの状況やその人が何を優先するかによって変わっていくのです。そして、そのいい塩梅のガソリンスタンドを決めるには研究開発も必要となり時間も労力もかかりそうでした。
なぞって検索へ
当時は少しでも早くガソリン価格に対してユーザーをサポートできる機能を提供したいと考えていたため、もっと簡単に実現できる方法がないのかと、ルート探索にこだわらず考え方を変えて検討してみました。
議論を重ねる中で、最適が人によって違うのなら、こちらから提案するのではなく、ユーザー自身に自由にガソリンスタンドを検索して選んでもらえばいい、という発想に至りました。
行きたいと思える距離感はユーザー自身にしかわからないため、そこをユーザーに選んでもらえればいいのです。
しかし、従来の周辺検索やルート沿いの検索では、範囲に制限があり痒いところに手が届かない、市区町村エリアごとの検索ではどのエリアを指定するかといった設定なども必要になり、操作が複雑で使いづらくなってしまう。
どうしたものかと、自由にガソリンスタンドを検索する方法を模索していたところ、上司からアイデアをもらいました。
「地図に検索したい範囲をユーザー自身に描いてもらえば、自由に検索できそう」
確かに、ただ地図に描くだけなら面倒な設定もいらず、描いてもらう範囲の大きさによって検索する範囲を決めることができます。また、現在地周辺にしたり、ルートに添わせてみたり、描き方で様々なシーンに合わせて柔軟にガソリンスタンドを探すことができます。
さらに、以前リリースしたガソリン価格マップと合わせて使うことで、ヒートマップを見ながら安いエリアに沿って検索することもできます。
なにより操作が簡単で触ってみたくなる機能になります。
こうして周辺やエリアに関わらず、自分で検索する場所を自由に選んで価格の比較ができる現在の「ガソリン価格なぞって検索」の形となっていきました。
対応中に頑張ったこと
今回、開発するにあたって注力した点の一つは「ユーザーの意図をできるだけダイレクトに反映する」ことです。
この機能ではユーザーが範囲を指定して、その範囲内のガソリンスタンドが検索できますが、その範囲を示すポリゴンは以下のステップで作られます。
ユーザーに手書きの線を入力してもらう
入力された線を点群に変換し配列に保持
点群を線分で繋ぎ、ポリゴンにする
1番で引かれた線が、3番でユーザーの思い描いた形のポリゴンに変換されることが理想ですが、そのためには考慮すべき点がいくつかありました。
タッチパネルに手書き入力する際、意外と思い通りにいかない
線を入力できるようになり、自分で使ってみた時に最初に感じたことです。自分が指をペン代わりに使うことに慣れていなかったというのもありますが、今書いている箇所が指先で見えないことが思ったより気になりました。
線の終点がどこか分からないため、領域が作れているか指を離すまで分からない場合があると考えました。
そこで、領域ができている場合とできていない場合に分けて挙動を考えることにしました。
線が交わっていない場合
まず描いた線に交点が無く領域を作ることが出来ない場合を解消しようと考えました。この場合ユーザーからすると領域を囲ったつもりだが、実際には囲えていないパターンと思われたため、線の始点と終点を繋いで補完することで領域を作ることにしました。
線が交わった場合
次に描いた線に交点があり、領域がある場合、こちらは領域ができた時点で交点から交点までの線をポリゴンに変換することにしました。そうすることでユーザーが指先で線が交わったかを判断できずとも、スムーズに検索を開始できると考えました。
問題は解消されたと思われたが？
ここまでの実装を行い、社内でフィードバックを受けました。実際に触ってもらっているところを横で見ていたところ、何度か線を引き直しているのを見かけました。どうやら意図しない範囲でポリゴンが作られてしまっているようでした。
入力しているところをよくよく見てみると、描いている途中で考えが変わった場合や鋭角などに意図しない箇所で交差をしてしまい、意図しない範囲のポリゴンが生成されていました。
機能概要を知っている社内の人が使った場合でも一回で上手く使えないのなら、初めて機能を使うユーザーにとってはより使いづらいものになってしまっています。そこでポリゴンの生成ルールを改めることにしました。
手を離すまでに引いた線全部使う方針へ
色々検討した結果、ユーザーが入力を終えた段階で引いていた線全部で作れる領域をポリゴンに変換することとなりました。ただこの方法には一つ問題点がありました。それは領域が複数になってしまう可能性があることです。
この状態で線内全体を検索しようと考えた時、検索を領域の数だけ行わなくてはならず、かつ何度行うかをユーザーが任意に決めれてしまう状態は健全ではないと判断しました。
そこで点群→ポリゴンの変換の時に、交点をくびれに変換する処理を実行することにしました。
交点をくびれに変換する
交点を解消する方法は、交差している線分を構成する点同士の繋ぎ方を変えるというものにしました。この時交点自体は点群内に保持しないことと、交点を作っていた線分の繋ぎ方を変えることで一つの交点をくびれに変換することが出来ます。
複数交点がある場合でもこれを交点が無くなるまで繰り返すことによって、ユーザーの描いた線を必ず一つの領域を囲うポリゴンに変換することが出来ます。これにより複雑な線を引いてもポリゴンを作ることができるようになりました。
ここまでさまざまなパターンを考慮したことによって、ユーザーの入力をよりダイレクトに検索に反映できるようになりました。おかげで機能の触りごごちはかなり良いという自負があります！ぜひダウンロードして触ってみてください！
リリース後の反響
ありがたいことに複数のWEBメディアで記事を書いていただいただき、さらにテレビでも2件取り上げていただきました！
テレビでは「好きなエリアの最安値が一瞬でわかるサービス」として紹介をしていただけました。昨今の高騰によるガソリン価格に対する関心の高まりを強く実感しました。より安いガソリンスタンドを探せるという点に加えて、より直感的な・簡単な操作で検索をおこなえるといった、特に力を入れた点にも触れていただけたのはとても嬉かったです。
コーナーの中では「エリアを跨いでの検索や進行方向に絞っての検索にも使えそうですね」と、まさしく想定していたユースケースについても話していただけ、とてもありがたい取り上げられ方となっておりました。お陰様で放送日のDL数は普段の平均の7倍近くとなりました。
個人的には試行錯誤しながら作り上げた機能がテレビに取り上げられているのは想像以上に嬉しく、これからもユーザーの皆様がより便利に使えるアプリを目指して頑張りたいと思いました。
最後に
『NAVITIMEドライブサポーター』の「ガソリン価格なぞって検索」は広範囲で柔軟に安いガソリンスタンドを探すことができ、少しでも安いガソリンスタンドで給油したいという開発者の熱い気持ちと技術が詰まった機能です。
「ガソリン価格なぞって検索」に興味を持った、使ってみたい方は、どなたでも無料で利用できる機能になっていますので、ぜひ以下からアプリをダウンロードしてお試しください。
そして、使ってみた率直な感想・ご意見などをレビューやアプリ内のご意見箱からいただけると嬉しいです。
「ガソリン価格なぞって検索」が使える
『NAVITIMEドライブサポーター』のダウンロードはこちらから！