HOTEL THE MITSUI KYOTO（ホテル ザ 三井 京都） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: サイト全体が明朝体 1 本。ゴシックはボタンのラベルにしか出てこない。色は濃い焦茶（#190e0a）と白の 2 色で、写真以外に彩度のあるものを置かない
• 密度: 低い。line-height: 1.8、見出しは 1.5、表組みでも 1.6。余白でラグジュアリーを出す
• キーワード: 本明朝、字間 .03em、palt なし、角丸 3px、影ゼロ

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

1. 和文は Morisawa Fonts Web 配信の「本明朝 Pro Medium」（MFW-RoHMinchoPro-Md）1 書体。 可視 75 要素（トップ）/ 91 要素（下層）。見出しから表組みの数字まで全部これ。ゴシックが出るのはボタンの 15 / 7 要素だけ
2. letter-spacing: .03em を body に書いて全体へ継承させている。 computed は 0.48px で、トップ 63 要素・下層 69 要素。サイズが違っても 0.48px のままなので、em ではなく絶対値の継承
3. font-feature-settings は 1 要素も使っていない（実測 0 件）。palt を使わない明朝のサイトで、括弧や中黒の空きはそのまま残す。これが字間 .03em の浅さと釣り合っている
4. 影が 1 つも無い（boxShadow 0 種）。border-radius は 3px が 13 要素だけで、それ以外は角なし。面と 1px の罫線だけで組む

CSS Custom Properties は 0 個（トップ・下層とも total: 0）。設計トークンは存在しない。

2. Color Palette & Roles

Primary（ブランドカラー）

茶色が 2 つあるのは実装の実態。 #190e0a（UI）と #1c0b06（トップの body）は肉眼で区別できない。新規実装では #190e0a に寄せてよい。

heroCover が true（span.TopKeyVisual__bg が #190e0a で 1440×900 を覆う）。 トップの地色は焦茶だが、下層ページの地色は白（/about/ の resolved = rgb(255,255,255)）。トップの背景色をサイト全体の背景として写さないこと。

宣言はあるが使われていない色

CSS には次の 2 色が書かれているが、トップ・下層とも可視 0 要素。

この 2 色を「ブランドカラー」として採用しないこと。 実測した 2 ページには 1 要素も出ていない。下層の特設ページ用に残っている定義と見られる。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し。可視 63 要素（トップ）/ 89 要素（下層）。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 予約ボタン・ヘッダー帯（可視 7 / 4 要素）
• Text Muted (#666666): ニュースの日付（可視 4 要素）
• Text Soft (#2d2d2d): お問い合わせ
• Surface Select (#363636): 予約パネルの select（可視 11 要素）
• Surface Card (#f1f1f1): トップのカード面（可視 4 要素）
• Header Band (#4f4f4f): ヘッダー最上部の細い帯
• Border Calendar (#cccccc): 予約カレンダーの罫
• Dot Inactive (#c4c4c4): スライダーの非アクティブドット
• UA Button (#efefef): Menu 開閉 閉じる などスタイルを当てていない <button>。ブラウザ既定（border: 2px outset）がそのまま出ている

#efefef の 2px outset ボタンはバグ。 開閉トリガーに CSS を当て忘れている。真似しないこと。

Semantic（意味的な色）

• Sunday Red (#ff4d4d): 予約カレンダーの日曜のみ
• それ以外の semantic パレットは持たない

3. Typography Rules

3.1 和文フォント

• 明朝体（既定・ほぼすべて）: 本明朝 Pro Medium（MFW-RoHMinchoPro-Md / リョービ・モリサワ、Morisawa Fonts Web 配信）
• ゴシック体（ボタンのみ）: 游ゴシック体（OS フォント。Web フォントではない）
• 本文・見出し・表組み・ナビ・日付・価格まですべて明朝

配信は Morisawa Fonts Web（morisawafonts.net）。 Adobe Fonts でも TypeSquare でもない第 3 の経路。

css/* 実サイトの @font-face（抜粋。実際は unicode-range で 20 以上に分割されている） */
@font-face {
  font-family: mfw-rohminchopro-md;
  font-display: swap;
  font-weight: 1 1000;
  src: url(/f/01K94CGT.../9nox2q2mna.woff2) format("woff2");
  unicode-range: U+4e07, U+4e95, U+4eac, ...;   /* 漢字を使用頻度で分割 */
}

• 実測したフォントファイルの要求は 24 件（うち morisawafonts.net が 22 件）。unicode-range で細かく分割されているため、1 ページで 20 本以上の woff2 を読む
• mfw-rohminchostd-bd（本明朝 Std Bold）も宣言されているが、document.fonts で unloaded・可視 0 要素。 CSS に font-family: MFW-RoHMinchoStd-Bd; font-weight: 700 の定義はあるが、実測した 2 ページでは使われていない
• @font-face が font-weight: 1 1000 を宣言している。 つまり 400 でも 700 でも同じファイルが返る。トップの h1.TopKeyVisual__head は font-weight: 700 と書かれているが、ファミリーが全域をカバーしているため合成太字も起きない。太さを変えたいときは font-weight ではなくファミリー（...Pro-Md ↔ ...Std-Bd）を切り替える

3.2 欧文フォント

• セリフ: VanDijckRoman（セルフホスト / cdn.fonts.net）。loaded。－EMBRACING JAPAN'S BEAUTY－ とコピーライトの 2 要素だけ。VanDijckItalic も宣言されているが unloaded
• サンセリフ: Roboto（Google Fonts、400 / 500 loaded）。Close ボタン 1 要素だけ
• 等幅: 使用しない

3.3 font-family 指定

css/* 本文・見出し・表組み（body に 1 回） */
font-family: MFW-RoHMinchoPro-Md, 游明朝体, "Yu Mincho", YuMincho,
             "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;

/* ボタン */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;

/* 一部のボタン（CSS 上） */
font-family: "Noto Sans JP", 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;

/* 英字見出し */
font-family: VanDijckRoman, serif;

フォールバックの考え方 — 実サイトの 3 つの引っかかり:

• "Yu Gotich" というタイプミスがある（font-family: Roboto, Yu Gotich, sans-serif）。Gothic の綴り違いで、このファミリーは存在しないので常に飛ばされる。正しくは "Yu Gothic"
• Windows の游ゴシック問題に対して、Medium を Regular より後ろに置いている。 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium" の順だと、Windows では 2 番目の YuGothic（Light 相当）が先に当たって細く出る。Medium を先に置くのが正しい（"游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic）
• "Noto Sans JP" をスタック先頭に書いている箇所があるが、@font-face もフォント要求も無い。 OS に入っていなければ素通りする。読み込むか、書かないかのどちらかにする

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

html / body とも 16px 固定（1440 / 1200 / 834 / 375px の 4 幅すべて）。流体ルートもブレークポイント切替も無い。

ウェイトは 400 と 500 の 2 値だけ。 500 はボタン（游ゴシック体）専用で、明朝側は実質 400 一択。

3.5 行間・字間

• 本文の行間: line-height: 1.8（単位なし） → 16px で 28.8px。各要素が自分のサイズで再計算する
• 見出しの行間: 1.50（26px → 39px、34px → 51px）
• ナビ・ボタンの行間: 1.00（16px → 16px）
• 本文の字間: letter-spacing: .03em を body に 1 回。computed 0.48px が子へ絶対値として降りる（サイズが違っても 0.48px）
• 12px 系の字間: 日付・パンくずなど 12px の要素だけ .02em（0.24px）を自分で宣言している
• 見出しによっては .04em を直接当てている（CSS 上。26px 見出しの一部）

CSS に現れる letter-spacing の宣言値: .03em（body）/ .04em / .02em / .01em / 0。

ガイドライン:

• line-height は単位なし、letter-spacing は body に em で 1 回。 子要素で .03em を再宣言しない
• 明朝の本文に line-height: 1.8 は必須。 1.5 まで詰めると本明朝の縦画が重なって読めなくなる
• 12px 以下だけ字間を .02em に落としている。小さい文字で .03em のままだと間延びする

3.6 禁則処理・改行ルール

css/* 実測：明示的な宣言なし（UA 既定） */
word-break: normal;

• 4 幅（1440 / 1200 / 834 / 375px）すべてで body の word-break は normal
• overflow-wrap / line-break / word-break: auto-phrase の宣言は無い
• 英字見出しだけ text-align: justify を当てている箇所がある（CSS 上）

禁則対象（ブラウザ既定に任せている）:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* 該当なし。font-feature-settings の宣言は 0 件 */

• palt を 1 要素も使っていない（typography.fontFeatureSettings が空）
• これは意図的な選択として読む。 明朝で palt を効かせると括弧や句読点が詰まりすぎてラグジュアリーの間が消える。字間 .03em の浅さと「詰めない」がセットになっている
• "tnum" "kern" "halt" も無し
• 代わりに -webkit-font-smoothing: antialiased / -moz-osx-font-smoothing: grayscale を body に当てている（明朝の細い画を潰さないため）

3.8 縦書き

css/* 該当なし */

縦組みは使っていない（typography.verticalWriting がトップ・下層とも 0 件）。京都のラグジュアリーホテルだが、縦組みに寄せずに横組みで通している。

4. Component Stylings

Buttons

Primary（ヘッダーの予約ボタン）

• Background: #190e0a
• Text: #ffffff
• Font: 本明朝 Pro Md / 16px / 400 / line-height 18.4px
• Size: 145 × 96px（ヘッダー右端に 2 つ並ぶ）
• Border Radius: 0px
• Shadow: none

Secondary（.Button -normal -light — 本文中の既定ボタン）

• Background: transparent
• Text: #190e0a
• Font: 游ゴシック体 / 16px / 500 / line-height 16px / letter-spacing 0.48px
• Border: 1px solid #190e0a
• Padding: 13px 20px
• Size: 180 × 44px（幅固定）
• Border Radius: 3px（サイト唯一の角丸）
• Shadow: none

ボタンだけゴシックになる。 本文が全部明朝なので、ボタンのラベルが明朝だと押せるように見えないという判断と読める。この切り替えを再現すること。

Chip（ニュースのカテゴリ）

• Background: rgba(25, 14, 10, .06)
• Text: #190e0a / 本明朝 Pro Md / 12px / 400 / letter-spacing 0.48px
• Padding: 0 6px / 高さ 22px / Border Radius 0px

未スタイルの <button>（バグ）

Menu 開閉 閉じる はブラウザ既定のまま（background: #efefef / border: 2px outset / padding: 1px 6px）。実装時は必ずリセットすること。

Inputs

• select（予約パネル）: Background #363636 / Text #ffffff / Border Radius 0px / 右に /images/menu/select... の矢印画像
• input: 独自のスタイルは実測できなかった（予約フォームは別ドメイン）
• 実装するなら Border Radius 3px（ボタンに合わせる）、Border 1px solid #190e0a

Cards

• Background: #f1f1f1（トップのインデックスカード。可視 4 要素）
• Border: なし
• Border Radius: 0px
• Shadow: none（サイト全体で影 0 種）
• 見出し: 本明朝 Pro Md / 26px / line-height 1.50 / color #190e0a

Table（概要表）

• th: 本明朝 Pro Md / 12px / 400 / line-height 21.6px / 幅 588px
• td: 本明朝 Pro Md / 16px / 400 / line-height 25.6px（1.60）/ 幅 588px
• 罫線・背景色なし。サイズ差だけで見出しと値を分ける

5. Layout Principles

Spacing Scale

CSS Custom Properties が 0 個なので、スケールは暗黙。実測から確認できた gap:

• ボタンの内側: 13px 20px
• 見出し下: 10px（h1.head-1）

Container

Grid

• 概要ページは 384px（見出し）＋ 792px（本文）の 2 カラム
• カードは 3 列 / gap: 24px

6. Depth & Elevation

影が 1 つも無い。

• border-radius は 3px が 13 要素だけ（ボタン）。ほかに 50% が 5 要素（スライダーのドット）。それ以外はすべて角なし
• 奥行きは面の明暗（#ffffff / #f1f1f1 / #190e0a）とオーバーレイ（rgba(25,14,10,.9)）だけで作る
• box-shadow を足さないこと。 影を入れた瞬間にこのサイトの静けさが消える

7. Do's and Don'ts

Do（推奨）

• 本文から表組みまで明朝 1 本で通す。 ゴシックを出すのはボタンのラベルだけ
• letter-spacing: .03em と line-height: 1.8 は body に 1 回だけ書く（子は継承）
• 12px 以下の文字だけ letter-spacing: .02em に落とす
• border-radius は 3px（ボタン）以外 0。 box-shadow は使わない
• -webkit-font-smoothing: antialiased を body に当てる（明朝の細い画を保つため）
• 下層ページの地色は 白。焦茶 #190e0a はトップのキービジュアルとボタン・見出しに限定する
• ボタンは 180 × 44px の固定サイズ、1px solid #190e0a、背景透明

Don't（禁止）

• font-feature-settings: "palt" を足さない。 実サイトは 0 件。明朝で詰めると間が消える
• line-height を 1.5 以下にしない。 本明朝は 1.8 前提で組まれている
• 子要素で letter-spacing: .03em を再宣言しない（0.48px が絶対値で継承されている）
• font-weight: 700 に頼らない。 @font-face が font-weight: 1 1000 を宣言しているので 400 と同じファイルが返り、合成太字も起きない。太くしたいなら MFW-RoHMinchoStd-Bd を読み込んだうえでファミリーを切り替える
• "Yu Gotich" をそのまま写さない。 実サイトのタイプミス（正しくは "Yu Gothic"）
• 游ゴシックの Medium を Regular より後ろに置かない。 実サイトは 游ゴシック体, YuGothic, "游ゴシック Medium", ... の順で、Windows で細く出る。Medium を先頭側に移す
• "Noto Sans JP" をスタック先頭に書いて読み込まないをやらない。実サイトは @font-face もフォント要求も無い
• #536b2b（オリーブ）/ #a4904c（ゴールド）をブランド色として使わない。 CSS にはあるが実測 2 ページで可視 0 要素
• <button> をリセットせずに置かない。 実サイトの Menu 開閉 閉じる はブラウザ既定（2px outset / #efefef）が出てしまっている
• 影を足さない。 サイト全体で 0 種

8. Responsive Behavior

Breakpoints

(min-width: 1025px) and (max-width: 768px) のように成立しない組み合わせが 2 件ある（常に false）。ビルド時のネスト崩れと見られる。写さないこと。

幅ごとの実測値（body）

body は 4 幅すべて同じ。 流体ルートもブレークポイント切替も無い。縮むのは見出しとレイアウトだけで、本文は 16px / 1.8 / .03em のまま。

タッチターゲット

• .Button は 180 × 44px。44px 基準ちょうど
• ヘッダーの予約ボタンは 145 × 96px で十分
• グローバルナビのリンクは line-height: 1.00 の 16px。モバイルではハンバーガーに切り替わる（max-width: 768px の 522 件がこれを担う）

フォントサイズの調整

• 本文は縮小しない（16px 固定）
• 見出し（34px / 26px）は max-width: 768px のメディアクエリで個別に縮小

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #190e0a   (焦茶。ボタン・見出し・枠線)
Text Color:    #000000
Muted:         #666666
Surface:       #f1f1f1
Background:    #ffffff   (下層) / #190e0a (トップのキービジュアル)
Font (本文): MFW-RoHMinchoPro-Md, 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", serif
Font (ボタン): "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, sans-serif
Font (欧文):  VanDijckRoman, serif
Body Size: 16px (全幅で固定)
Font Weight: 400 (本文) / 500 (ボタン)
Line Height: 1.8 (本文) / 1.5 (見出し) / 1.0 (ナビ・ボタン)
Letter Spacing: .03em ← body に 1 回。12px 以下だけ .02em
font-feature-settings: なし（palt を足さない）
Border Radius: 3px (ボタンのみ) / 0 (それ以外)
Box Shadow: なし
Container: 1240px / 本文 996px

プロンプト例

HOTEL THE MITSUI KYOTO のデザインシステムに従って、客室一覧ページを作成してください。

- body:
    color: #000000; background: #ffffff;
    font-family: MFW-RoHMinchoPro-Md, 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", serif;
    font-size: 16px; font-weight: 400;
    line-height: 1.8;          /* 単位なし */
    letter-spacing: .03em;     /* 子へは 0.48px として継承される */
    -webkit-font-smoothing: antialiased;
  ※ font-feature-settings は書かない（実サイトは palt を 1 要素も使っていない）
- 見出し（h2）は 26px / line-height 1.5 / color #190e0a。font-weight は 400 のまま
- 日付・注記など 12px の要素だけ letter-spacing: .02em に落とす
- 本文は 384px（見出し）＋ 792px（本文）の 2 カラム、コンテナ 1240px
- ボタンだけゴシックにする:
    font-family: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, sans-serif;
    font-size: 16px; font-weight: 500; line-height: 1;
    color: #190e0a; background: transparent; border: 1px solid #190e0a;
    width: 180px; height: 44px; padding: 13px 20px; border-radius: 3px;
- カードは背景 #f1f1f1・角丸なし・影なし
- box-shadow はページ全体で 1 つも使わない