スクリーンショット_2018-09-27_11

Daily UI 番外編 カフェを探せるアプリのUIデザイン

Daily UI コツコツ取り組んでいるのですが、
お題だけ与えられて、あとは「It's up to you!」(あなた次第)という仕組みだと、自分ができることしかやらない・挑戦しない という逃げの姿勢になりがちなので、他のお題にも取り組んでみました。

新しく使い始めたのが、Cocoda!というサービス。

Daily UIと同様、与えられたお題に対してデザインの練習ができるサービスなのですが、Daily UIよりも与件が凝っててリアルです。

今回はこのCocoda!の「電源wifiカフェがわかるアプリが欲しい!」というお題に取り組んでみました。

完成品

今回は全部XDで作りました。以下が画面一覧。

「設計概要・コア機能の画面3~8枚を、iPhone8想定で提出してほしい」という与件でしたので(リアル!)、こまごました画面は作り込んでません。


デザインのプロセス

1. ブレインストーミング
どんな機能が必要そうか、アイデアを出していきます。

・現在地から検索できる
・Wifiの有無、電源の有無、メニュー等諸条件で絞り込める
・店内の写真が見れる
・お気に入りのカフェを保存できる
・URLやLINEと連携して位置情報をシェアできる
・チェックイン情報を記録できる
・カフェに対してレビュー、メモを追加できる
・店内の空き状況、空いてる席を確認できる

2. ターゲットを決める
どんな人にこのアプリを提供するかを定義していきます。
・22〜28歳の男性
・大学生〜起業家、ベンチャー企業社員
・可処分所得は月2〜3万(多くはない)
・いわゆる「意識高い系」
・土日も仕事や勉強をすることが多い
・高め会える友人、知人が複数人いる
・カフェごとにお気に入りの座席がある
・コーヒーやスイーツの味にうるさい

ここから、
・20代の「意識高い系」男性
・仕事や勉強に集中できる環境を求めている
・忙しい
をターゲットユーザーのコアな特徴とします。

3. コア機能の選定
2の結果を踏まえ、1の中からコア機能を決めます。

・現在地から(5分以内&片手操作で)近くのカフェを検索できる
・店内の写真が見れる
・お気に入りのカフェを保存しておける


4. ワイヤーフレーム完成
ざっくり情報設計をして、UIを具体化してみて、というプロセスを繰り返し、ワイヤーフレームに仕上げます。
私は普段デザインを担当しないので、WFレベルに留めようと思ったものの、UIを考える過程でどんどん作り込んでいってしまう癖があります。
今回も各所のあしらいに意図が入ってしまったので、少し反省。


まとめ

・Cocoda! はリアルな要件定義の経験が積めるのでおすすめ
・ただ、アプリの案件しかないのが少し残念
・Daily UI やるときに「Cocoda! のあの案件のこの画面だったら…」と当てはめながらやるとよさそう


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでくださりありがとうございます!

おおきに!
8

niri

某Webサービスの UXデザイナー。毎日の学びを残す場所。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。