Daily UI #020「Location Tracker」地図

制作の流れ

ペルソナを設定

地図の使用を想定したアプリを考え旅行アプリを使用するユーザーのペルソナを設定しました。

アプリに求めているもの

• 正確で詳細な地図情報
  観光スポットやレストラン、カフェなどの位置情報が正確であること。
• ナビゲーション機能
  現在地から目的地までの道順を簡単に確認できる。
• 周辺情報
  周囲のおすすめスポットやレビュー、評価が見られる。
• インテグレーション
  他の旅行関連アプリ（宿泊予約、交通手段予約など）と連携できる。

UIデザインを作成

トップ画面

ヘッダーのナビゲーションでは旅行の目的「ホテル」「観光」に応じた項目を選択できるようにしています。

「おすすめの旅行プラン」ではユーザーが作った旅行プランをシェアし、アプリの利用率の促進を図っています。

ペルソナが求めていたおすすめスポットのレビュー機能も「スポット」に掲載しています。

地図画面

ナビゲーション

ヘッダーのタブナビゲーションから周辺スポットをカテゴリ分けしており、GPSの現在地から目的の観光地や料理、ホテルなどを探すことができる想定です。

経路

GoogleMapを参考に観光スポットへの経路には、短時間の経路などを表示するようにしています。
選択した経路は一本線のアクセントカラーで強調しています。

スポット詳細

スポットをクリックすると詳細の中に観光地の住所やレビューをはじめ、各交通機関「公共交通」「自家用車」「タクシー」などに応じた移動方法を選択できるようにしています。

まとめ

今回のデザインのまとめです。

• 目的に応じた内容を直感的に選択できるナビゲーションを配置
• ただの観光スポットを紹介する旅行アプリではなくユーザーがより情報発信してアプリを使用する機会を増やす施策を実装する
• 交通機関に応じた経路を直感的に操作できるようにする

今回は旅行を想定したアプリで地図のデザインを作成しました。
ユーザーがなぜ何の目的でアプリを使用しているのか考えて制作すると必要な要素を考えることができるます！

最後までご覧いただきありがとうございました。