Maply

LINEヤフーが提供する、「ガイド」を選び、目的に応じて地図上の情報や検索体験が切り替わるマップアプリ「Maply」の開発に携わりました。

PM・企画担当と協働しながら、各ガイドで提供する情報の整理や画面遷移を検討し、体験設計と UI デザインを担当しました。

移動手段ごとに分かれていたルート選択画面を統一するプロジェクトを担当し、要件整理、仕様策定、優先順位付け、デザイン方針の策定をリードしました。

従来のバス情報は、バス停を起点に行き先を確認する体験が中心でした。そのため、目的地へ向かう際には、どのバス停から乗ればよいかを利用者自身で調べる必要があり、目的地から逆算して移動手段を選びにくい課題がありました。

そこで、目的地を入力すると、乗車候補となるバス停、発車時刻、乗り換えを含むルートを地図上で確認できる体験を設計しました。

また、候補のバス停を選択すると、そのまま目的地までのルートを同じ画面で確認できる構成とし、バス停と経路画面を何度も行き来することなく比較・判断できる UI を設計しました。

Yahoo!カーナビを担当した経験から、給油先を選ぶ際には詳細画面を開いて価格を確認するのではなく、地図上で価格を比較しながら判断したいというニーズがあると考えました。

そこで、油種（レギュラー・ハイオク・軽油など）や価格種別（現金価格・会員価格）を切り替えると、地図上に表示される価格も連動して切り替わる UI を設計しました。

ユーザーが比較したい条件に応じた価格を地図上で一覧できるようにすることで、複数の詳細画面を行き来することなく、給油先を判断できる体験を実現しました。

これまで Yahoo!カーナビを担当した経験から、駐車場選びでは現在地からの距離だけでなく、満空状況、料金、最大料金、収容台数、支払い方法、駐車形式など、複数の条件を比較しながら判断することが多いと考えました。

そこで、ユーザーが最も重視する満空状況と料金を地図上で一目で比較できる情報設計を行いました。

満空状況は吹き出し内に「空車・混雑・満車」の状態を色とテキストで表示し、その下に料金を配置することで、詳細画面を開かなくても地図を見るだけで候補を比較・判断できる UI を設計しました。

さらに、収容台数や支払い方法、駐車形式などの詳細条件も確認できるようにし、利用目的に応じて候補を効率よく探せる体験を実現しました。

移動手段ごとに開発チームが異なっていたため、ルート選択画面の情報構造や UI が統一されておらず、ユーザーが移動手段を切り替えた際に一貫した体験を提供できていませんでした。

そこで、ルート選択画面の刷新では PM を担当し、開発スケジュールや実装コストを踏まえて機能の優先順位を整理・デザイナーへのレビューやエンジニアとの仕様調整を実施しました。

各移動手段の担当チームを含む複数のステークホルダーと認識を合わせながら仕様を策定し、Maply 全体で一貫したルート選択体験を提供できるよう、プロジェクトをリリースまで推進しました。