スイーツショップ検索アプリのUIデザイン - foolishlifeの提案

※ このランサーは「ウェブサイト制作・デザイン」のお仕事で32件の評価を獲得しています。

Webデザイナー、UX/UIデザイナーの佐藤と申します。
よろしくお願いいたします。
デザインのご提案をさせていただきます。

添付の画像と合わせて簡単なモックアップもご覧ください。
https://invis.io/UJDHUSMYD
パスワード：clisk

--------------------------------------------------
全体のトーン＆マナー
--------------------------------------------------

・ユニセックス
・飲食がテーマ
・海外展開も視野

といったあたりを考慮し、

・モノトーン以外の色の使用を控え、「男性っぽい」「女性っぽい」という先入観を排除
・モノトーン以外の色は主に暖色を使用
・メインは白を使い清潔感を
・空白を有効に使い、洗練された印象に

といったことを指針としています。


--------------------------------------------------
全体のUI
--------------------------------------------------

■メインメニュー

本アプリにおいて、最終的に“画面の種類”がどれほどになるかわかりませんが、
基本的には、「各画面（または機能）は画面下に配置したメインメニューからアクセスする」というルールで制作しています。
現時点では
・ショップ　一覧（マップ or リスト）および詳細
・検索
・マイページ
という3種類の画面／機能がありますので、それをメインメニューとして配置しました。

他に画面／機能が入ってくるとしても、ショップ一覧＆詳細と検索より重要な画面／機能はないと予想しますので、その場合は、マイページの部分を「メニュー（ハンバーガーアイコンなど）」に変更し、メニュー画面をオーバーレイ表示させるか、追加される画面／機能が１項目であれば、メインメニューを4項目にしてしまってもいいかもしれません。

ショップ一覧のマップとリストを同列でメニューに並べなかったのは、この２つは、別々の２つの画面／機能ではなく、１つの画面／機能を違った見せ方で表示しているものだからです。
・ショップ一覧マップ
・ショップ一覧リスト
という２画面ではなく、
・ショップ一覧
という画面の
- マップ表示
- リスト表示
という“状態”ということです。

そこで、メニュー画面からは「ショップ一覧（デフォルトではマップ）」に遷移し、次のアクションでマップ／リストを切り替えるというフローを提案します。

■画面左上のボタン

こちらは、その画面に対するアクションを起こすためのボタンを配置しました。
・ショップ一覧画面 … マップ／リストの切り替え、絞り込み条件の変更
・ショップ詳細画面 … ショップ一覧に戻る
・検索画面（各画面にオーバーレイ） … 検索画面を閉じる
といった具合です。

■各画面におけるメインアクションボタン

画面中央下部に、主に起こしてほしい行動を喚起するボタンを配置しました。
こちらも全体のルールとして、全画面に適用されるものです。
現時点では以下の2種類です。

・一覧（マップ）画面での「ショップ追加」
　※この機能は、マップの中央に位置している施設をショップとして追加する機能と理解しました。「ショップを追加」>「住所などの情報を入力」といったフローを想定していませんので、リスト表示画面にはこのボタンを配置していません。
・ショップ詳細（写真）画面での「写真を追加」
　※主なユーザー心理として、「他の写真を見ている」>「自分も投稿」というものを想定しました。よって、店舗情報画面にはこのボタンを配置していません。


--------------------------------------------------
全体の配色
--------------------------------------------------

モノトーンを基調とし、白以外の塗り面を控えています。
“清潔感”を最も大切にしたいと考えました。

モノトーン以外の色は、暖色をメインに使用します。以下のようなものです。
・キーカラーの赤（勝手に作りました。何かご用意があればそちらに合わせます）
・写真を「いいね（LIKE）」した時のピンク
・マップ画面でのショップアイコン（未訪問／既訪問）※配色検討中

飲食をイメージした場合、青や緑といった寒色より、赤や黄色といった暖色のほうが
・食べ物や飲み物をイメージしやすい（食べ物や飲み物そのものの色が暖色が多い）
・食器をイメージしやすい（お皿やカップといった食器は白色のものが多い）
・食欲を喚起する（青いサングラスをかけて食事をすると食事量が減るといった調査結果）
などといった理由から好相性と判断できます。

全体の背景は白ですが、ほんのり黄色を混ぜて温かみを出しています。
ロゴにはキーカラーとしての赤を採用しました。金赤と言われるような真っ赤ではなく、ほんのり青や緑を混ぜた穏やかな赤です。
マップ表示時では、他の施設が多量に含まれることや、ショップアイコンを未訪問／既訪問の意味合いで色分けしていることなどから色が増えすぎて煩雑になっていますが、こちらはもう少し調整していきます。

全体的に使用する色を控えることで、色あざやかな数々のスイーツ写真がみずみずしく生き生きと表現されることと思います。

--------------------------------------------------
ショップ一覧画面
--------------------------------------------------

■マップ表示

マップ中央に、中央点であることを示すアイコンを配置します。
登録したいショップをこのポイントに合わせ、画面中央下部の「ショップ追加」ボタンをタップすることでショップ登録をおこないます。
初期状態では、マップ中央に、中央点表示とショップ追加機能を兼ねたアイコンボタンを配置し、それをタップすることでショップ登録をおこなうほうがより直感的かとも考えましたが、ショップ詳細画面での写真投稿など、“各画面における主に喚起したい行動”のボタンを画面中央下部に配置するルールをアプリ全体で採用するほうが、ユーザーが機能を予測しやすく、ユーザビリティーが向上すると考え、今回提案のようになっています。

未訪問／既訪問の視覚的区別は、現時点では「色」で区別していますが、これは直感的とは言いづらく、アイコンの形状で区別する方向で調整したいと思っています。
また、マップ自体も、現時点ではノーマルのGoogleMapをスクリーンショットして使用していますが、情報量や色数について調整したいと思っています。

マップ右上には、「拡大」「縮小」「現在地を表示」という“マップ内を操作する機能”をボタンとして配置しました。
拡大縮小についてはピンチイン／ピンチアウト、ダブルタップホールドからの上下スワイプでもおこなえる想定です。

これは全体のUIに通じるルールですが、
・メインメニューは画面、行動を切り替える
・左上のボタンは表示中の画面に対してアクションする
・セクション内のボタンはそのセクションに対してアクションする
・画面下部中央のボタンは、その画面で主におこなってほしいアクション
というUI設計となっています。

■リスト表示

「MAPの中心から近い順」は見出しですが、ドロップダウン形式のソート切り替えを想定しています。
右側に下向き三角アイコンをつけているのはそのためです。
リリース時点では三角アイコンが非表示になるものと思います。

リスト表示のデザインは、スタディーの過程で3種類制作しました。
最終的には、丸い形状の写真とその右側に店名、LIKE数、距離が並ぶものをご提案しています。
写真を丸くしたのは、丸いお皿にスイーツが乗っている様子をイメージしてのものです。
画面をテーブルと設定し、テーブルの上においしそうなスイーツを乗せたお皿がいくつも並んでいるといった様子を表現しました。
3〜4列で写真だけを並べても楽しいですが、この画面での目的は写真を楽しむことではなく、いきたい店舗を探すまたは選ぶことですので、店名、LIKE数、距離は必須かと考えました。

LIKEアイコン（ハートマーク）は、通常では白抜きのラインアイコンですが、自分がLIKEしたことのあるショップについてはピンク色の塗りになります。

--------------------------------------------------
ショップ詳細画面
--------------------------------------------------

写真一覧とショップ情報をタブで切り替える仕様で考えました。
タブボタンのタップか、左右フリックで切り替える想定です。

■写真

写真表示では、その下のボタンで新着順／LIKE順を切り替えます。
ソートの種類が増えてくれば、UIについては再考の余地がありますが、現時点ではこちらがベストかと考えます。
・情報の種類
　└ 情報内でのカテゴリー
という階層構造を表現しています。

■店舗情報

店舗情報では、そういった意味では「営業時間」「定休日」「住所」が切り替えの対象になってきますが、
・情報の特性としてすべて俯瞰して見たい類のもの
・情報量的に1画面に収まる
という観点から1画面ですべてを表示しています。

営業時間は、曜日ごとに異なるということは滅多にないと思いますが、可能性としてはゼロではないため、曜日ごとの表示としました。
カレンダーをイメージして、横に曜日を並べています。
もし、iPhone5以前といったかなり画面の小さな端末を考慮するのであれば、このUIは再考の余地があります。

定休日については、営業時間表示で事足りるかとも思いましたが、「隔週木曜日」や「不定休」、「年末年始」などもありますので、項目として設けました。

「情報を編集する」「ショップを通報する」は、基本的にはそれほど操作するものではないと思いますので、コンテンツの最下部に控えめに配置しています。
現時点で想定するこの画面の情報量からすると、スクロールすることなく表示されるかと思います。

--------------------------------------------------
検索画面
--------------------------------------------------

ショップ検索は、画面に依存するものではなく、どの画面を見ているときでもおこないたいアクションだと思いますので、メインメニューに配置し、いつでもおこなえるようにしています。
また、マップ画面においても、入力フォームを常に表示するのではなく、通常時は格納しておくことで、マップの表示領域をより広く確保しています。
気にしたいのは検索するまでのタップ数ですが、
・フォーム常時表示 … フォームをタップしてカーソルを移動 > 入力 > 検索
・フォーム必要時のみ表示 … メニューボタンをタップして画面を表示（この時点でフォームにカーソルが移動済み）　> 入力 > 検索
ですので、タップ数は変わりません。
オーバーレイ表示のスピードや動きには注意したいところではあります。

背景は白で透過率60%に設定、後ろにある画面にはぼかしを入れます。

・マップ画面の配色を変更しました。
・ショップアイコンの未訪問／既訪問の区別を変更しました。
・ユーザーの現在地が漏れていたので追加しました。

マップは、こちらのサービスを利用してGoogleマップをカスタマイズしています。
https://snazzymaps.com/

JSのスタイルコードをお渡しできます。

Shops(Map).pngを削除しました

ショップ情報画面の住所下に「マップ画面で確認する」ボタンを追加しました。