ゼロからモバイルオーダーアプリをデザインしてみた #BONO #UIパターン #準備編
例えば、大きな滝が見たいと思って、海外旅行に行きたいとします。
色々な旅行サイトがありますが、一つの滝しか紹介していないサイトと、複数の滝スポットを取り扱っているサイトがあったとしたら、どちらを参考にして旅行先を決めますか？
できれば、色んな場所を閲覧できた方が目的の場所を網羅してから選択できますよね？大きいとか小さいとか、近くに休める場所があったら良いとか、様々な検討ができます。
既に行きたい場所がある場合は別ですが、やはり旅先の情報を比較検討できたら、納得のいく旅を設計できるのではないでしょうか。
デザインの場合も同様です。
一つのアイデアのみ提案するよりも、複数のアイデアを提案した方が比較検討しながら選択できますし、それぞれのアイデアも整合性の取れたものであれば論理的にデザインを決めることができます。
本題です。
今回はゼロベースからモバイルオーダーアプリのUIをデザインしましたので
その過程をご紹介します。
まずはUIデザインのための、就中UIデザインの「#準備編」となります。
実際にデザインしたものは「#ラフデザイン編」「#パターン作成編」として記録しましたので、そちらも合わせてご覧ください。
デザインの背景
UI/UXデザインコミュニティであるBONOでは、UI/UXデザイナーになるためのロードマップが記されています。
その中で、番外編だと思われますが、ゼロベースから「モバイルオーダーアプリの注文フローUI」をデザインして情報設計を学ぶコースがあります。
webデザインも仕事の一環でしたが、情報設計の思想を持ってウェブサイトを構築していなかったので、大いに学ぶ価値がありました。コーディング自体は論理的ですが、アプリケーションとして機能させるための視野があればもっとよい設計ができていたのかなと思います。
今回のUI作成で大きく学んだことは「パターン作成の重要性」です。
下記のリンクから、今回参考にさせて頂いたコンテンツが閲覧できます（一部有料です。）
1. 完成プロトタイプ
2. パターン作成の重要性
前述しましたが、ゼロベースからのUI作成で大きく学べることは、「UIパターン作成の重要性」です。
どんな事柄にも共通して言えますが、パターンを考えて作成することには多くのメリットがあります。無闇矢鱈に作成するのはよくありませんが…。
UIデザインをする上で、以下に３つのメリットを挙げます。
▼考えられる選択肢の中から論理的に選択できる
１つ目に作成したUIを「論理的に選択できる」という点です。
ビジネスにおいて、サービスを一人で作ることはまずありません。
UIデザインの場合、制作物が他のデザイナー／エンジニア／ディレクター等の目に触れます。その際、複数のパターンがあることで相対的に議論ができるようになります。
考え得る可能性を網羅していた方がデザインを比較しやすいので、一貫性のあるデザインになります（正解率が上がる）。
しかし、一つのパターンしか作っていなければ議論の余地はなく、何がよくてダメなのかが理解できません。相対的に評価するために、パターンを作って網羅的に取り組んだほうが精度が上がります。
▼リカバリーしやすくなる
２つ目に「リカバリーしやすくなる」という点です。
例えば、パターンAが通らなかったけど、パターンBだったら別の説明ができます。また「この人はアイデアをちゃんと担保している」と感心されるかも知れませんので一挙両得です。
大事なのは、情報として作成することではなく「ちゃんと思考して作成したのか？」が求められることです。「何となくかっこいいパターンを思いついたから」とかではなく、「こういう理由でこのデザイン案を作成した」と説明できた方が説得力が上がります。
▼作成量が増える＝経験値が上がる
３つ目は「経験値が上がる」という点です。
説明するまでもありませんが、アイデアを出したり、実際に手を動かしてデザインした量が多ければ多いほど経験値が上がります。
また、こうしたデザイン情報を取り扱えば取り扱うほど頭の中にひきだしが増え、いざというときにサッと使えます。
3. パターン作成の準備
では、どうやってパターン作成を行うのか？
実はパターンを作成する前に、色々な準備を行います。
▼作成する画面の目的（役割）を把握する
１つ目に「作成する画面の目的（役割）」を把握します。
UIを作るなら当然かと思いますが、その画面が果たす目的を理解しておいてください。
本当に初めからUIを作るのであれば、名前をつけてあげて「一言でどんな役割のある画面なのか」を区別しておきます。
この点が曖昧だと、一体何の画面UIを作っているのか分からなくなってきますので、ぜひとも目的を理解しておきましょう。
▼対象の画面をパーツとして分解する
２つ目に「対象の画面をパーツとして分解」します。
各画面はパーツで構成されています。
このパーツのことをコンポーネント（構成要素）と呼びます。
UIのパターン作成はコンポーネント単位で行うので、画面毎にパーツを発見して分解します。パーツって思った方が、理解度が上がる気がします。
魚の三枚おろしみたいな感じです（やったことないけど）。
このコンポーネントという概念が、UIの情報設計に大きく関与します。
コンポーネントについて詳しく知りたい方は、以下のリンクを参照してください。
■どんなコンポーネントが存在するか（OSガイドライン）
■どこにコンポーネントを配置するか（実践時）
▼参考UIを調べる
３つ目に、既存のサービスから「参考UI」を調べます。
パターンのアイデアを出すとなると、OSのガイドラインだけ見ていても具体的なイメージは湧きにくいですし、単純にパーツを入れ替えたとしても、画面全体に整合性が取れないことがあります。
そこで既存サービスのUIを参考にします。
既存サービスは論理的に情報設計がされているので、どのコンポーネントをどう使っているか論理的にUIを見ることができます。
その際、以下の点を気にしながら参考UIを蒐集すると良いと思います。
・画面全体、フロー前後で整合性が取れているか
・どんな見た目の変化をしているか
・どんな機能的な調整をしているか
▼UIはどのように調べてまとめるのか？
●スクリーンショット（ビジュアル、構造理解）
●サービスを触る（プロダクト体験、機能理解）
この２点に尽きます。
自分で見る、触る、体験するという一次情報がUIの理解に役立ちます。
見た目の情報だけあっても、体感の伴わないデザインではUI設計には役立たないと思います。実際に触って、感覚を覚えておきたいところです。
次に調べ方です。
1. 類似のサービスを調べる
類似のサービスは片っ端から調査し、使えそうなUIをピックアップします。
主にAppStoreやギャラリーサイト（Mobbin等）を参考にします。
しかし、実際にサービスを触る方がいいので、ダウンロードして使用するのがオススメです。
今回は「モバイルオーダー」と類似のサービスを調査しました（別記事で紹介します）。
2.同じモデルのサービスを調べる
ここで言うモデルは「サービスフロー」のことです。
つまり、「体験の参考になる」という観点でサービスを調査します。
モバイルオーダーのサービスフローである「注文する」というフローが共通しているサービスは、
・ECサイト
・オークション
辺りなので、これをキーワードにして調査します。
同じモデルのサービスを探すには、上記のようにフローを書き出せるようにいろんなサービスを触っておくことが不可欠です。ということは、UIデザインの習熟度が高くないと難しいかも知れません。
■テンションが上がるものを調べる
こちらの方法はビジュアル面で参考にできることが多いと思います。
ビジュアルデザイナーの作品やケーススタディなどが参考になります。
参考にしたいサイト（主にグラフィック系SNS）
・ピンタレスト
・dribbble
・BeHance
欠点としては、サービスとしてローンチされていないので機能性が低かったり、情報設計において整合性が取れないものが多いということです。どの点を参考にするか、よく考えて調査しましょう。
ユーザーとのコミュニケーションはビジュアルによって大きく変化しますので、この参考の集め方は非常に重要です。
4. パターンを作成する
▼一旦真似て作ってみる
参考UIをまとめたら、まずはそれを真似て作成してみます。
再三ですが「なぜこのようなUIになっているのか？」を分析しながら作ります。良いと思ったものには必ず理由があると思うので、それを明確にしておくと論理的に説明できます。
UI構造が被っていたり、あまりに目的から外れている参考は除外します。
それぞれの構造を分析しながら、真似して作成します。
▼条件に合うように調整する
一通りUIパターンを作成したら、パーツを一つの画面に組み合わせます。
作成時点で「このUIの組み合わせがいいのではないか？」というアタリを決めておきます。画面内でも論理的に組み上げることが必要です。
論理的に組み上げるには、様々な事を考えなければなりませんが、論理的にとは一体どういうことでしょう？
私としては「辻褄が合うこと、矛盾がないこと、ヌケモレがないこと、説明がつくこと」程度で構わないと思っています。「推論を証明せよ！」ということではなく、自然言語レベルで考えればいいと思います。「ここはこういう理由だからこうなっています」と言える感じがいいですね。
▼遷移先の画面と合わせて調整/決定する
アプリを構成する画面ができたら、プロトタイプを組んで検証します。
・遷移先の画面と整合性が取れているか
・共通のコンポーネントは利用できないか
・機能や要件を満たしているか
・ヌケモレがないか
という観点でUI全体を調整／決定します。
プロトタイプを組んでみると、整合性があるかどうかを瞬時に判断できると思います。
5.改善案としてパターンを出す
より深い思考をもってパターンを作成するときの方法です。
作ったUIに対してダメ出しを行いながら、根本的に解決するアイデアを出すときに有効です。
改善案としてパターンを出すために、４つのステップを踏みます。
▼画面の目的に「必要な要素」を洗い出す
１つ目に「画面の目的に『必要な要素』」を洗い出します。
ここではユーザーの行動フローを確認すると整理しやすいです。
なぜかというと、
・使い手のことを想像しやすくなるから
・必要な要素をイメージしやすくなるから
・フローを書くことで網羅的になり、ヌケモレがなくなるから
どんな状況でユーザーがそのサービスを利用するかを想像しながら（もしくはデータを参考にしながら）行動フローを作成し、そこに必要な要素を書き出します。
例）モバイルオーダーの店舗選択
・自分の近くにお店があればそれを探したい（ユーザー目線）
・店内で飲む/持ち帰る（必要な要素）
▼要素ごとにアイデアを書き出す
２つ目に「要素ごとのアイデア」を書き出します。
具体的な図ではなく、テキストベースでアイデアを書き出します。
例）モバイルオーダーの店舗選択
・これから行くお店を探せる（→検索できた方が良いかな）
・今いる場所から探せる（→地図で探せたら便利だな）
・前回利用した店舗があれば、履歴として表示する
▼アイデアをラフに具体化してみる
ここでようやくアイデアを図に描き起こします。
具体的に図に起こすことでイメージが湧き、ツールを使う時間が短縮されます。スピードが上がるのでここは省かない方がいいです。
▼デザイン/UIを作成する
具体化したら、デザインツールを使ってUIを作成します。
ここで、参考UIを必ず参照して目的に近いUIがあるか調査します。
基本コンポーネントの情報も手に入れておくと整合性が向上します。
そして、作成したUIパターンのメリット／デメリットを評価します。
・整合性が取れているか
・要件を満たすものか
・機能が過不足ないか
6. まとめ
思った以上に長くなってしまいました。
今回はモバイルオーダーアプリを作成する過程でUIパターンを作成していますが、どのデザインにもパターン作成が重要であると思います。
論理的にデザインを選択でき、リカバリーの時間が短くなります。
また、作成したパターンは他のデザインに使えたりその時の思考が応用できるようになります。
そして本質的に、作業よりも思考する時間を増やすことが重要です。パターン作成には、知識を増やしたりツールのショートカットを積極的に覚えていきたいですね。
#実践編は別の記事で紹介します。
どうぞよろしく。
お世話になっているコミュニティ↓
この記事が気に入ったらサポートをしてみませんか？