厳選・オープン・無料

Waymo

リーディングな自動運転技術プラットフォームのための、清潔でプロフェッショナル、かつ信頼性を前面に出したデザイン。

automotiveav
Waymo のスクリーンショット
↓ デザインシステムをダウンロード (19 MB)OpenDesign で開く

オリジナル: https://waymo.com

📦 パックの中身を見る →

01

デザイン DNA

自動運転安全アクセシブル信頼持続可能

自動車とソフトウェアの交差点で活動する、プレミアムで信頼できるテック企業。

02

カラー

#006feeAccent
#23233cInk
#ffffffBG
#f2f2f2BG soft
#808080Muted
rgba(35, 35, 60, 1.0)Line

ハイコントラートでプロフェッショナル。主要なテキストカラーには深いネイビーを、インタラクティブなアクセントには鮮やかなブルーを使用。

03

タイポグラフィ

humanist-sans · monospace

すべてのタイポグラフィは、きつくネガティブなレタースペーシングを使用。 · 見出しは太字で大きく、本文は高い視認性を維持。 · テキストカラーは、深いネイビーインクまたはダーク背景向けのホワイトに厳密に限定。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

標準の4pxグリッド。たっぷりとした余白による明確な視覚的グループ化。

05

サーフェス (角丸 / 影 / 罫線)

sm · 3px
md · 8px
lg · 12px
pill · 999px

ボタンには太さ2pxの実線ボーダーを採用し、明確なインタラクティブな操作性を提供。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

標準的なトップナビゲーションを持つ中央揃えコンテナ。分割ヒーローセクションと、縦に積み上げられた全幅コンテンツブロックを採用。

07

モーションとインタラクション

150msmicro
400mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI要素の表示に、スムーズなフェードとトランスレート。 · インタラクティブ要素への控えめなホバートランジション。 · グループ化された要素の、ずらしのあるエントリーアニメーション。

ボタンやリンクに対して、控えめな不透明度の変化または背景のシフト。 · 控えめなステートトランジションによる即時応答。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Waymo — 桌面首屏（hero）
桌面首屏（hero）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Waymo — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

Waymoのウェブサイトデザインは、消費者向け自動運転プラットフォームのための、清潔でプロフェッショナル、かつ信頼性を前面に出したレイアウトです。カラーパレットは、深いネイビーインク（#23233c）とクリスピーなホワイト背景（#ffffff）が主で、プライマリアクションには鮮やかなブルーアクセント（#006fee）が使用されています。タイポグラフィは、きつくネガティブなレタースペーシングが特徴のヒューマニストサンセリフファミリーで、モダンで自信に満ちた印象を創出。重要なデザインの制約には、ドロップシャドウのないフラットUIの維持、明確なビジュアル階層を確立するためのたっぷりとした余白の使用、および雑然としたインターフェースの回避が含まれます。デザイン言語は抑制的で上質で、大きなフォトグラフィと大胆な見出しを使用して、安全性と技術的リーダーシップ感を伝えます。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

en · zh-CN · zh-TW · ja · ko