ライオン（LION） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-11 / 対象: https://www.lion.co.jp/ja/, /ja/company/philosophy/

1. Visual Theme & Atmosphere

• デザイン方針: 白地に深緑1色。塗り面をほとんど使わず、線・丸・緑の文字で階層をつくる。生活用品メーカーの企業サイトとして、清潔さと落ち着きを両立させている
• 密度: ゆったり。本文 16px、記事の行間は 2.0。コンテナ幅 1200px に対して本文カラムは 677〜900px に絞る
• キーワード: 深緑、約物半角、palt、円形ボタン、白地

このサイトの核心は3つある。

1. YakuHanJPs_Noto が font-family の先頭に立っている。 約物（、。「」（））だけを半角字形に差し替える YakuHanJP の Noto 用サブセットで、実測 209 要素がこの指定を持つ。日本語の括弧・句読点まわりのアキを詰めるための設計で、このリポジトリ収録サイトの中でも実装が明確な部類
2. font-feature-settings: "palt" が全体に効いている（実測 816 要素）。CSS 中の宣言はわずか 3 箇所で、body からの継承でサイト全体に行き渡る。YakuHanJP と palt の併用がこのサイトの字組みの正体
3. letter-spacing: 0.06em を基準にしている（CSS 全文で 0.06em の宣言 9 箇所）。ただし computed は px に解決されて継承されるため、宣言のない子要素は font-size が何であっても 0.96px 固定になる（実測 0.06em=91要素 / 0.069em=57要素 / 0.04em=20要素 — これは全部同じ 0.96px）

CSS Custom Properties は実質存在しない（トップに 2 個あるのは Swiper の既定値、下層は 0 個）。設計はトークンではなくクラス名（mod-h1 philosophy-concept-title-ja inner-sns-head）に載っている。

2. Color Palette & Roles

Primary（ブランドカラー）

#00b140（明るい緑）を設計色として使わないこと。 uniqueBackgrounds では #007a46 と並んで 6 回出るが、実測した 6 要素はすべて OneTrust（Cookie 同意バナー）のボタンで、サイト自身の CSS には 1 回も出てこない。ロゴの緑に近いため紛らわしいが、UI の面色は #007a46 だけ。

Surface（淡い面）

• Surface Green (#f3f8f6): サイドナビの選択項目、淡い緑の面（可視 3 要素）
• Surface Blue (#f2f6f9): 情報ブロックの面（可視 3 要素）
• Surface Gray (#f4f4f4): 汎用の淡いグレー面
• Pale Blue (#cddcf2): 図版・図解の面
• Gray Disc (#c2cbcc): カルーセルの非アクティブな円形ボタン（可視 3 要素）
• Navy (#000333): 図版内のダーク面

Neutral（ニュートラル）

• Text Primary (#333333): 本文。可視 131 要素で最多
• Text Footer (#202020): フッターのテキスト（可視 37 要素）
• Text Heading (#000000): h1 h2 の見出しのみ（可視 10 要素）
• Text on Dark (#ffffff): 緑面・写真上のテキスト
• Text Muted (#444444): ヘッダーの補助リンク
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Web フォント）。約物半角サブセット YakuHanJPs_Noto を必ず前置する
• 明朝体は使用しない

3.2 欧文フォント

• サンセリフ（見出し）: Jost（Web フォント）。英語見出しと view more に限定して使う
  • Topics News release Group: 54px / weight 500 / line-height 1.30 / letter-spacing 1.44px（色は #007a46）
  • view more: 16px / weight 400 / #007a46
• サンセリフ（本文中の欧文）: Noto Sans JP の欧文グリフをそのまま使う（専用指定なし）

3.3 font-family 指定

css/* 本文・UI（トップページ / 共通ヘッダー・フッター） */
font-family: YakuHanJPs_Noto, "Noto Sans JP", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;

/* 欧文見出し・view more */
font-family: Jost, serif;

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

• YakuHanJPs_Noto を最優先。このフォントは約物のグリフしか持たないため、残りの文字は次の "Noto Sans JP" に自動的に落ちる。これが「約物だけ半角」を実現する仕組み
• 以降は OS 標準（ヒラギノ角ゴ ProN → メイリオ）で受ける

実装の不整合（実測で確認）: 下層ページ（/ja/company/philosophy/）の body は "Noto Sans JP", sans-serif だけで、YakuHanJPs_Noto が抜けている。 共通ヘッダー／フッターの要素だけが YakuHanJPs_Noto を保っている。新規実装では全ページで前置を統一すること。

Jost, serif の serif フォールバックは誤り。 Jost はサンセリフなので、落ちたときに明朝／セリフになってしまう。新規実装では Jost, sans-serif と書くこと。

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

3.5 行間・字間

• 記事本文の行間: 2.00（16px / 32px、14px / 28px のどちらも 2.0）
• UI・ナビの行間: 1.30（実測 172 要素で最多）。ボタン・ナビ・ラベルはすべてこれ
• ページタイトル・リード文の行間: 1.60
• 字間: 0.06em が基準（本文・ナビ・見出しの大半）。一部の見出しのみ 0.10em（26px スローガン）や 0.025em（18px コンセプトラベル）

ガイドライン:

• 本文は 2.0、UI は 1.3 と、明確に二層に分ける。 中間の 1.5〜1.7 はこのサイトでは使われない
• letter-spacing は em で宣言する。 ただし宣言していない子要素には 計算後の px（0.96px）がそのまま継承される点に注意する。「全部 0.06em」と思って実装すると、大きい見出しほど実サイトより空いてしまう

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• 見出しは <br> による明示的な改行を多用する（企業理念はパーパス（存在意義）、<br>ビリーフス、DNA…）。文節で折り返す位置を人が決める設計

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• palt を body に一度だけ当てて全体に継承させる（実測 816 要素に適用）
• ただし Cookie バナー（OneTrust）と一部の button は normal。 外部ウィジェットには効かない
• YakuHanJPs_Noto と palt を併用する。 前者が約物のグリフ自体を半角に、後者が残りの文字のアキを詰める。役割が違うので両方入れる

3.8 縦書き

該当なし。

4. Component Stylings

このサイトには「塗りの長方形ボタン」がほとんど存在しない。 CTA は円形かピル、それ以外はテキストリンク。

Buttons

Primary（ピル）

• Background: #007a46
• Text: #ffffff
• Border Radius: 50px
• Font: Noto Sans JP / 16px / 400

Circle Outline（view more の矢印。最頻出）

• Size: 54 × 54px
• Background: #ffffff
• Border: 2px solid #007a46
• Border Radius: 50%
• 中身は矢印アイコン。ラベル view more は円の外に Jost で置く

Circle Filled（検索トリガー等）

• Size: 32 × 32px
• Background: #007a46
• Border Radius: 50%

Circle Muted（カルーセルの非アクティブ）

• Background: #c2cbcc / Border Radius: 50%

Nav Item（サイドナビの選択状態）

• Background: #f3f8f6
• Text: #007a46
• Padding: 12px 10px 13px
• Border Radius: 0px
• Font: 15px / 400

Skip Link（アクセシビリティ）

• Background: #ffffff / Text: #007a46
• Border: 1px solid #007a46 / Border Radius: 3px
• Padding: 7px 8px

Text Link

• Color: #007a46、塗りなし。左に 30px のアキを取ってアイコンを置く

Inputs

• Background: #ffffff
• Border Radius: 0px
• Font Size: 16px（ヘッダー検索）
• 検索の送信ラベルは 18px / weight 700 / #007a46

Cards

• Background: #ffffff または #f2f6f9 / #f3f8f6
• Border Radius: 0px
• Shadow: 原則なし（下記参照）

5. Layout Principles

Spacing Scale

明示的なトークンは無い。実測で繰り返し現れる値：

Container

• Max Width: 1200px（実測 1196 / 1200 / 1236 / 1240 が並ぶ）
• 本文カラム: 677px（企業理念ページの読み物幅）
• 中間カラム: 900px（スローガン等の中央寄せブロック）

Grid

• フル幅（1440px）のセクション背景の中に 1200px のコンテナを置く二層構造

6. Depth & Elevation

影をほとんど使わないサイト。 カードやボタンに影を足さないこと。面の区別は背景色（#f3f8f6 / #f2f6f9）と罫線で行う。

7. Do's and Don'ts

Do（推奨）

• font-family の先頭に YakuHanJPs_Noto を置く。 約物だけが半角になり、残りは "Noto Sans JP" に落ちる
• body に font-feature-settings: "palt" を一度だけ宣言して継承させる
• 記事本文は line-height: 2.0、UI は 1.3 と二層で使い分ける
• letter-spacing: 0.06em を基準にする
• **CTA は円形（border-radius: 50%）かピル（50px）**にする。長方形の塗りボタンはこのサイトの語彙に無い
• 英語見出しは Jost / weight 500 / #007a46 で組む
• 本文色は #333333、見出しのみ #000000

Don't（禁止）

• #00b140 を設計色として使わない。 サイトの CSS に存在せず、Cookie 同意バナー（OneTrust）の色でしかない
• Jost, serif と書かない。 実サイトの記述だがフォールバックが誤り。Jost, sans-serif と書く
• 下層ページだからといって YakuHanJPs_Noto を省かない。 実サイトは抜けているが、これは統一すべき不整合
• カード・ボタンに box-shadow を足さない（実サイトは 1 要素のみ）
• border-radius を 4px や 8px にしない。 このサイトの角丸は 0px / 3px / 50px / 50% の4値しかない
• 本文に line-height: 1.5 以下を使わない（このサイトの本文は 2.0）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 円形 CTA は 54 × 54px（WCAG の 44px を満たす）
• 検索トリガーの 32 × 32px は下回るため、モバイルでは拡大すること

フォントサイズの調整

• 一部の見出しは vw ベースで可変（21.92px 13.008px 11.04px のような端数はその痕跡）
• 本文 16px はブレークポイントをまたいで固定

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #007a46
Text Color:    #333333
Heading Color: #000000
Background:    #ffffff
Font (JP): YakuHanJPs_Noto, "Noto Sans JP", "Hiragino kaku Gothic ProN", Meiryo, sans-serif
Font (EN heading): Jost, sans-serif
Body Size: 16px
Line Height: 2.0（本文） / 1.3（UI）
Letter Spacing: 0.06em
font-feature-settings: "palt"
Button Radius: 50px（ピル） / 50%（円）

プロンプト例

ライオンのデザインシステムに従って、企業理念ページのセクションを作成してください。
- font-family の先頭に YakuHanJPs_Noto を置き、"Noto Sans JP" を続ける
- body に font-feature-settings: "palt" を宣言する
- 本文は 16px / line-height: 2.0 / letter-spacing: 0.06em / 色 #333333
- セクション見出しは 32px / weight 700 / 色 #007a46
- 英語のラベル（PURPOSE / BELIEFS）は Jost / weight 500 / 色 #007a46
- 「view more」は 54×54px の白丸に 2px solid #007a46 のボーダー、ラベルは円の外
- 塗りの長方形ボタン・box-shadow・4px や 8px の角丸は使わない
- 本文カラムは 677px、コンテナは 1200px