フードデリバリーUI設計ガイド -- "Warm Appetite"
フードデリバリーアプリのUIは、ユーザーの食欲を刺激し、注文完了までの最短経路を提供するために存在する。空腹のユーザーは待てない。3秒で食べたいものが見つかり、3タップで注文が完了する体験を目指す。
本テンプレートは UberEats と DoorDash から着想を得た「Warm Appetite」設計システムを定義する。ウォームイエローの背景が料理写真を美味しそうに見せ、グリーンのCTAが注文アクションへ確実に誘導する。
核心となる設計思想
料理写真は言葉より雄弁。テキストで「美味しい」と書くよりも、湯気の立つ写真一枚の方が注文率を上げる。UIの仕事は写真を最大限に美しく見せ、カートへの最短経路を作ること。グリーンのCTAは「これを注文」の唯一の出口。
1. デザイン哲学 -- 「食欲のトリガー」
フードUIの3秒ルール
フードデリバリーには「3秒ルール」がある。ユーザーがアプリを開いてから3秒以内に「これ食べたい」と思わせなければ、離脱する。
このルールを実現するために:
- カテゴリチップ: 水平スクロールで「和食」「ラーメン」「ピザ」等のジャンルを瞬時に選択
- 大きな料理写真: 16:10 比率で食欲を刺激するサイズ
- 配達時間バッジ: 「25分」のようなシンプルな数字で即座に判断可能
ダッシュボードプレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| フードデリバリー | 最適 | UberEats型、出前館型のデリバリーアプリ |
| レストラン注文 | 最適 | テーブルオーダー、テイクアウト予約 |
| 食材デリバリー | 適合 | ネットスーパー、食材キット |
| コンビニデリバリー | 適合 | 日用品の即時配達 |
| フードメディア | 適合 | レシピサイト、グルメレビュー |
| ファッションEC | 非推奨 | ウォームイエロー背景が合わない |
| コーポレート | 非推奨 | CORPORATE を使用 |
2. ウォームイエロー配色システム
背景の温かみ -- 食卓の照明
なぜイエロー系なのか。食品写真において、暖色系の照明は料理を美味しそうに見せる効果がある。レストランの照明が暖色であるのと同じ理由で、UIの背景も微かな暖色を帯びることで、全ての料理写真が「より美味しそう」に映る。
WARM BACKGROUND HIERARCHY
グリーンCTA + オレンジプロモ
ACCENT COLOR SYSTEM
グリーンの使用制限
accent-primary (#16a34a) は「カートに追加」「注文する」「確定する」のようなコンバージョンアクションにのみ使用する。ナビゲーションリンクや情報表示には使わない。
3. カテゴリチップとスクロール体験
カテゴリチップはフードデリバリーUIの命綱だ。ユーザーの「何食べよう」を即座に「ラーメンにしよう」に変換する。
設計のポイント:
- 水平スクロールで全カテゴリにアクセス可能
- 選択中のチップは
accent-primary背景で明確に区別 - アイコン（絵文字）を前置すると認識速度が上がる
- スクロールバーは非表示（CSS:
scrollbar-width: none）
4. 使用上の注意
フローティングカートの重要性
カートボタンは常に画面右下に固定表示する。カートにアイテムが入ったら、バッジでアイテム数を表示し、色はプロモカラー（#ea580c）で注意を引く。カートが空の場合はボタン自体を非表示にする。
配達時間の色分け
配達時間バッジは時間帯で色を変える:
- 30分以内:
#16a34a（グリーン = 速い） - 30-60分:
#0ea5e9（ブルー = 通常） - 60分以上:
#f59e0b（イエロー = 遅め）
丸みのあるデザインの一貫性
フードデリバリーUIの角丸は最低 12px。この丸みがフレンドリーさと温かみを演出する。4px のシャープな角丸はこのテンプレートでは使用しない。