ゼロベースからモバイルオーダーアプリのUIをデザインしました。
その過程をご紹介します。

今回は「#パターン作成編」となります。
その前の記事「#準備編」「#ラフデザイン編」も合わせてお読みください。

1. パターン作成の準備

ラフデザインが済んだので、パターン作成の準備に取り掛かります。
一度UIを作成する中で自発的にアイデアが浮かんでいたり、参考UI調査時にもアイデアが見つかっています。
まずはそれらを一覧にしてまとめていきます。

▼パーツ毎にUIパターンをまとめる

地道な作業ですが、比較検討したり網羅的に把握するのに必要です。

■ホーム画面
ホーム画面は「ヘッダー」「コンテンツ」「フッター（グローバルナビゲーション）」にパーツ分解できます。

■店舗選択画面
店舗選択画面は「ヘッダー」「コンテンツ」にパーツ分解できます。

■商品選択画面
商品選択画面は「ヘッダー」「コンテンツ」にパーツ分解できます。

■商品詳細画面
商品詳細画面は「コンテンツ」「フッター」にパーツ分解できます。

■カートへの導線
カート導線は商品選択を行った後に「フッター」に表示されます。

■決済画面
決済画面は「コンテンツ」「フッター」に分解できます。

■クレジットカード入力画面

■注文確定画面
注文確定画面は「コンテンツ」「フッター」にパーツ分解できます。
この画面は「進捗状況」や「購入履歴」としても使いまわします。

2. UIパターンの作成

▼一旦真似て作成

UIリサーチが終わったら、実際に一旦真似てみます。
ほぼトレースなので技術的なことは特に意識しませんが、この時点でアイデアの取捨選択が始まります。

■ホーム画面

■店舗選択画面

■商品選択画面

■商品詳細画面

■カート導線

■決済画面

■クレジットカード入力画面

■注文確定画面

▼条件に合うように調整する

パターン作成が終了しました。
作成する中で、要件に合うものとそうでないものが出てきました。
それぞれのパーツのメリット／デメリット評価を行い、パーツを組みわせていきます。

また、パーツを組み合わせた後に、前後フローを考慮します。

■ホーム画面

■店舗選択画面

■商品選択画面、商品詳細画面

■カート導線

■決済画面

■クレジットカード入力画面

■注文確定画面

■ホーム画面〜注文状況画面

■通知画面、注文履歴画面

▼プロトタイプ

パターン作成後、試行錯誤を経まして（この過程は記載しませんでした…あまりにも冗長になってしまうので）上記のようなUIになりました。
ひとまずこれでUIパターンの作成は終了です。ここまで読んで下さっているあなたに拍手をお送りします…👏

作成したパーツを組み直したプロトタイプです。
ビジュアル以外の基本的な構造や動作を検証します。

3. ビジュアルを整える

ここからはビジュアルを整え、コンセプトに近づけていこうと思います。

ちなみにインスピレーションは「BONO」から得ています。
カイさん勝手にお借りしてすみません。

▼デザインシステム

今回のデザインシステムです。
技術的な説明は省略しますが、
　・ライトパターン＝夜明け
　・ダークパターン＝宵の口
で、それぞれテーマを作成できるようにしています。

▼システムを適用する

システムを組んだら、それぞれの画面に適用します。
ここでは説明を省略します。

■ホーム画面

■店舗選択画面

■商品選択画面／商品詳細画面

■カート導線

■決済画面

■クレジットカード入力画面

■注文確定画面

■ホーム画面　注文後

■通知画面

4. 最終プロトタイピング

ビジュアルを適用し、最終プロトタイピングを組みました。
最も初めに組んだプロトタイプと比較してみます。

▼ライトパターン

▼ダークパターン

▼初期のプロトタイプ

5. まとめ

以上で「ゼロからモバイルオーダーアプリのUIデザイン」は終わりです！
お疲れ様でした。

非常にボリューミーな内容となってしまいました。
紹介した内容は制作の一部で、実際には一からやり直したり、参考UIを分析してまとめる時間もありました。
noteをまとめる時間も含めると、合計160時間も掛かりました。ということは、160÷8（一日の作業目安）＝20日間…

仕様が決まっている中で、自分の判断でゼロから作ると約一ヶ月の労働時間がかかることが分かりました！これは大分遅い…
フィードバックを含めたりすると多分2ヶ月かかってしまうレベルです。
しばらくUI作りたくない。

反省点とパターン作成に関するまとめを行います。

▼反省と対策

• どのサービスを参考にすれば良いのか、基準がなかった

  • 自分がどういうサービスを具体化するのか？という解像度が低かったです。
    具体的にいいますと、注文がメインのモバイルオーダーと、公式アプリの中にひっそりと入っているモバイルオーダーとでは、その位置づけが違ったように思います。私は後者のモバイルオーダーを参考にしていたため、UberEatsや出前館などのフローを同時に参考にすると、サービスフローがごっちゃになってしまい整合性が取れませんでした。
    他のサービスを参考にする際、ブレや手戻りを生じないためにも、取りうる可能性をそのままにするのではなく、可能性を排除してから自分が取り組むサービスフローをしっかり理解することが重要だと思いました。

• 参考は多すぎると、UIを決められない

  • 上記と似たような内容ですが、参考が多すぎると判断が遅くなり、またUIパターン作成の作業量が増えてしまいます。多くても３〜４パターンまで絞れるように、参考を集めたら絞り込む工程が必要です。

• ビジュアルを先に組まない

  • 今回完成としたUIデザインには、一度ボツにしたものがあります。そのUIは先にビジュアルを適用してしまったため、イメージが固定化してしまい修正等の作業量も増えてしまいました。
    まずはラフを作成し、整合性の取れるものにしてからビジュアルを作成すると良いと思いました。井上雄彦先生のように、いきなり筆から書くことはしません！

• 論理的思考で考える

  • UIパターンの作成だけではないと思いますが、論理的に考えることで意味のあるデザインを一から構築できることを学びました。
    「所謂モバイルオーダーのアプリを参考にすればいい」と思考停止していた私は、サービスフローをちゃんと理解していなかったり、モバイルオーダーを利用する人がどんな気持ちでアプリを触るのかを十分に想定していないまま、制作に臨んでしまいました。結果、参考を探すのに手間取ったり、UIパターンを漠然と作る始末でした。
    そうではなく「ここにこのUIが存在するのはどうしてなのか」、そして「それがユーザーにどのように作用するのか」を説明できることが「論理的である」ことになります。
    この項は別の記事で取り扱います。

• 色んなことに興味をもつ

  • アイデアを絞り込む前に、アイデアを拡散させなければなりません。そのためには、いろんなことに興味を持ち「これは使えるかも」というストックを持つことです。もしかしたら、最終段階になったとしてもよりいいUIアイデアがあるかも知れません…モバイルオーダー以外のアイデアを積極的に取り入れるべきだったかも？

▼UIパターン作成のまとめ

上記の反省点と重複しますが、簡単にまとめると以下のようになります。

• 作成するUIのサービスフローを理解する

• UIをパーツ毎に分解する

• 参考UIを蒐集する

• UIパターンはパーツ毎に作成する

• パーツを組むとき、論理的に解釈する

• 見た目・ビジュアルはパーツを組んだ後に作成する

ゼロからアプリのUIデザインをすることで、サービスの全体像を意識すること重要性に気づきました。
今後はゼロからサービスを作ったり、UXを前提に社会全体で取り組もうとしているDX領域からデジタルプロダクトのデザインをしていきたいと思います。
でも、最終的にはUIとかXUとか拘らず、社会をより良くすることに注力していきたい。日本だったら、少子高齢化・人口減少問題にどうやって取り組むか、文化をどのように保護・維持・発展させていくべきか。
自らが主体者となりながらも、社会全体に対して作用できるデザインをしていきたいです。

最近、書きたいことが増えてきたので色々と資料を集めながらnote生活をしていきたいと思います。

それでは次の記事でお会いしましょう！