架空のカフェの店舗で使うモバイルオーダーアプリをデザインしていきます。UIを作るフローとモバイルオーダーアプリについて知りましょう。

‍要件のスライドリンク

‍

□ 参考：モバイルオーダーアプリって何？という人はこちらの記事読むとイメージが浮かぶかも

並ばず注文！ スマホでの事前オーダー＆決済『モバイルオーダー』を体験してみた

‍

‍

実際に考えてパターンを作ってUIを作るのが1番成長します。動画で作成例を見ていく前に自分で作り切ってみましょう

‍

モバイルオーダーアプリをデザインしていく流れのイメージを話しています。デザインする際の参考にしてみてください。

‍

フローを確認しながらUIに必要な情報を出していきましょう。

‍

今回は「マクドナルド」「スターバックス 」「UberEats」を参考にします。みなさんもアプリをチェックしてスクショを集めてみてください。

‍

まずラフでフローを作りきります。そのためのUIのイメージを紙で出していきましょう。<br>お題で設定されている「ユーザーフロー」に沿って必要なアイデアを出します。<br>参考にするサービスのUIを頼りに作っていきます。

動画で使用しているiOSの基本コンポーネントのFigmaデータはこちら‍

今回はUberEatsをベースに作成していきます。

‍

普通の画面遷移ではなく、UberEatsを参考に「下から画面がせりあがり、選択のみの情報を表示する画面」としてUIを作っています。

‍

今回はiOSの特徴的な「ハーフモーダル」を使って、画面遷移なしで選択できる詳細UIを作っています。

ハーフモーダルの動きについてはこちら

‍

マクドナルドのアプリを参考にUIのパターンを作成してみます。

‍

注文番号を表示して、店舗で受け取れる情報を表示する画面を作っていきます。
基本的に役割が同じ情報は見た目を揃えて表示しましょう。

‍

遷移をつける部分を動画でやっていません。自分でお題のフローを進められるように遷移をつけて確認してください！<br>ポイントはここで機能面/スタイルの両方の軸で「ここはもう少し良くできるなあ」という点に気付くことです。

‍