# DESIGN.md --- LIXIL

> LIXIL（https://www.lixil.co.jp/）のデザイン仕様書。
> 2026-05-22 取得の computed style に基づく。
> LIXIL は日本最大の住宅設備・建材メーカー。INAX・TOSTEM・サンウエーブ等を統合し、トイレ・キッチン・浴室・窓・エクステリアを包括的に展開する。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: 住宅設備の総合メーカーとして、生活者が製品を探しやすい実用的で信頼感のある情報設計。**ウォームクリーム背景（#f9f7f1）** がショールームのような温かみを演出し、**LIXIL Orange（#ef7a00）** のアクセントが要所で誘導を担う。装飾を抑え、製品情報とナビゲーションの明瞭さを最優先にしたコーポレートサイト
- **密度**: 製品カテゴリ・施工事例・ショールーム情報・ニュースを含む情報密度の高いポータル型。カードとボーダーで情報を整理し、余白で呼吸を確保する
- **キーワード**: ウォームクリーム、LIXIL Orange、シャープエッジ CTA、ヒラギノ角ゴ、住宅設備、実用・信頼
- **特徴**: **ヒラギノ角ゴ ProN** を先頭に配したシステムフォントスタック。Web フォントを使わず OS 標準フォントのみで構成。ボタンは **border-radius 0px のシャープエッジ** で統一し、住宅設備メーカーらしい堅実で直線的な印象を構成。palt 非適用、letter-spacing も normal で、装飾を排したシンプルな日本語タイポグラフィ

---

## 2. Color Palette & Roles

### Primary（ブランドカラー）

LIXIL のカラーパレットは住宅設備メーカーらしい温かみのあるクリーム背景とオレンジのアクセントを軸にした、信頼感と親しみやすさを両立する構成。

- **LIXIL Orange** (`#ef7a00`): メインのブランドカラー。リンク色・アクセント要素に使用（rgb 239, 122, 0）。住宅設備の温もりと活力を表現する鮮やかなオレンジ

### Text

- **Text Primary** (`#4b4949`): 本文テキスト。ブラウニッシュダークグレー（rgb 75, 73, 73）。純黒を避けた柔らかい色調で、温かみのある背景との調和を重視
- **Text Content** (`#454545`): コンテンツリンク・製品ページテキスト（rgb 69, 69, 69）
- **Text on Dark** (`#ffffff`): ナビゲーション・ダーク背景上の白テキスト

### Surface

- **Background（ページ背景）** (`#f9f7f1`): ウォームクリーム。ショールームの壁面を想起させる温かみのあるオフホワイト（rgb 249, 247, 241）
- **Surface White** (`#ffffff`): カード・製品ブロックの白面
- **Section Gray** (`#efefef`): セクション区切りのライトグレー背景（rgb 239, 239, 239）
- **Nav Gray** (`#858384`): ユーティリティナビゲーション背景（rgb 133, 131, 132）

### Border

- **Border Light** (`#e6e6e6`): カテゴリリンクの枠線（rgb 230, 230, 230）
- **Border** (`#cccccc`): 製品カードの枠線・区切り線（rgb 204, 204, 204）

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: ヒラギノ角ゴ ProN（Hiragino Kaku Gothic ProN）--- フォールバックチェーンの先頭に配置。macOS 標準搭載のゴシック体
- **レガシーフォールバック**: メイリオ（Windows）、MS Pゴシック（レガシー Windows）

### 3.2 欧文フォント

- **サンセリフ**: ヒラギノ角ゴ ProN の内蔵欧文グリフをそのまま使用。独立した欧文フォントは指定なし
- **セリフ・等幅**: 使用なし

### 3.3 font-family 指定

```css
/* 全テキスト共通 --- ヒラギノ角ゴファーストのシステムフォントスタック */
font-family: "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;
```

**フォールバックの考え方**:
- 先頭のヒラギノ角ゴ ProN で macOS の表示品質を確保。ProN 指定で JIS X 0213 対応
- メイリオは Windows のフォールバック
- MS Pゴシックはレガシー Windows 向け。古い環境でも崩れない堅実な設計
- Web フォントを使わない軽量設計。住宅設備メーカーとして幅広いデバイス・環境での安定表示を重視
- 游ゴシックを含まないシンプルな 3 フォント構成

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

> 以下は computed style 実測値（2026-05-22 取得）

| Role | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|--------|-------------|----------------|------|
| H2（セクション） | 15.95px | 700 | 1.1〜1.5 | normal | セクション見出し。白背景上は #4b4949、ダーク背景上は #ffffff |
| H3（コンテンツ） | 16px | 700 | 1.35 (21.6px) | normal | コンテンツ小見出し。color: #4b4949 |
| H3（ニュース） | 20px | 400 | 1.4 (28px) | normal | ニュースタイトル。weight 400 の軽い見出し |
| Body | 15.2px | 400 | 1.6 (24.32px) | normal | 本文テキスト。color: #4b4949 |
| P（小） | 12px | 400 | 1.58 (19px) | normal | 補足テキスト・注釈。color: #4b4949 |
| Nav | 13.68px | 400 | 1.1 (15.05px) | normal | ナビリンク。color: #ffffff（グレー背景上） |
| A（リンク） | 15.2px | 400 | --- | normal | コンテンツリンク。color: #ef7a00 |

**ウェイトの特徴**:
- 見出し（H2〜H3）は **weight: 700**、本文・リンク・ナビゲーションは **weight: 400** の二段構成
- ニュースタイトル（H3）が例外的に **weight: 400 / 20px** で、サイズで階層を作るパターン
- テキスト色が一貫して **#4b4949（ブラウニッシュダークグレー）** で統一。純黒を使わないことで温かみのある背景との調和を保つ
- リンク色は **#ef7a00（LIXIL Orange）** でアクセント兼ナビゲーション誘導

### 3.5 行間・字間

- **本文の行間**: `line-height: 1.6`（24.32px / 15.2px）--- 日本語として標準的で読みやすい行間
- **見出し（H3）の行間**: `line-height: 1.35`（21.6px / 16px）--- 本文よりコンパクト
- **ニュース見出しの行間**: `line-height: 1.4`（28px / 20px）
- **ナビゲーションの行間**: `line-height: 1.1`（15.05px / 13.68px）--- タイトな行間
- **本文の字間**: `letter-spacing: normal`（0）--- カスタム字間なし
- **見出しの字間**: `letter-spacing: normal`（0）--- こちらもカスタム字間なし

**ガイドライン**:
- letter-spacing は**全要素 normal**。palt も非適用で、ヒラギノ角ゴのデフォルト字間をそのまま使う設計
- line-height は本文 1.6 / 見出し 1.1〜1.4 の**段階構成**
- 本文の line-height 1.6 は住宅設備の仕様説明等の長い文章でも読みやすい水準

### 3.6 禁則処理・改行ルール

```css
/* 推奨設定 */
overflow-wrap: break-word; /* 長いURL・製品型番の折り返し */
```

- 日本語固有の禁則処理は特別な設定なし。ブラウザデフォルトに従う
- 製品型番（例: CW-KB23QA）や品番に英数字が混在するため、overflow-wrap の設定が重要

### 3.7 OpenType 機能

```css
font-feature-settings: normal; /* palt は非適用 */
```

- **palt（プロポーショナル字詰め）**: 非適用。ヒラギノ角ゴのデフォルト字間をそのまま使用
- **kern**: ブラウザデフォルトに委ねる
- 装飾的な字詰めを排し、製品情報の可読性を優先するシンプルな設計

### 3.8 縦書き

- 該当なし。LIXIL コーポレートサイトは横書きのみ

---

## 4. Component Stylings

### Buttons

**Category Link（カード型・白背景）**

LIXIL の CTA は **シャープエッジ（border-radius 0px）** が基本。カード型リンクとして製品カテゴリへの導線を構成。

- Background: `#ffffff`
- Text: `#ef7a00`
- Border: 1px solid `#e6e6e6`
- Border Radius: **0px**（シャープエッジ）
- Padding: `0px`（カード型のためテキスト部分は内包要素で制御）

**Nav Button（グレー背景）**

- Background: `#858384`
- Text: `#ffffff`
- Border Radius: **0px**
- Font Size: 13.68px
- Font Weight: 400

**Product Link（ボーダー付き）**

- Background: `#ffffff`
- Text: `#454545`
- Border: 1px solid `#cccccc`
- Border Radius: **0px**

**ボタンの考え方**:
- LIXIL は **pill 型を一切使わない**。すべてのインタラクティブ要素が **border-radius 0px のシャープエッジ** で統一
- 住宅設備メーカーらしい直線的・建築的な印象を構成。窓枠・ドア枠・タイル等の直線を基調とした製品群との一貫性
- CTA の存在感はボーダーと色（#ef7a00 テキスト or #858384 背景）で表現し、形状の装飾に頼らない

### Inputs

- Background: `#ffffff`
- Border: 1px solid `#cccccc`
- Border (focus): 2px solid `#ef7a00`（推定）
- Border Radius: 0px
- Padding: `8px 12px`
- Font Size: 15.2px

### Cards

- Background: `#ffffff`
- Border: 1px solid `#e6e6e6` or `#cccccc`
- Border Radius: 0px
- Padding: 16px
- Shadow: none --- ボーダーで区切る設計。シャドウは使用しない

### Navigation

- **ユーティリティナビ**: Background `#858384`（Gray）/ Link Color `#ffffff` / Size 13.68px / Weight 400
- **コンテンツリンク**: color `#ef7a00`（LIXIL Orange）/ Weight 400

---

## 5. Layout Principles

### Spacing Scale

実測値に基づく推定:

| Token | Value | 用途 |
|-------|-------|------|
| XS | 4px | インライン余白 |
| S | 8px | カード内パディング（縦） |
| M | 16px | カード内パディング、セクション内小余白 |
| L | 24px | セクション間の小余白 |
| XL | 48px | セクション間余白 |
| XXL | 64px | ページ上下の大余白 |

### Container

- Max Width: 1200px（推定）
- Padding (horizontal): `16〜48px`
- セクション間の区切り: 背景色の切り替え（クリーム → グレー → 白）とボーダーで視覚的に分離

### Grid

- 製品カテゴリグリッド: デスクトップで 3〜4 カラム
- ニュースリスト: 1 カラムのリスト形式
- セクションは全幅背景 + コンテンツ幅制約の二層構造

---

## 6. Depth & Elevation

LIXIL はシャドウを使わず、背景色の温度差とボーダーで階層を構成する。建築・住宅設備メーカーらしいフラットで堅実な奥行き表現。

| Level | 表現 | 用途 |
|-------|------|------|
| 0 | `background: #f9f7f1` | ページ背景（ウォームクリーム） |
| 1 | `background: #ffffff` + `border: 1px solid #e6e6e6` | カード・製品ブロック |
| 1 | `background: #efefef` | セクション区切り背景 |
| 2 | `background: #858384` | ユーティリティナビゲーション |

- ウォームクリーム背景（#f9f7f1）の上に白カード（#ffffff）を **ボーダーで区切って** 配置する構成が基本
- **シャドウ（box-shadow）は使用しない**。ボーダー（1px solid）のみで面の区切りを表現
- 建築素材を扱うメーカーとして、素材の質感よりも情報の明瞭さを優先するフラットな設計

---

## 7. Do's and Don'ts

### Do（推奨）

- フォントは **"Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif** の順で完全なシステムフォントスタックを指定する
- ボタン・カードは **border-radius 0px（シャープエッジ）** にする
- リンク色は **#ef7a00（LIXIL Orange）** にする
- ページ背景は **#f9f7f1（ウォームクリーム）** にする
- カードは白背景（#ffffff）+ ボーダー（1px solid #e6e6e6）で区切る
- テキスト色は **#4b4949（ブラウニッシュダークグレー）** を使い、純黒を避ける
- 本文の line-height は **1.6** を使う（日本語として読みやすい行間）
- letter-spacing は **normal** にする（カスタム字間は使わない）
- ナビゲーション背景は **#858384（Gray）** で白テキスト
- 製品情報の可読性と発見性を最優先にする

### Don't（禁止）

- 明朝体・セリフ系フォントを追加しない（ゴシック体構成がブランドの基本）
- ボタンに pill 型（border-radius 9999px 等）や角丸を使わない。LIXIL は **シャープエッジ（0px）** で統一
- ページ背景を純白（#ffffff）にしない（ウォームクリーム #f9f7f1 がブランドの基本）
- テキストに **#000000（純黒）** を使わない（#4b4949 で統一。温かみのある背景との調和を保つ）
- `palt`（font-feature-settings: "palt"）を適用しない（normal がデフォルト設計）
- letter-spacing にカスタム値を設定しない（全要素 normal）
- カードに box-shadow を追加しない（ボーダーで区切る設計。シャドウは不使用）
- Web フォントを追加しない（システムフォントスタックで統一する設計方針）
- リンク色に青系（#0000ff 等）を使わない（リンクは #ef7a00 オレンジ）
- ナビゲーション背景をブランドオレンジ（#ef7a00）にしない（ナビは #858384 グレー。オレンジはリンク・テキストアクセント用）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | <= 767px | スマートフォン。ハンバーガーナビ化 |
| Tablet | 768〜1023px | タブレット |
| Desktop | >= 1024px | デスクトップ |

### モバイル時の調整

- コンテナの横 padding を縮小
- 製品カテゴリグリッドは 1〜2 カラムに折り返し
- シャープエッジのボタン形状はモバイルでも維持
- ナビゲーションのグレー背景 #858384 はモバイルでも変更なし
- ウォームクリーム背景 #f9f7f1 はモバイルでも変更なし

### タッチターゲット

- 最小サイズ: 44px x 44px（WCAG 基準）
- カード型リンクはカード全体がタップ領域となるため、タッチターゲットは十分

### フォントサイズの調整

- モバイルでは本文 14〜15px、見出しはデスクトップの 80〜90% 程度に縮小
- システムフォントスタックのため、デバイス間で OS 標準フォントにフォールバック

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Brand: LIXIL（リクシル）
Origin: 日本最大の住宅設備・建材メーカー。INAX・TOSTEM・サンウエーブを統合。トイレ・キッチン・浴室・窓・エクステリア
LIXIL Orange: #ef7a00（リンク・アクセント）
Text Primary: #4b4949（ブラウニッシュダークグレー）
Text Content: #454545（製品ページ）
Text on Dark: #ffffff
Background: #f9f7f1（ウォームクリーム）
Section Gray: #efefef
Surface White: #ffffff
Nav Gray: #858384
Border Light: #e6e6e6
Border: #cccccc
Font: "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif
palt: 非適用（font-feature-settings: normal）
letter-spacing: normal（全要素）
Body: 15.2px / 400 / line-height 1.6 / color #4b4949
H2: 15.95px / 700 / color #4b4949 or #ffffff
H3: 16px / 700 / line-height 1.35 / color #4b4949
H3 (news): 20px / 400 / line-height 1.4
P (small): 12px / 400 / line-height 1.58
Nav: 13.68px / 400 / color #ffffff on #858384
Link: 15.2px / 400 / color #ef7a00
CTA Style: bg #ffffff / text #ef7a00 / border 1px solid #e6e6e6 / radius 0px (sharp edge)
Button Shape: シャープエッジ（0px radius）
Shadow: なし（ボーダーのみで面を区切る）
```

### プロンプト例

```
LIXIL のデザインシステムに従って、製品一覧ページを作成してください。
- フォント: "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif
- font-feature-settings: normal（palt は非適用）
- letter-spacing: normal（カスタム字間なし）
- 本文: 15.2px / line-height: 1.6 / color: #4b4949
- 見出し: 16px / font-weight: 700 / color: #4b4949
- ページ背景: #f9f7f1（ウォームクリーム）
- リンク色: #ef7a00（LIXIL Orange）
- ナビゲーション: bg #858384 / text #fff / font-size: 13.68px
- カード: bg #ffffff / border: 1px solid #e6e6e6 / border-radius: 0px
- ボタン: border-radius: 0px（シャープエッジ）
- シャドウは使用しない。ボーダーのみで面を区切る
```

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

1. **ヒラギノ角ゴファースト**: システムフォントスタックの先頭にヒラギノ角ゴ ProN を配置。游ゴシックを含まないシンプルな 3 フォント構成（ヒラギノ → メイリオ → MS Pゴシック）で、macOS と Windows の両方をカバー
2. **シャープエッジの一貫性**: すべてのボタン・カード・入力欄が border-radius 0px。住宅設備メーカーとして、窓枠・ドア枠・タイル等の直線を基調とした製品群と一貫した、建築的な直線美
3. **純黒を避けたテキスト色**: #4b4949 はブラウニッシュな暗灰色で、ウォームクリーム背景（#f9f7f1）との温度感が合う。#000000 を使わないことで、住宅カタログのような落ち着いた紙面の印象を再現
4. **オレンジのアクセント使い**: #ef7a00 はナビゲーション背景ではなくリンク・テキストのアクセントとして使用。ナビゲーション背景はグレー（#858384）。オレンジを面で使わずテキストに限定することで、製品写真を引き立てる控えめな色使い
5. **ボーダーで区切るフラットデザイン**: box-shadow を使わず、1px solid のボーダーで面を区切る。建材・住宅設備カタログの製品仕切りを想起させる、実用的で堅実な奥行き表現
6. **letter-spacing / palt ともに非適用**: ヒラギノ角ゴのデフォルト字間をそのまま使う。製品型番・仕様の正確な表示を重視した、装飾を排した組版

---

**取得日**: 2026-05-22
**出典**: https://www.lixil.co.jp/
**抽出方法**: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出