オークラ東京（The Okura Tokyo） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体を主、ゴシック体を従にした二層構成。 見出し・リード・ナビはヒラギノ明朝（Adobe Fonts 配信）、UI と本文は Noto Sans JP。角丸を使わず（border-radius: 0）、金茶 1 色と温白の地色で組む
• 密度: 低い。写真を全画面で見せ、文字を絞る。トップの可視テキスト 391 要素に対し、下層は 83 要素
• キーワード: ヒラギノ明朝、金茶、角丸ゼロ、ウェイト 400 一本、館ごとの地色

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

1. 和文の主役は明朝体で、ゴシックより多い。 hiragino-mincho-pron（Adobe Fonts 経由のヒラギノ明朝 ProN）が 可視 197 要素、Noto Sans JP が 185 要素。h1〜h3 はすべて明朝、ボタンのラベルとフォーム系がゴシック
2. ウェイトは実質 400 の一本。 可視 391 要素中 370 要素が 400。700 は 21 要素で、その大半が CMP 由来。太字で強弱をつけない設計で、階層はサイズと字間だけで作る
3. 館ごとに地色を持っている。 --color-bg-prestige: #2e1d1d（プレステージタワー＝濃い焦茶）、--color-bg-heritage: #f2e7d6（ヘリテージウイング＝クリーム）。ヘリテージの下層では #f2e7d6 が 7 要素に塗られる
4. 角丸を使わない。 border-radius の実装は 50%（矢印の円・可視 41 要素）と 0 だけ。CTA も入力欄もカードもすべて直角
5. アクセシビリティのための書体切り替えを持っている。 ヘッダー左のアイコンから html[class^="a11y--font-"] を付けて B612 / Atkinson Hyperlegible / Luciole / Sylexiad Sans / Andika / OpenDyslexic / Eido に差し替える。既定状態ではどれも unloaded（＝読み込まれない）

CSS Custom Properties は 自社 32 個 / プラットフォーム由来 1 個（Plyr の --plyr-color-main）。色 14 個・書体 4 個・z-index 6 個・ヘッダー高さ 6 個という内訳。

2. Color Palette & Roles

Primary（ブランドカラー）

金が 3 つあるのは役割が違うから。 明るい地の上の文字は #886d44、面は #dcb374、暗い写真の上の文字は #f6d197。明度で使い分けているので取り違えないこと。

Surface（面色）

会員プログラムの等級色

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し。このサイトは純黒を使う（CMP を除いた可視分で確認）
• Text on Dark (#ffffff): 写真・黒面の上（可視 90 要素）
• Text on Footer (#dddddd): フッターのグループ案内（可視 7 要素）
• Dark Surface (#333333): 会員プログラム ボタンの面
• Border (#dddddd): 予約タブの非選択枠
• Background (#fbfaf6): ページ背景

トップページの heroCover は true（div.o-cover が 1440×900 を覆う background-image）。pageBackground.resolved は html を根拠に #fbfaf6 を返しており、ヒーローの色ではなく本来の地色。下層でも同じ値。

3. Typography Rules

3.1 和文フォント

• 明朝体（主）: ヒラギノ明朝 ProN。Adobe Fonts（Typekit）経由で hiragino-mincho-pron として配信。可視 197 要素でサイト最多。h1 h2 h3、リード文、電話番号、言語切替まで明朝
• ゴシック体（従）: Noto Sans JP。Google Fonts（300,400,500,700 を要求、実際に使うのは 400 と 700 だけ）。ボタン・フォーム・ナビ・フッター住所

3.2 欧文フォント

• セリフ: Georgia / Cambria / Times New Roman（明朝スタックのフォールバック）
• サンセリフ: Helvetica Neue / Helvetica / Arial
• 等幅: SF Mono / Monaco / Inconsolata / Fira Mono / Droid Sans Mono / Source Code Pro
• EB Garamond: CMP（Didomi）由来で可視 1 要素のみ。サイトの書体ではない

3.3 font-family 指定

css:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
                 Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-sans:   "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:  hiragino-mincho-pron, Georgia, Cambria, "Times New Roman",
                 "Droid Serif", Times, serif;
  --font-mono:   "SF Mono", "Monaco", "Inconsolata", "Fira Mono",
                 "Droid Sans Mono", "Source Code Pro", monospace;
}

/* 既定は OS スタック。Web フォントが来てから差し替える */
body, .sans, button, input, optgroup, select, textarea { font-family: var(--font-system); }
html.wf-notosansjp-n4-active body,
html[class^="a11y--font-"] body { font-family: var(--font-sans); }

/* 見出し・リード */
.serif { font-family: var(--font-serif); }

実装の実態（そのまま真似しないこと）:

• --font-sans も --font-serif も、和文フォントの後に欧文のフォールバックだけが並ぶ。Noto Sans JP やヒラギノ明朝が取得できないと、和文は各 OS の sans-serif / serif 既定に落ちる
• 明朝のフォールバックが Georgia, Cambria, "Times New Roman" という欧文セリフになっている。和文の保険（"Hiragino Mincho ProN", "Yu Mincho", serif）が入っていない。新規実装では和文の明朝を挟むこと

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

• 和文を先頭に置き、最後に総称ファミリ
• Web Font Loader のクラス（wf-notosansjp-n4-active）で切り替えるため、フォント未取得時は OS スタックのゴシックで表示される（白紙にはならない）

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

ウェイトはほぼ 400 一本。（可視 391 要素中 370 要素）

3.5 行間・字間

• 本文の行間: 1.7（16px / 27.2px）。body に指定し可視 99 要素が継承
• 見出しの行間: 1.25（可視 63 要素）。リードは 1.24、客室名は 1.2
• ナビ・ボタンの行間: 1.0（可視 75 要素）。パディングで高さを作る
• 本文の字間: normal（可視 306 要素）。本文は触らない

字間は px で焼いてある。em ではない。

ガイドライン:

• 字間を px で書くと、同じクラスでもフォントサイズを変えた瞬間に見た目の比率が崩れる。 新規実装では 0.1em 相当（24px → 2.4px / 32px → 3.2px / 16px → 1.6px / 14px → 1.4px）に読み替えて em で書いてよい。実サイトは px 固定だが、意図は 0.1em
• CSS 内には .1rem（= 1.6px）や .0875rem（= 1.4px）の宣言も混在しており、同じ値に 3 通りの書き方がある。統一するなら em に寄せる
• 本文（16px / 1.7 / normal）は変えないこと。 明朝の見出しとゴシックの本文という対比が設計の中心

3.6 禁則処理・改行ルール

• word-break / line-break / overflow-wrap のグローバル宣言は無し（既定のまま）
• word-break: auto-phrase は未使用
• 見出しの改行位置は <br> で手動制御している（例: 日本の美意識とモダニズムの\n調和から生まれた…）

3.7 OpenType 機能

css/* 宣言なし */

• font-feature-settings を 1 要素も使っていない（CSS 全文で 0 件、computed も normal）
• palt による字詰めをしない。 代わりに letter-spacing を空ける方向に使う（3.5 参照）。約物は詰めず、全体をゆったり組む構え
• 新規実装で palt を足すと、空けた字間と打ち消し合って意図が崩れる

3.8 縦書き

css.o-vtext > span {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  vertical-align: middle;
}
/* 欧文のときだけ字間を空け、和文では空けない */
@media (min-width: 48em)    { .o-vtext { letter-spacing: 1.7px; } }
@media (min-width: 93.75em) { .o-vtext { font-size: 1.25rem; letter-spacing: 2px; } }
html[lang=ja] .o-vtext { letter-spacing: 0; }

• 実装された縦組みは下層の 3 要素（.o-vtext > span、ヒラギノ明朝 17px / line-height 26.35px = 1.55）。写真の脇に立てるラベル
• 実測した字間は normal（html[lang=ja] の letter-spacing: 0 は上書きされていない）。日本語では字間を触らない、という意図だけ読み取ればよい
• 幅 1500px（93.75em）を超えると 20px / line-height 31px に拡大する。 1 幅だけ測ってサイズを決めないこと

4. Component Stylings

Buttons

Primary（予約系 CTA） — オンライン予約 ご宿泊 お食事 予約する 入会お申込み

• Background: #dcb374（--color-head-book）
• Text: #000000
• Font: 16px / weight 400 / letter-spacing normal
• Padding: ヘッダー 22px 30px 24px ／ 本文内 12.5px 30px 13.5px ／ 小 10px 20px 10.5px
• Border: なし
• Border Radius: 0
• Box Shadow: なし

下パディングが上より 0.5〜2px 大きい。 和文のベースライン位置を考慮した視覚中央合わせで、意図的な非対称。

Secondary（会員プログラム）

• Background: #333333 / Text: #ffffff / 16px / weight 400
• Padding: 22px 30px 24px / Border Radius: 0

Tab Selected / Unselected（予約ウィジェット）

• Font: 16px / weight 400 / Padding: 14px 10px 14px 30px / Border Radius: 0

Filter Chip — 全て シーズナル イベント

• 選択: 背景 #000000 / 文字 #ffffff / 1px solid #000000
• Font: 16px / weight 400 / letter-spacing 0.32px / Padding: 10px 30px / Radius 0

Text Link — 詳細 → 詳細を見る

• Text: #886d44（--brand-primary）/ 16px / weight 400
• 下線は引かず、矢印（→）を付ける

Cards

• Background: #fbfaf6 または写真
• Border: なし
• Border Radius: 0
• Shadow: なし（6 章参照）
• 暗い写真の上に文字を置くときは rgba(0,0,0,.85) または rgba(0,0,0,.3) のオーバーレイ（可視 20 / 32 要素）

Icon Buttons

• カルーセルの前後矢印は border-radius: 50%（可視 41 要素）。サイトで唯一の丸い形

Inputs

• Font: 16px / weight 400 / line-height 1.4（22.4px）
• Background: #ffffff / Border Radius: 0
• 日付・人数の select も同様

5. Layout Principles

Container

Spacing

実測で出る gap: 10px（6 件）/ 80px（2 件）/ 40px 20px

• gap はあまり使わず、余白はセクションの padding で作る

Header

z-index

css--zindex-max:   99999;
--zindex-pop:   1080;
--zindex-mbar:  1070;
--zindex-head:  1060;
--zindex-slick: 1050;
--zindex-low:   -1;

6. Depth & Elevation

• 影は 40px の「全方向ぼかし」1 種が主役。 オフセットを持たせず（0 0）、浮かせるというより霞ませる使い方
• カード・ボタン・入力欄には影を付けない
• 奥行きは写真の明度差と rgba(0,0,0,.85) のオーバーレイで作る

Border Radius

7. Do's and Don'ts

Do（推奨）

• 見出し・リードは明朝（hiragino-mincho-pron）、本文・UI はゴシック（Noto Sans JP） に分ける
• ウェイトは 400 で通す。 強調はサイズ・字間・色で作る
• 本文は 16px / line-height: 1.7 / letter-spacing: normal
• 見出しの字間は サイズの 0.1 倍（24px → 2.4px / 32px → 3.2px / 14px → 1.4px）
• CTA は #dcb374 の面に黒文字、border-radius: 0
• 文字リンクは #886d44、暗い写真の上の見出しは #f6d197
• ページ背景は #fbfaf6。館ごとの面は #2e1d1d（プレステージ）と #f2e7d6（ヘリテージ）
• 影は 0 0 40px rgb(0 0 0 / .25) をドロップダウンにだけ

Don't（禁止）

• 角丸を付けない。 円形の矢印以外はすべて border-radius: 0
• font-feature-settings: "palt" を足さない（サイトに 0 件。空けた字間と打ち消し合う）
• 700 を乱用しない（可視 21 要素、ほぼ CMP 由来）
• 本文に字間を足さない（normal が設計。可視 306 要素）
• カード・ボタンに影を付けない
• 明朝のフォールバックを Georgia だけで済ませない（実サイトはそうなっているが、和文の明朝を挟むのが正しい）
• 金 3 色（#886d44 / #dcb374 / #f6d197）を混同しない

8. Responsive Behavior

Breakpoints（em 指定。16px 基準）

• ブレークポイントを em で書いている。 px に直すときは 16 倍すること

フォントサイズの調整

• html も body も 4 幅（1440 / 1200 / 834 / 375px）すべてで 16px 固定。 流体ルートではない
• 変わるのは見出しのみ: h1 は 1281px 以上で 38px、未満で 28px（line-height はどちらも 1.25）
• 縦組みラベルは 1500px 以上で 17px → 20px

タッチターゲット

• オンライン予約（高さ約 70px）、ご宿泊（約 45px）、予約タブ（約 50px）— いずれも 44px を満たす
• フィルタチップ（約 42px）はわずかに下回るため、モバイルでは高さを確保すること

9. Agent Prompt Guide

クイックリファレンス

Brand (文字):   #886d44
CTA (面):       #dcb374
Gold (暗所):    #f6d197
Background:     #fbfaf6
Surface Alt:    #f7f4ee
Category:       #eeebe4
Prestige BG:    #2e1d1d
Heritage BG:    #f2e7d6
Text:           #000000
Text on Dark:   #ffffff
Text Footer:    #dddddd
Dark Surface:   #333333

Root Font Size: 16px（固定）
Font (明朝):    hiragino-mincho-pron, Georgia, Cambria, "Times New Roman", "Droid Serif", Times, serif
Font (ゴシック): "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif
Weight:         400（ほぼ一本）
Body Size:      16px
Line Height:    1.7（本文） / 1.25（見出し） / 1.0（ナビ・ボタン）
Letter Spacing: normal（本文） / サイズ × 0.1（見出し: 24px→2.4px, 32px→3.2px, 14px→1.4px）
font-feature:   なし（palt を使わない）
Border Radius:  0（すべて） / 50%（カルーセル矢印のみ）
Shadow:         0 0 40px rgb(0 0 0 / .25)（ドロップダウンのみ）
Container:      1320px / 1140px / 800px / カード 340px
Header:         140px（通常） / 250px（全画面ヒーロー） / 70px（スクロール後）
Breakpoints:    48em / 63.75em / 78.75em / 85em（em 指定）

プロンプト例

オークラ東京のデザインシステムに従って、客室一覧ページを作成してください。
- 見出し・リード・縦組みラベルは明朝（hiragino-mincho-pron, Georgia, Cambria, "Times New Roman", serif）、
  本文・ボタン・フォームはゴシック（"Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif）
- font-weight はすべて 400。太字を使わず、サイズと字間で階層を作る
- 本文は 16px / line-height 1.7 / letter-spacing normal
- h1 は明朝 38px / line-height 1.25（1281px 未満は 28px）、客室名は明朝 25.6px / 1.2
- 見出しの字間はサイズの 0.1 倍（24px なら 2.4px、32px なら 3.2px）
- [宿泊者限定] のような角括弧ラベルは 14px / letter-spacing 1.4px
- ページ背景は #fbfaf6、ヘリテージの面は #f2e7d6、プレステージの面は #2e1d1d
- 予約 CTA は背景 #dcb374 / 文字 #000000 / 16px weight 400 / padding 12.5px 30px 13.5px /
  border-radius 0（下パディングを 1px 大きくする）
- テキストリンクは #886d44 に「→」を添え、下線は引かない
- border-radius はすべて 0。円形はカルーセルの矢印（50%）だけ
- box-shadow はドロップダウンの 0 0 40px rgb(0 0 0 / .25) のみ。カードには付けない
- font-feature-settings は使わない（palt を足さない）
- コンテナは 1320px、カードは 340px。ブレークポイントは em で 48em / 63.75em / 78.75em / 85em

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

• ヒラギノ明朝は Adobe Fonts（Typekit）配信で、document.fonts の @font-face 一覧に出てこない。 Typekit は CSS を JS で動的注入するため document.styleSheets にも載らない。判定は (a) distributions.fontFamily に hiragino-mincho-pron というハイフン区切り小文字の Typekit 名が出ているか (b) use.typekit.net/af/... へのフォント取得があるか の 2 つ。実測で Typekit のフォントファイルを 4 本取得している
• document.fonts に並ぶ unloaded の大半はアクセシビリティ用の予備書体。 B612 / Atkinson Hyperlegible / Luciole / Sylexiad Sans / Andika / OpenDyslexic / Eido は html[class^="a11y--font-"] で切り替えたときにだけ読まれるので、既定状態で unloaded なのが正常。「Web フォント未使用」と誤読しないこと
• Google Fonts には Noto Sans JP:300,400,500,700 を要求しているが、実際に描画されるのは 400 と 700 だけ。 300 / 500 を当てても取得済みなので表示はされるが、サイトの設計としては使われていない
• CMP（Didomi）が Roboto と EB Garamond、border-radius: 5px / 3px、#f6d197 系の色を持ち込む。 interactive の 同意して閉じる が #dcb374 なのは CMP をブランド色で上書きしているためで、サイト本体の CTA 色と同一。ほかの CMP 由来の値（Roboto / EB Garamond / radius 5px）はサイトの設計ではない
• :root の --color-bg-prestige --color-bg-heritage はどちらも実際に塗られている（トップ 2 要素 / 下層 7 要素）。宣言だけで使われていない変数ではない