架空のカフェの店舗で使うモバイルオーダーアプリをデザインしていきます。UIを作るフローとモバイルオーダーアプリについて知りましょう。
□ 参考：モバイルオーダーアプリって何？という人はこちらの記事読むとイメージが浮かぶかも
並ばず注文！ スマホでの事前オーダー＆決済『モバイルオーダー』を体験してみた
実際に考えてパターンを作ってUIを作るのが1番成長します。動画で作成例を見ていく前に自分で作り切ってみましょう
モバイルオーダーアプリをデザインしていく流れのイメージを話しています。デザインする際の参考にしてみてください。
フローを確認しながらUIに必要な情報を出していきましょう。
今回は「マクドナルド」「スターバックス 」「UberEats」を参考にします。みなさんもアプリをチェックしてスクショを集めてみてください。
まずラフでフローを作りきります。そのためのUIのイメージを紙で出していきましょう。<br>お題で設定されている「ユーザーフロー」に沿って必要なアイデアを出します。<br>参考にするサービスのUIを頼りに作っていきます。
普通の画面遷移ではなく、UberEatsを参考に「下から画面がせりあがり、選択のみの情報を表示する画面」としてUIを作っています。
マクドナルドのアプリを参考にUIのパターンを作成してみます。
注文番号を表示して、店舗で受け取れる情報を表示する画面を作っていきます。
基本的に役割が同じ情報は見た目を揃えて表示しましょう。
遷移をつける部分を動画でやっていません。自分でお題のフローを進められるように遷移をつけて確認してください！<br>ポイントはここで機能面/スタイルの両方の軸で「ここはもう少し良くできるなあ」という点に気付くことです。
