TOKYU（東急） DESIGN.md

TOKYU（https://www.tokyu.co.jp/）のデザイン仕様書。 東急電鉄・東急グループのポータルサイト。鉄道・生活サービス・沿線情報を統合的に提供するライフスタイルコングロマリット。 実サイトの computed style 実測（2026-06-18 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白背景にウォームグレー（portal-gray-*）の階調を重ね、ティール #045f68 のピル CTA で鉄道・生活インフラとしての落ち着きと信頼感を表現。TOKYU RED #f93628 はアラート・NEW バッジ専用で、CTA には使わない
• 密度: 全階層の line-height が均一に 1.5。見出しの letter-spacing は normal（0）で詰めず、本文も normal。情報密度が高い鉄道ポータルながら、余白で呼吸を確保
• キーワード: ウォームグレー、ティール CTA、ピルボタン、鉄道ポータルの安定感、包括的デザイントークンシステム
• 特徴:
  • 欧文に Inter を最優先、和文に Noto Sans JP を使用。欧文優先のフォールバック構成
  • ブランドカラーは #045f68（深いティール）。CTA ボタン、テキストリンク、イベント日付バッジに使用（CSS 変数 --button-primary / --text-teal / --bg-teal-primary）
  • TOKYU RED #f93628 は --tokyu-red として定義されているが、用途は運行情報アラート・NEW バッジ・遅延証明書リンクなどに限定。ブランドの「赤」は存在するがUIの中心色ではない
  • ウォームグレーパレット（portal-gray-50 〜 portal-gray-900）は STORES のウォームグレーに類似する暖色寄りの灰色体系。RGB で R>G>B の傾向（例: #f8f7f5、#f1eee9、#e4e1da）
  • 路線カラー（東横線 #db0042、目黒線 #009cd3 等）がデザイントークンとして定義されており、鉄道サービス固有のカラーシステムを持つ
  • 124 の CSS Custom Properties を持つ包括的なデザイントークンシステム
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Teal Primary (#045f68): メインのブランドカラー。主要 CTA「検索」の背景、テキストリンク、イベント日付バッジのテキスト色（--button-primary / --bg-teal-primary / --text-teal）
• Teal Dark (#02444c): ホバー時・プレス時のティール（--portal-teal-800）
• Teal Light Surface (#f0fafa): イベント日付バッジの背景面、ティール系の薄い面（--portal-teal-50 / --bg-teal）
• TOKYU RED (#f93628): ブランドの赤。NEW バッジ背景、アイコン等に限定使用（--tokyu-red）

CTA / Buttons

• Primary CTA（ティールピル）: 背景 #045f68 / 文字 #ffffff / radius 999px（pill）/ padding 4px 18px 4px 22px / 14px / weight 700
• Secondary CTA（白ピル）: 背景 #ffffff / 文字 #1a2120 / border 1px solid #e4e1da / radius 999px（pill）/ padding 4px 24px / 16px / weight 700
• Dark CTA（黒ピル）: 背景 #201c18 / 文字 #ffffff / radius 999px / padding 12px 24px / 14px / weight 700 — App Store / Google Play ダウンロード等
• Danger Alert（遅延証明書）: 背景 #fff4f3 / 文字 #d92c1e / border 1px solid #ff8880 / radius 999px

Semantic

• Danger (#d92c1e): エラー、運行情報アラート、NEW バッジテキスト（--text-danger / --bg-new）
• Danger Surface (#fff4f3): 遅延証明書・運行情報の背景面（--bg-danger）
• Danger Border (#ff8880): 遅延アラートの枠線（--border-danger）
• Caution (#805e02): 警告テキスト
• Caution Surface (#fff9e2): 警告の背景面（--bg-caution）
• Focus Ring (#2d60d6): フォーカス状態の枠線（--border-focus）

Neutral — Warm Gray Scale (portal-gray)

Text

Background

Station Line Colors

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先。Google Fonts 由来の Web フォント
• フォールバック: Hiragino Kaku Gothic ProN（Apple OS）→ Hiragino Sans（Apple OS 新記法）→ Meiryo（Windows）→ Noto Sans CJK JP（Linux / Android）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Inter を最優先。和文より前に指定し、欧文部分の表示品質を優先
• フォールバック: Helvetica Neue → Helvetica → Arial → Roboto
• Inter は Google Fonts から読み込み。Variable Font 対応

3.3 font-family 指定

css/* 全要素共通（body, h1〜h4, p, a, span, button, nav, header, footer） */
font-family: Inter, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial,
  Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
  "Noto Sans CJK JP", sans-serif;

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

• 欧文フォント（Inter）を先に指定し、ラテン文字の表示品質を最優先
• 和文は Noto Sans JP が Inter の直後に入り、日本語部分を担当
• Helvetica Neue / Arial / Roboto は Inter 不在時の欧文フォールバック
• 最後に各 OS の和文システムフォントを並べ、Noto Sans JP 不在時の和文カバーを確保

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

実測値（トップページ、2026-06-18 取得）

3.5 行間・字間

行間 (line-height) -- 実測:

• 全階層で統一: 1.5（見出し・本文・補足すべて line-height 1.5）
• イベント日付バッジのみ 1.25（17.5px / 14px）でコンパクト

字間 (letter-spacing) -- 実測:

• 全要素 normal: 見出し・本文・補助テキストすべてで letter-spacing の明示指定なし
• 入力欄のみ 0.2px（0.0125em 相当）の微量トラッキング

ガイドライン:

• TOKYU は全階層で line-height 1.5 を統一。STORES のように見出しをタイトに詰めたり本文を広げたりする緩急はつけず、均一なリズムで安定感を出す
• letter-spacing も normal 統一。フォント自体のメトリクスに任せる方針
• 見出しの差別化は サイズと weight（700） のみで行い、字間では操作しない

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• ヒーロー見出しやカードタイトルは自然改行（<br> による手動改行は少ない）
• ピル系ボタン・バッジは white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Inter は OpenType 機能を豊富に持つが、サイト側で明示指定はしていない

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ティールピル） -- "検索"

• Background: #045f68
• Text: #ffffff
• Padding: 4px 18px 4px 22px（非対称。検索アイコン分を考慮）
• Border Radius: 999px（完全ピル）
• Font: Inter + Noto Sans JP, 14px, weight 700
• Border: none

Secondary CTA（白ピル） -- "イベント一覧" "記事一覧"

• Background: #ffffff
• Text: #1a2120
• Border: 1px solid #e4e1da
• Padding: 4px 24px
• Border Radius: 999px（完全ピル）
• Font: Inter + Noto Sans JP, 16px, weight 700

Secondary Small（白ピル小） -- "更新"

• Background: #ffffff
• Text: #1a2120
• Border: 1px solid #e4e1da
• Padding: 4px 18px
• Border Radius: 999px
• Font: Inter + Noto Sans JP, 14px, weight 400

Dark CTA（黒ピル） -- "App Store" "Google Play"

• Background: #201c18
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 999px
• Font: Inter + Noto Sans JP, 14px, weight 700
• Border: none

Danger Alert（遅延情報ピル） -- "遅延証明書/運行情報"

• Background: #fff4f3
• Text: #d92c1e
• Border: 1px solid #ff8880
• Padding: 8px 16px
• Border Radius: 999px
• Font: Inter + Noto Sans JP, 14px, weight 700

Icon Button（丸） -- 閉じる・スライダー矢印

• Background: #f8f7f5（閉じる）/ #f1eee9（矢印）
• Border Radius: 50%
• Size: 36〜40px

Inputs

• Background: #ffffff
• Border: 1px solid #afaaa2（--border-medium）
• Border (focus): 1px solid #2d60d6（--border-focus）
• Border (error): 1px solid #ff8880（--border-danger）
• Border Radius: 12px（--border-radius-small）
• Padding: 20px 16px（大きめの内側余白）
• Font: Inter + Noto Sans JP, 16px, weight 400
• Letter Spacing: 0.2px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f8f7f5（--bg-default）/ #f1eee9（--bg-strong）
• Border: 1px solid #e4e1da または border なし
• Border Radius: 8px（イベントカードリンク）/ 12px（入力欄）/ 16px（大カード）
• Shadow: 基本フラット

Event Date Badge

• Background: #f0fafa（--bg-teal）
• Text: #045f68（--text-teal）
• Padding: 4px 8px
• Border Radius: 2px
• Font: 14px / weight 700

Header

• Position: sticky top
• Background: #ffffff（白、透過なし）
• Height: 64px 程度

Footer

• Background: #343028（--bg-dark）
• 企業情報セクション: #49443c（--portal-gray-700）
• Text: #ffffff / rgba(255, 255, 255, 0.7)
• Padding: 48px 24px

5. Layout Principles

Spacing Scale（8px ベース）

Container

• Max Width: 1200px 程度
• Padding (horizontal): mobile 16px / desktop 24〜32px

Border Radius Scale

Grid

• カードグリッドは 2〜3 カラム構成
• Gutter: 16〜24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は ウォームグレーのサーフェス階調（#ffffff → #f8f7f5 → #f1eee9）で表現
• フッターのダーク背景（#343028）との明暗コントラストで空間を区切る

7. Do's and Don'ts

Do（推奨）

• 欧文は Inter を最優先、和文は Noto Sans JP を使い、font-family は欧文優先のフォールバック構成にする
• 全階層の line-height は 1.5 で統一する
• 主要 CTA は #045f68（ティール）のピル、セカンダリは 白＋ウォームボーダー のピル
• サーフェスは ウォームグレー（#f8f7f5、#f1eee9、#e4e1da）の3段階で階層を作る
• 補助テキストは #5a605f（--text-secondary）を使う
• 路線情報には 公式路線カラー（--station-line-*）を正確に使用する
• ボタンの weight は 700 を基本にする
• TOKYU RED #f93628 は アラート・NEW バッジ専用 として限定使用する

Don't（禁止）

• CTA ボタンの背景に TOKYU RED #f93628 を使わない -- 赤はアラート・バッジ用。CTA はティール #045f68
• 冷たいグレー（#9ca3af、#6b7280、#f3f4f6）を使わない -- ウォームグレー portal-gray-* を使う
• 本文に line-height: 1.5 未満 を使わない
• 見出しに letter-spacing を指定しない -- TOKYU は全要素 normal（フォントメトリクス依存）
• 角張ったボタン（border-radius 0〜4px の CTA）を使わない -- 主要・セカンダリともピル 999px が基本
• フォーカスリングに ティール色 を使わない -- フォーカスは #2d60d6（ブルー）。ティールと区別する
• 路線カラーを ブランド色の代わり に使わない -- 路線カラーは路線図・駅情報の文脈のみ

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Section H2: 32px → 24px
• H3: 24px → 20px
• 本文サイズは 16px を維持（line-height 1.5 も維持）
• ナビはハンバーガーメニュー化

タッチターゲット

• 主要 CTA: 高さ 44px 以上
• ピルバッジ: 30px 程度
• 丸アイコンボタン: 36〜40px

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Teal Primary (CTA): #045f68
Teal Dark (hover): #02444c
Teal Light Surface: #f0fafa
TOKYU RED (alert/badge only): #f93628
Danger Text: #d92c1e
Danger Surface: #fff4f3
Caution Surface: #fff9e2
Focus Ring: #2d60d6
Dark CTA: #201c18
Footer BG: #343028

Text Primary: #1a2120
Text Secondary: #5a605f
Text Tertiary: #818988
Text Disabled: #afaaa2

Surface Default: #f8f7f5
Surface Strong: #f1eee9
Border Light: #e4e1da
Border Medium: #afaaa2
White: #ffffff

Font: Inter, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, Roboto,
      "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
      "Noto Sans CJK JP", sans-serif

Body Size: 16px / line-height 1.5 / weight 400 / letter-spacing normal
Heading H2: 32px / line-height 1.5 / weight 700 / letter-spacing normal
Heading H3: 24px / line-height 1.5 / weight 700 / letter-spacing normal
Subtext: 14px / line-height 1.5 / weight 400 / color #5a605f
Nav Link: 14px / weight 700

Border Radius: 8px（カード）/ 12px（入力欄）/ 16px（大カード）/ 999px（CTA・ピル）
Shadow: 基本 none。階層はウォームグレーのサーフェス階調で表現

プロンプト例

東急のデザインに従って、沿線イベント一覧セクションを作成してください。
- フォント: Inter, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans CJK JP", sans-serif
- セクション見出し: 32px / weight 700 / line-height 1.5 / letter-spacing normal / color #1a2120
- カードタイトル: 24px / weight 700 / line-height 1.5
- 本文: 16px / weight 400 / line-height 1.5 / color #1a2120
- 補助テキスト: 14px / weight 400 / line-height 1.5 / color #5a605f
- 主要 CTA: 背景 #045f68（ティール）/ 白文字 / border-radius 999px / padding 4px 22px / 14px / weight 700
- セカンダリ CTA: 背景 白 / 文字 #1a2120 / border 1px solid #e4e1da / radius 999px / 16px / weight 700
- イベント日付バッジ: 背景 #f0fafa / 文字 #045f68 / radius 2px / 14px / weight 700
- カード背景: 白 #ffffff、セクション面は #f8f7f5（ウォームサーフェス）
- ボーダー: #e4e1da のウォームライン
- box-shadow は基本 none。立体感はサーフェス階調で表現
- TOKYU RED #f93628 は CTA に使わない（NEW バッジ・アラート用）
- 冷たいグレーは使わない -- ウォームグレー portal-gray-* パレットを使う