JRA 日本中央競馬会 DESIGN.md

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

参照元: JRA 日本中央競馬会 公式ウェブサイト https://www.jra.go.jp/ のトップページ構造 スタイル方針: Modernism（Swiss / International Typographic Style） 実装スタック: 静的 HTML + CSS / Tailwind CSS v4（@theme によるトークン定義） 実サイトは固定幅 PC レイアウト + 別ドメイン SP サイト（sp.jra.jp）という構成ですが、本仕様では 1 つのレスポンシブ実装に統合します。観測値と本仕様が異なる場合は本仕様を優先してください。

1. Visual Theme & Atmosphere

• デザイン方針: 装飾を持たず、グリッド・タイポグラフィ・余白・1本の罫線だけで階層を作る。競馬という「数字とデータの競技」を、Swiss スタイルの規律で扱う
• 密度: 情報密度が高い一覧型。競馬情報サイトの本質は一覧性であり、余白を増やす方向のリデザインは行わず、密度を保ったまま可読性で解く
• キーワード: Swiss, Grid-Driven, Rule-Only, Data-First, Restrained

三原則

1. 罫線は 1px、影は 0。 面の分離は境界線と余白のみで行う
2. 色は意味のためだけに使う。 緑 = JRA、赤 = GⅠ / 締切、黒 = 本文。装飾色は存在しない
3. 数字が主役。 オッズ・馬番・発走時刻は tabular-nums の等幅で、本文より大きく組む

情報構造（トップページのセクション順）

セクション順は情報の優先度そのものなので、デザイン変更時も並べ替えない。

1 Global header → 2 Mega menu → 3 Utility strip（よく見られる項目） → 4 This week（今週の開催・注目レース） → 5 Pickup news → 6 発走時刻のお知らせ → 7 Campaign → 8 各種サービス → 9 JRAニュース（タブ） → 10 競馬場・施設 → 11 Footer

2. Color Palette & Roles

Primary（ブランドカラー）

• Primary (#007853): メインのブランドカラー。ヘッダー / フッターの地色、CTAボタン、セクション見出しの 4px アンダーライン
• Primary Dark (#004E36): ホバー・プレス時のプライマリカラー
• Primary Tint (#E8F4EF): 緑地上の白ボタンのホバー面

使用面積のルール: 緑を大面積で使ってよいのはヘッダーとフッターの 2 箇所だけ。本文領域では primary ボタンと見出しアンダーラインに限定する。使用比率の目安は Background 70% / Text 20% / Border 7% / Primary 2% / Semantic 1%。

緑地の上のボタン: 緑地に緑ボタンは沈むため、白地 #FFFFFF + #007853 文字に反転する。

Semantic（意味的な色）

• Danger (#D81920): GⅠ表記、締切間近、発走変更、エラー
• Warning (#E05A12): 注意喚起。18px 以上または太字でのみ文字色に使用可（4.1:1）
• Success (#007853): 完了・発売中。Primary と同値（緑は JRA では「正常」の意味を持つ）

Neutral（ニュートラル）

• Text Primary (#0A0A0A): 本文テキスト
• Text Secondary (#4A4A4A): 補足テキスト、ラベル
• Text Disabled (#8C8C8C): 無効状態のテキスト。本文・リンクには使わない（3.5:1）
• Border (#D4D4D4): 区切り線、入力欄の枠、1px 罫線
• Background (#FFFFFF): ページ背景
• Surface (#F4F4F4): ユーティリティ帯、テーブル行ホバー、コードの地

コントラスト比

枠番カラー（競馬の規約・変更不可）

意匠ではなく規約なので値を変えない。表示は 20px の正方形・角丸なし。色だけで意味を伝えないため、必ず馬番の数字を併記する。

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP, ヒラギノ角ゴ ProN, 游ゴシック, Meiryo
• 明朝体: 使用しない（Modernism はサンセリフのみ）

3.2 欧文フォント

• サンセリフ: Archivo, Helvetica Neue, Arial
• セリフ: 使用しない
• 等幅: SFMono-Regular, Consolas, Menlo（コード表記のみ。数値は Archivo + tabular-nums で扱う）

3.3 font-family 指定

css/* 本文 */
font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", Meiryo, sans-serif;

/* 欧文・数字（オッズ、発走時刻、馬番、日付） */
font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;

/* 等幅 */
font-family: SFMono-Regular, Consolas, Menlo, monospace;

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

• 和文フォントを先に指定（日本語の表示品質を優先）
• 数字要素には欧文スタックを明示指定する。 和文を先に置くと数字が Noto Sans JP のグリフに吸われ、Archivo の字面が出ない
• 最後に generic family（sans-serif）を指定
• Web フォントのロードに失敗しても情報が伝わること。font-display: swap

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

タイプスケールは 1.333（Perfect Fourth）。中間段を意図的に持たない。和文ウェイトは 400 と 700 の 2 段階のみ（500・600 は使わない）。

css@theme {
  --text-display: 5.5rem;    --text-display--line-height: 0.92;
  --text-h1:      3rem;      --text-h1--line-height: 1.05;
  --text-h2:      1.75rem;   --text-h2--line-height: 1.2;
  --text-h3:      1.25rem;   --text-h3--line-height: 1.35;
  --text-body:    0.9375rem; --text-body--line-height: 1.75;
  --text-note:    0.8125rem; --text-note--line-height: 1.6;
  --text-num-lg:  2.25rem;   --text-num-lg--line-height: 1;
  --text-num-md:  1.125rem;  --text-num-md--line-height: 1;
}

最小フォントサイズは 13px。 それ以下は法令表記など明確な理由がある場合のみ。

3.5 行間・字間

• 本文の行間 (line-height): 1.75。欧文混在を理由に 1.5 へ落とさない
• 見出しの行間: 1.05〜1.35。和文見出しに 1.5 以上を与えない
• 本文の字間 (letter-spacing): 0.04em。和文はベタ組だと詰まって見える
• 見出しの字間: -0.03em〜-0.01em。和文の大サイズはむしろ詰める

ガイドライン:

• 日本語本文は line-height: 1.5 以上が必須。本仕様では 1.75 を厳守する
• letter-spacing: 0.04em は全角文字の可読性を上げる
• 数値要素には letter-spacing を掛けない（欧文の字送りが崩れる）

3.6 禁則処理・改行ルール

css/* 推奨設定 */
body {
  line-break: strict;          /* 厳格な禁則処理 */
  overflow-wrap: anywhere;     /* 長いURLや英数字の折り返し */
  text-wrap: pretty;           /* 段落末尾の孤立行を回避 */
}
h1, h2, h3 { text-wrap: balance; }

/* レース名・馬名は語中で折り返さない */
.horse-name, .race-name { word-break: keep-all; }

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！ー々ぁぃぅぇぉっゃゅょ
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* 見出し・ナビゲーション — プロポーショナル字詰め */
h1, h2, h3, nav { font-feature-settings: "palt" 1; }

/* 本文 — ベタ組。palt は掛けない */
body { font-feature-settings: normal; }

/* 数値 — 等幅数字。必須 */
.num, table { font-variant-numeric: tabular-nums; }

• palt: 見出しとナビゲーションにのみ適用。本文には適用しない（letter-spacing: 0.04em と競合し、字間が不均一になる）
• kern: 欧文のカーニング。和欧混植の見出しで有効
• tabular-nums: オッズ・斤量・発走時刻・日付に必須。数値が縦に揃わない表は不合格とする

3.8 縦書き

該当なし。Web の可読性とアクセシビリティを優先し、使用しない。

4. Component Stylings

Buttons

高さ 44px（タップターゲット下限）/ Border Radius 0 / transition: background-color 120ms。 Focus: outline: 2px solid #0A0A0A; outline-offset: 2px（緑地の上では #FFFFFF）。

Primary

• Background: #007853
• Text: #FFFFFF
• Padding: 0px 24px
• Border Radius: 0px
• Font Size: 13px
• Font Weight: 700

Secondary

• Background: transparent
• Text: #0A0A0A
• Border: 1px solid #0A0A0A
• Padding: 0px 24px
• Border Radius: 0px

On-Brand（緑地の上に置くボタン）

• Background: #FFFFFF
• Text: #007853
• Border: なし
• Hover Background: #E8F4EF

Danger

• Background: #D81920
• Text: #FFFFFF
• 用途: 締切間近、発走変更

Inputs

• Background: #FFFFFF
• Border: 1px solid #D4D4D4
• Border (focus): 1px solid #0A0A0A + outline: 2px solid #0A0A0A; outline-offset: 2px
• Border Radius: 0px
• Padding: 0px 12px
• Font Size: 15px
• Height: 44px

Cards

• Background: #FFFFFF
• Border: 1px solid #D4D4D4
• Border Radius: 0px
• Padding: 24px
• Shadow: なし（Depth & Elevation セクション参照）
• Hover: Border を #0A0A0A に、内部画像を scale(1.03) 200ms。カード自体は動かさない

Tables（出馬表・オッズ）

競馬情報サイトの中核コンポーネント。

• border-collapse: collapse / font-variant-numeric: tabular-nums
• th: Padding 12px 8px / Font 13px 700 / 下端のみ 2px solid #0A0A0A
• td: Padding 14px 8px / 下端 1px solid #D4D4D4
• Row Hover: Background #F4F4F4
• ゼブラストライプは使わない。 区切りは 1px 罫線のみ
• 最上位オッズは #D81920 + 700
• 横スクロール時は 1 列目（馬番）を position: sticky; left: 0 で固定

Lists（ニュース一覧）

• grid-template-columns: 7.5rem 6rem 1fr（日付 / カテゴリ / 見出し）
• 日付は欧文スタック + tabular-nums
• カテゴリは #4A4A4A のプレーンテキスト。バッジ化しない

Links

a と a:hover の色は必ず明示定義する。未定義のままだとブラウザ既定の青が出る。

Grade Label（GⅠ / GⅡ / GⅢ）

塗りバッジにしない。 文字として組み、GⅠ のみ #D81920 + 700。GⅡ / GⅢ は本文色。

5. Layout Principles

Spacing Scale

縦方向の余白は以下の 6 値のみを使う。中間値を足さない。

Container

• Max Width: 1280px
• Padding (horizontal): 32px（1024px 未満では 20px）

Grid

• Columns: 12
• Gutter: 24px

Corner Radius

css@theme {
  --radius-none: 0px;    /* 全コンポーネントの既定 */
  --radius-pill: 999px;  /* タグのみ許可 */
}

6. Depth & Elevation

box-shadow は使用しない。 Modernism における深度は「面の重なり」ではなく「罫線の強さ」で示す。

メガメニューは高さアニメーションではなく opacity 120ms のみで開閉する（レイアウトシフトを起こさない）。

7. Do's and Don'ts

Do（推奨）

• フォントは必ずフォールバックチェーンを指定する
• 数字要素には欧文スタック（Archivo）を明示指定する
• 日本語本文は line-height: 1.75 / letter-spacing: 0.04em
• 見出しは負の字間（-0.02em）+ font-feature-settings: "palt" 1
• 和文ウェイトは 400 と 700 の 2 段階に留める
• 数値・時刻・オッズ・馬番はすべて font-variant-numeric: tabular-nums
• 面の分離は 1px 罫線で行う
• ブランド緑 #007853 は大面積ではヘッダーとフッターのみ
• 緑地の上のボタンは白地 + 緑文字に反転する
• 縦方向の余白は Spacing Scale の 6 値から選ぶ
• 色のコントラスト比は WCAG AA 以上を確保する
• タップターゲットは 44×44px 以上
• Focus は 2px の outline + offset 2px
• 色だけで状態を示さず、必ず文字か記号を併記する
• prefers-reduced-motion: reduce で全 transition を 0.01ms にする

Don't（禁止）

• font-family に和文フォント1つだけを指定しない（環境依存になる）
• 日本語本文に line-height: 1.2 以下を使わない
• 本文に palt を掛けない（見出し・ナビゲーションのみ）
• 和文に 500・600 のウェイトを使わない
• テキストの色に純粋な #000000 を使わない（本仕様は #0A0A0A）
• Text Disabled #8C8C8C を本文・リンク色に使わない
• 全角・半角スペースを混在させない
• box-shadow を使わない（0 件が正）
• 角丸を使わない（タグの pill のみ例外）
• グラデーション背景を使わない（ブランド緑のグラデも不可）
• 意味のない色を足さない（既定の青リンク、紫のアクセント）
• テーブルにゼブラストライプを敷かない
• 数値列を tabular-nums なしで組まない
• グレードを塗りバッジにしない
• 中央揃えの本文段落を作らない
• スクロール連動のフェードインを使わない（情報が遅れて現れる設計は害）
• アイコンとテキストで同じことを二度言わない

8. Responsive Behavior

Breakpoints

実サイトのような PC / SP のドメイン分離は行わず、1 つのレスポンシブ実装で全幅に対応する。

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• ボタン・タブ・テーブル行のリンクすべてに適用

フォントサイズの調整

• 本文 15px は全ブレークポイントで固定。 モバイルで縮小しない（一覧性が損なわれる）
• Display / Heading 1 のみ clamp() で縮小: clamp(2.25rem, 1.4rem + 2.4vw, 3rem)

テーブル

320px 幅では横スクロール + 馬番列を position: sticky; left: 0。列を落とさない（一覧性が損なわれる）。

ヘッダー

• ≤ 767px: ナビをドロワーに格納。ログインボタンは残す（最優先導線）
• ≥ 768px: 全項目を表示

Reduced Motion

css@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #007853
Primary Dark:  #004E36
Danger:        #D81920
Text Color:    #0A0A0A
Text Sub:      #4A4A4A
Border:        #D4D4D4
Background:    #FFFFFF
Surface:       #F4F4F4

Font (和文): "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
Font (数字): "Archivo", "Helvetica Neue", Arial, sans-serif
Body Size:   15px
Line Height: 1.75
Letter Spacing: 0.04em（本文）/ -0.02em（見出し）
Weights:     400 / 700 のみ

Numbers:  font-variant-numeric: tabular-nums（必須）
Headings: font-feature-settings: "palt" 1（本文には掛けない）

Button:   height 44px / padding 0 24px / radius 0 / weight 700
Radius:   0（pill タグのみ例外）
Shadow:   使用しない。浮きは 1px solid #0A0A0A で表現
Spacing:  8 / 16 / 24 / 40 / 64 / 96 の 6 値のみ
Container: 1280px / padding 32px（1024px 未満は 20px）
Grid:     12 columns / gutter 24px
Focus:    outline 2px #0A0A0A + offset 2px

枠番カラー（規約・変更不可）:
1 #FFFFFF(+border) / 2 #1A1A1A / 3 #E60012 / 4 #0068B7
5 #F6AA00 / 6 #009944 / 7 #F39800 / 8 #E85298

プロンプト例

JRA のデザインシステムに従って、出馬表ページを作成してください。

- プライマリカラー: #007853（ヘッダーとフッターの地色。文字は白）
- ヘッダー内のログインボタンは白地 + #007853 文字（緑地に緑を置かない）
- フォント: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
- 数字要素は "Archivo", "Helvetica Neue", Arial, sans-serif を明示指定
- 行間: 本文は line-height: 1.75 / letter-spacing: 0.04em / color #0A0A0A
- 見出し: font-weight 700 / letter-spacing -0.02em / font-feature-settings: "palt" 1
- テーブルヘッダーの背景: 透明（下端のみ 2px solid #0A0A0A）
- ボーダー: #D4D4D4（行区切りは 1px）
- ゼブラストライプは使わない
- 数値列すべてに font-variant-numeric: tabular-nums
- 枠番は 20px の正方形（角丸なし）+ 馬番の数字を併記
- GⅠ は文字で組み #D81920（塗りバッジにしない）
- box-shadow と border-radius は 0 件
- 縦の余白は 8 / 16 / 24 / 40 / 64 / 96 のみ
- ボタン高さ 44px / radius 0 / focus は outline 2px + offset 2px
- 320px 幅で横スクロール + 馬番列を position: sticky; left: 0
- prefers-reduced-motion 対応

実装チェックリスト

• box-shadow の使用箇所が 0 件
• border-radius がタグの pill 以外で 0 件
• 縦方向の余白が 8 / 16 / 24 / 40 / 64 / 96 の 6 値だけ
• 数値列すべてに tabular-nums が効いている
• 数字要素に欧文スタックが明示指定されている
• 緑の大面積使用がヘッダーとフッターの 2 箇所のみ
• 和文のウェイトが 400 と 700 の 2 種類だけ
• 本文の line-height が 1.75 / letter-spacing が 0.04em
• 本文に palt が掛かっていない
• #000000 が使われていない（#0A0A0A）
• a と a:hover の色が明示定義されている
• 全インタラクティブ要素に 2px の outline フォーカスリング
• タップターゲットが 44×44px 以上
• 320px 幅でテーブルが横スクロール + 馬番列 sticky
• prefers-reduced-motion 対応済み