東京ステーションホテル（THE TOKYO STATION HOTEL） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: Web フォントを和文に一切使わない。 本文は游ゴシック、格を出したいところだけ游明朝。欧文のセリフ 1 書体（Cormorant Infant）だけを Google Fonts から読む。濃紺 #00335c とグレージュ #9f9691 の 2 色で組む、クラシックホテルの構え
• 密度: 低い。客室 1 室に写真 1 枚と 3 行の説明。本文の行間は 1.75（実測 132 要素）でゆったり組む
• キーワード: 游ゴシック Medium、游明朝のボタン、濃紺、ピル、Web フォント和文ゼロ

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

1. 和文の Web フォントを 1 本も読まない。 フォントファイルの要求は 3 件で、内訳は Cormorant Infant（欧文セリフ・Google Fonts）／ FontAwesome ／ slick（カルーセルのアイコン）だけ。和文はすべて OS ローカル書体で、実測の内訳は 游ゴシックのスタック 860 要素 ／ 游明朝のスタック 77 要素 ／ Cormorant Infant 5 要素
2. Windows 游ゴシック問題を「"Yu Gothic" という名前そのものを @font-face で上書きする」流儀で解いている（下記 3.1）。別名を作る SmartHR 方式でも、スタック順で解く方式でもない 5 つ目の流儀
3. ボタンに明朝を使う。 ヘッダーの「空室検索」は 游明朝 14.4px / weight 500 / letter-spacing 1.6px。ゴシックのボタン（12.8px）と明朝のボタンが同じ画面に同居する
4. body { line-height: 1 } が全子孫に降りている。 実測で行間比 1.00 が トップ 46 要素 / 下層 58 要素。各要素が自分で line-height を宣言し直す前提の設計で、宣言を忘れた要素は行が潰れる

ヒーローの「Classic Luxury」「時代を超えて愛される、上質なひととき」はテキストではない。 実測すると全画面の <video>（1440×810）の上に catch_txt.svg（600×255）と catch_txt_end.svg（200×33） が重なっている。ここを Web フォントで実装しようとしないこと。

CSS Custom Properties は 2 ページとも 0 個。値はすべて CSS に直書きされている。

2. Color Palette & Roles

Primary（ブランドカラー）

濃紺が 2 つあるのは実装の実態。 #00335c がサイト全体のボタン色、#002c59 はヘッダー上部の予約ボタン 3 つだけ。新規実装では #00335c に寄せてよいが、ヘッダーを再現するなら 2 色あることを前提にする。

Neutral（ニュートラル）

• Text Primary (#444444): 本文の既定。下層で可視 173 要素と圧倒的に多い
• Text Black (#000000): 客室名・プラン名など、強めに出す見出し（可視 25〜30 要素）
• Text Nav (#111111): グローバルナビの項目（可視 10 要素）
• Text Muted (#888888): Language、パンくず、補助リンク（可視 14〜15 要素）
• Text Muted 2 (#777777): 時計表示、フッターの施設名（可視 8〜11 要素）
• Border / Divider (#dddddd): 区切り線（可視 5 要素の面）
• Surface (#f5f5f5): 客室カードの面、ページトップへ戻るボタンの地（可視 3〜6 要素）
• Surface 2 (#e7e7e7): 下層の定義リスト <dt>（チェックイン/チェックアウト）の地。可視 20 要素
• Surface 3 (#eeeeee): フッターの「TOKYO STATION CITY」帯
• Background (#ffffff): ページ背景。<body> に直接

rgb(181,175,171) rgb(67,160,71) は Cookie 同意バー（CMP）の色なので採用しない。

3. Typography Rules

3.1 和文フォント

Web フォントは 1 本も使わない。 すべて OS ローカル。

• ゴシック体（本文・UI の主役）: 游ゴシック → ヒラギノ角ゴ ProN W3
• 明朝体（格を出す所）: 游明朝 → ヒラギノ明朝 ProN

Windows 游ゴシック問題の解き方（5 つ目の流儀）

このサイトは "Yu Gothic" というファミリー名そのものを @font-face で定義し直している。

css@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold");   font-weight: bold; }

• 狙いは Windows。素の Yu Gothic は Regular が細すぎて潰れるため、100〜400 のどれを指定しても Medium が返るように再定義している。別名（AdjustedYuGothic など）を作らず、既存の名前を乗っ取るのがこのやり方の特徴
• src が local() だけなのでダウンロードは発生しない（フォントファイルの要求 3 件に和文は 1 件も含まれない）
• macOS では local("Yu Gothic Medium") が解決できず、document.fonts の該当エントリは error になる（実測: weight 400 と bold が error、100/200/300 は要求されないので unloaded）。その場合はスタックの 2 番目 YuGothic（游ゴシック体 Regular）に落ちる
• 結果として macOS は Regular、Windows は Medium で表示される。太さを完全に揃えたいなら、別名方式（@font-face { font-family: "AdjustedYuGothic"; src: local("Yu Gothic Medium") }）にしてスタックの先頭へ置く

実際に出るウェイトは 2 段しかない（measure で確定）

同一ページに position:absolute の隠し div を作り、font-weight だけ変えて getBoundingClientRect().width を比較した実測値（40px / 日本語の組版とAbc123）:

• 游ゴシックは 100〜500 が全部同じ字面。body に font-weight: 500 を当てているが（実測 500 が 105〜224 要素と最多）、400 と見た目は変わらない
• 600 以上は合成太字。游明朝だけ 600 と 700 で段が分かれる
• 700 を当てても「より太い書体」が出てくるわけではないことを前提に設計する

3.2 欧文フォント

• セリフ: Cormorant Infant（Google Fonts・weight 400 のみ・loaded）。SPECIAL OFFERS ROOM TYPES PALACE VIEW のようなセクション見出しと客室名の英字に使う。可視 5〜13 要素だけの少数精鋭
• サンセリフ: "Helvetica Neue", Helvetica, Arial, sans-serif（body の宣言。可視 78 要素）

3.3 font-family 指定

css/* body の宣言（和文の受け皿が無い点に注意） */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
body { line-height: 1; }   /* ← 後勝ちでこちらが効く */

/* 本文・UI の主役（可視 860 要素） */
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3",
             "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;

/* 明朝（可視 77 要素） */
font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
             HGS明朝E, メイリオ, Meiryo, serif;

/* 欧文セリフ（可視 5〜13 要素） */
font-family: "Cormorant Infant", serif;

実サイトはこうだが、正しくはこう（3 点）:

1. body に和文フォントが 1 つも書かれていない。 "Helvetica Neue", Helvetica, Arial, sans-serif だけなので、和文は OS の sans-serif 既定に落ちる。実際に本文として読める 860 要素は別セレクタで游ゴシックを当て直している。新規実装では body に和文スタックを書く
2. 明朝スタックのフォールバックに メイリオ, Meiryo が入っている。 メイリオはゴシック体なので、游明朝もヒラギノ明朝も無い環境では明朝のつもりがゴシックで出る。正しくは 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS P明朝", serif
3. ゴシックスタックの Arial が メイリオ より前にある。 Arial は和文を持たないので和文は素通りするが、欧文だけ Arial に落ちる。和欧を游ゴシックで揃えたいなら Arial は末尾へ

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

html と body はどちらも 16px で完全固定（1440 / 1200 / 1024 / 992 / 991 / 834 / 769 / 768 / 767 / 576 / 575 / 375px の 12 幅すべてで 16px）。流体も段階切替も無い。

3.5 行間・字間

• 本文の行間: 1.75（下層で可視 132 要素）。日本語本文の基準はここ
• カードタイトルの行間: 1.25（可視 27 要素）
• 注記の行間: 1.50（可視 30 要素）
• body の行間は 1（無単位）。実測で行間比 1.00 が トップ 46 / 下層 58 要素。1 未満の比率が 1 件も出ないので、絶対値 px ではなく無単位の 1 と確定している
• 字間は normal が既定（トップ 126 / 下層 230 要素）。空けるのは欧文と、和文のうち「名前」だけ

同じ 18px の客室名でも、欧文は 1.8px・和文は 0.7px と字間を変えている。 和欧で詰め方を分ける設計なので、どちらかに揃えないこと。

3.6 禁則処理・改行ルール

word-break / overflow-wrap / line-break の宣言は body に無く、ブラウザ既定に任せている。

css/* 既定のまま（宣言なし） */
word-break: normal;
overflow-wrap: normal;

新規実装で長い英数字（URL・ISBN・型番）を扱うなら overflow-wrap: break-word を足す。word-break: break-all は使わない（日本語の禁則処理が無効になる）。

3.7 OpenType 機能

css/* コンポーネント単位で宣言する。body には書かない */
.spc_txt       { font-feature-settings: "palt"; }
.category_title{ font-feature-settings: "palt"; }
.tx_ja         { font-feature-settings: "palt"; letter-spacing: 0.05em; }
.c_page_ttl_01 { font-feature-settings: "palt"; }
.c_btn, .c_btn_01, .c_btn_02, .c_btn_03, .c_btn_04 { font-feature-settings: "palt"; }

• 宣言位置はコンポーネント単位（CSS 全文で 5 箇所）。body にも * にも書かない。実測で "palt" が当たっているのは 168 要素（DOM 全走査 / 可視テキストではトップ 34・下層 27 要素）
• 軸の取り違えは無い: "palt" @ horizontal-tb が 168 要素、縦組みは 0 要素
• palt は実効している。同一ページ・同一書体で隠し div の幅を比較すると normal 580.00px → palt 463.45px（約 20% 詰まる）
• halt は使っていない（実測 0 件）

3.8 縦書き

縦組みは使っていない（writing-mode の宣言が CSS に 1 件も無く、実測も 0 要素）。

4. Component Stylings

Buttons

CTA は 3 種類ある。radius が 3 通り（30px / 0 0 4px 4px / 0）なのがこのサイトの特徴。

Primary（ピル） — サイト全体で使う主ボタン

• Background: #00335c
• Text: #ffffff
• Font: 游ゴシックスタック / 12.8px / weight 500 / letter-spacing normal
• Padding: 7px 10px（ヘッダー内）／ 10px 0（フッター内の全幅ボタン）
• Border Radius: 30px（完全なピル）
• Border: なし

Header Reserve（下角丸） — ヘッダー最上部の予約ボタン 3 つ専用

• Background: #002c59
• Text: #ffffff
• Font: 游ゴシックスタック / 12.8px / weight 700
• Padding: 10px 25px
• Border Radius: 0 0 4px 4px（上辺は直角、下辺だけ 4px）
• 画面最上部に貼り付く意匠なので、上側の角は落とさない

Mincho Search（角丸なし・明朝） — 「空室検索」

• Background: #00335c
• Text: #ffffff
• Font: 游明朝スタック / 14.4px / weight 500 / letter-spacing 1.6px
• Padding: 0（親の高さで中央寄せ）
• Border Radius: 0

Inverse（薄グレー面） — 下層の定義リスト見出し

• Background: #e7e7e7
• Text: #373a3c / 14px / weight 700
• Padding: 10px
• Border Radius: 0

Inputs

入力欄の独自スタイルは実測できる範囲に無い（検索はモーダル内の日付ピッカー）。日付ピッカーの選択済みセルは #00335c 地・白文字・radius 4px・padding 6px。

Cards

• Background: #f5f5f5（客室カード）
• Border: なし
• Border Radius: 0
• 画像は角丸を付けず矩形のまま
• Shadow: なし（6. 参照）

Pill Link（フッター）

• Background: #00335c
• Border Radius: 30px
• Padding: 10px 0（全幅）
• お問い合わせフォーム ホテルへのアクセス など

5. Layout Principles

Spacing Scale

CSS Custom Properties が 0 個なので、トークン化された余白スケールは存在しない。実測で頻出する値:

padding-top: 160px でセクションを離すのがこのサイトの間合い。カード同士は詰めるが、セクション間は大きく空ける。

Container

• ページ背景は白、コンテンツは中央寄せ
• グローバルナビは全幅の帯（#9f9691）

Grid

• 客室一覧は画像＋テキストの横並び。グリッドのトークンは宣言されていない

6. Depth & Elevation

サイト本体に影は無い。

実測で得られる box-shadow は 2 種類だけで、どちらも Cookie 同意バー（CMP）のもの:

カード・ボタン・モーダルに影を足さないこと。 奥行きは面の色（#f5f5f5 / #e7e7e7）と余白で作る。

Border Radius

7. Do's and Don'ts

Do（推奨）

• 和文は OS ローカル書体で組む。 游ゴシックを先頭に、ヒラギノ角ゴ ProN W3 を受け皿にする
• Windows 対策の @font-face を書く。 src: local("Yu Gothic Medium") を 100〜400 に割り当てる（このサイトの流儀）か、別名を作ってスタックの先頭に置く
• 明朝は「格を出す一語」に限って使う。 可視 77 要素（全体の 8% 程度）に留める
• 本文の line-height は 1.75、カードタイトルは 1.25、注記は 1.50
• 字間は normal を既定にする。 空けるのは客室名などの固有名詞だけ（欧文 1.8px / 和文 0.7px）
• palt はコンポーネント単位で当てる。 見出し・ボタン・ナビには効かせ、長い本文には当てない
• ボタンの radius は 3 種を使い分ける（ピル 30px / 下角丸 0 0 4px 4px / 角丸なし）
• 面の色は濃紺 #00335c とグレージュ #9f9691 の 2 色に絞る

Don't（禁止）

• 和文の Web フォントを足さない。 Noto Sans JP や Noto Serif JP を親切のつもりで入れると、このサイトの字面ではなくなる
• line-height を宣言し忘れない。 body { line-height: 1 } が降ってくるので、宣言しない要素は行が潰れる。本文ブロックには必ず書く
• font-weight を 600 以上にしない。 游ゴシックは 100〜500 がすべて同じ字面で、600 以上は合成太字になる。太く見せたいなら色かサイズで差をつける
• 明朝のフォールバックに メイリオ を入れない（実サイトは入っているが誤り。ゴシックで出る）
• 影を足さない（サイト本体は box-shadow: none）
• ヒーローのキャッチコピーをテキストで組み直さない。 実物は <video> の上に重ねた SVG 画像
• #00335c と #002c59 を混同しない。 後者はヘッダー最上部の 3 ボタン専用
• rgb(181,175,171) / rgb(67,160,71) は CMP の色なので使わない

8. Responsive Behavior

Breakpoints

html / body の font-size は 12 幅すべてで 16px 固定。文字サイズでブレークポイントを切り替える設計ではない。レイアウト側のメディアクエリは実測で次の 2 点が確認できる:

css.catch_area .catch_title {
  font-family: "Cormorant Infant", serif;
  font-size: 54px;
  letter-spacing: 5px;
}
@media (max-width: 767px) {
  .catch_area .catch_title { font-size: 34px; letter-spacing: 3px; }
}

• 本文サイズはモバイルでも縮まない（14px のまま）。縮むのは見出しと装飾の欧文だけ
• .catch_area .catch_text は 游明朝 22px / font-weight: 100 / letter-spacing 1px。游明朝に 100 を当てると macOS では游明朝 Light が出る

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。ピル型 CTA は padding: 10px 0 ＋ 行高で確保する

フォントサイズの調整

• 本文 14px は据え置き
• 装飾の欧文（Cormorant Infant）だけ 60〜65% に縮める

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #00335c
Primary Dark:  #002c59   （ヘッダー予約ボタン専用）
Accent:        #9f9691   （グローバルナビの帯）
Text Color:    #444444   （本文）／ #000000（見出し）／ #888888（補助）
Background:    #ffffff
Surface:       #f5f5f5 / #e7e7e7

Font（本文）: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3",
              "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
Font（明朝）: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS P明朝", serif
Font（欧文）: "Cormorant Infant", serif

Body Size:   14px
Line Height: 1.75（本文）／ 1.25（カードタイトル）／ 1.50（注記）
Letter Spacing: normal（既定）／ 欧文の固有名詞 1.8px ／ 和文の固有名詞 0.7px
Button Radius: 30px（ピル）
Shadow: none

必ず書くCSS

css@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold");   font-weight: bold; }

body {
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3",
               "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.75;   /* 実サイトは 1 だが、新規実装では本文の値を書く */
  letter-spacing: normal;
  color: #444444;
}

プロンプト例

東京ステーションホテルのデザインシステムに従って、客室一覧のカードを作成してください。
- 和文の Web フォントは読み込まない。游ゴシック → ヒラギノ角ゴ ProN W3 のスタックで組む
- カードの面は #f5f5f5、角丸なし、影なし
- 客室名は英字（Cormorant Infant 18px / letter-spacing 1.8px）と
  和名（游ゴシック 18px / letter-spacing 0.7px）を 2 行で併記する
- 説明文は 14px / line-height 1.75 / letter-spacing normal
- 「詳細を見る」は #00335c の背景・白文字・border-radius 30px のピル
- font-weight は 500 までに留める（600 以上は合成太字になる）