workbuddy_skills/open-design/design-systems/airbnb/DESIGN-ja.md

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

> Category: Eコマース＆小売
> 旅行マーケットプレイス。ウォームなコーラルアクセント、写真主導、丸みを帯びた UI。

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

Airbnb の 2026 年デザインは、たまたまアプリになった旅行雑誌のようだ——清潔な白いキャンバスは全画面写真に席を譲り、インターフェース自体は背景に溶け込んで物件写真が自由に呼吸できる。トレードマークの Rausch コーラルピンク（`#ff385c`）は控えめながら見紛うことなく使われている：検索 CTA、アクティブなタブインジケーター、プライマリアクションボタン、そして時折価格やウィッシュリストのハートに添えられる。それ以外はすべて規律あるグレースケールで、`#222222` がほぼすべてのテキストを担う。

このシステムが一目でAirbnbとわかるのは、コンテンツに対して置く*信頼*の大きさにある。物件写真はヒーローサイズで表示され、4:3、端から端まで丸みのある処理を施す。カテゴリの切り替えは三タブピッカー（ホーム / 体験 / サービス）で行われ、3D レンダリングのイラストアイコン（傾斜屋根の家、熱気球、サービスベル）と組み合わせる——物体的で触れられそうな、おもちゃのような感触——、そこにクリアな `Airbnb Cereal VF` のラベルが添えられる。3D レンダリングと純粋なタイポグラフィ UI が違和感なく共存できる珍しいコンシューマプロダクトだ。

最新のサーフェスは**体験**プロダクトライン——同じクロームだが、カード密度が高く、写真がより豊富で、中央に固定された予約パネルと右スティッキーレールの料金表示がある。部屋と体験の両方の詳細ページは厳格なテンプレートに従う：全画面ヒーロー画像グリッド → 重なり合う丸みのある予約カード（スクロール時に固定）→ アメニティ → レビュー（ゲストお気に入り賞は大きな中央の `4.81` 評価とローレルリースのロックアップで表示）→ マップ → ホストプロフィール → 注意事項。部屋を予約しようとヨットツアーを予約しようと、リズムは一貫している。

**主な特徴：**
- Rausch コーラルピンク（`#ff385c`）を単一アクセントブランドカラーとして、プライマリ CTA と検索ボタンにのみ使用
- 4:3 / 16:9 の全画面写真と控えめなコーナー丸み（14–20px）を主要なビジュアル語彙として採用
- 3D レンダリングのカテゴリアイコンとタイポグラフィのタブを組み合わせ——システム内でイラストが許可される唯一の場所
- 円形 `50%` のアイコンボタン（戻る矢印、シェア、お気に入り、カルーセル矢印）がインターフェース全体に点在
- `Airbnb Cereal VF` が 8px の法的注記から 28px のセクション見出しまですべてのラベルを担う——シングルファミリーシステム
- プロダクト階層のカラーコーディング：Airbnb Plus（マゼンタ `#92174d`）、Airbnb Luxe（ディープパープル `#460479`）、Airbnb（Rausch コーラル）
- ゲストお気に入り賞のロックアップ——二つのローレルリースの間に中央揃えの大きな評価番号、システム内で最も認識されるデザインの瞬間のひとつ
- スティッキー予約パネル、価格 → 日付 → ゲスト数のスタックでデスクトップの右レールに固定、モバイルでは底部固定の「予約する」バーに変換
- モバイル底部固定ナビゲーション（探す / ウィッシュリスト / ログイン）、アクティブ状態は Rausch のティント

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

### プライマリ
- **Rausch**（`#ff385c`）：ブランドのトレードマークであるコーラルピンク。CSS 変数 `--palette-bg-primary-core`。使用場所：プライマリ「予約する」ボタン、検索送信ボタン、アクティブなタブの下線、ウィッシュリストのハート塗り、価格の強調。あらゆるページで最も視認性が高い単一カラー。

### セカンダリとアクセント
- **ディープ Rausch**（`#e00b41`）：より彩度が高いバリアント。CSS 変数 `--palette-bg-tertiary-core`。押下/アクティブのボタン状態とグラデーションの終端に使用。
- **Plus マゼンタ**（`#92174d`）：CSS 変数 `--palette-bg-primary-plus`。Airbnb Plus プロダクト階層のブランドカラー——厳選された高級物件向けのオファリング。
- **Luxe パープル**（`#460479`）：CSS 変数 `--palette-bg-primary-luxe`。Airbnb Luxe プロダクト階層のブランドカラー——ヴィラ/エステートレベルのレンタル。
- **インフォブルー**（`#428bff`）：CSS 変数 `--palette-text-legal`。法的/情報系リンク（利用規約、プライバシー、注意事項）に使用——システム内唯一のモノクロ以外のリンクカラー。

### サーフェスと背景
- **キャンバスホワイト**（`#ffffff`）：デフォルトのページ背景。すべてのカード、コンテナ、詳細ページはここから始まる。
- **ソフトクラウド**（`#f7f7f7`）：フッター背景、マップビューのラッパー、プライマリホワイトから一段引いた「その他」セクションに使うさりげないサブサーフェスのティント。
- **ヘアライングレー**（`#dddddd`）：ユビキタスな 1px ボーダーカラー——カード、アメニティ行、レビューパネル、フッターカラムを区切る。レイアウトシステムの縁の下の力持ち。

### ニュートラルとテキスト
- **インクブラック**（`#222222`）：CSS 変数 `--palette-text-primary`。システムのニアブラック。すべての見出し、本文段落、ナビラベル、価格。ページ上のすべてのテキストの約 90% に使用。
- **チャコール**（`#3f3f3f`）：CSS 変数 `--palette-text-focused`。フォーカス状態の入力テキストとワンランク下の強調コピーに使用。
- **アッシュグレー**（`#6a6a6a`）：CSS 変数 `--palette-bg-tertiary-hover`。セカンダリラベル、都市名の下の「コテージレンタル」のようなサブタイトルコピー、控えめなフッターリンク。
- **ミュートグレー**（`#929292`）：CSS 変数 `--palette-text-link-disabled`。無効ボタンと低優先度のメタデータ。
- **ストーングレー**（`#c1c1c1`）：第三級ディバイダー、アイコンストローク、プレースホルダーアバター。

### セマンティックとアクセント
- **エラーレッド**（`#c13515`）：CSS 変数 `--palette-text-primary-error`。フォームバリデーションエラー、破壊的アクションの警告。
- **ディープエラー**（`#b32505`）：CSS 変数 `--palette-text-secondary-error-hover`。エラー状態の押下/アクティブバリアント。
- **半透明ブラック**（`rgba(0, 0, 0, 0.24)`）：CSS 変数 `--palette-text-material-disabled`。無効化された Material スタイルのラベル。

### グラデーションシステム
Airbnb のブランドグラデーションは使用が控えめで、通常はワードマークと検索ボタンのブランドの瞬間にのみ現れる：

```
linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
```

このコーラル→マゼンタのスイープは「ブランドの瞬間」——全面サーフェスには決して使用せず、細いピル塗りやロゴ処理にのみ用いる。

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

### フォントファミリー
- **Airbnb Cereal VF**（プライマリかつ唯一）：システム全体を担うプロプライエタリな可変ウェイトのサンセリフ書体。フォールバック（順序）：`Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`。

抽出されたトークンで確認されたウェイト：500、600、700。400 のレギュラーなし——システムの「本文」ウェイトは 500 で、すべてのテキストブロックにわずかに余分な密度を与え、自信があって意図的に読める。

OpenType 機能：`salt`（スタイリスティックオルタネート）はコンパクトな 11px と 14px の 600 ウェイトのラベルに使用——数字や特殊文字の形状を緊密にするためと思われる。リガチャや分数数字の機能は確認されていない。

### 階層

| 役割 | サイズ | ウェイト | 行高 | レタースペーシング | 備考 |
|------|------|--------|-------------|----------------|-------|
| セクション見出し | 28px / 1.75rem | 700 | 1.43 | 0 | 「次の旅行のインスピレーション」— ページレベルの見出し |
| サブセクション見出し | 22px / 1.38rem | 500 | 1.18 | -0.44px | 「この物件の設備」「ホストについて」— コンテンツディバイダー |
| カードタイトル | 21px / 1.31rem | 700 | 1.43 | 0 | レビューパネル見出し、カードリードタイトル |
| 物件タイトル | 20px / 1.25rem | 600 | 1.20 | -0.18px | 「小グループヨットツアー、ワイン＆フルーツ飲み放題」— 詳細ページの物件タイトル |
| サブタイトルボールド | 16px / 1.00rem | 600 | 1.25 | 0 | ホスト名、都市名 |
| ボディミディアム | 16px / 1.00rem | 500 | 1.25 | 0 | 詳細ページのプライマリ本文 |
| ラージボタン | 16px / 1.00rem | 500 | 1.25 | 0 | 「予約する」「ホストになる」 |
| デフォルトボタン | 14px / 0.88rem | 500 | 1.29 | 0 | 標準ボタンラベル |
| リンク | 14px / 0.88rem | 500 | 1.43 | 0 | ナビリンク、フッターリンク |
| キャプションミディアム | 14px / 0.88rem | 500 | 1.29 | 0 | メタデータ、サブタイトル行（「コテージレンタル」「ヴィラレンタル」） |
| キャプションボールド | 14px / 0.88rem | 600 | 1.43 | 0 | `salt` 機能を有効化——数字統計、小テキストの強調 |
| キャプションスモール | 13px / 0.81rem | 400 | 1.23 | 0 | レビュー日付、マイクロメタデータ |
| マイクロデフォルト | 12px / 0.75rem | 400 | 1.33 | 0 | フッター免責事項、法的マイクロコピー |
| マイクロボールド | 12px / 0.75rem | 700 | 1.33 | 0 | 「NEW」ピルラベル |
| バッジ大文字 | 11px / 0.69rem | 600 | 1.18 | 0 | `salt` 機能——コンパクトなカテゴリ/ステータスバッジ |
| 上付き文字 | 8px / 0.50rem | 700 | 1.25 | 0.32px | 大文字——価格の注記、小数点以下 |

### 原則
- **一つのファミリー、多くのウェイト。** Airbnb Cereal VF が 8px の法的文字から 28px のページ見出しまですべてを担う——ビジュアルアイデンティティは書体の混用ではなくファミリー自体から生まれる。
- **500 が新しい 400。** システムの「レギュラー」ウェイトは 500 で、すべての段落にウェブのデフォルトよりわずかに自信のあるテクスチャを与える。
- **ネガティブなトラッキングはディスプレイタイプのみ。** 20px 以上の見出しはトラッキングを -0.18 から -0.44px 圧縮して彫刻されたように見せる；本文サイズは読みやすさのためにトラッキング 0 を維持。
- **見出しの行高はタイト、本文はゆったりと。** ディスプレイタイプは 1.18–1.25（タイト）で走る；本文とキャプションは長文の読みやすさのために 1.43 まで広がる。
- **大文字は 8px を除き不使用。** システム内で唯一の大文字変換は 8px の上付き文字——それ以外はすべてセンテンスケースに微妙なウェイト変化で対応。

### フォント代替品についての注記
Airbnb Cereal VF はプロプライエタリ書体。最も近いオープンソースの代替は **Circular Std**（まだ商業書体）または **Inter**（無料、Google Fonts）で、ディスプレイサイズではレタースペーシングを -0.01em 縮小する。厳格なブランド忠実度を求めるなら、文書化されたフォールバックチェーン（`Circular, -apple-system, system-ui`）は macOS/iOS で概ね許容できるレンダリングをする。`system-ui` がサンフランシスコフォントに解決され、比率が近似しているためだ。

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

### ボタン

**プライマリ CTA**（「予約する」「検索」「日程を追加」）
- 背景：Rausch `#ff385c`
- テキスト：キャンバスホワイト `#ffffff`、Airbnb Cereal 500、16px
- パディング：縦約 14px、横 24px
- 角丸：8px（矩形）または 50%（円形アイコンバリアント）
- ボーダー：なし
- アクティブ/押下：`transform: scale(0.92)` に加え `0 0 0 2px` の 2px `#222222` フォーカスリング

**セカンダリボタン**（「ホストになる」、アウトラインの三次アクション）
- 背景：`#ffffff`
- テキスト：インクブラック `#222222`、Airbnb Cereal 500、14–16px
- パディング：10px 16px
- 角丸：20px（ピル）または 8px（矩形）
- ボーダー：1px solid ヘアライングレー `#dddddd`

**アイコンのみの円形ボタン**（戻る矢印、シェア、お気に入り、カルーセルコントロール）
- 背景：`#f2f2f2`（わずかにオフホワイト）または 1px 半透明ブラックボーダー付きの白
- アイコン：`#222222` アウトラインストローク、16–20px
- サイズ：直径 32–44px
- 角丸：50%
- アクティブ/押下：`transform: scale(0.92)`；カラフルな写真背景から分離するための 4px ホワイトリング `0 0 0 4px rgb(255,255,255)`

**無効ボタン**
- 背景：`#f2f2f2`
- テキスト：ストーングレー `#c1c1c1`
- 不透明度：0.5

**ピルタブボタン**（カテゴリセレクター「ホーム / 体験 / サービス」）
- 背景：透明
- テキスト：インクブラック `#222222`、Airbnb Cereal 500、16px
- パディング：8px 14px
- アクティブ状態：ラベルの下に 2px インクブラックの下線
- ラベルの上に 36–48px の 3D レンダリングイラストアイコンと組み合わせ

### カードとコンテナ

**物件カード**（ホームページグリッド、検索結果）
- 背景：`#ffffff`
- 角丸：画像に 14px、テキストは透明背景の下に直接配置
- 画像：4:3 アスペクト比、全画面、同じ 14px の角丸
- パディング：外コンテナにはなし；画像とメタデータ行の間に 12px のスペーシング
- 影：なし——分離は余白と写真固有の角丸から生まれる
- メタデータパターン：1行目に都市/地域（16px 600）、2行目に距離/所要時間（14px 500 アッシュグレー）、3行目に日程範囲、下部に「一泊あたり」の価格行

**詳細ページ予約パネル**（部屋/体験ページのスティッキー右レール）
- 背景：`#ffffff`
- 角丸：14–20px
- ボーダー：1px solid ヘアライングレー `#dddddd`
- 影：`rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — 積み重なった三層のさりげないエレベーション
- パディング：24px
- 幅：約 370px、ビューポートの上端から 120–140px 下に固定
- 内容：価格見出し → 日付ピッカー → ゲスト数ドロップダウン → プライマリ CTA → 「まだ請求されません」の注記

**アメニティグリッドカード**（物件詳細ページ）
- 背景：`#ffffff`
- ボーダー：行レベルで 1px solid ヘアライングレー `#dddddd`（アイテムごとではなく）
- パディング：アメニティ行ごとに縦 16px
- アイコン＋ラベルのパターン：左に 24px のアウトラインアイコン、右に 16px 500 ウェイトのラベル

**レビューカード**（詳細ページの個別レビュー）
- 背景：`#ffffff`、ボーダーなし
- パディング：0（グリッドギャップに依存）
- 内容：40px の円形アバター + 16px 600 ウェイトの名前 + 14px 400 アッシュグレーの日付を一行に、その下に 14px 500 の本文段落

### 入力フォームと入力欄

**検索バー**（ホームページのプライマリ）
- 背景：`#ffffff`
- ボーダー：三セグメント（場所 / 日程 / ゲスト）を囲む 1px solid ヘアライングレー `#dddddd`
- 角丸：32px（フルピル）
- 影：`rgba(0, 0, 0, 0.04) 0 2px 6px 0` — さりげなく浮いた感じ
- 構造：細い縦ディバイダーで区切られた三セグメント、各セグメントに 12px 500 のラベルと 14px 500 のプレースホルダー
- 送信：右端に Rausch の円形アイコンボタン、直径 48px

**テキスト入力**（汎用フォーム）
- 背景：`#ffffff`
- ボーダー：1px solid ヘアライングレー `#dddddd`
- 角丸：8px
- パディング：14px 16px
- フォーカス：ボーダーがインクブラックに切り替わり、`0 0 0 2px` のブラックアウターリングが加わる
- エラー：ボーダーが `#c13515`（エラーレッド）に切り替わり、ヘルパーテキストも同じ色

**日付ピッカー**
- カレンダーグリッド：7 列レイアウト、円形 `50%` の日付セル、幅 40–44px
- 選択した範囲：インクブラック `#222222` の背景に白の数字
- 開始/終了のアンカー：より大きな塗りつぶされた円；中間の日付はソフトクラウド `#f7f7f7` のティント

### ナビゲーション

**トップナビ（デスクトップ）**
- 高さ：約 80px
- 背景：`#ffffff`
- 左：Rausch の Airbnb ワードマーク＋ロゴのロックアップ（102×32px）
- 中央：三タブカテゴリピッカー（ホーム / 体験 / サービス）、36–48px の 3D アイコンを上に、16px 500 ラベルを下に；アクティブなタブは 2px インクブラックの下線
- 右：「ホストになる」のテキストリンク、次に 32px の円形グローブ（言語）、次に 36px のハンバーガーアバターメニュー
- ボーダーボトム：1px solid ヘアライングレー `#dddddd`

**トップナビ（モバイル）**
- 全幅の検索ピルが一行を占める：「どこかへ行こう」プレースホルダーと小さな虫眼鏡アイコン
- 下部：三タブカテゴリピッカーが持続（ホーム / 体験 / サービス）——イラストアイコンは約 28px に縮小
- 底部固定タブバー：探す（アクティブ状態 Rausch）/ ウィッシュリスト / ログイン——24px アイコンの上に 12px ラベル

**物件詳細セカンダリナビ**
- ヒーロー画像をスクロールしたあとに表示される固定の横スクロールアンカーリンク（写真 · アメニティ · レビュー · 場所 · ホスト）
- 高さ：56px
- ボーダーボトム：1px solid ヘアライングレー

### 画像の処理

- **主なアスペクト比**：ホームページの物件グリッドは 4:3、体験のヒーロー写真は 16:9、アバターは 1:1
- **角丸**：物件グリッドの画像は 14px、詳細ページのヒーロー写真フレームは 20px、アバターは `50%`
- **詳細ページの画像グリッド**：5 枚の写真グリッド——左に 1 枚の大きな画像（幅 50%）、右に 2×2 の 4 枚の小さな写真、すべて 20px の丸みのある外部コンテナを共有
- **遅延読み込み**：`loading="lazy"` を多用し、ぼかしたプレースホルダープレビューを先行表示
- **カルーセル**：32px の円形矢印ボタンが画像に重なり垂直中央に配置；ドットインジケーターは下端から 12px 上

### シグネチャコンポーネント

**ゲストお気に入り賞のロックアップ**（高評価の物件詳細ページに目立つように表示）
- 44–56px の 700 ウェイトで中央揃えされた評価数字
- 左右に手書き風のローレルリース SVG イラスト、それぞれ高さ約 48px
- 下部：12px 700 大文字で「ゲストお気に入り」のラベル、レタースペーシング 0.32px、サブラベルは 14px 500 アッシュグレー
- 全幅ブロック、コンテナボーダーなし——白いキャンバスの上に直接置かれる

**三タブカテゴリピッカー**（すべてのブラウズ画面の上部に表示）
- 三つのタブ：ホーム / 体験 / サービス
- 各タブ：約 48px の 3D レンダリングイラストアイコン（家、気球、ベル）と 16px 500 ラベルの組み合わせ
- 体験とサービスには現在、アイコンの右上に小さな濃紺「NEW」ピル（12px 700 白テキストにダークブルー背景）が浮かんでいる
- アクティブなタブ：ラベルの下に 2px インクブラックの下線

**インスピレーション都市グリッド**（ホームページ「次の旅行のインスピレーション」）
- デスクトップでは 6 列、モバイルでは 2 列の目的地リンクグリッド
- 各セル：1 行目に 16px 600 の都市名、2 行目に 14px 500 アッシュグレーのレンタル種別サブタイトル（「コテージレンタル」「ヴィラレンタル」）
- 画像なし——テキストのみのグリッド
- 上部にカテゴリタブ（人気 / 芸術と文化 / ビーチ / 山 / アウトドア / アクティビティ / トラベルヒント & インスピレーション / Airbnb フレンドリーアパート）——アクティブなタブは 2px の下線とウェイト変化

**予約スティッキーカード**（物件詳細ページ）
- ユーザーがヒーローをスクロールしたあと、デスクトップではビューポートの上端から 120px 下に固定
- モバイルでは全幅の底部バーに折りたたまれ、「$X / 泊から」ラベルと Rausch の「予約する」ピルを表示
- 常に表示：価格見出し → 日程表示 → ゲスト数セレクター → Rausch CTA → 「まだ請求されません」免責事項

**体験ホストカード**（体験詳細ページ）
- 3:2 のカバー写真を上部に配置した全幅の丸みのあるコンテナ
- ホストの円形アバター（56px）がカバーの下端に 50% 重なって表示
- 重なりの下：ホスト名 16px 700、入会期間 14px 500 アッシュグレー、小さな Rausch の「ホストに連絡」ピルボタン
- レビューとアメニティ/場所ブロックの間のトランジションとして使用

**「知っておくべきこと」ストリップ**（物件詳細ページ）
- ルール/ポリシーの 3 列ブロック（ハウスルール、安全と物件、キャンセルポリシー）
- 各列：上部にアイコン、16px 600 の見出し、14px 500 アッシュグレーの本文、インクブラック下線の「もっと見る」リンク
- セパレーター：全体のストリップの上下に 1px ヘアライングレーのボーダー

## 5. レイアウトの原則

### スペーシングシステム
- **基本単位**：8px
- **抽出されたスケール**：2、3、4、5.5、6、8、10、11、12、15、16、18.5、22、24、32px——ピクセルパーフェクトなアイコンアライメントのためのいくつかのオフグリッド値を持つ細かいスケール
- **セクションパディング**：デスクトップでは上下約 48–64px、モバイルでは 24–32px
- **カード内部パディング**：予約パネルと大型カードに 24px、アメニティ行に 16px、物件カードのメタデータに 12px
- **物件カード間のガター**：デスクトップ 24px、モバイル 16px
- **積み重なるテキスト行の間隔**：4–8px（非常にタイト——旅行物件の「情報密度」の感覚を強化）

### グリッドとコンテナ
- **最大コンテンツ幅**：超ワイドでは 1760–1920px（Airbnb はほとんどのサイトより広くグリッドを広げられる）；ほとんどの詳細ページでは 1280px
- **ホームページ物件グリッド**：≥1760px で 6 列、≥1440px で 5 列、≥1128px で 4 列、≥800px で 3 列、≥550px で 2 列、以下 1 列
- **詳細ページ**：2 列の非対称——メインコンテンツ約 58%、スティッキー予約パネルは右に約 36%、約 6% のガター
- **フッター**：3 列のサポート / ホスティング / Airbnb

### 余白の哲学
Airbnb は情報密度が高いがけして窮屈ではない。余白は*グループ化*のために使われる——物件カードには 24px のガターがあり、各写真が独立したオブジェクトとして読める。しかし各カードの下のメタデータには 4–8px のギャップがあり、価格/都市/日程が一つのユニットのように感じられる。詳細ページの予約パネルには 24px の内部パディングがあるが、その中の行（日付ピッカー、ゲスト数セレクター、CTA）は 12px で積み重なる——カードとページの境界線が、内部のコンテンツよりも多くの分離作業をしている。

### 角丸スケール
| 角丸 | 使用場所 |
|--------|-----|
| 4px | インラインアンカータグ、タグチップ |
| 8px | テキストボタン、ドロップダウン、小さなユーティリティボタン |
| 14px | 物件カードの写真、汎用コンテンツコンテナ、バッジ |
| 20px | プライマリの丸みのあるボタン（ピル形状）、大型画像、予約パネル |
| 32px | 検索バーのピル、超大型コンテナ |
| 50% | すべての円形アイコンボタン、すべてのアバター、ウィッシュリストのハート——システムのシグネチャ丸みのある形状 |

## 6. 奥行きとエレベーション

| レベル | 処理 | 使用場所 |
|-------|-----------|-----|
| 0 | 影なし | 物件カード、本文コンテンツ、テキストのみのセクション |
| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | アクティブ/押下のアイコンボタン（戻る、シェア、お気に入りなど）——インタラクションを示すさりげないリフト |
| 2 | `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` | 予約パネルのスティッキーカード、モーダル、ドロップダウンメニュー——システムのシグネチャ三層エレベーション |
| フォーカスリング | `0 0 0 2px #222222` | アクティブ状態ボタン、フォーカスされた検索入力 |
| ホワイトセパレーターリング | `rgb(255, 255, 255) 0 0 0 4px` | 写真の上に重なる円形ボタン——4px のホワイトリングがボタンとカラフルな画像背景をきれいに分離 |

影の哲学：Airbnb は単一のドロップではなく**積み重なる階層化された影**を使う。三層の予約パネルの影は一つのまとまったリフトとして読めるが、実際には異なる不透明度/ブラー値の三つの独立した影——影の周囲に微妙なアンチエイリアシングを作り出し、重くなることなくプレミアムに感じさせる。

### 装飾的な奥行き
- **写真が奥行き**：システムは視覚的な奥行きを作るために全画面写真に大きく依存している；影とグラデーションは控えめに使われ、写真に重い仕事をさせる
- **ローレルリースのロックアップ**：ゲストお気に入り賞は二つのSVGローレルイラストを使い、そうでなければフラットな評価数字に儀式的なトロフィーのような存在感を与える
- **3D レンダリングのカテゴリアイコン**：ホーム/体験/サービスのアイコンには、アートワークに焼き付けられた柔らかな内部照明と微妙な影がある——ブランドが「立体的な」イラストを許可する唯一の場所

## 7. すべきこととすべきでないこと

### すべきこと
- Rausch `#ff385c` をプライマリアクションとアクティブタブインジケーターのために確保する——装飾的な使用で薄めることは決してしない。
- 写真を自由に呼吸させる——4:3 のクロップ、14–20px の丸みのある角、テキストの重ね表示なし、グラデーションスクリムなし。
- Rausch より下のすべてのテキスト層にはインクブラック `#222222` を使う——これはシステムのニアブラックであり、純粋な `#000000` ではない。
- 三タブカテゴリピッカーの 3D イラストアイコンとフラットなタイポグラフィを組み合わせる——単一の画面内でイラストのスタイルを混ぜない。
- 三つの低い不透明度の影（約 2%、4%、10%）を積み重ねて、シグネチャの予約パネルのエレベーションを作る。
- すべてのカード間と行間のディバイダーにはヘアライングレー `#dddddd` の 1px ボーダーを使う。
- デスクトップでは予約パネルをスティッキーとして扱い、モバイルでは底部固定の予約バーに折りたたむ。
- メタデータグループ内は 4–8px のスペーシングを、カード間は 24px を使う——情報密度は意図的なものだ。

### すべきでないこと
- Rausch / Plus マゼンタ / Luxe パープルのプロダクト階層パレット以外のセカンダリアクセントカラーを導入しない。
- 写真の中にテキストを配置しない——キャプションは常に画像の下に配置し、重ねて表示しない。
- 8px の上付き文字ロール以外では大文字ラベルを使わない。
- アイコンボタンを 50% 以外の角丸にしない——円形はシステムのシグネチャ形状だ。
- 物件カードにドロップシャドウを追加しない——それらは白いキャンバスの上にエレベーションなしで置かれる。
- グラデーション背景を使わない——システム内の唯一のグラデーションは、ワードマーク上の細い Rausch → マゼンタのスイープだ。
- 400 のレギュラーフォントウェイトを使わない——Airbnb Cereal の本文ウェイトは 500。
- Airbnb Cereal VF を別のディスプレイフェイスで上書きしない——システムは意図的にシングルファミリーだ。

## 8. レスポンシブ挙動

### ブレイクポイント

Airbnb は約 60 個のブレイクポイントを宣言している（コンポーネントライブラリからのデザイン時のアーティファクト）が、意味のあるレイアウトの変化ははるかに小さなセットで起こる：

| 名前 | 幅 | 主な変化 |
|------|-------|-------------|
| ウルトラワイド | ≥1760px | 6 列の物件グリッド、1760–1920px の最大コンテンツ幅 |
| デスクトップ XL | 1440–1759px | 5 列グリッド、完全なナビが表示、スティッキー右レール予約パネル |
| デスクトップ | 1128–1439px | 4 列グリッド、スティッキー予約パネルが継続 |
| ラップトップ | 1024–1127px | 3–4 列グリッド、カテゴリナビが水平を維持 |
| タブレット | 800–1023px | 3 列グリッド、グローバル検索が一行ピルに折りたたまれる場合あり |
| 小型タブレット | 550–799px | 2 列グリッド、予約パネルが全幅のインラインブロックに落ちる |
| モバイル | 375–549px | 1 列の積み重なるレイアウト、底部固定タブバーが出現（探す / ウィッシュリスト / ログイン） |
| 小型モバイル | <375px | エッジパディングが 16px に締まる；カテゴリピッカーのアイコンが約 28px に縮小 |

### タッチターゲット
すべてのインタラクティブ要素は 44×44px 以上を満たす。円形アイコンボタンファミリーは 32–44px に設計されており、8–12px の拡張ヒットエリアパディングがある。Rausch のプライマリ予約ボタンは約 48px の高さ。三タブカテゴリピッカーのヒットエリアはラベル＋アイコンの完全な矩形（通常各タブ約 64×80px）。

### 折りたたみ戦略
- **ナビ**：タブレット以上では Airbnb ワードマーク＋三タブピッカーを維持；モバイルではピッカーが検索ピルのすぐ下にスライドし、グローブ/アバターコントロールは底部固定タブバーに移動。
- **検索バー**：デスクトップでは三セグメントピル（場所 / 日程 / ゲスト）と Rausch の円形送信ボタン；モバイルでは単一行の「どこかへ行こう」ピルに折りたたまれ、タップすると全画面の検索シートが開く。
- **予約パネル**：≥1128px でスティッキー右レール；800–1127px ではメインコンテンツカラムのインライン；<800px では底部固定「予約する」ピル。
- **物件グリッド**：ブレイクポイントを横断して 6 → 5 → 4 → 3 → 2 → 1 列にリフロー。
- **詳細ページ画像グリッド**：デスクトップでは 5 枚のレイアウト（大 1 枚 + 小 4 枚）；モバイルではページドットインジケーター付きのスワイプ可能な全画面カルーセルになる。
- **フッター**：3 列レイアウトは <800px で積み重なる単列に折りたたまれる。

### 画像の挙動
- `loading="lazy"` はユニバーサルに適用され、ぼかした `im_w=` URL パラメーター化されたプレビューサムが最初に提供される
- レスポンシブ画像は Airbnb の `muscache.com` CDN に `im_w` クエリパラメーターを使用して幅ベースで配信（`im_w=240`、`im_w=720`、`im_w=1200`、`im_w=2400`）
- アートディレクションのクロップなし——同じ画像がブレイクポイントをまたいでスケールアップ/ダウン
- カルーセルは元のアスペクトにかかわらず一貫した 4:3 比率を維持するために写真の高さを自動調整

## 9. エージェントプロンプトガイド

### クイックカラーリファレンス
- プライマリ CTA：「Rausch (#ff385c)」
- ページ背景：「Canvas White (#ffffff)」
- サブサーフェス：「Soft Cloud (#f7f7f7)」
- 見出し/本文テキスト：「Ink Black (#222222)」
- セカンダリテキスト：「Ash Gray (#6a6a6a)」
- ボーダー/ディバイダー：「Hairline Gray (#dddddd)」
- エラー：「Error Red (#c13515)」
- インフォリンク：「Info Blue (#428bff)」
- Luxe 階層アクセント：「Luxe Purple (#460479)」
- Plus 階層アクセント：「Plus Magenta (#92174d)」

### コンポーネントプロンプトの例
- 「プライマリ予約ボタンを作成：Rausch (#ff385c) の背景、白い Airbnb Cereal 500 ウェイト 16px ラベル、14px × 24px のパディング、8px の角丸、影なし。アクティブ/押下時に `transform: scale(0.92)` と 2px インクブラックのフォーカスリング（`0 0 0 2px #222222`）を追加。」
- 「物件カードを作成：14px 角丸の 4:3 全画面写真、コンテナ影なし；画像の下に 4px のギャップで三行のテキストを積み重ね：都市名 16px 600 インクブラック、レンタル種別 14px 500 アッシュグレー（#6a6a6a）、価格レンジ 16px 500 インクブラックと 14px の「一泊あたり」サフィックス。」
- 「スティッキー予約パネルをデザイン：白い背景、14px 角丸、1px ヘアライングレー（#dddddd）ボーダー、三層エレベーション影（`rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`）、24px パディング、370px 幅、デスクトップではビューポートの上端から 120px 下に固定。コンテンツ：価格見出し、日付ピッカー、ゲスト数ドロップダウン、Rausch のプライマリ CTA、12px アッシュグレーの「まだ請求されません」免責事項。」
- 「三タブカテゴリピッカーを作成：ホーム、体験、サービスとラベルされた等幅の三つのタブ；各タブに約 48px の 3D レンダリングイラストアイコン（家、気球、ベル）を上に、16px 500 インクブラックのラベルを下に；アクティブなタブは 2px インクブラックの下線；体験とサービスアイコンの右上に小さな 12px 700 白の「NEW」ピルをダークネイビーの背景に追加。」
- 「ゲストお気に入り賞のロックアップをレンダリング：52px 700 ウェイトのインクブラックで中央揃えされた評価数字、左右に手書き風 SVG ローレルリース（高さ約 48px）；下に 12px 700 大文字の「GUEST FAVORITE」ラベル、レタースペーシング 0.32px；サブラベルは 14px 500 アッシュグレー；コンテナボーダーなしで全幅ブロックを白いキャンバスの上に直接配置。」

### イテレーションガイド
このデザインシステムで生成された既存のスクリーンを改良する際：
1. 一度に**一つのコンポーネント**に集中する。
2. このドキュメントの具体的なカラー名と 16 進数コードを参照する（「インクブラック #222222」であり「ダークグレー」ではない）。
3. 自然言語の説明と寸法を組み合わせる（長い影の文字列ではなく「さりげない三層エレベーション」）。
4. 望む「感じ」を説明する（「雑誌のような、写真ファースト」vs「情報密度の高いユーティリティ」）。
5. 常に本文には Airbnb Cereal VF の 500 ウェイト、強調には 600–700 をデフォルトにする——400 は使わない。
6. Rausch ピンクを稀少に保つ——一つのビューポートに複数の Rausch カラーの要素が現れる場合、そのうちの一つを中和すべきか検討する。

### 既知のギャップ
- **ホームページ物件グリッドカード**：メインの物件カードグリッド（airbnb.com の主要ビジュアルサーフェス）は、抽出されたホームページスクリーンショットでは完全にキャプチャされなかった——コンテンツは部分的にしか読み込まれなかった。上の物件カードの仕様はインスピレーショングリッドの構造と Airbnb のより広い慣例から推測したもの；本番使用前に、正確なアスペクト比とメタデータ階層をライブサイトで確認すること。
- **体験カテゴリアイコン**：ホーム/体験/サービスの 3D イラストアイコンはラスターアセットとして提供されている；正確なソースファイルの仕様（SVG 対 PNG、レンダリングされたピクセル寸法）はここには記載されていない。
- **アニメーションとトランジションのタイミング**：キャプチャされていない——静的な抽出スコープ。
- **ダークモード**：Airbnb は抽出されたプロダクトサーフェスではネイティブのダークモードを出荷していない；このドキュメントは単一のライトモードテーマのみを説明している。