LIXIL DESIGN.md

Japan

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

Raw DESIGN.md

At a glance

Group: Japan
Main color: #ef7a00Orange design systems
Font: Hiragino Kaku Gothic ProN

Colors in this file

#ffffff
Text on Dark
#ef7a00
がショールームのような温かみを演出し、
#4b4949
Text Primary
#858384
Nav Gray
#f9f7f1
Background（ページ背景）
#e6e6e6
Border Light
#cccccc
Border
#454545
Text Content
#efefef
Section Gray
#000000
純黒を避けたテキスト色

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 機能

cssfont-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（シャープエッジ）
- シャドウは使用しない。ボーダーのみで面を区切る

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

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

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

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/lixil.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "lixil" })

OWNDAYS（オンデーズ）

Japan · Founders Grotesk

OWNDAYS（https://www.owndays.com/jp/ja）のデザイン仕様書。メガネ・サングラスの製造小売チェーン。オンラインストアと店舗情報を統合した EC サイト。実サイトの computed style 実測（2026-05-09 取得）に基づく。

ミツカン（Mizkan）

Japan · Hiragino Kaku Gothic ProN

ミツカン（https://www.mizkan.co.jp/）のデザイン仕様書。 1804年創業、半田の酢からはじまった食品メーカーのコーポレート＋レシピサイト。「やがて、いのちに変わるもの。」をタグラインに掲げる。ブランド色は緑 1 色（#093 ＝ #009933）。CSS 上の実出現は 487 回で、他のどの色よりも桁違いに多い。この 1 色だけで「ミツカンの面」を作る #093 という 3 桁ショートハンドで書かれている。#…

東京茶寮（Tokyo Saryo）

Japan · cardo

東京茶寮（Tokyo Saryo / https://www.tokyosaryo.jp/）のデザイン仕様書。世界初のハンドドリップ日本茶専門店（東京・三軒茶屋）。煎茶をハンドドリップで一杯ずつ淹れる、静かな喫茶体験を提供する。最大の特徴は温かみのあるクリーム地（#f3f0e0）の余白とくすんだゴールド（#b3873d）のアクセント、そして欧文セリフ（Cardo）× 和文ゴシックを組み合わせた端正な editorial …

石見銀山群言堂（Iwamiginzan Gungendo）

Japan · Zen Old Mincho

石見銀山群言堂（https://www.gungendo.co.jp/）のデザイン仕様書。島根県大田市大森町——世界遺産・石見銀山の麓、人口 400 人ほどの集落に本社を置く衣料・生活用品のブランド。1989 年創業（株式会社石見銀山生活文化研究所）。「根のある暮らし」を掲げ、過疎の町に残ることそのものをブランドの主題にしている。サイトの最大の特徴は全ページが明朝体 1 書体（Zen Old Mincho）だけで組まれているこ…

ICHIRAN (一蘭)

Japan · ヒラギノ角ゴ Pro W3

一蘭（https://ichiran.com/）のデザイン仕様書。福岡発の天然とんこつラーメン専門店。「味集中カウンター」で知られる日本を代表するラーメンブランド。 Puppeteer による computed style 実測値（2026-06-10 取得）に基づく。

Schoo（スクー）

Japan · Avenir

Schoo（https://schoo.jp/）のデザイン仕様書。社会人向けオンライン学習プラットフォーム。生放送コミュニティ学習と録画授業を提供。実サイトの computed style 実測（2026-06-22 取得）に基づく。

All Design.md files Browse by font