LEXUS DESIGN.md

LEXUS（https://lexus.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 高級車ブランドとしての洗練と静謐。装飾を最小限にし、写真・タイポグラフィ・余白で価値を語るギャラリー型サイト
• 密度: ゆったりとした大きな余白。ヒーローは大判画像を全幅で見せ、テキストは中央に小さく配置
• キーワード: ラグジュアリー、ミニマル、無装飾、上質、静謐、フォトジェニック
• 特徴: 角丸を排した直線基調（border-radius: 0 が原則）。CTA ボタンは黒地白文字のフラット矩形。プロポーショナル字詰め palt を全面に適用し、和欧混植時の字詰め密度を統一している

2. Color Palette & Roles

Primary（ブランドカラー）

LEXUS はブランドカラーを抑制し、白背景に黒テキスト + 黒の CTA で統一。彩度のあるカラーは写真側に委ね、UI 自体は完全モノトーンで構築する。

• Black (#000000): ブランドベース。テキスト、CTA 背景、アイコン
• White (#ffffff): ページ背景、CTA テキスト、ヘッダー背景

Neutral

• Text Primary (#000000): 本文・見出し（純黒を採用。プレミアム感を演出）
• Text Subdued (#646464): パンくず、補足テキスト
• Surface (#ffffff): ページ・ヘッダー・フッター背景
• Divider (#e3e3e3): セクション区切り線・薄いボーダー
• Disabled / Placeholder (#999999): 無効状態
• Section BG (#f2f2f2): 「購入検討サポート」等の薄グレーセクション背景

Accent

• 自動車ブランドとしてのアクセントカラーは原則使用しない。配色は写真・映像で表現し、UI からは取り除く

3. Typography Rules

3.1 和文フォント

LEXUS は モリサワ「リュウミン Lexus Rodin」 をブランド和文書体として使用（ライセンス契約品）。

• Lexus Rodin: ブランド和文ゴシック（モリサワ Rodin の LEXUS カスタマイズ版）
• メイリオ / Meiryo: Windows フォールバック
• sans-serif: 最終フォールバック

CSS Custom Properties の宣言:

css--font-book: Nobel-Book, LexusRodinPro-M, Meiryo, sans-serif;
--font-regular: Nobel-Regular, LexusRodinPro-DB, Meiryo, sans-serif;
--font-bold: Nobel-Bold, LexusRodinPro-B, Meiryo, sans-serif;
--font-lexus: "Lexus Rodin", Meiryo, sans-serif;
--font-mix: Nobel, "Lexus Rodin", Meiryo, sans-serif;

3.2 欧文フォント

• Nobel: ブランド欧文書体（LEXUS が長年採用しているジオメトリック・サンセリフ。Tobias Frere-Jones による Nobel リバイバル）
• ウェイト構成: Nobel-Book（軽め本文）/ Nobel-Regular（標準）/ Nobel-Bold（強調）

3.3 font-family 指定

css/* 標準（本文・ナビ・ボタン） */
font-family: Nobel, "Lexus Rodin", メイリオ, sans-serif;

/* 見出し（ブランド英文字優先） */
font-family: Nobel, "Lexus Rodin", Meiryo, sans-serif;

/* 和文単独で扱う本文 */
font-family: "Lexus Rodin", Meiryo, sans-serif;

フォールバックの考え方:

• 欧文 (Nobel) を先頭に置き、半角英数を必ずブランド書体で表示する
• 和文は Lexus Rodin → メイリオ の順
• 検索フォーム等の入力欄のみ メイリオ, "ヒラギノ角ゴ Pro W3", sans-serif と和文優先（IME 入力との親和性）

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間: line-height: 1.6（25.6px / 16px）。ラグジュアリー領域では 1.6 程度の控えめな行間が定番
• 見出しの行間: line-height: 1.0 を Hero / Section Heading で採用。強い余白で見出しを孤立させて格を高める
• 本文の字間: letter-spacing: normal。palt で字詰め最適化を行う
• 見出しの字間（カードタイトル）: 0.075em（1.575px）。サブ見出しレベルで字間を開け、ラグジュアリー感を出す

3.6 OpenType 機能

cssfont-feature-settings: "palt";

• palt: ほぼ全テキスト要素に適用（body, h1〜h5, p, a, button, span, li, nav, header）
• 入力欄のみ font-feature-settings: "palt" のまま、ヘッダーやフッターも一律適用
• 純粋な数値表示（価格・年式）にも palt がかかるため、半角数字の字詰めも一貫している

4. Component Stylings

Buttons

Primary CTA（"見積りシミュレーション" "モデルを選んで比較"）

• Background: #000000
• Text: #ffffff
• Font: Nobel, "Lexus Rodin", メイリオ, sans-serif
• Font Size: 14.4px
• Font Weight: 500
• Line Height: 23.04px (1.6)
• Padding: 8.22857px（全方向。約 8px。極めてタイトな padding が特徴）
• Border Radius: 0px（角丸なし。直線基調）
• Border: none
• Box Shadow: none
• Letter Spacing: normal
• Font Feature: "palt"

Card-style CTA（"販売店検索" "試乗予約" "認定中古車 CPO" 等）

• Background: #ffffff
• Text: #000000
• Font Size: 16px
• Font Weight: 400
• Line Height: 28px (1.75)
• Border Radius: 8.22857px（カード型のみ角丸あり）
• Border: none（薄い影で浮かせる、または薄ボーダー）
• アイコン + ラベル + 矢印の3点構成

Tertiary（テキストリンク）

• Color: #000000
• Font Size: 14.4px〜16.4px
• Font Weight: 500
• Underline: なし（ホバー時のみ表示する設計が多い）

Inputs

• Font Family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif（IME 親和性のため和文優先）
• Font Size: 15.4px
• Font Weight: 400
• Line Height: 1.6 (24.7px)
• Padding: 10.3px
• Border Radius: 0px
• Border: 薄い #e3e3e3 ベースのボトムライン or フルボーダー
• Background: #ffffff

Cards

• Background: #ffffff
• Border Radius: 0px（モデルカード）/ 8.22857px（サポートメニュー）
• Padding: 0（画像はベタ）
• Shadow: なし or 微かなドロップシャドウ
• 画像優先のレイアウト。カード内テキストは小さく、白い余白で囲む

5. Layout Principles

Container

• Max Width: 1400px（CSS 変数 --designMaxWidthCommon: 1400, --designMaxWidthNavigation: 1400）
• 幅広で大判ヒーローを成立させる設計

Spacing

Grid

• ヒーローは画面全幅 1 カラム
• モデル一覧は 2〜3 カラムグリッド（画像が主役）
• メガメニューは 4〜5 カラム

z-index 設計

CSS Custom Properties で 10 段階に定義（--z-lv-1 〜 --z-lv-10、値は 1, 10, 100, 1000... と桁を上げていく）。逆方向に --z-behindLv-1 〜 -10 も用意。

6. Depth & Elevation

LEXUS はシャドウを最小限に抑える。浮きを避け、面と線で構成する。

7. Do's and Don'ts

Do（推奨）

• すべてのテキスト要素に font-feature-settings: "palt" を適用する（LEXUS の字詰め思想）
• ボタンは原則 border-radius: 0 の矩形、CTA は黒地白文字
• 画像は大判・高画質・余白多め。トリミングは「余白を残す」設計
• 数字（価格、グレード、CC など）はブランド書体（Nobel）で表示する
• セクション見出しに line-height: 1.0 を許容して、視覚的な余白で見出しを際立たせる
• カードタイトル（21px）は letter-spacing: 0.075em を入れて格調を出す

Don't（禁止）

• 鮮やかな彩度の UI カラー（赤・緑・青など）を使わない。色は写真側に委ねる
• ボタンに大きな角丸（pill 型・border-radius 24px+）を使わない。LEXUS の硬質さが失われる
• 装飾的なグラデーションや影を多用しない
• フォントスタックから Lexus Rodin を抜かない（ブランド和欧混植が崩れる）
• 本文を line-height: 2.0 以上で組まない（読み物サイトではないため、開きすぎは LEXUS らしくない）
• 純白以外の背景色（クリーム、オフホワイト等）を多用しない。#ffffff 一択

8. Responsive Behavior

Breakpoints

LEXUS は CSS Custom Properties に iPad サイズを定義しているため、ブレークポイントは iPad ベース。

モバイル時の調整

• ヒーローはフルブリードのまま縮小
• グローバルナビはハンバーガーメニュー化
• フォントサイズは見出しを 60〜70% 程度に縮小（h2 44px → 28〜32px）

イージング

CSS 変数で 8 種類 × 3 方向（in/out/inOut）= 24 個のイージングを定義。アニメーションは --easeOut-quart --easeOut-expo のような長い「キレ」のあるカーブを多用する。

css--easeOut-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--easeOut-expo: cubic-bezier(0.19, 1, 0.22, 1);
--easeInOut-quint: cubic-bezier(0.86, 0, 0.07, 1);

9. Agent Prompt Guide

クイックリファレンス

Brand: LEXUS
Primary Color: #000000 (ブランド黒)
Background: #ffffff
Text: #000000
Subdued Text: #646464
Section BG: #f2f2f2
Divider: #e3e3e3
Font Family: Nobel, "Lexus Rodin", メイリオ, sans-serif
Body Size: 16px
Body Line Height: 1.6
font-feature-settings: "palt"
Border Radius: 0px (CTA) / 8.22857px (カード)
CTA: 黒地白文字、矩形、padding 8px、weight 500、size 14.4px
Container Max Width: 1400px

プロンプト例

LEXUS のデザインシステムに従って、新型 BEV モデルの詳細ページを作成してください。
- フォント: Nobel, "Lexus Rodin", メイリオ, sans-serif
- すべてのテキストに font-feature-settings: "palt" を適用
- ヒーローは画面全幅の大判画像 + 中央に小さなヘッドライン (74px / weight 400 / line-height 1.0)
- CTA ボタンは black bg + white text + border-radius 0 + padding 8px の矩形
- 価格表示も Nobel で組み、(税込) は span 10.3px / weight 500 でぶら下げる
- ページ最大幅 1400px、白背景、彩度のある UI カラーは禁止

字詰め・組版の重要ポイント

1. palt の徹底: 数字・記号・かな・漢字すべてに palt を適用。和欧混植時の密度を均一にする
2. letter-spacing は 0.075em を最大値: カードタイトル（21px）程度で使用。本文には入れない
3. line-height は 1.0 を許容: ヒーロー・セクション見出しは詰めて、外側余白で開く
4. border-radius 0 を基本: CTA は 0、カード型サブメニューのみ 8.22857px
5. 数字は Nobel で: 価格表示も含めてブランド書体で組み、Meiryo にフォールバックさせない

取得日: 2026-05-08 出典: https://lexus.jp/, https://lexus.jp/models/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出