Uber Eats

Uber Eats

統合制作プロンプト · フード・デリバリー · 製品、UX、UI、フロントエンド、SEO/AEO、性能、QAをつなぐ統合制作仕様。

このプロンプトを使う場面

メニュー選択と注文が重要な製品を企画・設計・開発するときに使います。Uber Eats ↗ の公開情報設計は参考にできますが、自分の課題に合わせて再設計し、ロゴ、文章、画像、固有素材、ピクセル単位のレイアウトは複製しません。

• 参考サービス：Uber Eats
• 主要オブジェクト：店舗・メニュー・注文
• 主要リスク：到着時間・オプション・アレルギー
• 画面の出発点：発見・比較フロー · 軽快で動機付ける · 情報密度 中 · 条件入力 -> 発見カード -> 価格とポリシー比較 -> 予約または注文 · #06C167 · Uber Eats

公開インターフェースのデザイン分析

• 分析の基準: 公開トップ画面と代表的なタスクフローに繰り返し現れる視覚・構造パターンです。サービスは更新されるため、最終的には実サイトのキャプチャで確認します。
• 画面アーキタイプ: 発見・比較フロー
• トーン＆マナー: 軽快で動機付ける
• 情報密度: 中
• カラー戦略: ニュートラルな表面上の抑制されたブランドアクセント (#06C167)
• ナビゲーション構造: 軽量なトップナビゲーション
• 構造の順序: 条件入力 -> 発見カード -> 価格とポリシー比較 -> 予約または注文
• 再利用するパターン: 条件入力、絞り込み、発見カード、価格または状態比較、主要操作
• 独立して適用するルール: 順序と意思決定原則だけを参照し、ロゴ、文章、画像、アイコン、固有の画面構成は複製しません。

先に置き換えるプロジェクト情報

製品名: "[自分の製品名]"
対象ユーザー: "[主要ユーザーと利用状況]"
解決する問題: "[ユーザーが解決したい問題]"
主要機能: "[必須の3〜5機能]"
事業目標: "[転換、活性化、継続などの指標]"
技術スタック: "[例：Next.js と Tailwind CSS]"
ブランドトーン: "[例：明確、落ち着き、信頼感]"

そのまま使えるプロンプト

あなたはシニアプロダクトデザイナー、UXストラテジスト、フロントエンドアーキテクト、テクニカルSEO責任者です。

[自分の製品名]について実装可能な製品仕様を作り、必要に応じて本番品質のコードまで生成してください。Uber Eats（https://www.ubereats.com）は「メニュー選択と注文」を扱う情報設計と意思決定フローだけを参考にし、ブランド、ロゴ、固有文言、画像、著作物、正確な画面配置は複製しないでください。

プロジェクト条件：
- 対象ユーザー：[主要ユーザーと利用状況]
- 解決する問題：[ユーザーの問題]
- 主要機能：[必須の3〜5機能]
- 事業目標：[転換、活性化、継続など]
- 技術スタック：[フレームワーク、スタイル、データ、配信]
- ブランドトーン：[言葉と視覚の特徴]

必須基準：
1. 店舗・メニュー・注文の関係と状態を一目で理解できるようにする。
2. 到着時間・オプション・アレルギーについて予防、説明、回復経路を用意する。
3. loading、empty、error、success、disabled、権限なし、partial-data 状態を定義する。
4. 360px、768px、1280pxでコンテンツ優先順位とナビゲーションを維持する。
5. セマンティックHTML、論理的なキーボード順、見えるフォーカス、44pxタッチ領域、WCAG AAコントラストを守る。
6. 画面構造、コンポーネント、データ、操作、マイクロコピー、例外、検証可能な受入条件を明示する。
7. 各インデックス対象ページに固有title、meta description、canonical、見出し階層、クロール可能な内部リンクを設計する。
8. 重要な質問には見える本文で直接答え、WebSite、WebPage、BreadcrumbList、CreativeWork の構造化データと一致させる。
9. メイン画像、フォント、JavaScript、Core Web Vitals、低速回線の性能予算を設定する。
10. 抽象的な助言ではなく、実装・テスト可能な結果を返す。

出力順：
- 目標、仮定、成功指標
- ユーザーフローと情報設計
- 画面・コンポーネント仕様
- データモデル、状態、エラー回復
- レスポンシブとアクセシビリティ
- SEO、AEO、構造化データ計画
- 実装計画またはコード
- 検証可能な完了チェック

デザイントークンの出発点

:root {
  --color-primary: #06C167;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #06C16722;
  --color-danger: #DC2626;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
}

これは出発点であり、Uber Eatsを複製する指定ではありません。自分のユーザーに対してコントラスト、階層、密度、ブランドの独自性を検証してください。

期待する成果物

• ユーザー成果と測定可能な指標に結びつく製品要件
• 情報設計と重要なエンドツーエンドフロー
• データ、状態、操作、アクセシビリティを含むコンポーネント契約
• モバイル、タブレット、デスクトップの適応ルール
• SEO/AEOコンテンツモデル、構造化データ、内部リンク計画
• 性能予算、分析イベント、テスト、リリース受入条件

続けて使う改善プロンプト

1. 「最重要フローについて、同じデータモデルで通常、読込中、空、部分データ、入力エラー、サーバーエラー、権限なし、成功状態を定義して。」
2. 「仕様をセマンティックで再利用可能なコンポーネントに変換し、実際の長さの日本語、360px・768px・1280px、キーボード・スクリーンリーダー動作を含めて。」
3. 「到着時間・オプション・アレルギーの観点で監査し、重大度順に根拠、修正、検証方法、完了条件を示して。」
4. 「Uber Eatsのブランドや固有レイアウトに似た部分を除き、有用な情報設計の原則だけを残して。」
5. 「目的、データ要件、コンポーネントAPI、例外、アクセシビリティ、テスト、依存関係を含む開発チケットに分解して。」

検収チェックリスト

• ☐ Uber Eatsは情報設計の参考に限定されている。
• ☐ 実プロジェクトのユーザー、問題、機能、指標でプレースホルダーを置換した。
• ☐ 店舗・メニュー・注文の優先順位と状態変化が明確である。
• ☐ 到着時間・オプション・アレルギーに対する信頼・回復経路がある。
• ☐ 空、遅延、部分、失敗、権限制限状態を網羅した。
• ☐ キーボード、スクリーンリーダー、200%拡大、動きの抑制、コントラストを検証できる。
• ☐ 独立した製品言語とビジュアルアイデンティティになっている。