NXグループ／日本通運（NIPPON EXPRESS） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-10-26 / 対象: https://www.nipponexpress.com/ja/, /ja/brand/our-values-our-journey/

1. Visual Theme & Atmosphere

• デザイン方針: 左に固定した縦長サイドバーナビゲーション＋右の大判写真。ネイビーパープルとライムグリーンの 2 色で、物流企業の「線」を表現する
• 密度: 低〜中。行間比 1.50 が 208/255 要素でゆったり組む
• キーワード: ネイビーパープル、ライム、負の字間、サイドバー

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

1. 指定されている和文 Web フォント tazuganegothicstdn（タズガネゴシック StdN）が、1 バイトも読み込まれていない。 font-family の先頭に置かれ可視 247 要素を占めるのに、@font-face は 7 件すべて欧文（metropolis ×3 / Lora ×3 / swiper-icons ×1）で、タズガネの宣言が無い。フォント要求も 4 件だけ（Metropolis 3 本 ＋ Lora 1 本）。実際に和文を組んでいるのはスタック 2 番目の游ゴシック Medium
2. その結果、スタックが「正しい游ゴシック対策」になっている。 "游ゴシック Medium", "Yu Gothic Medium" を 游ゴシック体, yugothic, 游ゴシック より前に置いているので、Windows でも Regular ではなく Medium が当たる
3. clamp() の中間値に「設計意図」がそのまま書いてある。 clamp(var(--font-size-m), calc(100vw * 20 / 1440), var(--font-size-xl)) ＝「1440px のとき 20px」。マジックナンバーを式で説明する書き方
4. 和文と欧文で文字サイズを出し分ける。 [lang^="ja"] / html[lang="ja"] のセレクタで、同じコンポーネントでも和文だけ 1 段小さいトークンに落とす（例: .cardArrowTtl は欧文 --font-size-xxxl＝1.5rem → 和文 --font-size-xl＝1.25rem）
5. 字間が負で統一されている。 letter-spacing: -0.239976px（= -0.015em × 16px）が可視 255 要素中 99 要素、-0.25px が 45 要素。em 宣言が px の絶対値になって子へ降りる型

2. Color Palette & Roles

Primary（ブランドカラー）

• Primary / Navy (#1a005d): ネイビーパープル。CTA の面・ロゴ・見出し（可視 28 要素で最多）
• Primary Dark (#250d65): フッターのグループ企業リンク（2 要素）
• Accent / Green (#8ec300): ライムグリーン。検索ボタン・アクセント（3 要素）

ランプは 5 段ずつ宣言されている。

css--color--navy-20: #cfcadd;  --color--navy-40: #a096b9;  --color--navy-60: #716297;
--color--navy-80: #443178;  --color--navy-90: #250d65;
--color--green-20: #e5efca; --color--green-40: #cce197; --color--green-60: #bbdb66;
--color--green-80: #9dc73a;

Neutral（ニュートラル）

• Text (#282828): 本文（--color--text）
• Background (#f8f8f8): ページ背景（body）
• Surface (#ffffff): ヘッダー・カード
• Border (#e0e0e0): 区切り線（--color--line）
• Danger (#dd0000): --color--attention / --color--red

宣言はあるが実装に接続されていないものがある（Don't に書くこと）:

• --color--primary-20〜90 は --color--navy-20〜90 とまったく同じ値の別名。片方だけ直すと破綻する
• --color-text-neutral-loud / -medium / -soft / --color-text-primary-loud / -medium は5 つとも #282828 で同値。意味の階層が宣言だけで潰れている（Drupal Olivero テーマの雛形の既定値が残っている）
• --color--gray-saturation: 15% / --color--gray-hue: 201 / --color--primary-hue: 202 は HSL 生成用のパラメータだが、実際の色は hex 直書きでこれらを参照していない

3. Typography Rules

3.1 和文フォント

• 実際に描画されるのは OS ローカルの游ゴシック Medium。和文 Web フォントは 1 本も読み込まれない
• スタック上の先頭 tazuganegothicstdn-regular / -bold は @font-face が存在しない死んだ別名

3.2 欧文フォント

• サンセリフ: metropolis（自社配信。Regular / SemiBold 600 / Bold 700 の 3 本）
• セリフ: Lora（自社配信。400 / 400 italic / 700）
• どちらも /themes/custom/nx_olivero/fonts/ から配信（Drupal の Olivero テーマのカスタム版）

3.3 font-family 指定

css/* 本文（可視 247 要素） */
body {
  font-family: tazuganegothicstdn-regular,
               "游ゴシック Medium", "Yu Gothic Medium",   /* ← Windows はここに当たる */
               游ゴシック体, yugothic, 游ゴシック, "Yu Gothic",
               sans-serif;
  font-size: 1rem;
  line-height: 1;            /* ← 無単位 1。各ブロックで必ず上書きすること */
}

/* 太字（可視 8 要素） */
.heading--bold {
  font-family: tazuganegothicstdn-bold, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, …;
  font-weight: 700;
}

実サイトはこうだが、正しくはこう: 先頭の tazuganegothicstdn-* は @font-face が無いので必ず外れる。 タズガネゴシックを本当に使うなら @font-face を足すか、スタックから外して游ゴシック Medium を先頭に置く。 -bold ファミリーも実体が無いので、太字は合成太字（ブラウザが斜めに太らせる）で出ている（実測: 欧文幅が 100〜500 で 437.61px、600〜900 で 464.53px の 2 段しかない）。

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

html { font-size: 100% } ＝ 16px。7 幅すべてで固定。

サイズトークンは rem で 11 段。

見出しは別系統（--h1-font-size: 1.75rem → --h1-font-size-md: 3.75rem ＝ 28px → 60px）。

ウェイトは 3 段しか出ない: 400（244 要素）/ 700（8 要素）/ 600（3 要素）。 --font-weight-normal: normal と --font-weight-bold: bold の 2 つしか宣言が無い。

3.5 行間・字間

• body { line-height: 1 } は無単位の 1。実測で 1 未満の比率が 1 件も無いことで確定（絶対値 px なら大きい文字で 1 未満が出る）。本文ブロックは 1.5 を宣言し直しており、行間比 1.50 が 208/255 要素
• letter-spacing は負で統一。.wrap { letter-spacing: -0.015em } が 16px に掛かって -0.239976px という絶対値になり、99 要素へ px のまま降りる。ほかに -0.25px（45 要素）、-0.475px（11 要素）、-2.24px（3 要素・大見出し）
• トークンは --font-lts: normal / --font-lts-tight: -0.01em / --font-lts-loose: 0.03em の 3 つだが、実装の -0.015em はこのどれでもない

css/* 字間は親に 1 回だけ書いて px で継承させる。子で em を再宣言しない */
.wrap { letter-spacing: -0.015em; line-height: 1.5; overflow-wrap: anywhere; }

3.6 禁則処理・改行ルール

• word-break は normal（7 幅とも）
• .wrap に overflow-wrap: anywhere。長い英数字の型番・URL が枠を破らないようにしている

3.7 OpenType 機能

• font-feature-settings は可視 255 要素すべて normal。palt を 1 要素も使っていない
• ただし実測では効く余地がある（同一スタック・同一文字列で normal 540px → "palt" 463.73px、"halt" 480px）。詰めたいなら足せる

3.8 縦書き

• 使用しない（2 ページとも 0 要素）

4. Component Stylings

Buttons

css/* Primary — 角丸をほぼ持たない矩形 */
.btn--primary {
  background: #1a005d;
  color: #ffffff;
  border: 1px solid #1a005d;
  padding: 0 48px 0 24px;      /* 右に矢印を置くため左右非対称 */
  border-radius: 0.1875rem;    /* --border-radius ＝ 3px */
}

/* テキストリンク型（面を持たない） */
.btn--text { color: #ffffff; padding: 0 24px 0 32px; border: none; }

/* 検索 — アクセントのライム */
.btn--search { background: #8ec300; color: #000000; }

**padding が左右非対称（0 48px 0 24px）**なのは、右端に矢印アイコンを置くため。

Inputs

css.input { border: 1px solid #e0e0e0; border-radius: 0.1875rem; font-size: 1rem; }

Cards

css.card { background: #ffffff; border: 1px solid #e0e0e0; }
.cardArrowTtl {
  font-size: var(--font-size-xxxl);          /* 欧文 24px */
  line-height: 1.08;
  letter-spacing: -0.4px;
  margin-top: auto;                          /* タイトルをカード下端に寄せる */
}
.cardArrowTtl:is(html[lang^="ja"] *) {
  font-size: var(--font-size-xl);            /* 和文は 20px に落とす */
  line-height: 1.5;                          /* 行間も広げる */
}

和文と欧文で「サイズも行間も」切り替えているのがこのサイトの特徴。

5. Layout Principles

Spacing Scale

基準単位が --sp: 1.125rem ＝ 18px という珍しい値。

css--sp0-25: 0.28125rem;  --sp0-5: 0.5625rem;  --sp0-75: 0.84375rem;
--sp1: 1.125rem;       --sp1-5: 1.6875rem;
--m-xxxs: 0.5rem;      --m-xxs: 1rem;       --m-xs: 1.5rem;

18px 系（--sp*）と 8px 系（--m-*）の 2 系統が並走している。

Container

css--max-width: 84.375rem;        /* 1350px */
--max-bg-color: 98.125rem;     /* 1570px — 背景だけさらに広く取る */
--content-left: 5.625rem;      /* 90px — 左サイドバーの逃げ */
--container-padding: 1.125rem; /* 75rem 以上で 2.25rem */
--site-header-height-wide: 11.25rem;  /* 180px */

Grid

• 左サイドバー（固定ナビ）＋右コンテンツの 2 カラム。ヒーローの写真は 1136×628px

6. Depth & Elevation

• 影は 1 種類も使っていない（box-shadow の分布が 1 種、実質なし）。面の区別は #e0e0e0 のボーダーと #f8f8f8 / #ffffff の塗り分けで行う
• border-radius は --border-radius: 0.1875rem ＝ 3px が基本。ほぼ直角

7. Do's and Don'ts

Do（推奨）

• 游ゴシック Medium を Regular より前に置く（"游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, …）。Windows で細く出るのを防ぐ
• 字間は親に -0.015em を 1 回だけ書いて px で継承させる
• clamp() の中間値を calc(100vw * 20 / 1440) の形で書き、設計幅と設計値を式に残す
• 和文と欧文でサイズ・行間を出し分けるときは :is(html[lang^="ja"] *) を使う
• 長い英数字を扱う面には overflow-wrap: anywhere を入れる
• 面の区別は影ではなくボーダー（#e0e0e0）で行う

Don't（禁止）

• @font-face の無いファミリー名をスタックの先頭に置かない。このサイトの tazuganegothicstdn は必ず外れる死んだ別名で、意図した書体は 1 度も描画されていない
• body { line-height: 1 } のまま本文を置かない。無単位の 1 が全子孫に降りるので、各ブロックで 1.5 を宣言し直す
• letter-spacing を子要素で em 再宣言しない（親の px 継承と二重に掛かる）
• --color--primary-* と --color--navy-* を別の色として扱わない（同値の別名）
• --color-text-neutral-* の 3 段を「濃さの違い」として使わない（5 つとも #282828）
• 影を足さない（実サイトは 0 種）

8. Responsive Behavior

Breakpoints

rem 基準のブレークポイント。html は 7 幅とも 16px 固定。

実測（下層 h1）:

768px を下回った瞬間に流体をやめて 48px 固定に戻す。 767px で一度大きくなる（34.1 → 48px）ので、ここを跨ぐテストを必ず行うこと。

タッチターゲット

• ボタンの最小高さは min(6rem, 6.66667vw)（.btnLg）

9. Agent Prompt Guide

クイックリファレンス

書体:     和文 = 游ゴシック Medium（Web フォントなし）/ 欧文 = metropolis・Lora
スタック: "游ゴシック Medium", "Yu Gothic Medium" を 游ゴシック体 より前に置く
太さ:     400 / 700 の 2 段のみ（600 はごく少数）
字間:     親に letter-spacing: -0.015em を 1 回。子で再宣言しない
行間:     本文ブロックに 1.5 を必ず宣言（body の 1 が降りてくる）
色:       #1a005d（ネイビーパープル）/ #8ec300（ライム）/ #282828（本文）
背景:     #f8f8f8（ページ）/ #ffffff（面）/ #e0e0e0（線）
radius:   3px（0.1875rem）。ほぼ直角
影:       使わない
余白:     --sp: 1.125rem（18px）系と --m-*: 8px 系の 2 系統
clamp:    clamp(最小, calc(100vw * 設計値 / 1440), 最大)

プロンプト例

NXグループ（日本通運）のコーポレートサイト風に、サービス一覧のカードセクションを作ってください。 和文は "游ゴシック Medium", "Yu Gothic Medium" を 游ゴシック体 より前に置いたスタックで、 Web フォントは読み込まないでください。 字間は親に letter-spacing: -0.015em を 1 回だけ書いて継承させ、 本文ブロックには line-height: 1.5 を必ず宣言してください。 色はネイビーパープル #1a005d とライム #8ec300 の 2 色、背景 #f8f8f8、線 #e0e0e0。 影は使わず、border-radius: 3px のほぼ直角で、面はボーダーで区切ってください。 流体サイズは clamp(1rem, calc(100vw * 32 / 1440), 2rem) のように、 設計幅 1440px と設計値を式に残す書き方にしてください。