こんにちは、こんばんは。

UIデザインの練習のためにDailyCocoda!をちょこちょこと進めています。今回は「007-フードデリバリーアプリ」と「008-計算機アプリ」のUIデザインをしたので、工程と考えを簡単にまとめたいと思います。

007 フードデリバリーアプリのリスト画面

①出されるお題とコンセプトから自分の考えを出す

ユーザーが「会社員」ということで、昼休みなどにデリバリーを使用すると想定。お昼休みに時間内に限りがあるので時間表示や時間でフィルターをかけることができるようにした。また、注文する場所がたいてい固定されている（会社、自宅）と考えて、住所などは予め登録可能とし、プルダウンで住所の変更ができるようにした。（現在地での検索も可能）

「すぐに見つけられる」といコンセプトに関しては、「食べたいものが決まっている状態」ですぐに見つけられるという方と、「何を食べるか迷っている状態」で食べたいものが見つけられるという方の両方に利便性があるように意識した。

写真と時間、値段を大きく表示させて、直感で食べたいものを見つけられるようにしました。また、食欲を湧くのは文字情報よりも写真を見た時だと考え、カテゴリを絞るトップ部分に写真を表示した。

比較してみた

デリバリーアプリのUIを考えるに当たって、「楽天」「出前館」「UberEats」のアプリの比較を行った。

楽天　　　タブバー　：一覧/キャンペーン/カート/履歴/その他
　　　　　流れ　　　：住所→「注文できる店一覧」画面
　　　　　フィルター：ピザ/すし/弁当など料理名

出前館　　タブバー　：一覧/検索/ログイン/マイページ
　　　　　流れ　　　：住所→「料理一覧/注文できる店一覧」
　　　　　フィルター：おすすめ/時間/決済方法

Uber　　 タブバー　：ホーム/検索/注文/アカウント
　　　　　流れ　　　：住所→オファー、人気の店、おすすめ、一覧
　　　　　　　　　　　→一画面の中にカテゴリ選択
　　　　　フィルター：時間、値段、並べ替え

すべてのアプリを実際に触り、「すぐに見つかる」を自分なりに試してみると、出前館が一番目的地に着く流れがスムーズであったように思う。トップに料理が写真で表示されていることで、「画像で認識→食べたい料理をタップ」ですぐにカテゴリを絞って「自分が食べたいもの」を検索することができた。

楽天は、一覧→フィルターアイコンのタップ→カテゴリ一覧とひと手間があった。おすすめ一覧だと、「早くお得なものを注文」したい人には良いかもしれないが、自分が求めているものがある場合には厄介である。

UberEatsは、LPのようにオファー→近くの人気→料理カテゴリ→おすすめ→一覧がならんでいて、少し使いづらさを感じた。（下にスクロールで多く情報を見せて）カテゴリを見つけるのにも少し手間を要する。タブバーで「検索」に切り替えて、具体的な店名などを検索しなければいけないので、迷っている人には「自分が食べたい物」を見つけるのは困難なのではないかと思う。

②制作に当たっての感想と今後の課題

デリバリー店の一覧で写真を大きく表示させたのは良いものの、店情報の部分が無意味な余白が多く不自然に感じるのでバランスをよく見て改善したい。

参考にあげられているアプリを実際にインストールし対象のユーザの立場になって操作したことで、どのような流れで操作することが「食べたい物を見つける」ことへの近道なのかを知れた。

008 計算機アプリ

①出されるお題とコンセプトから自分の考えを出す

ユーザーが「30代の主婦」なので、女性らしさ柔らかさを出したいと考えた。また、派手な色は使わず落ち着いた計算機を好みそうだと想定。

コンセプトの「さっと使える」を重視するために、「税抜き・税込み」ボタンを設置した。

そして、アプリではない計算機とあまり使用感に違いが無いように、押しているという動きが分かるように立体感を出した。（凹みの立体感を出すことができなくて、雑になってしまった・・・）

②制作に当たっての感想と今後の課題

ニューモーフィズムを使ってみたかったという理由もありますが、あまりボタンとして認識し難いのかなと・・・（そもそもニューモーフィズムを作成するのが下手くそというのもありますが。）

全体的に色が淡くて視認性が良く無いなと数日経って振り返ると思いました。

ーーーーーーーーーーーーーーーーーーーーーーーーー

作成し終わってすぐ振り返るとそこまで悪い部分が見えないのですが、数日経って改めて自分のUIデザインを見てみると「なぜこうなったんだろう？」と思う部分や雑な部分が見えてきますね・・・

もう少しDailyCocoda!を進めた後、自分のデザインをリデザインしてみたいと思います。

では