ヤンマー（YANMAR） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に YANMAR Premium Red #dc1e37 一色。角丸は最大でも 10px と硬く、余白は 7px の倍数で刻む。農機・建機・舶用エンジンという重工業のプロダクトを、写真で見せて UI は徹底的に引く
• 密度: 本文 14px / 行間 1.8 の業務寄りの密度。製品スペック・絞り込み検索・型番一覧を扱うため、装飾より一覧性を優先する
• キーワード: プレミアムレッド、7pxグリッド、角丸2〜5px、不透明度ランプ、Web Components

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

1. 色をすべて「不透明度のランプ」で定義している。 --black-100 / 80 / 50 / 30 / 20 / 10 / 5、--white-100 / 50 / 20 / 10 / 5、--yanmar-premium-red-100 / 80 / 50 / 10 / 5 という具合に、1色につき5〜7段の alpha 値が並ぶ。写真の上に重ねても破綻しない設計
2. 余白スケールが 7px 基準。 --spacing-1: 7px から 7 → 14 → 21 → 35 → 56 → 91 → 147 → 238px とフィボナッチ的に伸びる。4px や 8px グリッドではない
3. ボタンが Web Components（<y-button>）。 DOM に <y-button> <y-page-title> というカスタム要素が直接現れる。デザインシステムがコンポーネント単位で実装されている

CSS Custom Properties は 130個。フォントは --font-shorthand-* という font ショートハンド丸ごとのトークンで配られており（例: 700 28px / 1.5 "Noto Sans JP", …）、サイズ・ウェイト・行間・書体が1つの変数に束ねられている。

2. Color Palette & Roles

Primary（ブランドカラー）

--yanmar-premium-red-* という命名そのものがブランドの宣言。 「赤」ではなく「YANMAR プレミアムレッド」として1色だけが名前を持ち、他の色は black / white / blue / green / yellow という汎用名しか与えられていない。

Semantic（意味的な色）

Error は純粋な #ff0000 で、ブランドレッド #dc1e37 とは別物。 混同するとエラー表示がブランド色に見えて意味が伝わらない。赤が2種類あることを前提に実装する。

Neutral — 黒と白の不透明度ランプ

css--black-100: rgba(0, 0, 0, 100%);   --white-100: rgba(255, 255, 255, 100%);
--black-80:  rgba(0, 0, 0, 80%);    --white-50:  rgba(255, 255, 255, 50%);
--black-50:  rgba(0, 0, 0, 50%);    --white-20:  rgba(255, 255, 255, 20%);
--black-30:  rgba(0, 0, 0, 30%);    --white-10:  rgba(255, 255, 255, 10%);
--black-20:  rgba(0, 0, 0, 20%);    --white-5:   rgba(255, 255, 255, 5%);
--black-10:  rgba(0, 0, 0, 10%);
--black-5:   rgba(0, 0, 0, 5%);

/* 写真の上に重ねられない場面用の不透明版 */
--black-80-opaque: #333333;
--black-10-opaque: #e5e5e5;
--black-5-opaque:  #f2f2f2;

実測での使われ方:

• Text Primary (#333333 / --black-80-opaque): 本文。可視 170要素で最多
• Text on Photo (#ffffff): 写真の上の見出し（可視 57要素）
• Text Strong (#000000): ナビ・パンくず（可視 14要素）
• Surface (#f2f2f2 / --black-5-opaque): パンくず・カテゴリ帯の面
• Border (#e5e5e5 / --black-10-opaque) / 入力欄の枠 #d1d1d1
• Disabled (#a3a3a3): 無効なボタンの面
• Background (#ffffff)

--black-80-opaque は rgba(51,51,51,100%) と書かれている。 名前は「黒の80%」だが値は完全不透明の #333333。写真の上には alpha 版、白地の上には opaque 版という使い分けを崩さないこと。

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP のみ（Web フォント。実測で 400 / 700 がロード済み）
• 明朝体: 定義なし・使用なし

3.2 欧文フォント

• ブランド display 書体: DIN Next / DIN Next LT Pro。@font-face は DIN Next（400 / 700 / 800 italic）と DINNextLTPro-Regular / DINNextLTPro-HeavyItalic が宣言されている
• 通常の欧文: Noto Sans / Noto Sans JP の欧文グリフ

DIN Next は宣言されているが、計測した3ページでは1つもロードされなかった（document.fonts の状態がすべて unloaded）。--font-family-brand-display を参照する要素が、これらのページに存在しないため。「ブランド書体は DIN Next」は設計上の事実だが、通常のページ実装で当てにしてはいけない。 見出しに使う場合は明示的に --font-family-brand-display を指定し、Noto Sans JP へのフォールバックが効くことを前提に組む。

3.3 font-family 指定 — 3本のスタックが併存する

css/* (A) ブランド display — 大見出し・キーメッセージ用 */
--font-family-brand-display:
  "DIN Next", "DIN Next LT Pro", "Noto Sans JP",
  "Hiragino Kaku Gothic ProN", "Meiryo", "Helvetica Neue", Arial, sans-serif;

/* (B) 本文・見出しの既定（トークン経由） */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
             "Meiryo", "Helvetica Neue", Arial, sans-serif;

/* (C) 一部モジュールの簡略スタック */
font-family: "Noto Sans JP", "Noto Sans", sans-serif;

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

• 和文優先。Noto Sans JP が先頭（(A) では DIN Next が欧文専用に先行する）
• (B) と (C) が同じサイト内に併存している。 実測では (C) が 185要素、(B) が 63要素。(B) はデザイントークン（--font-shorthand-*）が配る正式なスタック、(C) は個別モジュールの簡略版
• 新規実装では (B) を使う。 "Hiragino Kaku Gothic ProN", "Meiryo" を含む長いスタックが、Noto Sans JP 未読込時の日本語表示を保証する
• メイリオ先頭のレガシースタックではない点に注意（Meiryo は3番目以降のフォールバック）

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

サイズは --font-size-* の11段。16px を基準に上下へ伸びる。

css--font-size-large-6: 112px;   --font-size-base:     16px;
--font-size-large-5:  56px;   --font-size-small-1:  14px;
--font-size-large-4:  37.3px; --font-size-small-2:  12.4px;
--font-size-large-3:  28px;   --font-size-small-3:  11.2px;
--font-size-large-2:  22.4px; --font-size-small-4:  10.2px;
--font-size-large-1:  18.7px;

ウェイトは3段: --font-weight-normal: 400 / --font-weight-bold: 700 / --font-weight-heavy: 800。

--font-shorthand-* トークンがサイズ・ウェイト・行間・書体を丸ごと配る（例: --font-shorthand-heading-large-3: 700 28px / 1.5 "Noto Sans JP", …）。

行間の使い分けが明確:

• 1.3 — ブランド display（--line-height-heading-brand-display）
• 1.5 — 見出し（heading-*）と、22.4px 以上の本文
• 1.8 — 18.7px 以下の本文（base / small-1〜4）

本文は 14px / line-height 1.8。 日本語の業務 UI としてはゆったりした行間で、スペック表や説明文の可読性を優先している。

3.5 行間・字間

• 本文の行間: 1.8（14px で 25.2px）
• 見出しの行間: 1.5
• ブランド display の行間: 1.3
• 字間: 実測で 245/248 要素が normal。残りは CMP（同意バナー）由来の 0.13008px / 0.144px で、ヤンマーの設計値ではない

letter-spacing を足さないこと。 ヤンマーのトークンに letter-spacing の定義は1つも存在しない。

3.6 禁則処理・改行ルール

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

• 型番（YT5113 SA-424 等）と単位つき数値（40–60馬力）は途中で折らない
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css--font-feature-settings: "pkna" on, "palt" on, "pwid" on;

3つの機能を同時に有効化するトークンが定義されている。

• palt: 和文のプロポーショナル字詰め
• pkna: 仮名のプロポーショナル字形（ひらがな・カタカナを字幅に合わせて詰める）
• pwid: 欧文・数字のプロポーショナル字形

ただし実測での適用は 15要素のみ（すべて <div>）。body から全体に継承させてはいない。 見出しやナビなど、詰めたい箇所に個別に当てる運用。

pkna まで指定しているサイトは珍しい。 Noto Sans JP は pkna に対応しており、仮名の間延びが抑えられる。見出しに当てるときは3つセットで使う。

3.8 縦書き

該当なし。全要素 horizontal-tb。

4. Component Stylings

Buttons — <y-button> Web Component

角丸は 5px（--border-radius-1）が既定。ボタンには常に極薄の影が入る。

Primary（塗り）

• Background: #dc1e37
• Text: #ffffff
• Border: 1px solid #dc1e37
• Padding: 7px 14px（= --spacing-1 × 1 / × 2）
• Border Radius: 5px
• Font: 14px / 700
• Shadow: 0px 1px 2px 0px rgba(0, 0, 0, 5%)（--shadow）

Secondary（白地・黒文字のアウトライン）

• Background: #ffffff
• Text: #000000
• Border: 1px solid rgba(0, 0, 0, 0.1)（--black-10）
• Padding: 6.2px 12.4px
• Border Radius: 5px
• Font: 12.4px / 700
• Shadow: --shadow

Tertiary（白地・赤文字のアウトライン）

• Background: #ffffff
• Text: #dc1e37
• Border: 1px solid #dc1e37
• Padding: 7px 14px
• Border Radius: 5px
• Font: 14px / 700

Disabled

• Background: #a3a3a3 / Text: #ffffff / Border Radius: 0px

Filter Chips（絞り込み）

• 未選択: 背景 transparent / 文字 #333333 / 14px 400
• 選択中: 背景 rgba(220, 30, 55, 0.1) / 文字 #dc1e37 / padding 14px / radius 0px

Cards（製品カテゴリカード）

• 写真の上にラベルを直接載せる（面の色を持たない）
• ラベル: 白文字 / 見出しウェイト
• 右下に > シェブロン
• Border Radius: 0px（製品カードは角丸なし）

Navigation Cards（画像＋赤帯）

• 帯の背景: #dc1e37 / 文字 #ffffff / Border Radius: 0px
• 「閉じる」など副次的なものは #a3a3a3

Inputs

• Background: #ffffff
• Border: 1px solid #d1d1d1
• Border Radius: 50px（検索欄はピル）
• Padding: 6px 35px 6px 15px（右側は検索アイコン分）
• Font Size: 12.8px
• Text: #000000
• Focus: box-shadow: 0 0 0 4px rgba(206, 126, 0, 20%)（--focus-shadow）

フォーカスリングが黄色（--yellow-100: #ce7e00 の20%）。 ブランドレッドでも青でもない。実測しないと絶対に出てこない値なので、必ずこの色を使う。

Border Radius Scale

css--border-radius-small-1: 3px;
--border-radius-1:       5px;   /* ボタンの既定 */
--border-radius-2:      10px;
--border-radius-max: 9999px;    /* ピル */

CMP（同意バナー）に現れる 2px はヤンマーの値ではない。3 / 5 / 10 / 9999px の4段が正。

5. Layout Principles

Spacing Scale — 7px 基準

4px でも 8px でもなく 7px グリッド。 7 → 14 → 21 → 35 → 56 → 91 → 147 → 238 は途中から前2項の和に近い伸び方をする。ボタンの padding 7px 14px もこのスケール上にある。

Container

css--content-width: 1110px;
--content-width-sm: calc((1110px - (21px * 5)) / 6 * 4 + (21px * 3));  /* ≒ 731px */

• Max Width: 1110px（実測でも 1110px が19回で最頻出）
• 6カラムグリッド / ガター 21px（--spacing-3）。--content-width-sm は「6カラム中4カラム分」を計算式で表現している
• 左右の余白: 15px（--spacing-content-side）

Motion

css--transition: 0.3s ease-out;

6. Depth & Elevation

ボタンに 0px 1px 2px rgba(0,0,0,5%) が常時入るのがこのシステムの特徴。フラットに見えるが、実際にはごく浅い影で紙のように持ち上げている。

7. Do's and Don'ts

Do（推奨）

• 主色は #dc1e37（YANMAR Premium Red）。 面にも文字にも枠にも同じ値を使う
• 余白は 7px グリッド（7 / 14 / 21 / 35 / 56 / 91px）に載せる
• 本文は 14px / line-height 1.8 / color #333333
• 見出しは line-height 1.5、ブランド display のみ 1.3
• ボタンの角丸は 5px、影は 0px 1px 2px rgba(0,0,0,5%) を常時入れる
• フォーカスリングは黄色の 0 0 0 4px rgba(206,126,0,20%)
• 写真に重ねる面は alpha 版（--black-50 等）、白地の上は opaque 版（#333333 等）を使い分ける
• 見出しを詰めるときは font-feature-settings: "pkna" on, "palt" on, "pwid" on を3つセットで当てる
• コンテナは 1110px、6カラム / ガター 21px

Don't（禁止）

• #dc1e37 と #ff0000 を混同しない。 前者はブランド色、後者はエラー専用（--error-red-100）
• letter-spacing を足さない。 トークンに定義がなく、実測もほぼ全要素 normal
• font-feature-settings を body に置いて全体に継承させない。 実サイトは適用箇所を絞っている（15要素）
• DIN Next が読み込まれる前提で組まない。 計測した3ページでは1つもロードされていない。必ず Noto Sans JP へのフォールバックが成立する形にする
• 角丸を 2px にしない。 それは Cookie 同意バナー（OneTrust）の値で、ヤンマーの --border-radius-* は 3 / 5 / 10 / 9999px
• 余白を 4px / 8px グリッドで刻まない（7px 基準）
• 本文の行間を 1.5 以下にしない（既定は 1.8）
• ボタンから影を外さない（フラットにしない）

計測時の注意 — CMP 混入

トップページの interactive 抽出10件のうち 6件が OneTrust の Cookie 同意バナー（OK / Apply / Cancel / すべて許可する / 選択した内容で確定する / Filter Button）だった。OneTrust がブランドレッド #dc1e37 で設定されているため一見ヤンマーのボタンに見えるが、border-radius: 2px と letter-spacing: 0.13008px はヤンマーのトークンに存在しない値。同意バナー由来の値を設計に取り込まないこと。Filter Button の #3860be（青）も OneTrust の既定色で、ヤンマーの色ではない。

8. Responsive Behavior

Breakpoints

css--breakpoint-sm:  660px;
--breakpoint-md: 1064px;
--breakpoint-lg: 1200px;

CSS には 375 / 768 / 1024px など多数の境界が現れるが、設計トークンとして定義されているのは 660 / 1064 / 1200px の3つ。新規実装はこの3つに従う。

タッチターゲット

• Primary ボタン（14px / padding 7px 14px）の実高は約 39px — 44px 基準を下回る。モバイルでは --spacing-2（14px）以上の縦 padding に広げて 44px を確保する
• フィルタチップ（padding 14px）は 46px 前後で基準を満たす

フォントサイズの調整

• 本文 14px はモバイルでも維持する（既定が既に小さい）
• 見出しは --font-size-large-* のスケール上を1〜2段下げる（56px → 37.3px → 28px）。中間値を作らない
• ブランド display の 112px はモバイルでは 56px（large-5）まで落とす

9. Agent Prompt Guide

クイックリファレンス

Primary Color:   #dc1e37   (YANMAR Premium Red)
Primary Hover:   #de465a
Primary Press:   #b0182c
Primary Tint:    rgba(220, 30, 55, 0.1)
Error:           #ff0000   (ブランドレッドとは別)
Info / Link:     #0080c1
Success:         #199200
Warning:         #ce7e00
Text:            #333333
Text Strong:     #000000
Surface:         #f2f2f2
Border:          #e5e5e5   (入力欄は #d1d1d1)
Disabled:        #a3a3a3
Background:      #ffffff

Font:            "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo",
                 "Helvetica Neue", Arial, sans-serif
Brand Display:   "DIN Next", "DIN Next LT Pro", "Noto Sans JP", … (要フォールバック前提)
Size Scale:      10.2 / 11.2 / 12.4 / 14 / 16 / 18.7 / 22.4 / 28 / 37.3 / 56 / 112px
Body Size:       14px
Line Height:     1.8 (本文) / 1.5 (見出し) / 1.3 (ブランド display)
Letter Spacing:  normal   (足さない)
Font Feature:    "pkna" on, "palt" on, "pwid" on  (詰めたい箇所のみ)
Spacing:         7 / 14 / 21 / 35 / 56 / 91 / 147 / 238px  (7px グリッド)
Radius:          3 / 5 / 10 / 9999px   (ボタンは 5px)
Shadow:          0px 1px 2px rgba(0,0,0,5%)  (ボタン常時)
Focus Ring:      0 0 0 4px rgba(206,126,0,20%)  (黄色)
Container:       1110px / 6カラム / ガター 21px
Breakpoints:     660 / 1064 / 1200px

プロンプト例

ヤンマーのデザインシステムに従って、製品スペックの絞り込み検索ページを作成してください。

- フォント: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", "Helvetica Neue", Arial, sans-serif
- letter-spacing は指定しない
- 本文: 14px / line-height 1.8 / color #333333
- 見出し: 28px / weight 700 / line-height 1.5
- 見出しにのみ font-feature-settings: "pkna" on, "palt" on, "pwid" on を当てる
- 絞り込みボタン（Primary）: 背景 #dc1e37、文字 #ffffff、border 1px solid #dc1e37、
  border-radius 5px、padding 7px 14px、14px/700、box-shadow 0px 1px 2px rgba(0,0,0,0.05)
- リセットボタン（Tertiary）: 背景 #ffffff、文字 #dc1e37、border 1px solid #dc1e37、他は同じ
- 補助ボタン（Secondary）: 背景 #ffffff、文字 #000000、border 1px solid rgba(0,0,0,0.1)、
  border-radius 5px、padding 6.2px 12.4px、12.4px/700
- 選択中のフィルタ項目: 背景 rgba(220,30,55,0.1)、文字 #dc1e37、角丸なし
- 検索入力欄: border 1px solid #d1d1d1、border-radius 50px、padding 6px 35px 6px 15px、12.8px
- フォーカス時: box-shadow 0 0 0 4px rgba(206,126,0,0.2)（黄色のリング）
- 余白は 7px グリッド（7 / 14 / 21 / 35 / 56px）
- コンテナ 1110px、6カラム、ガター 21px
- エラー表示には #ff0000 を使う（#dc1e37 はブランド色なので使わない）