帝国ホテル（Imperial Hotel） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白と淡いグレーの余白を大きく取り、金茶（#856c34）1色だけで格を出す。角丸をほぼ使わない矩形基調で、装飾は罫線と字間に寄せる。写真を大きく見せ、UI は写真の邪魔をしない
• 密度: ゆったりとした余白。セクション間のマージンは 64px 固定（--SIZE_MODULE_MARGIN）
• キーワード: 金茶、明朝、広い字間、矩形、余白

このサイトの核心は「見出しもボタンのラベルも明朝（Noto Serif JP）である」こと。 本文だけがゴシック（ヒラギノ角ゴ Pro）で、それ以外の階層は明朝が担う。さらに英字の飾り見出しには Judson（欧文セリフ）を letter-spacing: 0.2em で組む。ボタンの文字が明朝であることに気づかずゴシックで作ると、格が丸ごと失われる。

106個の CSS Custom Properties で設計されたトークン駆動のサイトでもある。命名は --COLOR_BRAND_PRIMARY のような全大文字スネークケース。

2. Color Palette & Roles

CSS 変数の宣言と実測値が一致した色だけを「実装」として扱う（不一致は 2.4 に列挙）。

Primary（ブランドカラー）

• Imperial Gold (#856c34 / --COLOR_BRAND_PRIMARY): ブランドの中核。CTA の面色、見出しの差し色、テーブルヘッダーの文字色。実測で最多（18件）
• Gold Hover (#755f2d / --COLOR_BRAND_PRIMARY_HOVER, --COLOR_BACKGROUND_BUTTON_HOVER): ボタンのホバー
• Gold Muted (#927f56): 一部の小さな「詳細を見る」リンク。#856c34 より淡い

Surface（面色）

• Background (#ffffff / --COLOR_BACKGROUND_LIGHT): ページ背景。body に明示指定
• Surface (#f5f5f5 / --COLOR_BACKGROUND_LIGHT_2): セクションの面。下層ページで 19 件と支配的
• Surface Dark (#1a1a1a / --COLOR_BACKGROUND_DARK): ヘッダー・フッターの黒。ホバーは #2e2e2e
• Backdrop (#1a1a1a80 / --COLOR_BACKDROP): モーダルの背面
• Carousel Overlay (#1a1a1a99 / --COLOR_CAROUSEL_OVERLAY, --COLOR_CAROUSEL_CONTROLS): 写真上のコントロール

Semantic（フォーム検証用）

Neutral（ニュートラル）

• Text Primary (#1a1a1a / --COLOR_FOREGROUND_DARK): 本文。純黒は使わない
• Text Secondary (#707070 / --COLOR_FOREGROUND_DISABLED): 補助・無効
• Text on Dark 2 (#cccccc / --COLOR_FOREGROUND_LIGHT_2): 黒地の上の小さな注記
• Outline (#7a7a7a / --COLOR_OUTLINE_DARK): 主要な罫線。カルーセルの非アクティブドットも兼ねる
• Outline Light (#e6e6e6 / --COLOR_OUTLINE_DARK_2): 淡い区切り線
• Outline Dark (#4d4d4d / --COLOR_OUTLINE_DARK_3): 黒地の上の罫線
• Disabled BG (#f5f5f5 → #e3e3e3): ボタン無効時

2.4 宣言 ≠ 実装（トークンにあるが実際には使われていない値）

DOM 全走査（トップ・帝国ホテル 東京）で 0件 だった宣言。トークンだけ見て実装しないこと。

#faf6ee を「帝国ホテルのアイボリー」として使ってはいけない。 宣言だけがあり、実サイトの面は #ffffff と #f5f5f5 の2色で作られている。

2.5 混入している別サービスの色（採用禁止）

uniqueBackgrounds に出るがすべて OneTrust の Cookie 同意バナー由来。ブランド色ではない。

• #3860be（Filter Icon）/ #27455c / #468254 / #856d34（1違いの金茶。CMP 側のボタン）

判別は _textPreview に OK / Apply / クッキー設定 / 全てのクッキーを受け入れる が並ぶことで付く。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文専用）: ヒラギノ角ゴ Pro → Noto Sans JP → 游ゴシック体 → メイリオ
• 明朝体（見出し・ボタン・テーブル見出し）: Noto Serif JP

ヒラギノ角ゴ Pro であって ProN ではない。 Pro は JIS90 字形、ProN は JIS2004 字形で、「辻」「琢」などの字形が変わる。Apple JP と同じ Pro 指定。

3.2 欧文フォント

• セリフ（英字の飾り見出し）: Judson（--FONT_FAMILY_ROMAN, --FONT_FAMILY_SERIF_EN）。下層ページで 118 要素に適用される
• サンセリフ: --FONT_FAMILY_SANS_EN: Jost が宣言されているが実測 0 件
• 等幅: 定義なし

3.3 font-family 指定

css/* 本文・ナビゲーション（--FONT_FAMILY_SANS） */
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans JP",
             游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
             メイリオ, Meiryo, sans-serif;

/* 見出し・ボタンラベル・テーブル見出し（--FONT_FAMILY_SERIF） */
font-family: "Noto Serif JP", serif;

/* 英字の飾り見出し（--FONT_FAMILY_ROMAN） */
font-family: Judson, serif;

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

• 和文（ヒラギノ角ゴ Pro）を先頭に置く和文優先型。 欧文を先に置かない
• Web フォントは Noto Serif JP と Judson の2つだけ。本文のゴシックはローカルフォントに任せる
• 明朝の宣言は "Noto Serif JP", serif の2段のみ。游明朝・ヒラギノ明朝を並べない

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

3.5 行間・字間

• 本文の行間: 2.0（--LINE_HEIGHT: 2）。トークンで固定されている
• その他の行間トークン: ナビ 1.5 / リスト・テーブル 1.8 / パネル 1.6
• 本文の字間: normal（本文だけは字間を入れない）
• 見出しの字間: 0.05em が既定。下層 h1 は 0.15em、英字見出しは 0.2em と例外的に広い
• フッターの小文字は 0.16em と本文より遥かに広い

ガイドライン:

• 「日本語の見出しは 0.05em、英字の飾りは 0.2em」という二層構造が帝国ホテルの字間設計。英字だけ極端に空けることで、写真の上でも装飾として成立する
• 本文の line-height: 2.0 は崩さない。詰めると高級感が消える

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《
• 英字見出しは letter-spacing: 0.2em のため、最終文字の後ろに余分なアキが出る。中央揃えでは margin-right: -0.2em で補正する

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt は 0 件（トップ・下層ともに実測で確認）
• 字面の調整は letter-spacing だけで行う。palt を足すと 0.05em の字間設計が崩れる

3.8 縦書き

該当なし。

4. Component Stylings

主要 CTA の border-radius は 0。 角丸は CMP・カルーセルドット等の周辺 UI にしか出ない。

Buttons

Primary（金茶ベタ・標準）

• Background: #856c34
• Text: #ffffff
• Border: 1px solid #856c34
• Padding: 14px 20px
• Border Radius: 0
• Font: "Noto Serif JP", serif（明朝） / Font Size: 14px / Font Weight: 600 / Letter Spacing: 0.05em
• Hover: Background #755f2d

Primary Large（予約導線）

• Background: #856c34 / Text: #ffffff / Border: 1px solid #856c34
• Padding: 19px 32px
• Border Radius: 0
• Font: "Noto Serif JP", serif / Font Size: 16px / Font Weight: 600 / Letter Spacing: 0.05em

Ghost（透明・枠だけ）

• Background: transparent
• Text: #696969
• Border: 1px solid transparent（ホバーで枠が出る）
• Border Radius: 2px

Date Picker Cell（選択済み）

• Background: #856c34 / Text: #ffffff
• Padding: 6px 4px / Border Radius: 0
• Font: ヒラギノ角ゴ Pro / 16px / 400

Scroll to Top

• Background: #4d422a（金茶の暗色）/ Text: #ffffff
• Font Size: 16px / Font Weight: 700 / Letter Spacing: 0.2em

Inputs

• Background: #ffffff
• Border: 1px solid #7a7a7a（--COLOR_OUTLINE_DARK）
• Border Radius: 0
• Font Size: 16px / Font: ヒラギノ角ゴ Pro
• Focus: 枠を #856c34 に変える
• Error: 枠 #a60034 ／ 面 #ffdde7 ／ メッセージ #a60034

Cards

• Background: #ffffff（セクション面が #f5f5f5 のとき白が浮きになる）
• Border: なし（面色差で区切る）
• Border Radius: 0
• Padding: 24px（--SIZE_NESTED_MODULE_MARGIN）

Tables

• th: "Noto Serif JP" 14px / 600 / line-height: 2.0 / letter-spacing: 0.05em / 文字色 #856c34
• td: ヒラギノ角ゴ Pro 16px / 400 / line-height: 2.0
• 罫線: 1px solid #e6e6e6
• リスト・テーブルの行間は --LINE_HEIGHT_LIST_AND_TABLE: 1.8 も併用される

Carousel

• Dot: border-radius: 10px／非アクティブ #7a7a7a／アクティブ #856c34
• コントロールの地: #1a1a1a99

5. Layout Principles

Spacing Scale

トークンに明示された2値を基準に、4の倍数で刻む。

Container

• Max Width: 1440px（外枠）/ 984px（本文コンテンツ）
• 補助: 960px / 992px / 800px
• Padding (horizontal): 16px（モバイル）／ 24〜40px（デスクトップ）

Header

• --HEADER-TOP-HEIGHT: 200px（トップの大型ヘッダー）
• --HEADER-BOTTOM-HEIGHT: 80px（スクロール後の固定ヘッダー）

Z-Index Scale

Modal 500 > Navigation 490 > Dialog 480 > Popover 470 > Overlay/Sticky 460 > Modules 100 > Background -1

6. Depth & Elevation

宣言された --BOX_SHADOW: 0 5px 6px #7d7d7d33 は実測 0 件。実際に描画される影は次の3種。

• 影の色は黒ではなく #1a150a（わずかに温かい黒） を 10% で使う
• テキストシャドウ: 1px 1px 5px rgba(0,0,0,0.5)（写真上の白文字用、--TEXT_SHADOW）

Transition

css--TRANSITION: .3s cubic-bezier(.25,.8,.25,1);
--TRANSITION_HOVER_COLOR: color .3s ease-out;
--TRANSITION_HOVER_BACKGROUND: background-color .3s ease-out;

すべて 0.3s。イージングは cubic-bezier(.25,.8,.25,1)。

7. Do's and Don'ts

Do（推奨）

• 見出しとボタンのラベルは "Noto Serif JP", serif（明朝）にする
• 本文だけ "ヒラギノ角ゴ Pro" 先頭のゴシックにし、line-height: 2.0 / letter-spacing: normal で組む
• 日本語見出しの字間は 0.05em、英字の飾り見出しは Judson で 0.2em
• ボタン・入力欄・カードの border-radius は 0
• 金茶は #856c34 ひとつに絞る。ホバーは #755f2d
• セクション間は 64px、入れ子は 24px
• 影は使わず、面色（#ffffff / #f5f5f5）の差で層を作る

Don't（禁止）

• ボタンのラベルをゴシックにしない。 明朝であることが格の源
• #faf6ee / #ccbe9f / #b89548 / Jost をトークンから拾って実装しない。 すべて宣言のみで実測 0 件
• font-feature-settings: "palt" を使わない（0.05em の字間設計と競合する）
• ヒラギノ角ゴ ProN に置き換えない。 このサイトは Pro（JIS90 字形）
• #3860be / #27455c / #468254 をブランド色として使わない（Cookie 同意バナー由来）
• 本文の line-height を 2.0 未満に詰めない
• 角丸・ドロップシャドウで「モダンな SaaS」風にしない

8. Responsive Behavior

Breakpoints

CSS の @media から実測した主要な分岐。

400 / 425 / 476 / 530 / 540 / 550 / 568 / 600 / 658 / 890 / 896 / 1280px にも細かい調整が入る。

タッチターゲット

• 最小 44px × 44px。標準ボタン（padding: 14px 20px / 14px）は約 45px で条件を満たす

フォントサイズの調整

• h1 40px → 26px、英字見出し 34px → 22px（字間 0.2em は維持する）
• 本文 16px / line-height: 2.0 は据え置き
• 下部タブナビゲーションは --FONT_SIZE_NAVIGATION_SMALL: 0.625rem（10px）/ line-height: 1.285

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #856c34（ホバー #755f2d）
Text Color: #1a1a1a
Text Secondary: #707070
Background: #ffffff
Surface: #f5f5f5
Surface Dark: #1a1a1a
Border: #7a7a7a（主）/ #e6e6e6（淡）
Font (body):    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Noto Sans JP", 游ゴシック体, YuGothic, メイリオ, sans-serif
Font (heading): "Noto Serif JP", serif      ← ボタンのラベルもこれ
Font (EN):      Judson, serif               ← letter-spacing 0.2em
Body: 16px / 400 / line-height 2.0 / letter-spacing normal
Heading: letter-spacing 0.05em
Border Radius: 0
Section Margin: 64px / Nested: 24px
Container: 1440px（外）/ 984px（本文）

プロンプト例

帝国ホテルのデザインシステムに従って、レストラン一覧ページを作成してください。
- セクションの英字見出しは Judson, serif / 34px / 700 / letter-spacing 0.2em / 色 #856c34
- 日本語見出しは "Noto Serif JP", serif / 28px / 600 / line-height 1.8 / letter-spacing 0.05em / 色 #1a1a1a
- 本文は "ヒラギノ角ゴ Pro" 先頭のゴシック / 16px / 400 / line-height 2.0 / letter-spacing は normal
- font-feature-settings は使わない
- 「ご予約」ボタンは #856c34 のベタ、白文字、"Noto Serif JP" 14px / 600 / letter-spacing 0.05em、
  padding 14px 20px、border-radius 0、ホバーで #755f2d
- 営業時間テーブルの th は "Noto Serif JP" 14px / 600 / 色 #856c34、罫線は 1px solid #e6e6e6
- セクションの面は #f5f5f5、カードは #ffffff（枠なし・角丸なし）
- セクション間の余白は 64px、入れ子は 24px
- 影は使わない。本文コンテナは 984px