Uber は世界のモビリティと配送のプラットフォームで、乗客、ドライバー、配達員、加盟店をつなぎます。UI は純粋な白黒の上に成り立ち、シェルにはほとんど中間グレーが現れません。UberMove と UberMoveText の 2 つの専用ジオメトリックサンセリフがすべての階層を担い、ボタン、タグ、ナビゲーションは一律 999px のピル型です。暖かな人間味のあるイラストとクールなモノクロ UI が対比を生み、カードには透明度 0.12〜0.16 のきわめて軽いシャドウだけを使います。モビリティ、ローカルサービス、プラットフォーム型プロダクトに適しています。
Uberメディアと消費
プロンプトテンプレート
基本テンプレート
Design a Uber-inspired interface. - Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome; - UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family; - Pill-shaped everything: buttons, chips, nav items all use 999px border-radius; - Warm, human illustrations contrasting the stark monochrome interface; - Card-based layout with whisper-soft shadows (0.12-0.16 opacity). Colors: #000000, #ffffff, #e2e2e2, #f3f3f3 with #0000ee accent. Typography: - Background: Uber Black (.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Uber aesthetics. Use Uber color identity with #0000ee accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Uber style. Use Uber color identity with #0000ee accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Uber design language. Use Uber color identity with #0000ee accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Uber visual identity. Use Uber color identity with #0000ee accents. Compelling, conversion-focused.
使用例
Uber アプリ
WebBuild a web app with Uber design language and #0000ee color system.
Uber ダッシュボード
ダッシュボードCreate a dashboard using Uber style with data visualization and - Background: Uber Black ( typography.
✅ 適した用途
- コンシューマー製品
- モビリティプラットフォームの UI
- 高コントラストのブランドページ
❌ 適さない用途
- 柔らかなライフスタイルブランド
- レトロ装飾のサイト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。