フードデリバリーサービス4つのUIを比較してみた | UI/UX Journal vol.19
リモートワークになり、ランチも自宅で、外食も気軽にできない...そんな状況下で、ここ1年よく使うようになったのが「フードデリバリーアプリ」です。
すてきなUI/UXを求めて、新しいフードデリバリーサービスが出るたびに片っ端から試してきたので、今回はその中の4つをピックアップしnoteを書いていきたいと思います。
※日本全体のユーザー数で見ると、他にも出前館・楽天デリバリー・menu・dデリバリー等が主要サービスとされているようですが、今回は個人的に好きな/よく使うサービスをピックアップしています🙏
比較サービス：UberEats
📍 本社：サンフランシスコ、アメリカ🇺🇸
🗓 設立：2014年
🗾 日本でのサービス開始：2016年（東京の一部から）
最もポピュラーなサービスの1つであるUberEatsです。最近では徒歩配達が開始されるといったニュースが話題になっていたり、月額1200円で無制限で配送料0円になる "Eatsパス" があるなど、様々な施策が話題になっています。
比較サービス：Wolt
📍 本社：ヘルシンキ、フィンランド🇫🇮
🗓 設立：2014年
🗾 日本でのサービス開始：2020年3月（広島の一部から）
フィンランド発のWoltは、東京で使えるようになったのは比較的最近ですが、日本でのサービス開始時は広島で試験的にサービスを開始していました。
最近では、フィンランド発ということもあってか、IKEA原宿からフードやドリンクを注文を注文できるようになったことが個人的な注目ポイントです👀
比較サービス：Chompy
📍 本社：東京、日本🇯🇵
🗓 設立・サービス開始： 2019年6月（東京の一部から）
4つの中で唯一日本発のデリバリーサービスの、Chompyです。ちょうど数日前に資金調達と経営体制の強化がニュースになっていました。個人店の掲載が比較的多く、大手サービスにはないお店もたくさん見つけることができます。
比較サービス：foodpanda
📍 本社：ドイツ、ベルリン🇩🇪 （設立はシンガポール🇸🇬）
🗓 設立： 2012年
🗾 日本でのサービス開始：2020年9月（横浜/名古屋/神戸から）
つい先日、東京でサービス提供が始まったfoodpanda。渡辺直美さんを起用したCMを目にされた方も多いのではないのでしょうか。実はUberEatsよりも設立は古く、アジア圏でも利用者が多くいるサービスです。
個人的にとても推していたFOOD NEKOという韓国初のフードデリバリーサービスがこのfoodpandaに統合されたため、使いはじめました。
✅ シチュエーションごとに比較してみた
比較といっても様々なユースケースがあるので、今回は私自身がデリバリーサービスを使っている際のよくあるシチュエーションごとのニーズから、良いと思ったUIを紹介していきたいと思います。
1️⃣ 「特に決まってないけどお腹がすいてアプリを開いた」時
2️⃣ 「今日はイタリアンが食べたい！」時
3️⃣ 「新しいお店を開拓したい」時
4️⃣ 「実際に何を頼むか決める」時
1️⃣ 「特に決まってないけどお腹がすいてアプリを開いた」時
まずは「何か頼もうかな」とアプリを開いたときの「起動時画面」は各社このようになっています。
この起動時の画面で大きく思想が異なっているのがfoodpandaで、まず自分が「レストラン」「ショップ」「テイクアウト」どれを探しているかを選択する振り分けページが毎回の起動時の画面となっています。
「何を食べようかなぁ」とあまりイメージがないという前提でTOPを見ていきます。
超ざっくり分類すると、下記2つの情報設計に分類されます。
AはUberEats、Wolt、foodpandaのパターンで、カテゴリごとのレストラン一覧に遷移できる導線や、様々な切り口からレストランをザッピングするような体験設計になっています。
対してChompyはBのように、基本的に食べたい料理のカテゴリを軸に食べたい料理に絞っていく体験がメインになっているように感じます。
Aの中でも、例えばWoltは、各種切り口は、下記のような分類になっていました。
・新しいお店🎊
・ジャンル🛒
・初回注文がお得なお店📣
・夜食にぴったり🍴
・ただいま人気📈
・日用品や食料品なども🛍
・高評価のお店💯
・手頃価格なお店💰
・お気に入り💙
特に何を食べたいかが決まっておらず、「ダラダラ流し見している」という前提だと、Aパターンのほうが
「夜も遅いし、軽めの夜食にしようかな」
「日用品も合わせて買いたいから、コンビニにしようかな」
「最近デリバリー使いすぎてるから節約しようかな」
など、レストランを決めるきっかけが散りばめられていて、「特に決まってないけどお腹がすいてアプリを開いた」時のニーズに沿った設計になっているなと感じました。
さらにUberEatsは、起動するたびに切り口も順番もダイナミックに変わる仕様になっています。
UberEats（一例）
・配送料手数料¥0のカウントダウン
・食品・雑貨・飲料をお届け！
・お気に入り 本日の特典
・おすすめ：中華料理
・お近くの人気レストラン
・「〇〇（最近注文したお店）」はいかがでしたか？（類似店）
Woltやfoodpandaよりも、閲覧/注文履歴などユーザーの好みや興味に基づいた切り口が多く目立ちます。どんなアルゴリズムになっているのだろうと思いながらも、こちらいつもダラダラ見てしまいます...。笑
また、私自身「ダラダラ見て結局何も買わなかった」ということがしばしばあるのですが、同じようなユーザーが多いのか、ランダムにレストランや料理を表示するマッチングサービスのような機能がfoodpandaとChompyにはありました。
「なんでもいいから頼みたい」と思い、たまにこの機能を開くのですが、実際この機能でレストランを選んだことは今のところありません。
友だちに「ランチなんでもいいよ！」と言いつつ「ラーメンは？」と聞かれたら「いや、ラーメンはちょっとな...」と言って面倒がられるタイプの人間ですね...（？）
実際にこの機能がどれぐらい使われているのか気になるところです。
2️⃣ 「今日はイタリアンが食べたい！」時
なんだかんだ食べたいカテゴリが決まっていて、その中から探すというフローが個人的には最も多いケースです。
各社カテゴリの見せ方は、大きく「写真」か「イラスト」かで分けられます。
写真はキレイではあるのですが、スマホの小さな画面で見るとそれが「中華」なのか「丼もの」なのか、ラベルを読まないと判別しづらい場合が多いです。
対してイラストは多少小さくてもそれぞれの特徴がパっと分かりやすいです。（個人的にUberEatsのイラストは、色の使い方のせいかあまり美味しそうに見えないので気になりますが...）
今はなき「FOOD NEKO」もイラストを採用していて、ただただ可愛かったので紹介します。
カテゴリのところが暖簾になっています。真面目なトーンのサービスが多いなか、このユルさや遊び心は個人的にとっても好きだったので、もう使えなくなってしまったのが残念です🥲
3️⃣ 「新しいお店を開拓したい」時
レストランを決めるにあたって、一覧での見せ方は各社このようになっています。
レストランカードの主な要素
・レストラン名
・写真
・配達時間
・価格帯
・配達手数料
・お気に入りボタン
・カテゴリ（UberEats / foodpanda）
・レストランの説明（Wolt / Chompy）
・レビュー（Chompy以外）
1つのカードをとっても、各社それぞれの要素の置き方や強調したいポイントが異なっていて興味深いです。
・価格帯を ¥ / ¥¥ / ¥¥¥ の基準で表すのか、Chompyのように具体的な価格帯の表記があるのか
・レストラン説明も、Woltのようにサービス側が記載した概要なのか、Chompyのようにレストラン側のコメントなのか
・配達時間「10-20分」のようにバッファをもたせるのか、foodpandaのように「20分」と目安時間を言い切るのか
...などなど。
特にChompyは、「新しいお店を開拓したい」時のニーズに沿った施策が充実しています。
どうしてもレストラン名と写真1枚ではわからない情報を、「お店からのコメント欄」が補足していて、これは個人店の掲載が多いChompyだからこその施策だなと思います。
また、詳細に遷移しなくても画像が見れるカルーセルになっていたり、メニューを小出しにしているなど、メニューのバリエーションや価格帯もよりイメージがつきやすい見せ方になっています。
4️⃣ 「実際に何を頼むか決めるとき」時
レストランの詳細は各社このようになっています。
4サービスそれぞれ異なった設計になっていますが、特にWoltは「たくさんメニューを見ながら比較して決めたい」場合のニーズに沿った挙動になっています。
UberEats
料理をタップ → 料理詳細を見る → 閉じる → 料理をタップ
Wolt
料理をタップ → 料理詳細を見る → 料理をタップ
Woltは一覧⇔詳細の行き来がなく、料理下に開くようなUIになっているため行き来が少なく、より流し見がしやすい設計になっています。
また、下にスクロールすると、カテゴリのタブが表れるといった設計が一般的ですが、商品数や業態によって詳細の見せ方が違っているサービスもあります。
例えば、foodpandaでは、「レストラン」と「ショップ（コンビニやスーパー）」などのUIが大きく異なっています。
後者はどうしても商品数が多くなるため、
・商品カテゴリの一覧性が重要視されている
・フリーワード検索が設けられている
ことが大きな違いとして分かります。
foodpandaは起動時画面で「振り分けページ」を用意していることもあり、今後より「ショップ」の数が増えてくることが予想されます。
なんだかんだ、決め手になる「写真」について
配送料や手数料、配達時間、限定割引など、レストランを選ぶ基準はたくさんあります。その中でもやはり「このレストランがいい」と思わせる要素として写真が果たす役割は大きいです。
比較をすると、同じレストランでも写真が全く違っています。どのサービスもフォトグラファーによるメニュー撮影が初期手数料に含まれていたり、やはり写真はサービス全体の体験を考えても最も重要な要素の一つといえます。
（余談ですがこの「元麻布マルシェ」というお店、とっても美味しいです）
ただ、全メニュー写真の撮影をサービス側ができるわけではないので、例えばUberEatsはレストラン向けにメニュー写真のガイドラインを設けるなど、写真のクオリティを一定に保つTipsを提供しています。
これは個人的な感想でしかないのですが、全体的に写真のシズル感はChompyが圧倒的だと感じました。
それぞれのレストランの特徴を伝えつつ、いちばん美味しく見える写真が使われています。
UberEatsが俯瞰で統一された写真を使い始めたのがきっかけなのか、後発のサービスも同じような構図の写真が多いですが
「きれいに統一されて見える」と「美味しそうに見える」は必ずしも同じではないのだな...とChompyを使いはじめて感じました。ここはもう少しリサーチしていきたいところです。
さいごに
フードデリバリーは比較的新しいサービスが多く、良い意味で「このサービスが1番つかいやすい！」のような最適解がまだない業界なのかなとも思い、新しいUIの発明やが各社たくさん見られ、非常に学びも多いリサーチになりました。
私自身ここ1年完全リモートワークになり、特に使う頻度も増えたので、いつか書きたいなと思っていたトピックでした。まだまだ一部の比較でしかないので、料理を選ぶ以降のフローも今後まとめて記事にできればと思います。
長文にお付き合いいただきありがとうございました！