フードデリバリーアプリのデザイン:ホーム画面のリデザイン、ビフォーアフター

フードデリバリーのホーム画面の仕事はひとつ。お腹を空かせた人を数秒でレストランに連れていくことです。以下の初稿はその仕事に失敗しています。どれかひとつのパーツが醜いからではなく、すべてのパーツが一斉に注目を求めているからです。直すのに新機能も新しいスタイルも要りませんでした。各パーツがひとつのことだけを語るようになるまで、ひたすら引き算をしただけです。

画面全体のビフォーアフター

初心者の初稿

改善後

最初のレストランにたどり着くまでに、目が処理しなければならないものを数えてみましょう。左は、番地まで入った住所、ヘッダーのアイコン2つ、さらにアイコン2つ付きの検索バー、3行のコピーとボタンが載ったグラデーションのバナー、カルーセルのドット、5色のリング5つ、炎アイコン付きのセクションタイトル、1枚の写真に載った3つのバッジ。右は、場所の名前、カート、検索バー、タイル5つ、オファー1つ、カード1枚です。

右の画面に、左にあった機能の欠落はありません。住所も検索もカテゴリもオファーもレストランも、すべて残っています。ただ、それぞれが他と張り合うのをやめただけです。

修正1:届け先は一語で伝える

ビフォー

アフター

初稿はピンの横に、221B Baker Street という住所全体を小さな文字で、しかも単語の途中で切れた状態で表示しています。改善版は、その住所に本人がつけた名前「自宅」を大きく表示し、変更できることを示すシェブロンを添えています。

自分の住所を読むために配達アプリを開く人はいません。確認したいのはひとつだけ、「正しい場所に届くか?」です。自分で付けたラベル、自宅、職場、実家などのほうが、番地よりずっと早く答えてくれます。しかも一語なので、どんな長さでも読みやすいまま。完全な住所は、編集画面というワンタップ先に置けば十分です。

改善版ではヘッダーからプロフィールアイコンも外しました。初稿には2回登場していたのです。上部にひとつ、そしてアカウントタブとして。同じ部屋への扉が2つあると、人は別の部屋に通じているのかと疑ってしまいます。

修正2:形はひとつ、選択状態もひとつ

ビフォー

アフター

ビフォーでは、5つのカテゴリがそれぞれ黄、緑、青、ピンク、紫の個別のリングを持つ円の中に並んでいます。アフターでは、タイルは同じ形と無彩色の枠を共有し、選択中のPizzaだけが枠とラベルにブランドの赤を使います。

インターフェースにおける色は信号です。5色なら5つの信号を送ることになります。行をざっと見る人は、緑は何を意味するのか、なぜ寿司は青なのかと考えなければなりません。答えは「何も意味しない」。そこが問題です。情報のふりをした装飾なのですから。

色をひとつのことにだけ使えば、そこに意味が生まれます。赤いタイルがひとつあれば、言葉なしで「今ここ」と伝わります。あとは写真の仕事です。料理写真はもともと画面上で一番カラフルなものなので、助けは要りません。

修正3:オファーはひとつ、メッセージもひとつ

ビフォー

アフター

初稿のバナーは「MEGA SALE!」、オファー、コード、最低注文額、極小の文字の「利用規約あり」を積み重ね、最後にボタンを置いています。改善版は50% OFFを残し、3つのことだけを伝えます。いつ(本日限り)、誰向けか($20以上の初回注文)、そしてコピーできるボタンになったコードです。

問題はオファーそのものではありませんでした。50%オフは注文する十分な理由で、改善版でも同じサイズのままです。

変わったのはその周りのすべてです。「MEGA SALE!」と「50% OFF」は同じことを2回言っていました。小さな注意書きは、4つの事実を9 pxの1行に縦線で区切って詰め込んでいました。「今すぐ注文」ボタンは行き先がありません。まだ注文先のレストランがひとつに決まっていないからです。

いまはコードそのものがアクションです。タップするとYUMMY50がコピーされます。このバナーからチェックアウトへ持っていく必要があるのは、それだけです。利用規約も、適用される場所であるチェックアウトに移しました。

画像も変えました。初稿はバーガーを円形に切り抜き、オレンジのグラデーションの上に浮かせていました。改善版はブランドの赤の上で撮影しているので、料理はステッカーとしてカードの上に貼られるのではなく、カードそのものの上にあります。

修正4:バッジはひとつ、情報は2つ

ビフォー

アフター

ビフォーでは写真に3つのバッジ(送料無料、20% OFF、広告)が載り、下のテキストには料理ジャンル、配達時間、配達料、価格帯、最低注文額、営業時間が並びます。アフターでは、バッジひとつ、店名、評価、そして2つの情報、つまりどれくらいかかるか、いくらかかるかだけです。

リスト内のレストランカードは1秒ほどで読まれ、その1秒で人は2つのことを決めます。この料理を食べたいか、待つ時間と配達料に見合うか。改善版のカードはまさにそこに答えます。最初の問いには写真が、2つ目の問いには「25〜35分、配達料$2.99」が答えます。

旧カードの他の要素も本物の情報ですが、ひと目で必要な情報ではありません。料理ジャンルの一覧は写真を見ればわかります。最低注文額$15や午後11時の閉店時間は、選んだ後で初めて意味を持つので、レストラン自身のページに置けば十分です。

「広告」は顧客ではなく事業者のためのもので、3つのバッジが並ぶとお互いを打ち消し合います。優先度で選んだバッジをひとつだけ置けば、ちゃんと読まれます。

5つの小さな修正

上の4つは大きな変更です。以下の5つも同じくらい意図的な変更です。

• 余白はひとつ。 初稿は左12 px、右16 pxで、何ひとつ揃っていませんでした。改善版は両側20 pxで、画面上のすべての端がその線上に乗ります。
• タイポグラフィの体系。 初稿は9〜30 pxの文字が段階もなく混在していました。改善版はiOSのテキストスタイルの11〜22 ptを使うので、すべてのサイズに役割があり、小さすぎて読めないものはありません。
• より静かな検索バー。 初稿の検索バーはマイクとフィルターのアイコンを内蔵し、プレースホルダーは切れるほど長いものでした。改善版はアイコンをひとつに絞り、プロンプトも短く「料理、レストラン、ジャンルを検索」としています。
• カルーセルのドットなし。 バナーの下のドットは、さらにバナーがあることを約束します。ほとんどの人はスワイプせず、ドットは見るものを1つ増やすだけです。オファーが1つならドットは要りません。
• タブは5つではなく4つ。 お気に入りはタブバーから外れました。保存は各カードのハートで今もできますし、4つのタブならそれぞれの面積が広がり、タップしやすくなります。

自分のホーム画面を監査しよう

自分のアプリのホーム画面をこのチェックリストと並べてみてください。「いいえ」はすべて、叫んでいるパーツです。

Figmaファイルを入手

無料ファイルには、両方の画面をコンポーネントとして収録し、すべての修正をビフォーアフターのペアで、さらにカラー変数とiOSのテキストスタイルも含めています。

無料のFigmaファイル

フードデリバリーのホーム画面、ビフォーアフター

両方の画面と、修正した各パーツをFigmaコンポーネントとして収録。無料、閲覧のみ。下書きに複製してお使いください。

Figmaで開く

FAQ

フードデリバリーアプリのホーム画面は、最初に何を見せるべきですか?

注文の届け先、検索バー、カテゴリ、オファーをひとつ、その後にレストランです。各レストランカードには、写真、店名、評価、配達時間、配達料が必要です。

レストランカードのバッジはいくつが適切ですか?

ひとつです。3つのバッジが並ぶとお互いを打ち消し合います。送料無料など、顧客にとって最も重要なものを選びましょう。

フードアプリはカテゴリごとに違う色を使うべきですか?

いいえ。すべてのカテゴリに同じ形と無彩色の枠を与え、ブランドカラーは選択中のものだけに使います。そうすれば色が「今ここ」を意味します。

コンバージョンするプロモバナーはどう設計しますか?

オファーをひとつ、一度だけ伝えます。割引内容、対象者、コードです。コードをタップでコピーできるアクションにし、利用規約はチェックアウトに移しましょう。

フードデリバリーアプリのタブはいくつにすべきですか?

多くても4つか5つです。ここでは4つ(ホーム、検索、注文、アカウント)にしたことで各タブの面積が広がり、保存は各カードのハートが担いました。

出典

• 両方の画面は自作で、Figmaで設計し計測したものです。表の数値はFigmaファイルからのものです。
• 料理写真はUnsplashより、Fernando Andrade、sina piryae、Mahmoud Fawzy、Anna Pelzer、Alana Harris、Thimotius Timmy、Poul Hoang。プロモ用バーガーはPexelsのElements Interactiveによるもので、スタジオの背景はAIを使わず色の処理でブランドの赤に置き換えました。
• iOSのテキストサイズはAppleのHuman Interface Guidelines, Typographyより。
• 最初にApp Brainyでカルーセルとして公開しました。