【DailyCocoda! 10日目】地図アプリの行き先検索画面

こんにちはー、mintoです！

今回はDailyCocoda!10日目のお題、「地図アプリの行き先検索画面」を作成しました！
今回のUIデザインにあたってのターゲットは以下のように指定されています。

このお題とターゲットを見て、どういう用途で地図アプリを使うのか理解できなかったのですが（通学の慣れた道で使うことはあまりないし）、自分の中でユースケースを考えて作ってみました。

作成したUIはグーグルマップとAppleのマップを参考にしていて、両方を比較しながらマップのUIを考えていきました。

完成品

そして完成したものがこちらです！

以下、デザインした上で気をつけたポイントを箇条書きで説明していきます。

・今回のターゲットである中学生は、基本的に見知らぬ土地に出かける機会は少ない気がしてますが、たまに友達と隣町まで遊びに行ったりして、遊んだ後自宅や塾に向かうことを想定してみました。

・GoogleマップとAppleマップを比較すると、Googleマップは周辺地域の人気店やおすすめスポット等の情報が充実していて、機能的には多機能な印象があります。一方でAppleマップは、よく使う項目、マイガイド、検索履歴があるだけで必要以上に情報をユーザーに与えないシンプルなものとなっています。
今回でいうと、ターゲットは新しいお店を開拓したり、人気のお店を知りたいというよりは、普段の行動範囲である自宅や学校、塾等を目的地と設定する場面が多いと考え、Appleマップの思想を取り入れ、目的地をシンプル且つ早く調べられるようにしました。

・カラーに関しては、10代向けになるべく多色を使い、アクティブな印象になるよう心がけました。

・ボトムシート上部にはカテゴリー別にタブを用意し、カテゴリーが増えても横にスライドしながら切り替えをスムーズにできるようにしました。ボトムシートを上にスワイプすれば、画面最上部の時刻のすぐ下辺りまでシートが広がることを想定しています。
※メンターからのレビューで、このタブのUIはAndroidの場合、チップに該当するUIで、スワイプ対象にならないケースがあるらしいです。
今後はユーザーを混乱させないように注意します！

・検索窓はGoogleマップだとボトムシートとは別に画面上部にありますが、Appleマップのようにボトムシート内に置くことで、情報を一まとまりで確認することができるので、視線を逐一動かさずに済むようにしました。

・地図を大きな画面で見たり操作したい場合は、以下のようにボトムシートを下にスワイプして、検索窓だけ表示されるようにしています。

・学生だと行動範囲の狭さから、目的地が限定されてきそうな気がするので、アプリ起動時はボトムシートにお気に入りのタブが選択されるようにして、ワンタップで自宅や塾の地図が表示されるようにしました。

・学生の子を持つ親からすれば、子供の安全は常に気になるもの。万が一のことがあった場合、すぐに助けを求められるように「交番」タブを用意し、すぐ近くの交番を探すことができるようにしました。

・お気に入りの各項目の右側にある「…」をタップすると、お気に入りの削除・追加や名称の変更等の設定ができるような想定でいます。

デザインの感想

今回のUIを作成するにあたって、まずガイドラインでボトムシートの仕様を確認することから始めましたが、できること、できないことを認識した上で作業に入ることができたのはよかったと思います。

あとデザインしてから気づいたことですが、「お気に入りを追加」ボタンはお気に入りリストの一番下にありますが、リストがかなり増えた場合はどうするのかという点を考慮すればよかったです。
※かなり下までスクロールしないとお気に入り追加できないのは面倒なので。

地図のUIは最近いろんなアプリで使用されていると思うので、もっと知見を高めていきたいと思います。

ではまた次回！