【DailyCocoda! 7日目】デリバリーアプリのリスト画面

こんにちはー、mintoです！

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

デリバリーアプリは使ったことがなかったのでいろんなアプリを参考にさせていただきました。
参考：UberEats、楽天デリバリー、出前館、menu、Chompy

完成品

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

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

・今回のターゲットは仕事等で時間が取られて、何を食べたいか全く決まっていないことが多いと想定されます。また、レビューも気になっているなら、いつもの店や品物をそこまで気にする必要がないはず。なので今回は何をたべようか全く思いついてない状態から検索する「完全探索」のケースの優先度が高いと考えました。
完全探索のケースなら、どんなものを食べるか0から自分の頭で考えて検索するより、「カレー」、「ハンバーガー」等の各ジャンルをビジュアルで確認しながらの方が、食べたいものを思いつきやすいと思います。そのため、検索周りは各ジャンルの画像をスライドしながら確認できるようにして、タップしたら画面下部に検索結果がすぐ反映されるように設計しました。

・各ジャンルの画像は出前館にもありますが、タップすると検索結果画面が別に表示されてしまうので、各ジャンルの画像を見たいときはまた前の画面に戻らないといけないのが、早く決めたいとき不便に感じました。なので、ジャンルをサクサク切り替えて自分の今の気分に合わせて、最速で各ジャンルのお店のリストを表示させることを心がけました。

・ターゲットは第一にスピードを重視していると感じるので、並び替えタブを必須とし、最短の配達時間をすぐ調べられるようにしました。また、並び替えタブではランキング順にも対応している想定なので、そこまで急いでないけど高評価のものが食べたい場合にも対応しています。

・20代であればなるべく食費を抑えたいシーンが多いかなと思い、最低注文金額をリストに表示させ、今日の予算によっても検索で絞り込むことが可能。

・ジャンルのアイコンは、選択中の場合アイコンの枠に薄い赤色が付き、アイコンが少し大きく、非選択の場合はグレーアウトしてアイコンを少し小さくして、選択/非選択の差異をしっかり出すようにしました。

・ジャンルのアイコン非選択の場合は、「今日の新着」や「本日のおすすめ」などを表示させ、ジャンルを選択したら、そのジャンルのお店一覧が表示されるようにして、その日の気分やシチュエーション次第であらゆる角度から探せるような想定でいます。

・リストのサイズに関しては、少しでも多くの情報を確認するため、検索周りを除いて1画面で4店舗のリストが表示されるサイズにしています。
　※UberEatsは2店舗

・レビューも気になるターゲットのために、5段階の評価を5つの星の数で表現しました。UberEatsだと一つの星の隣に実際の数値が書いてあるだけですが、星を実際の数並べることで考えること無く視覚的に理解できるようにしました。

・配達時間はリストの中では一番重要なポイントであると思うので、他の情報とは別に右寄せにしてメインカラーのboldにしてわかりやすくしました。

・ざっとスクロールしていくつかの店舗を見比べたとき、お気に入り機能があれば、とりあえず気になったのをお気に入り追加して後で比較しやすいと思うので作成しました。

・リストの枠は最初リストの中身を四角の枠線で囲ってそれぞれ独立させたUIだったのですが、今のUIにすることで前後左右のマージン広くなり、画面にゆとりをもたせてグループ感が生まれるようにしました。

・ジャンルで検索して下までスクロールした状態でホームボタンをタップすると、トップまで戻れる仕様を想定していて、検索内容を変更したい場合にすぐに戻れるようにしました。

・メインカラーは食欲をそそる暖色系且つ購買意欲が湧くように、鮮やかな赤を選びました。

デザインの感想

メインカラーが出前館と酷似してしまったので、できればもっと差異を出せればよかったです。

あとジャンル非選択の場合におすすめを出すのではなく、「今日のおすすめ」のようなレコメンド枠を用意すればよりユーザーに親切であったかなと思いました。

UIデザインのアウトプットをする毎に、考慮できる範囲が広がっている感じがしているので、もっと成長を加速させたいです！

ではまた次回！