Yahoo!乗換案内

Yahoo!乗換案内のサービス開始 15 周年企画として、「トレインキャスト」と「運行情報キャスト」のデザインに約 1 年間取り組みました。

PdM1 名、デザイナー 3 名、開発 2 名のチームで、主にデザインコンセプトの策定、主要画面の UI 検討、デザインレビューを担当しました。

Yahoo!乗換案内は、公共交通での移動を支援するサービスです。

15 周年を機に、経路を調べるためだけではなく、鉄道ファンや列車に興味を持つ子どもなどが、全国を走る列車を眺めて楽しめる体験を検討しました。

プロジェクトでは、列車の現在地を地図上で確認できる体験を目指し、Flightradar24 をベンチマークとし、サービスの方向性を UI・ビジュアルへ展開するためのデザインコンセプトを作成しました。

社内約 70 名を対象にコンセプトテストを実施し、リリース後の利用意向や利用頻度を調査しました。調査結果をもとに、ターゲットをコアな鉄道ファンに限定せず、「鉄道が好き、または趣味として楽しんでいるユーザ」に設定しました。

結果的に老若男女のみなさんにたくさん利用していただくことに繋がりました。

全国を走る列車を眺めるだけでも楽しめるよう、新幹線、有料列車、普通列車の表示を切り替えられる UI にしました。

また、一目で「日本中でこんなに電車が走っているんだ」と感じられる体験を目指し、地図と現在走行している列車数の両方から、全国を走る列車の規模感を伝えられるよう設計しました。

地図上の列車を選択すると、列車情報に加えて、表定速度や総走行距離、区間平均速度を確認できます。

さらに、気になる列車を地図上で追い続けられる追跡モードを設け、移動の様子を眺めるだけでも楽しめる体験を目指しました。

全国の遅延や運転見合わせを、地図上で確認できる画面を設計しました。

画面下部の運行情報カードは、鉄道らしさを感じながら情報を眺められるよう、駅の電光掲示板をモチーフにデザインしました。

地図の表示地域に応じて運行情報が更新され、カードを横にスワイプすると、表示した路線に合わせて地図の範囲も切り替わるようにしました。

「実際の列車に即した表現にする」というデザインコンセプトをもとに、協業デザイナーが列車アイコンを制作しました。

私はデザインレビューを担当し、コンセプトに沿った表現になっているか、列車ごとの特徴が適切に反映されているかを確認しました。

従来は地下鉄のみ路線カラーを表示していましたが、JR や私鉄にも路線カラーを適用しました。

色数が増えても鉄道情報が埋もれないよう、駅名・路線名を優先し、施設ピンの色や表示量を調整しました。