南海電気鉄道（NANKAI） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 色を「分類の道具」として大量に持つ。 自社の CSS Custom Properties 89 個のうち 40 個以上が色で、路線 6 色・ラベル 7 色・装飾 5 色・前置き（淡色）7 色が名前付きで並ぶ
• 密度: 高い。運行情報・時刻表・路線図・沿線情報を 1 画面に積む公共交通のポータル。可視テキスト 262 要素
• キーワード: 南海オレンジ、路線カラー、10px ルート、字間を触らない、pkna

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

1. :root { font-size: 0.625rem } でルートを 10px にしている。 62.5% ではなく rem で書いてあるが、初期値 16px に対して解決されるので結果は 10px。すべての rem が「px の 1/10」になる（1.4rem = 14px / .4rem = 4px / .3rem .9rem = 3px 9px）。4 幅（1440 / 1200 / 834 / 375px）すべてで 10px 固定
2. 路線ごとの色を CSS 変数で持っている。 --nankai-line: #0077ce / --kouya-line: #04873e / --airport-line: #594bac / --semboku-line: #b1bc3a / --kada-line: #727878 / --gran-tenku: #96191e。路線を色で指すのが前提の情報設計
3. letter-spacing を一切触らない。 可視 262 要素中 258 要素が normal（下層も 59 要素中 57）。CSS 全文で letter-spacing の宣言は 5 回、すべて 0%。残る 2 件は CMP 由来
4. font-feature-settings: "pkna" を :root に 1 回だけ書いて全体に継承させている（可視 1765 要素／下層 518 要素）。palt ではない。約物も欧文も触らず、かなだけをプロポーショナルにする

CSS Custom Properties は 自社 89 個 / プラットフォーム由来 1 個（Swiper の --swiper-theme-color）。--z-* の 17 個で z-index を、--contents-width* でコンテナ幅を、--padding-contents-wrapper--* で余白を管理している。

2. Color Palette & Roles

Primary（ブランドカラー）

路線カラー（Line Colors）

路線カラーは変数名で意味が確定している。 路線名と色を自前で決め直さず、必ずこの 6 個を使うこと。

ラベルカラー（Label Colors）— 沿線情報のタグ

Semantic（意味的な色）

• Danger / NEW (--txt-color--red #dd0000 / --decoration-color--red #ff3838): NEW バッジは #ff3838 の面（可視 6 要素）
• Success (--txt-color--green #1fa45d / --decoration-color--green #04873e): お知らせ の見出し色（可視 2 要素）
• Warning (--txt-color--orange #e8761e)
• IR (#594bac): IRニュース の文字色（空港線と同色）

Neutral（ニュートラル）

• Text Primary (--txt-color--default #333333): 本文・見出し。可視 135 要素。body に変数で指定
• Text Black (#000000): カードの見出し・ナビの第一階層（可視 66 要素）。本文には使わない
• Text on Dark (#ffffff): 面の上のテキスト（可視 51 要素）
• Text Dark Gray (--txt-color--dark-gray #757575)
• Text Light Gray (--txt-color--light-gray #989898) / Lighter (#b9b9b9) / Placeholder (#c5c5c5)
• Border (--border-color--gray #dadce0) / Light (--border-color-light-gray #e1e1e1)
• Surface (#f9f9f9): カードの面。可視 155 要素でサイト最多
• Surface Gray (--bg-color--gray #ececec): 運行情報・検索ブロックの帯（可視 65 要素）
• Section Tints: --bg-color--section-yellow #fff8e5 / --section-orange #fef6f2 / --section-red #fef2f2
• Background (#ffffff): ページ背景

トップページの pageBackground.resolved は #ececec（根拠 viewportTopBySample (9/12)）だが、これは運行情報帯の面色。 下層ページの resolved は #ffffff（根拠 viewportTopBySample (4/4)）。地色は白、#ececec はセクション帯と読む。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP。Google Fonts 配信、wght@400;500;700 の 3 ウェイト。可視 261 要素（下層は 59 要素すべて）
• 明朝体: 使用しない

3.2 欧文フォント

• 欧文専用のフォントは指定していない。Noto Sans JP の欧文グリフをそのまま使う
• フォールバックは sans-serif のみ

3.3 font-family 指定

css:root {
  --font-family: "Noto Sans JP", sans-serif;
  --line-height--root: 1.5;

  font-family: var(--font-family);
  font-size: 0.625rem;              /* 初期値 16px に対して 10px */
  font-feature-settings: "pkna";    /* 可視 1765 要素へ継承 */
  line-height: var(--line-height--root);
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1.4rem;                /* = 14px */
  color: var(--txt-color--default); /* #333333 */
  line-height: inherit;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}

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

• 和文 Web フォント 1 本 + 総称ファミリという最小構成。OS 書体へのフォールバックを書いていないので、Noto Sans JP の取得に失敗すると各 OS の sans-serif 既定に落ちる
• 新規実装でローカル書体を足す場合は "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", sans-serif のように挟むとよい（実サイトはそうしていない）

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

rem 基準が 10px なので、宣言値 × 10 = px。

ウェイトは 400 / 500 / 700 の 3 段だけ。

• @font-face は wght@400;500;700 の 3 本のみで、実測の分布も 400（154）/ 700（71）/ 500（35）。600 の 2 件は CMP 由来
• 600 や 300 を当てないこと。 Google Fonts の URL に無いウェイトは合成になる

3.5 行間・字間

• 行間は 1.5 一本。 :root の --line-height--root: 1.5 を body { line-height: inherit } で受け、可視 255 要素（下層 55 要素）が 1.5。見出しも本文も同じ
• 例外: ロゴ下のタグライン（1.0）、CMP（1.4）だけ
• 字間は normal。 可視 258 要素。CSS 全文の letter-spacing 宣言は 5 回ですべて 0%

ガイドライン:

• 行間を見出しで詰めない。 このサイトは 1.5 を一律で通す。見出しの詰まりは font-size と余白で作る
• 字間を足さない。 代わりに pkna（3.7 参照）でかなの間隔を調整している

3.6 禁則処理・改行ルール

cssbody {
  overflow-wrap: break-word;
  word-wrap: break-word;   /* 旧仕様。実サイトは両方書いている */
}

• word-break は宣言していない（既定の normal）
• word-break: auto-phrase は未使用
• 駅名・路線名は <br> と <wbr> を使わず、コンテナ幅（1080px）内で自然に折り返させる

3.7 OpenType 機能

css:root { font-feature-settings: "pkna"; }   /* 可視 1765 要素 */

• palt ではなく pkna。 pkna はかな（ひらがな・カタカナ）だけをプロポーショナル字形にする機能。約物（、 。 「 」）と漢字・欧文の幅は動かない
• palt に比べて詰まり方が穏やかで、公共交通の案内文のように読み違いが許されない文章に向く選択
• CTA・バッジにも同じ "pkna" が降りている（interactive の全要素で確認）

3.8 縦書き

該当なし（writing-mode の実装は 0 件）。

4. Component Stylings

rem は 10px 基準。以下は px に直した実測値。

Buttons

Primary（南海オレンジ） — 南海アプリ 運賃検索 まちとつながる

• Background: #e94e00（--primary-color）
• Text: #ffffff
• Font: 16px / weight 700 / line-height 1.5
• Padding: 4px（コンテンツ側で高さを作る）
• Border Radius: 4px（.4rem）
• Box Shadow: 0 3px 9px rgba(0,0,0,.2)（0 .3rem .9rem）
• Hover: #ff691d

Accent（黄） — 電車に乗る

• Background: #ffb700（--accent-color）
• Text: #ffffff / 14px / weight 700
• Border Radius: 4px
• Hover: #fad697

Outlined（検索・運行情報） — 運行状況詳細 遅延証明

• Background: #ffffff
• Text: #333333
• Border: 1px solid グレー
• Border Radius: 2px（.2rem）
• Box Shadow: 0 2px 2px rgba(0,0,0,.24)

Blue Filter — 絞り込みボタン

• Background: #3860be / Border: 1px solid #bbbbbb / Border Radius: 17px

Badges / Tags

沿線情報のタグ（ラベルカラーのピル）

• Background: ラベルカラー（#5286ff / #5cbb28 / #b178ff / #fcc100 / #ed5d00）
• Text: #ffffff
• Font: 12px / weight 400
• Padding: 5px 16px
• Border Radius: 16px（1.6rem）
• Box Shadow: none

NEW バッジ

• Background: #ff3838（--decoration-color--red）/ 文字 #ffffff / 12px

Cards

• Background: #f9f9f9（可視 155 要素。白ではなく淡いグレー）
• Border: なし
• Border Radius: 4px
• Shadow: 0 3px 6px rgba(0,0,0,.16)（可視 65 要素でサイト最多）

Inputs

• Background: --bg-color--input-text #f7fafc
• Border: 1px solid --border-color--input-gray #cbd5e0
• Error: 背景 --bg-color--input-error #ffcccc
• Placeholder: --txt-color--placeholder #c5c5c5
• Font: 14px（モバイル拡大を避けるため一部 16px）

5. Layout Principles

Spacing Scale（CSS 変数）

実測で多い gap: 6px（32 件）/ 18px（5 件）/ 8px（3 件）/ 48px / 20px

Container

z-index（CSS 変数で 17 段）

css--z-init: 0;  --z-layer: 1 … --z-layer5: 5;  --z-popup: 6;
--z-anchor-list-fixed: 7;  --z-site-header-global-nav: 8;
--z-site-header-search: 9;  --z-search-nav-trigger: 10;
--z-search-nav-region: 11;  --z-search-nav-floating-btn: 12;
--z-page-to-top: 13;  --z-site-header: 14;
--z-site-header-fixed-menu: 15;  --z-modal: 16;

重なり順を数値ではなく名前で管理している。 新しい重なりを足すときは生の数値を書かず、変数を追加すること。

6. Depth & Elevation

• 影は黒のアルファのみ。 色付きの影は使わない
• 濃さは .16 → .2 → .24 の 3 段で、強いものほどぼかしが小さい（ヘッダー 2px / カード 6px / CTA 9px）

Border Radius

7. Do's and Don'ts

Do（推奨）

• ルートを 10px にする（:root { font-size: 0.625rem }）。以降の寸法はすべて rem で「px の 1/10」として書く
• 色は変数名で指す。路線色は 6 個、タグ色は 7 個、どちらも名前が意味を持つ
• line-height: 1.5 を :root に 1 回だけ書いて全体へ継承させる
• font-feature-settings: "pkna" を :root に 1 回だけ書く
• ウェイトは 400 / 500 / 700 の 3 段
• カードは #f9f9f9 の面 + 0 3px 6px rgba(0,0,0,.16)、CTA は 0 3px 9px rgba(0,0,0,.2)
• z-index は変数で管理する

Don't（禁止）

• letter-spacing を足さない。 このサイトは normal が設計（可視 258 要素）
• palt を使わない。 かなだけ詰める pkna が意図
• 600 / 300 のウェイトを当てない（@font-face に無く、合成になる）
• 見出しの line-height を 1.2 などに詰めない（全体 1.5 で揃えている）
• 路線色・タグ色を自前の色に置き換えない
• 本文の文字色に #000000 を使わない（#333333 が既定。黒はカード見出しだけ）

8. Responsive Behavior

Breakpoints

• @media print, screen and (min-width: 769px) の形が多く、印刷にもデスクトップレイアウトを当てている
• @media (prefers-reduced-motion: reduce) を実装済み

フォントサイズの調整

• html は 4 幅（1440 / 1200 / 834 / 375px）すべてで 10px 固定。 body も 14px / line-height 21px / letter-spacing normal のまま動かない
• 変えるのは見出しサイズとレイアウト。本文のタイポグラフィはブレークポイントをまたいで同一

タッチターゲット

• 電車に乗る / まちとつながる（高さ約 54px）、運行状況詳細（約 42px）
• アイコンボタン（検索 10px ラベル）は 44px を下回る。 モバイルでは当たり判定を広げること
• body { min-width: 320px }

9. Agent Prompt Guide

クイックリファレンス

Primary:        #e94e00  (hover #ff691d)
Accent:         #ffb700  (hover #fad697)
Line 南海本線:   #0077ce
Line 高野線:     #04873e
Line 空港線:     #594bac
Line 泉北線:     #b1bc3a
Line 加太線:     #727878
Line 天空:       #96191e
Text:           #333333
Text Black:     #000000  (カード見出しのみ)
Surface:        #f9f9f9
Surface Band:   #ececec
Border:         #dadce0
Background:     #ffffff

Root Font Size: 10px （:root { font-size: 0.625rem }）← rem は px の 1/10
Font:           "Noto Sans JP", sans-serif
Weights:        400 / 500 / 700 のみ
Body Size:      14px (1.4rem)
Line Height:    1.5（サイト全体で一律）
Letter Spacing: normal（触らない）
font-feature:   "pkna"（palt ではない。:root に 1 回）
Border Radius:  4px（既定） / 2px（outlined） / 16px（タグ） / 50%（アイコン）
Shadow (card):  0 3px 6px rgba(0,0,0,.16)
Shadow (CTA):   0 3px 9px rgba(0,0,0,.2)
Container:      1080px（狭 812px / 広 1280px）
Padding:        30px / 60px / 左右 18px

プロンプト例

南海電鉄のデザインシステムに従って、沿線情報の一覧ページを作成してください。
- :root に font-size: 0.625rem（= 10px）/ font-family: "Noto Sans JP", sans-serif /
  line-height: 1.5 / font-feature-settings: "pkna" を書き、body は font-size: 1.4rem / color: #333333
- letter-spacing は一切宣言しない（normal のまま）
- font-weight は 400 / 500 / 700 だけを使う（600 や 300 は使わない）
- コンテナは 1080px、左右パディング 1.8rem、上 3rem / 下 6rem
- カードは背景 #f9f9f9 / border-radius .4rem / box-shadow 0 .3rem .6rem rgba(0,0,0,.16)
- CTA は #e94e00 / 白文字 / 16px weight 700 / radius .4rem / box-shadow 0 .3rem .9rem rgba(0,0,0,.2)
- 記事のタグは 12px weight 400 / padding 5px 16px / radius 1.6rem で、
  海 #5286ff・ハイキング #5cbb28・カルチャー #b178ff・寺社仏閣 #fcc100・グルメ #ed5d00 を使い分ける
- 路線名を色で示すときは南海本線 #0077ce / 高野線 #04873e / 空港線 #594bac /
  泉北線 #b1bc3a / 加太線 #727878 / 天空 #96191e
- z-index は直書きせず --z-* 変数で管理する
- ブレークポイントは min-width: 769px を主軸に、569 / 1025 / 1281px

補足: 計測で分かった実装の実態

• :root の font-size: 0.625rem は自己参照に見えるが正しく動く。 rem は「ルート要素の font-size」を参照するが、:root 自身に指定する場合は**継承前の初期値（16px）**に対して解決されるため 10px になる。62.5% と等価
• CSS 変数 89 個のうち色が 40 個以上。 接頭辞は --primary- --accent- --txt-color-- --label-color-- --decoration-color-- --prefix-color-- --border-color-- --bg-color-- と役割別に揃っており、ライブラリ由来ではなく自社設計のトークン。プラットフォーム由来は Swiper の 1 個だけ
• --prefix-color--* 7 個（#ffccd3 #ffedcc #fffacc #ffccee #eeccff #b3ffb1 #cce2ff）は淡色のマーカー。 uniqueBackgrounds には出てこなかったので、このページでは使われていない。宣言はあるが未使用の色として扱うこと
• 影と角丸は CSS 上すべて rem で書かれている。 0 .3rem .9rem を「0 0.3rem 0.9rem」と読んで 1 桁間違えないこと（10px 基準なので 3px 9px）
• body に word-wrap: break-word と overflow-wrap: break-word の両方が書いてある。 前者は旧仕様のエイリアスで、新規実装では overflow-wrap だけでよい