![見出し画像](https://assets.st-note.com/production/uploads/images/133805715/rectangle_large_type_2_df2f8b9f37535c7aee5b18c29b90a3b9.png?width=1200)
バスと電車の乗り換えをスムーズに!デザイナーが語る新機能の舞台裏
こんにちは、ピーナッツです。
ナビタイムジャパンで『NAVITIME forスゴ得』のデザインを担当しています。今回は、2023年9月にプレスリリースを発表した機能「バス停周辺駅表示」について担当デザイナーの視点でご紹介します。(※こちらの機能は全国対応しています)
出来るようになったこと
まずは機能をご紹介します。
「バス停周辺駅表示」では、バス停の停車順に加えて、近く(300m以内)にある駅名と、その駅を通っている路線をアイコンで表示します。
バス停名に最寄り駅名が含まれることも多いですが、中にはバス停名から近くの駅を推測できないところもありますよね。
そんな時にこの機能を活用すると、歩いて乗り換えられる駅を簡単に知ることができます。さらに、駅名・路線/方面をタップすると、電車の時刻表も確認できるので検索し直さなくても電車の時刻がすぐにわかります!
開発に至った背景にあるユーザーの課題
バス利用者のためのサービス『バスNAVITIME』の利用者の出発地・目的地を調査したところ、いずれか・または両方に、駅を指定している検索が6割を占めることがわかりました。駅が最終目的地という場合もあると思いますが、バスと電車を乗り継いで生活しているという方も多くいらっしゃるのではないでしょうか。
![](https://assets.st-note.com/img/1710231102323-n0o2wpbskv.png?width=1200)
電車の駅では、乗り換え可能な路線を示すアイコンが看板に表示され、バスの車内サイネージには、バス停と駅の接続情報を提供する会社もあります。これらのサービスは非常に便利ですが、すべての会社、路線が対応しているわけではありません。とはいえ、バス停名に駅名が含まれていない場合は目的の駅に行くために、どのバス停で降車するべきかわかりません。
![](https://assets.st-note.com/img/1710222116536-lchwRxU2D5.jpg?width=1200)
検討の様子
私たちは、ユーザーからの声や自分たちの経験を踏まえて、バス停名と駅名がセットで認識して活用できるように検討を重ねました。元々バス停名が並ぶ画面なので、以下の意図を実現させようと決めました。
![](https://assets.st-note.com/img/1710234343840-EuiQP7ahhY.png?width=1200)
優先度を守るために、バス停名の領域を侵害したくない思いと新機能を直感で理解してほしい思いがあったので、パターンを展開し同チームのエンジニアやマーケターにフィードバックをもらって集約させました。
以下はバス停名と駅名の関係がわかりやすい形にするために出した案の一部となっています。
![](https://assets.st-note.com/img/1710230965312-HdkfJWYxwh.png?width=1200)
細かい部分の意図
停車順線の色を無彩色にすることで、鉄道路線の色を目立ちやすくしました。また、鉄道情報を右端にまとめ、バス情報と分けて認知させました。さらに、遷移を直感的に感じさせるような画面に設計しました。タップしやすい領域も確保しています。
![](https://assets.st-note.com/img/1710232007836-Pj1Og6LABg.png?width=1200)
ナビタイムジャパンならではの強み
当社はさまざまな移動手段を組み合わせた最適なルートを案内する「トータルナビ」を提供しています。乗換案内で接続しているバス停と駅の組み合わせを、停車順リストに応用することでバス停から徒歩での接続が可能な周辺駅を表示する機能を実現しました。
ユーザーの反応
バスから乗り換えの鉄道が時刻表検索で出るようになり、ちょっとしたことで便利になりました。
奥まった場所にある機能にも関わらず、気づいてご活用いただいているご意見を頂戴しました。また、停車駅画面を開いたユーザーの2割の方が、鉄道駅を押下してくださり、こちらの機能を訴求したお知らせの開封数は1万を超えました。
まとめ
今回は、バスから電車へ乗り継ぐときの不安が、少しでも減るよう考えた新機能のデザイン検討秘話に触れてみましたが、いかがでしたでしょうか。
情報を拡充させる時には、大きなUI変更のこともあれば今回のように表示領域が小さいものもあります。ただ、検討の際には大小関わらずユーザーが効果的に使える形を追求し、新鮮な視点でチェックしてくれるチームメンバーにフィードバックをもらうことでより良いものになっていくと考えています。これからも、皆様の日々のいろんな移動シーンに即したアイディアを実現していきます。
最後までご覧いただきありがとうございました!
今回ご紹介したバス停近くの駅表示機能が試せるのは『NAVITIME forスゴ得』と『乗換NAVITIME forスゴ得』だけ!気になった方はこちらから👇