![見出し画像](https://assets.st-note.com/production/uploads/images/116254383/rectangle_large_type_2_d56ef66ce78e1d81285e00b9ff371173.png?width=800)
ゼロからモバイルオーダーアプリをデザインしてみた #BONO #UI #パターン作成編
ゼロベースからモバイルオーダーアプリのUIをデザインしました。
その過程をご紹介します。
今回は「#パターン作成編」となります。
その前の記事「#準備編」「#ラフデザイン編」も合わせてお読みください。
本記事は「#ラフデザイン編」を踏まえての内容になります。UIパターン作成に入る前の過程を紹介していますので、できれば一読してから本記事を読むことをおすすめします。
1. パターン作成の準備
ラフデザインが済んだので、パターン作成の準備に取り掛かります。
一度UIを作成する中で自発的にアイデアが浮かんでいたり、参考UI調査時にもアイデアが見つかっています。
まずはそれらを一覧にしてまとめていきます。
▼パーツ毎にUIパターンをまとめる
地道な作業ですが、比較検討したり網羅的に把握するのに必要です。
■ホーム画面
ホーム画面は「ヘッダー」「コンテンツ」「フッター(グローバルナビゲーション)」にパーツ分解できます。
![](https://assets.st-note.com/img/1694755145863-5JTb749y42.jpg?width=800)
![](https://assets.st-note.com/img/1694755165175-F7axjr6zZg.jpg?width=800)
●ヘッダー
・ホーム画面では気の利いた一言を表示させる
・デリバリー系は色々な要素を盛り込み、機能的なものが多い
●コンテンツ
・”マクドナルド”と”STARBUCKS”…コンテンツ内にモバイルオーダー導線
・デリバリーサービス…コンテンツをメニューや店舗選択にしている
・アプリ毎に様々なグローバルナビゲーションを採用
・よりシンプルにする方向性で調整したい
■店舗選択画面
店舗選択画面は「ヘッダー」「コンテンツ」にパーツ分解できます。
![](https://assets.st-note.com/img/1694755221673-OwccySXVbk.jpg?width=800)
![](https://assets.st-note.com/img/1694755232079-EqxCetvnSh.jpg?width=800)
![](https://assets.st-note.com/img/1694755225798-p4ZYs1UB8P.jpg?width=800)
●ヘッダー
・検索バーの機能に”フィルター”を含ませるUIがある
・フィルターの内容が少なければタブとして、多い場合はアイコン内に格納
・今回はフィルターをタブ表示する(”マップ”、”近い順”、”お気に入り”)
・検索履歴も設けるべき?
●コンテンツ
・店舗情報を"リスト"、"カード"、"カラム"で表示
・文字情報を優先して表示したいため、リスト表示が良さそう
■商品選択画面
商品選択画面は「ヘッダー」「コンテンツ」にパーツ分解できます。
![](https://assets.st-note.com/img/1694755336881-4wYgdNzwnH.jpg?width=800)
●ヘッダー(フィルター)
・フィルターのタブ("おすすめ", "ドリンク", "フード", "グッズ")
・パターンとしては”ボタン”、”ノーマル”、”アイコン”の3つ
・”アイコン”のパターンは領域を取るし、フィルターの内容から不要
・タップしやすさを考慮する
●コンテンツ
・表示方法は"リスト"、"カード"、"カラム"表示に分類
・画像を優先させたい
・一画面に表示するメニュー量を増やしたい
・”マクドナルド”や”CRISP”を参考にしたい
■商品詳細画面
商品詳細画面は「コンテンツ」「フッター」にパーツ分解できます。
![](https://assets.st-note.com/img/1694756086732-QrKGLLI5FX.jpg?width=800)
![](https://assets.st-note.com/img/1694756091787-CeOs9owjZf.jpg?width=800)
●コンテンツ
・商品カスタマイズ時のセレクトUI
・ボタンの押しやすさ、選択したUIの見やすさを考える
・ラジオボタンやチェックボックスのみは避けたほうが良さそう
●フッター
・商品の数量と価格変化を確認し、カートに入れるアクション
・これらのコンポーネントが一つにまとまっていた方が確認しやすい
・マクドナルドやUberEatsが参考になりそう
・ボタン内に、価格等の表示を組み込むアイデアも使える
■カートへの導線
カート導線は商品選択を行った後に「フッター」に表示されます。
![](https://assets.st-note.com/img/1694756123721-ed6emD8jxX.jpg?width=800)
・カード導線は、「数量」「価格」の表示が重要と思われる
・マクドナルドやCRISPはカートに入れた商品が閲覧できる
・商品詳細画面のUIを使いまわして整合性をもたせた方がいい
■決済画面
決済画面は「コンテンツ」「フッター」に分解できます。
![](https://assets.st-note.com/img/1694756137240-o9lztJZKGS.jpg?width=800)
![](https://assets.st-note.com/img/1694756141750-ncBKm2aNRY.jpg?width=800)
![](https://assets.st-note.com/img/1694756156342-HPJfiZjQZW.jpg?width=800)
●受取店舗
・店舗選択画面のリストを基本的に使用
・変更できる導線を付けたい
●利用方法/支払い方法
・アプリ全体のUIに合わせて統一した方が良さそう
・アプリによってはここのUIは統一感がなかった、不思議
●フッター
・”商品”と”金額”と”確定ボタン”で構成
・商品には”変更”か”削除”の導線を設けるが、どちらかに絞る?
・”金額”はまとまりのあるUIに仕上げたい
■クレジットカード入力画面
![](https://assets.st-note.com/img/1694756145608-DxSCX8r1GO.jpg?width=800)
・アプリ別でそこまで大差はない印象
・見たアプリはすべて別の画面に遷移するように作られている
・モーダルや画面内に組み込むのもあり(遷移を減らす)
■注文確定画面
注文確定画面は「コンテンツ」「フッター」にパーツ分解できます。
この画面は「進捗状況」や「購入履歴」としても使いまわします。
![](https://assets.st-note.com/img/1694756279194-tD4ytPx3CQ.jpg?width=800)
・受け取るための情報が欲しい
・注文番号などの固有情報を最優先に表示させる
・受け取るまでの情報を入れる(受取時間、進捗状況など)
・基本的に作り変えずに、バランスを整える程度でパターン作る
2. UIパターンの作成
▼一旦真似て作成
UIリサーチが終わったら、実際に一旦真似てみます。
ほぼトレースなので技術的なことは特に意識しませんが、この時点でアイデアの取捨選択が始まります。
■ホーム画面
![](https://assets.st-note.com/img/1694756478472-yfdUegX2BS.jpg?width=800)
![](https://assets.st-note.com/img/1694756482222-LX3M21arY2.jpg?width=800)
●ヘッダー
・この時点で店舗選択しない
・「おはようございます」の挨拶ラベルと通知アイコン程度で問題なさそう
●コンテンツ
・バナーをタップしてもらうために工夫が必要
・モバイルオーダーの導線をトップに持ってくる
・モバイルオーダー導線以外のアイデア…"施策"、"おすすめのメニュー"
■店舗選択画面
![](https://assets.st-note.com/img/1694756522202-xTxqx2OA9e.jpg?width=800)
![](https://assets.st-note.com/img/1694756508405-En4lcqOQxW.jpg?width=800)
![](https://assets.st-note.com/img/1694756516102-F0Opr02Utt.jpg?width=800)
●検索
・検索バーはヘッダー部に組み込まれている感じが良い
・作成したものからそんなに変更しなくてよさそう
●フィルター
・領域を取りすぎてしまうのでアイコン表示は要らない。
・タップしやすさを考慮するとボタン形状が良いかも
●店舗リスト
・文字情報のみでよさそう
・一画面に多く店舗数を表示させたいので、リストタイプにする
■商品選択画面
![](https://assets.st-note.com/img/1694756568324-IuJjfupScA.jpg?width=800)
![](https://assets.st-note.com/img/1694756576033-tkOa1P4X2Z.jpg?width=800)
●フィルター
・他のフィルターと同じUIにする
・”おすすめ”→”すべて”に変更しよう
●メニュー
・商品画像はそこまで大きくない方が良い
・情報量的にリストタイプではなさそう
■商品詳細画面
![](https://assets.st-note.com/img/1694756614595-pP3wqKZGri.jpg?width=800)
![](https://assets.st-note.com/img/1694756610151-vqvVwMlzJx.jpg?width=800)
![](https://assets.st-note.com/img/1694756619389-A1rGbEZnSH.jpg?width=800)
●商品画像、ラベル
・商品画像は小さくても良さそう
・情報量によってはモーダル表示のほうがいい
・ヘッダーを使用しない場合、商品ラベルを何処かに表示させる
●セレクトUI
・タップしやすさを考えると、ラジオボタン式は分かりにくい
・どれを選択しているか見やすいものにする=枠の付いたものとか
・細かなカスタマイズのフローは省くので、UIから外す
・全体UIとの統一感を意識する
●カートに入れる
・数量は+、−で変更した方が良い
・価格は見やすいほうがいい
・プライマリーカラーを適用するのは「カートに入れる」ボタンのみ
■カート導線
![](https://assets.st-note.com/img/1694756723738-gdWXUTpTpK.jpg?width=800)
・マクドナルド、CRISPみたいな、選択した商品の詳細が見られるようにしたい
■決済画面
![](https://assets.st-note.com/img/1694756753837-Ycaa7UcC1K.jpg?width=800)
![](https://assets.st-note.com/img/1694756751199-GFq3QpZqo7.jpg?width=800)
![](https://assets.st-note.com/img/1694756738549-aDlP18gwWj.jpg?width=800)
●受取店舗
・店舗選択画面の受取店舗と同じUIにする
・店舗変更する導線(Secondaryで表示)
●利用方法/支払い方法
・全体のUIと統一する
●フッター
・商品詳細はカート導線内の詳細UIと同じにする
・数量変更、削除の導線
■クレジットカード入力画面
![](https://assets.st-note.com/img/1694756747886-wZQi4f2NKW.jpg?width=800)
・できる限りフォームの領域を小さくする
・入力フォームのみで良い。クレジットのアイコンは要らないかな、、、
・画面遷移を減らすため、モーダルで表示させる
■注文確定画面
![](https://assets.st-note.com/img/1694756919416-HTHeWEbMKv.jpg?width=800)
・自分で作成したUIで問題なさそう
▼条件に合うように調整する
パターン作成が終了しました。
作成する中で、要件に合うものとそうでないものが出てきました。
それぞれのパーツのメリット/デメリット評価を行い、パーツを組みわせていきます。
また、パーツを組み合わせた後に、前後フローを考慮します。
条件の揃え方
・遷移先の画面と整合性が取れているか
・共通のコンポーネントは利用できないか
・機能や要件を満たしているか
■ホーム画面
![](https://assets.st-note.com/img/1694758935535-iIHjBOLksi.jpg?width=800)
・モバイルオーダーへの導線をしっかり持たせられているか?
■店舗選択画面
![](https://assets.st-note.com/img/1694758942363-pbbUOYNNNf.jpg?width=800)
![](https://assets.st-note.com/img/1694759162827-71x5ge6TDt.jpg?width=800)
●コンテンツ
・マップ/現在地から近い順/お気に入り
・店舗アイコンをタップすると、下から店舗リストが表示される
・店舗の使用履歴を、「現在地」の一番上に表示
・店舗選択リスト表示。近い順で表示
・利用履歴をリストのトップに表示させる
●検索
1. フォームにワードを打てるとフォーカス状態にある
2. フォーカスすると「キャンセル」が出てくる
■商品選択画面、商品詳細画面
![](https://assets.st-note.com/img/1694758960760-TMbcGZeIP6.jpg?width=800)
●商品選択画面
・写真の種類を増やして実際のメニューのようにした(本当はもっと統一感のある写真にしたいのだけど…)
●商品詳細画面
・「カスタマイズ」項目は最小限にし、タップしやすいボタンUIに統一
・数量を変更すると、表示する価格も変更したい
■カート導線
![](https://assets.st-note.com/img/1694759012863-3mxI2svgrl.jpg?width=800)
・フッターのインジケーターを上にドラッグすると、選択商品が表示される
・数量変更、削除の導線
■決済画面
![](https://assets.st-note.com/img/1694759018039-HMXK619H7X.jpg?width=800)
・"受取店舗" 店舗選択画面の店舗リストと同じ構造
・"利用方法"、"支払い方法" 商品詳細画面と同じボタンUI
・注文内容の確認は、カート導線のものと同じ構造
■クレジットカード入力画面
![](https://assets.st-note.com/img/1694759022723-663xoilyB2.jpg?width=800)
・モーダル画面で入力
・入力情報は、モーダル非表示後に「決済画面」に表示させる
■注文確定画面
![](https://assets.st-note.com/img/1694759346435-wR8dfnfe7o.jpg?width=800)
■ホーム画面〜注文状況画面
![](https://assets.st-note.com/img/1694759351532-DyD99Iqu8i.jpg?width=800)
■通知画面、注文履歴画面
![](https://assets.st-note.com/img/1694759366439-FJqyD2VlHt.jpg?width=800)
▼プロトタイプ
パターン作成後、試行錯誤を経まして(この過程は記載しませんでした…あまりにも冗長になってしまうので)上記のようなUIになりました。
ひとまずこれでUIパターンの作成は終了です。ここまで読んで下さっているあなたに拍手をお送りします…👏
作成したパーツを組み直したプロトタイプです。
ビジュアル以外の基本的な構造や動作を検証します。
3. ビジュアルを整える
ここからはビジュアルを整え、コンセプトに近づけていこうと思います。
ちなみにインスピレーションは「BONO」から得ています。
カイさん勝手にお借りしてすみません。
▼デザインシステム
今回のデザインシステムです。
技術的な説明は省略しますが、
・ライトパターン=夜明け
・ダークパターン=宵の口
で、それぞれテーマを作成できるようにしています。
![](https://assets.st-note.com/img/1694759887520-qXLOOmfRIf.jpg?width=800)
![](https://assets.st-note.com/img/1694759890581-mkK18pS3wm.jpg?width=800)
![](https://assets.st-note.com/img/1694759733667-HDUMUy3Sl5.jpg?width=800)
▼システムを適用する
システムを組んだら、それぞれの画面に適用します。
ここでは説明を省略します。
■ホーム画面
![](https://assets.st-note.com/img/1694760460858-O5nFyRcr8Q.jpg?width=800)
■店舗選択画面
![](https://assets.st-note.com/img/1694760461043-nDaF1EVTyO.jpg?width=800)
![](https://assets.st-note.com/img/1694760460914-pA7rIExgXk.jpg?width=800)
■商品選択画面/商品詳細画面
![](https://assets.st-note.com/img/1694760460853-HU2ZIQ0txV.jpg?width=800)
■カート導線
![](https://assets.st-note.com/img/1694760460822-osDlbzX6bX.jpg?width=800)
■決済画面
![](https://assets.st-note.com/img/1694760460868-C0tHPnq7oA.jpg?width=800)
■クレジットカード入力画面
![](https://assets.st-note.com/img/1694760461042-H3fakQMklT.jpg?width=800)
■注文確定画面
![](https://assets.st-note.com/img/1694760461050-UsgkrSVmnx.jpg?width=800)
■ホーム画面 注文後
![](https://assets.st-note.com/img/1694760460855-fjSKyheGHJ.jpg?width=800)
■通知画面
![](https://assets.st-note.com/img/1694760460983-gWSeoJvzet.jpg?width=800)
4. 最終プロトタイピング
ビジュアルを適用し、最終プロトタイピングを組みました。
最も初めに組んだプロトタイプと比較してみます。
▼ライトパターン
▼ダークパターン
▼初期のプロトタイプ
5. まとめ
以上で「ゼロからモバイルオーダーアプリのUIデザイン」は終わりです!
お疲れ様でした。
非常にボリューミーな内容となってしまいました。
紹介した内容は制作の一部で、実際には一からやり直したり、参考UIを分析してまとめる時間もありました。
noteをまとめる時間も含めると、合計160時間も掛かりました。ということは、160÷8(一日の作業目安)=20日間…
仕様が決まっている中で、自分の判断でゼロから作ると約一ヶ月の労働時間がかかることが分かりました!これは大分遅い…
フィードバックを含めたりすると多分2ヶ月かかってしまうレベルです。
しばらくUI作りたくない。
反省点とパターン作成に関するまとめを行います。
▼反省と対策
どのサービスを参考にすれば良いのか、基準がなかった
自分がどういうサービスを具体化するのか?という解像度が低かったです。
具体的にいいますと、注文がメインのモバイルオーダーと、公式アプリの中にひっそりと入っているモバイルオーダーとでは、その位置づけが違ったように思います。私は後者のモバイルオーダーを参考にしていたため、UberEatsや出前館などのフローを同時に参考にすると、サービスフローがごっちゃになってしまい整合性が取れませんでした。
他のサービスを参考にする際、ブレや手戻りを生じないためにも、取りうる可能性をそのままにするのではなく、可能性を排除してから自分が取り組むサービスフローをしっかり理解することが重要だと思いました。
参考は多すぎると、UIを決められない
上記と似たような内容ですが、参考が多すぎると判断が遅くなり、またUIパターン作成の作業量が増えてしまいます。多くても3〜4パターンまで絞れるように、参考を集めたら絞り込む工程が必要です。
ビジュアルを先に組まない
今回完成としたUIデザインには、一度ボツにしたものがあります。そのUIは先にビジュアルを適用してしまったため、イメージが固定化してしまい修正等の作業量も増えてしまいました。
まずはラフを作成し、整合性の取れるものにしてからビジュアルを作成すると良いと思いました。井上雄彦先生のように、いきなり筆から書くことはしません!
論理的思考で考える
UIパターンの作成だけではないと思いますが、論理的に考えることで意味のあるデザインを一から構築できることを学びました。
「所謂モバイルオーダーのアプリを参考にすればいい」と思考停止していた私は、サービスフローをちゃんと理解していなかったり、モバイルオーダーを利用する人がどんな気持ちでアプリを触るのかを十分に想定していないまま、制作に臨んでしまいました。結果、参考を探すのに手間取ったり、UIパターンを漠然と作る始末でした。
そうではなく「ここにこのUIが存在するのはどうしてなのか」、そして「それがユーザーにどのように作用するのか」を説明できることが「論理的である」ことになります。
この項は別の記事で取り扱います。
色んなことに興味をもつ
アイデアを絞り込む前に、アイデアを拡散させなければなりません。そのためには、いろんなことに興味を持ち「これは使えるかも」というストックを持つことです。もしかしたら、最終段階になったとしてもよりいいUIアイデアがあるかも知れません…モバイルオーダー以外のアイデアを積極的に取り入れるべきだったかも?
▼UIパターン作成のまとめ
上記の反省点と重複しますが、簡単にまとめると以下のようになります。
作成するUIのサービスフローを理解する
UIをパーツ毎に分解する
参考UIを蒐集する
UIパターンはパーツ毎に作成する
パーツを組むとき、論理的に解釈する
見た目・ビジュアルはパーツを組んだ後に作成する
ゼロからアプリのUIデザインをすることで、サービスの全体像を意識すること重要性に気づきました。
今後はゼロからサービスを作ったり、UXを前提に社会全体で取り組もうとしているDX領域からデジタルプロダクトのデザインをしていきたいと思います。
でも、最終的にはUIとかXUとか拘らず、社会をより良くすることに注力していきたい。日本だったら、少子高齢化・人口減少問題にどうやって取り組むか、文化をどのように保護・維持・発展させていくべきか。
自らが主体者となりながらも、社会全体に対して作用できるデザインをしていきたいです。
最近、書きたいことが増えてきたので色々と資料を集めながらnote生活をしていきたいと思います。
それでは次の記事でお会いしましょう!
この記事が気に入ったらサポートをしてみませんか?