Uber にインスパイアされたデザインシステム

Category: メディア＆コンシューマー モビリティプラットフォーム。大胆なモノクロ、タイトなタイポグラフィ、都市のエネルギー。

1. ビジュアルテーマと雰囲気

Uberのデザイン言語は、自信に満ちたミニマリズムの傑作だ——すべてのピクセルが意味を持ち、装飾のために存在するものは何ひとつない、白黒の宇宙。体験全体は、ジェットブラック（#000000）と純白（#ffffff）という鮮烈な二元性の上に成り立っており、メッセージを薄めるような中間グレーはほぼ存在しない。これはデザインが未完成なスタートアップのような無機質なミニマリズムではない——それ自体が囁くだけで伝わるほど確立されたブランドの、意図的な自制だ。

シグネチャーフォントであるUberMoveは、独自の幾何学的サンセリフ体で、明確に正方形的でエンジニアリングされた質感を持つ。52pxのUberMove Boldのヘッドラインは看板のような重みを持ち——権威的で、直接的で、一切の妥協がない。UberMoveTextは本文やボタンを中程度のウェイト（500）で処理し、やや柔らかく読みやすい性格を持つ。両者が組み合わさり、交通マップのようなタイポグラフィシステムを生み出す——明確で、効率的で、速いスキャンのために設計されている。

Uberのデザインを真に際立たせているのは、フルブリード写真・イラストとピル型インタラクティブ要素（999px border-radius）の組み合わせだ。ナビゲーションチップ、CTAボタン、カテゴリーセレクターはすべてこのカプセル形状を共有し、指で操作しやすい触感のあるインターフェース言語を作り出している——一目でUberだとわかる。イラスト——ドライバー、ライダー、都市景観の温かく、わずかにスタイライズされたシーン——は、そうでなければ冷たいモノクローム系になるシステムに人間味を注ぎ込む。サイトは白いコンテンツセクションと完全な黒いフッターを交互に配置し、カード型レイアウトはフラットな美観を壊さない範囲で最も軽いシャドウ（rgba(0,0,0,0.12-0.16)）を使い、さりげない立体感を生み出している。

主な特徴：

• UIクロームにミッドトーングレーをほぼ使わない、純粋な白黒の基盤
• UberMove（ヘッドライン）＋ UberMoveText（本文/UI）——独自幾何学サンセリフファミリー
• 万物ピル型：ボタン、チップ、ナビアイテムすべてに999px border-radiusを使用
• 温かく人間的なイラストと、殺風景なモノクロームインターフェースのコントラスト
• ウィスパーソフトなシャドウ（不透明度0.12-0.16）のカード型レイアウト
• コンパクトで情報密度の高いレイアウト、8pxスペーシンググリッド
• フルブリードヒーロー背景として統合された大胆な写真
• ページをダーク・ハイコントラストな環境で締める黒いフッター

2. カラーパレットと役割

プライマリ

• Uber Black（#000000）：ブランドを定義する色——プライマリボタン、ヘッドライン、ナビゲーションテキスト、フッターに使用。「ほぼ黒」や「オフブラック」ではなく、妥協のない真の黒。
• Pure White（#ffffff）：プライマリサーフェスカラーと反転テキスト。ページ背景、カードサーフェス、黒い要素上のテキストに使用。

インタラクティブ＆ボタンステート

• Hover Gray（#e2e2e2）：白ボタンのホバー状態——温かみのない、クリーンでクールなライトグレーで明確なフィードバックを提供。
• Hover Light（#f3f3f3）：浮き上がった白ボタンの繊細なホバー——ほとんど感知できないグレーで優しいインタラクションフィードバック。
• Chip Gray（#efefef）：セカンダリ/フィルターボタンとナビゲーションチップの背景——中性的で超ライトなグレー。

テキスト＆コンテンツ

• Body Gray（#4b4b4b）：セカンダリテキストとフッターリンク——温かみも冷たさもない真のミッドグレー。
• Muted Gray（#afafaf）：ターシャリーテキスト、強調度を下げたフッターリンク、プレースホルダーコンテンツ。

ボーダー＆区切り

• Border Black（#000000）：構造的な区切りのための細い1pxボーダー——区切り線とフォームコンテナに控えめに使用。

シャドウ＆深度

• Shadow Light（rgba(0, 0, 0, 0.12)）：標準的なカードの浮き——コンテンツカードへの羽のように軽いリフト。
• Shadow Medium（rgba(0, 0, 0, 0.16)）：フローティングアクションボタンとオーバーレイ向けのやや強い浮き。
• Button Press（rgba(0, 0, 0, 0.08)）：セカンダリボタンのアクティブ/プレス状態へのインセットシャドウ。

リンクステート

• Default Link Blue（#0000ee）：本文コンテンツのアンダーライン付きテキストリンクに使用する標準ブラウザブルー。
• Link White（#ffffff）：ダークサーフェス上のリンク——フッターとダークセクションで使用。
• Link Black（#000000）：ライトサーフェス上のアンダーライン装飾付きリンク。

グラデーションシステム

• Uberのデザインは完全にグラデーションフリー。黒/白の二元性とフラットカラーブロックがすべての視覚的階層を作り出す。システムのどこにもグラデーションは現れない——すべてのサーフェスはソリッドカラーであり、すべてのトランジションはハードエッジかシャドウだ。

3. タイポグラフィルール

フォントファミリー

• ヘッドライン/ディスプレイ：UberMove、フォールバック：UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
• 本文/UI：UberMoveText、フォールバック：system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

注：UberMoveとUberMoveTextは専有書体です。外部実装では、system-uiまたはInterを最も近い代替として使用してください。UberMoveの幾何学的で正方形がかった比率はInterまたはDM Sansで近似できます。

階層

原則

• 太い見出し、中程度の本文：UberMove見出しは排他的にウェイト700（ボールド）——すべての見出しが看板的な力で訴えかける。UberMoveText本文とUIテキストは400-500を使用し、ウェイトのコントラストで明確な視覚的階層を生み出す。
• タイトな見出し行高：すべての見出しで行の高さは1.22-1.40の間——読むためではなく、スキャンするために設計された、コンパクトでパンチのある行高。
• 機能的タイポグラフィ：装飾的な文字処理はどこにもない。レタースペーシング、テキスト変換、装飾的なサイジングはなし。すべてのテキスト要素は直接的なコミュニケーション目的に奉仕する。
• 2フォント、厳密な役割：UberMoveは排他的に見出しのみに使用。UberMoveTextは排他的に本文、ボタン、リンク、UIのみに使用。境界は決して越えない。

4. コンポーネントスタイリング

ボタン

プライマリブラック（CTA）

• 背景：Uber Black（#000000）
• テキスト：Pure White（#ffffff）
• パディング：10px 12px
• 半径：999px（フルピル）
• アウトライン：なし
• フォーカス：インセットリング rgb(255,255,255) 0px 0px 0px 2px
• プライマリアクションボタン——太く、高コントラスト、見逃せない

セカンダリホワイト

• 背景：Pure White（#ffffff）
• テキスト：Uber Black（#000000）
• パディング：10px 12px
• 半径：999px（フルピル）
• ホバー：背景がHover Gray（#e2e2e2）にシフト
• フォーカス：背景がHover Grayにシフトし、インセットリングが現れる
• ダークサーフェス上または、プライマリブラックに隣接したセカンダリアクションとして使用

チップ/フィルター

• 背景：Chip Gray（#efefef）
• テキスト：Uber Black（#000000）
• パディング：14px 16px
• 半径：999px（フルピル）
• アクティブ：インセットシャドウ rgba(0,0,0,0.08)
• ナビゲーションチップ、カテゴリーセレクター、フィルタートグル

フローティングアクション

• 背景：Pure White（#ffffff）
• テキスト：Uber Black（#000000）
• パディング：14px
• 半径：999px（フルピル）
• シャドウ：rgba(0,0,0,0.16) 0px 2px 8px 0px
• トランスフォーム：translateY(2px) わずかなオフセット
• ホバー：背景が#f3f3f3にシフト
• マップコントロール、スクロールトップ、フローティングCTA

カード＆コンテナ

• 背景：白いページではPure White（#ffffff）；カード背景の明確な差別化なし
• ボーダー：デフォルトなし——カードはストロークではなくシャドウで定義
• 半径：標準コンテンツカードは8px；フィーチャー/プロモートカードは12px
• シャドウ：標準的なリフトはrgba(0,0,0,0.12) 0px 4px 16px 0px
• カードはコンテンツが密で、内部パディングは最小限
• 画像主導のカードはテキストオーバーレイまたは下部配置でフルブリード画像を使用

入力＆フォーム

• テキスト：Uber Black（#000000）
• 背景：Pure White（#ffffff）
• ボーダー：1px ソリッドブラック（#000000）——目立つボーダーが現れる唯一の場所
• 半径：8px
• パディング：標準的な快適なスペーシング
• フォーカス：カスタムフォーカス状態なし——標準ブラウザのフォーカスリングに依存

ナビゲーション

• 白い背景のスティッキートップナビゲーション
• ロゴ：黒い24x24pxのUberワードマーク/アイコン
• リンク：UberMoveText、14-18px、ウェイト500、Uber Blackで
• カテゴリーナビゲーション用のChip Gray（#efefef）背景のピル型ナビチップ（「乗る」「働く」「ビジネス」「Uber Eats」）
• メニュートグル：50% border-radiusの丸いボタン
• モバイル：ハンバーガーメニューパターン

画像処理

• 温かい手描きイラストシーン（フィーチャーセクションには写真を使わない）
• イラストスタイル：わずかにスタイライズされた人物、イラスト内の温かいカラーパレット、コンテンポラリーな雰囲気
• ヒーローセクションは全幅背景として大胆な写真またはイラストを使用
• アプリダウンロードCTAにQRコード
• カード内にある全画像は標準の8pxまたは12px border-radiusを使用

特徴的なコンポーネント

カテゴリーピルナビゲーション

• トップレベルナビゲーション用のピル型ボタンの水平行（「乗る」「働く」「ビジネス」「Uber Eats」「会社情報」）
• 各ピル：Chip Gray背景、黒テキスト、999px半径
• アクティブ状態：黒い背景に白いテキスト（反転）

デュアルアクションのヒーロー

• スプリットヒーロー：左にテキスト/CTA、右にマップ/イラスト
• ピックアップ/目的地用の2つの並列入力フィールド
• 黒いピルの「料金を見る」CTAボタン

Plan-Aheadカード

• 「Uber Reserve」と旅行計画などの機能を促進するカード
• イラストが豊富で、温かみのある人間中心の画像
• 底部に黒いCTAボタン（白テキスト）

5. レイアウト原則

スペーシングシステム

• 基本単位：8px
• スケール：4px、6px、8px、10px、12px、14px、16px、18px、20px、24px、32px
• ボタンパディング：10px 12px（コンパクト）または14px 16px（コンフォータブル）
• カード内部パディング：約24-32px
• セクション垂直スペーシング：充実しているが効率的——主要セクション間は約64-96px

グリッド＆コンテナ

• 最大コンテナ幅：約1136px、センタリング
• ヒーロー：左にテキスト、右にビジュアルのスプリットレイアウト
• フィーチャーセクション：2カラムカードグリッドまたは全幅シングルカラム
• フッター：黒い背景のマルチカラムリンクグリッド
• ビューポートエッジまで広がる全幅セクション

余白の哲学

• 効率的で、エアリーではない：Uberの余白は機能的——分離するのに十分で、空っぽには感じさせない。これはトランジットシステムのスペーシングだ：コンパクトで、明確で、目的志向。
• コンテンツ密度の高いカード：カードは内部スペーシングを最小化して情報をタイトに詰め込み、シャドウと半径に境界の定義を頼る。
• セクションの呼吸スペース：主要セクションには充実した垂直スペーシングが与えられるが、セクション内の要素は密接にグループ化されている。

Border Radiusスケール

• シャープ（0px）：インタラクティブ要素に直角は使わない
• スタンダード（8px）：コンテンツカード、入力フィールド、リストボックス
• コンフォータブル（12px）：フィーチャードカード、より大きなコンテナ、リンクカード
• フルピル（999px）：すべてのボタン、チップ、ナビゲーションアイテム、ピル
• サークル（50%）：アバター画像、アイコンコンテナ、サーキュラーコントロール

6. 深度＆エレベーション

シャドウの哲学：Uberはシャドウを純粋に構造的ツールとして使用し、装飾的には決して使わない。シャドウは常に非常に低い不透明度（0.08-0.16）の黒で、コンテンツレイヤーを分離するために必要な最小限のリフトを生み出す。ブラー半径は中程度（8-16px）——自然に感じるが決してドラマチックではない。カラードシャドウ、レイヤードシャドウスタック、アンビエントグロー効果はない。深度はシャドウのエレベーションよりも、黒/白のセクションコントラストによって伝えられる。

7. すべきこと・してはいけないこと

すべきこと

• プライマリパレットとして真の黒（#000000）と純粋な白（#ffffff）を使用する——この鮮烈なコントラストこそがUberだ
• すべてのボタン、チップ、ピル型ナビゲーション要素に999px border-radiusを使用する
• すべての見出しをUberMove Bold（700）で保持し、看板レベルのインパクトを維持する
• カードのエレベーションにウィスパーソフトなシャドウ（不透明度0.12-0.16）を使用する——かろうじて見える程度に
• コンパクトで情報密度の高いレイアウトスタイルを維持する——Uberはエアリーさより効率性を優先する
• 温かく人間中心のイラストを使ってモノクロームインターフェースを柔らかくする
• コンテンツカードに8px半径、フィーチャードコンテナに12pxを適用する
• ナビゲーションと目立つUIテキストにウェイト500のUberMoveTextを使用する
• デュアルアクションレイアウトで黒いプライマリボタンと白いセカンダリボタンをペアにする

してはいけないこと

• UIクロームにカラーを導入しない——Uberのインターフェースは厳密に黒、白、グレーだ
• ボタンに999pxより小さいボーダー半径を使用しない——フルピル形状はコアアイデンティティ要素
• 重いシャドウや高い不透明度のドロップシャドウを適用しない——深度はウィスパーサブトル
• どこにもセリフフォントを使わない——Uberのタイポグラフィは排他的に幾何学サンセリフ
• 過度な余白でエアリーで広々としたレイアウトを作らない——Uberの密度は意図的なもの
• グラデーションやカラーオーバーレイを使わない——すべてのサーフェスはフラットなソリッドカラー
• UberMoveを本文テキストに、またはUberMoveTextを見出しに混ぜない——階層は厳密だ
• 装飾的なボーダーを使わない——ボーダーは機能的（入力、区切り線）か、完全に存在しない
• オフホワイトやニアブラックで黒/白のコントラストを柔らかくしない——その二元性は意図的なものだ

8. レスポンシブ対応

ブレークポイント

タッチターゲット

• すべてのピルボタン：最小高さ44px（10-14px垂直パディング + 行の高さ）
• ナビゲーションチップ：快適な親指タップのための余裕ある14px 16pxパディング
• サーキュラーコントロール（メニュー、閉じる）：50%半径で大きく押しやすいターゲットを確保
• カードサーフェスはモバイルで全エリアタッチターゲットとして機能

折りたたみ戦略

• ナビゲーション：水平ピルナビがサーキュラートグル付きハンバーガーメニューに折りたたまれる
• ヒーロー：スプリットレイアウト（テキスト + マップ/ビジュアル）がシングルカラムにスタック——テキスト上、ビジュアル下
• 入力フィールド：サイドバイサイドのピックアップ/目的地入力が縦にスタック
• フィーチャーカード：2カラムグリッドが全幅スタックカードに折りたたまれる
• 見出し：52pxディスプレイが36px、32px、24px、20pxとスケールダウン
• フッター：マルチカラムリンクグリッドがアコーディオンまたはスタックシングルカラムに折りたたまれる
• カテゴリーピル：小さな画面では水平スクロールでオーバーフロー

画像の動作

• イラストはコンテナ内で比例的にスケール
• ヒーロー画像はアスペクト比を維持し、小さな画面ではクロップされる場合がある
• QRコードセクションはモバイルで非表示（アプリダウンロードが直接ストアリンクにシフト）
• カード画像はすべてのサイズで8-12px border-radiusを維持

9. Agentプロンプトガイド

クイックカラーリファレンス

• プライマリボタン：「Uber Black（#000000）」
• ページ背景：「Pure White（#ffffff）」
• ボタンテキスト（黒の上）：「Pure White（#ffffff）」
• ボタンテキスト（白の上）：「Uber Black（#000000）」
• セカンダリテキスト：「Body Gray（#4b4b4b）」
• ターシャリーテキスト：「Muted Gray（#afafaf）」
• チップ背景：「Chip Gray（#efefef）」
• ホバーステート：「Hover Gray（#e2e2e2）」
• カードシャドウ：「rgba(0,0,0,0.12) 0px 4px 16px」
• フッター背景：「Uber Black（#000000）」

コンポーネントプロンプト例

• 「Pure White（#ffffff）上にヒーローセクションを作成。見出しは52px UberMove Bold（700）、行の高さ1.23。テキストはUber Black（#000000）。サブタイトルはBody Gray（#4b4b4b）、16px UberMoveText ウェイト400、行の高さ1.50。Uber Black（#000000）ピルCTAボタンを配置、純白テキスト、999px半径、パディング10px 12px。」
• 「水平ピルボタンのカテゴリーナビゲーションバーをデザイン。各ピル：Chip Gray（#efefef）背景、Uber Black（#000000）テキスト、14px 16pxパディング、999px border-radius。アクティブピルはUber Black背景に純白テキストに反転。UberMoveText 14px ウェイト500を使用。」
• 「Pure White（#ffffff）上にフィーチャーカードを構築、8px border-radius、シャドウrgba(0,0,0,0.12) 0px 4px 16px。タイトルはUberMove 24px ウェイト700、説明はBody Gray（#4b4b4b）16px UberMoveText。底部に黒いピルCTAボタンを追加。」
• 「Uber Black（#000000）上にダークフッターを作成、Pure White（#ffffff）見出しテキスト、UberMove 20px ウェイト700。フッターリンクはMuted Gray（#afafaf）14px UberMoveText。リンクホバーは純白に。マルチカラムグリッドレイアウト。」
• 「フローティングアクションボタンをデザイン、Pure White（#ffffff）背景、999px半径、14pxパディング、シャドウrgba(0,0,0,0.16) 0px 2px 8px。ホバーで背景が#f3f3f3にシフト。スクロールトップやマップコントロールに使用。」

イテレーションガイド

1. 一度に1つのコンポーネントに集中する
2. 厳密な黒/白パレットを参照する——「暗くする」ではなく「Uber Black（#000000）を使用する」
3. ボタンとピルには常に999px半径を指定する——これはUberアイデンティティにとって譲れない
4. フォントファミリーを明示的に説明する——「見出しはUberMove Bold、ラベルはUberMoveText Medium」
5. シャドウは「ウィスパーシャドウ（rgba(0,0,0,0.12) 0px 4px 16px）」を使用——重いドロップシャドウは決して使わない
6. レイアウトはコンパクトで情報密度を高く保つ——Uberは効率的であり、エアリーではない
7. イラストは温かく人間的に——「抽象的な形状」ではなく「暖かいトーンのスタイライズされた人物」を描写する
8. バランスの取れたデュアルアクションレイアウトには白いセカンダリと黒いCTAをペアにする