SORANO HOTEL（ソラノホテル） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体・角丸ゼロ・影ゼロ。字間を大きく開けて余白で読ませる、ウェルビーイングホテルの静かな組版
• 密度: 低い。コンテナ 1860px の全幅レイアウトに、セクション間 100〜220px の余白を取る
• キーワード: 明朝（Noto Serif JP）、字間 0.1em を全面に、ヒーローは 0.3em、ウェイト 350、紺 #274875、生成りの地 #f9f8f6

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

1. 本文が明朝体。 可視テキスト 292 要素のうち 194 要素が Noto Serif JP 系、ゴシック（Inter + Noto Sans JP）はわずか 18 要素。ゴシックはナビ・ラベル・日付など「読ませない文字」専用
2. font-feature-settings: "palt" が可視 1046 要素中 1045 要素に効いている。 実質グローバル適用。Nstock のような「見出しだけ」ではなく、このサイトは全面で約物を詰める
3. 字間の基準は 0.1em。 --letter-spacing-body: 0.1em が body に効き、1.4px として可視 736 要素に継承される。ヒーロー見出しだけが 0.3em（32px → 9.6px） まで開く
4. font-weight: 350 が既定。 --font-weight-normal: 350 という非整数ウェイトを可変フォントで指定している（可視 199 要素）。強調は 500 のみで、700 は 1 要素も無い
5. 角丸ゼロ・影ゼロ。 border-radius: 0 が 1008 要素、box-shadow: none が 1043 要素。丸いのは円形要素（100%）35 個だけ

html { font-size: 10px }。 1rem = 10px の日本語サイト定番の設定で、トークンは --font-size-body-md: 1.4rem（= 14px）のように書かれている。rem を 16px 基準で読み替えないこと。

2. Color Palette & Roles

Design Tokens（実在する CSS 変数・自社トークン 85 個）

css/* Color */
--color-dark:              #1a1a1a;
--color-black:             #000;
--color-blue:              #5988c6;
--color-blue-hover:        #476d9e;
--color-dark-blue:         #274875;
--color-dark-blue-hover:   #1f3a5e;
--color-white-hover:       #eeebe7;
--color-sorano-bllue:      #88ade2;   /* 変数名の綴りは実サイトのまま（bllue） */
--color-gold:              #a89469;
--color-gold-hover:        #867654;
--color-brown:             #332727;
--color-gray:              #eeebe7;
--color-beige:             #d1c3bc;
--color-red:               #c71212;
--color-orange:            #c74012;
--color-font-dark:         #1a1a1a;
--color-bg-primary:        #f9f8f6;
--color-bg-gray:           #eeebe7;
--color-bg-light-gray:     #f4f2ef;
--color-bg-dark-blue:      #30517b;
--color-bg-dark:           #171513;
--color-border-gray:       rgba(0,0,0,0.12);
--color-border-dark-gray:  rgba(0,0,0,0.25);
--color-border-light-gray: rgba(0,0,0,0.06);
--color-border-white-gray: rgba(255,255,255,0.3);
--color-link:              #1a1a1a;
--color-link-hover:        #1a1a1a;

宣言 ≠ 実装。 DOM を 1 周して数えると、トップページで実際に描画されるのは #1a1a1a（832 要素）/ #ffffff（206）/ #5988c6（4） の3色と、面色の #274875（9）/ #5988c6（21）/ #f9f8f6（2） だけ。 --color-gold --color-beige --color-brown --color-red --color-orange --color-sorano-bllue は宣言されているが 1 要素も描画されない。 変数一覧を見て金や茶を配色に持ち込まないこと。

実装されている色

紺 #274875 は「押せるもの」、水色 #5988c6 は「分類」。 役割が完全に分かれている。混ぜないこと。

3. Typography Rules

3.1 和文フォント

明朝（既定）と ゴシック（補助）の二層。

• notoSerifJp は自前でホストする @font-face 名（Noto Serif JP とは別名）。400 と 500 の2ウェイトだけが loaded
• 游明朝・ヒラギノ明朝はフォールバックとして積むが、Web フォントが効くので通常は使われない

3.2 欧文フォント

用途別に3つ。

Cardo に font-weight: 700 を指定しないこと。 ロードされないため合成ボールドになる。実サイトは 400 / 500 で使っている。

3.3 font-family 指定

css/* 明朝 — 既定。本文・和文見出し */
--font-family-serif: "notoSerifJp", "Noto Serif JP", "游明朝", "Yu Mincho", yumincho,
                     "Hiragino Mincho Pro", serif;

/* ゴシック — ナビ・ラベル・日付 */
--font-family-sans: "Inter", "Noto Sans JP", hiragino-kaku-gothic-pron, "Hiragino Sans",
                    "Hiragino Kaku Gothic ProN", "Yu Gothic", yugothic, meiryo, sans-serif;

/* 欧文セリフ — 飾り見出し */
--font-family-eng: "Cardo", "notoSerifJp", "Noto Serif JP", "游明朝", "Yu Mincho", yumincho,
                   "Hiragino Mincho Pro", serif;

/* 欧文ゴシック — 日付など */
--font-family-eng-sub: "Inter", sans-serif;

• body に指定されているのはゴシック（--font-family-sans）。明朝は本文要素側で上書きしている。「明朝が既定」なのは実際の描画分布であって、継承の既定ではない
• generic family の対応は正しい（明朝 → serif、ゴシック → sans-serif）。このリポジトリで頻出する「サンセリフに serif を書く誤り」は起きていない

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

html { font-size: 10px } / body { font-size: 1.4rem = 14px }。

サイズトークン（rem → px）

css--font-size-body-xl:   1.6rem;  /* 16px */
--font-size-body-lg:   1.5rem;  /* 15px */
--font-size-body-md:   1.4rem;  /* 14px ← body 既定 */
--font-size-body-sm:   1.3rem;  /* 13px */
--font-size-body-xs:   1.2rem;  /* 12px */
--font-size-body-2xs:  1.1rem;  /* 11px */
--font-size-body-3xs:  1rem;    /* 10px */

--font-size-heading-2xl: 4.4rem; /* 44px */
--font-size-heading-xl:  4rem;   /* 40px */
--font-size-heading-lg:  3.2rem; /* 32px */
--font-size-heading-md:  2.4rem; /* 24px */
--font-size-heading-sm:  2rem;   /* 20px */
--font-size-heading-xs:  1.8rem; /* 18px */
--font-size-heading-2xs: 1.6rem; /* 16px */
--font-size-heading-3xs: 1.4rem; /* 14px */
--font-size-heading-4xs: 1.2rem; /* 12px */

--font-weight-normal: 350;   /* ← 400 ではない */
--font-weight-medium: 500;

実測の階層

ウェイトの分布（可視テキスト 292 要素）: 350 が 199、500 が 90、400 が 3。700 は 0。

font-weight: 350 を 400 に丸めないこと。 可変フォント（notoSerifJp / Inter / Noto Sans JP）に対する指定で、400 より一段細い。このサイトの「薄さ」はここから来ている。

3.5 行間・字間

字間トークン（すべて em で宣言 → px で継承）

css--letter-spacing-body:       0.1em;   /* ← 既定。body に効く */
--letter-spacing-heading:    0.1em;
--letter-spacing-heading-en: 0.06em;  /* 欧文見出し（Cardo） */
--letter-spacing-copy:       0.1em;
--letter-spacing-xxl: 0.2em;
--letter-spacing-xl:  0.15em;
--letter-spacing-l:   0.12em;
--letter-spacing-m:   0.1em;
--letter-spacing-s:   0.05em;
--letter-spacing-xs:  0.02em;
--letter-spacing-no:  0;

実測の分布（可視 1046 要素）

和文は一律 0.1em、欧文は 0.06em、ヒーローだけ 0.3em。 この3段だけ覚えればよい。 ヒーローの 0.3em は「東 京 に あ っ て 、」のように一文字ずつ離して見せるための値で、本文に適用すると読めなくなる。見出し1つにだけ使う。

行間トークン

css--line-height-body:        2;     /* 本文 */
--line-height-body-sm:     1.8;   /* 補足 */
--line-height-heading:     1.6;   /* 和文見出し */
--line-height-copy:        1.7;   /* リード文 */
--line-height-heading-eng: 1.2;   /* 欧文見出し */

実測の最多は 1.2（79 要素）→ 2.2（64）→ 1.5（38）→ 1.8（36）→ 1.0（30）。 長文ほど開き、欧文見出しほど詰める。 本文 14px に対する 28px（2.0）と、長文の 30.8px（2.2）が和文の骨格。

3.6 禁則処理・改行ルール

• 実サイトは HTML 側で改行位置を手で決めている（都心からわずか30分、\n大きな空と豊かな…）。自動折り返しに任せず、意味の切れ目で改行を入れる設計
• word-break / line-break の明示指定は無し

3.7 OpenType 機能

palt を全面に当てる。

実測: 可視 1046 要素のうち 1045 要素が font-feature-settings: "palt"。下層ページ（/plan/）でも 538 要素。

cssbody { font-feature-settings: "palt"; }

字間 0.1em と palt を同時に使うのがこのサイトの組版。 palt で約物を詰めて、letter-spacing で全体を開く。どちらか一方だけにしないこと（palt を外すと約物まわりが間延びし、字間を外すと詰まって見える）。

3.8 縦書き

サイト本体は縦組みを使わない。

実測で writing-mode: vertical-rl の要素は 4 個あるが、すべて外部の AI チャットウィジェット（talkappi-*）由来でサイトの設計ではない。縦組みを実装に持ち込まないこと。

4. Component Stylings

Buttons

角丸は 0。塗りは紺 #274875 の1種類だけ。

css/* Primary — 宿泊予約 / 空室検索 / 各種予約 */
.button-primary {
  background: #274875;      /* --color-dark-blue */
  color: #ffffff;
  border: none;
  border-radius: 0;         /* ← 角丸ゼロ */
  padding: 30px 20px;       /* 大 */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  box-shadow: none;
}
.button-primary:hover { background: #1f3a5e; }  /* --color-dark-blue-hover */

/* Primary (small) — お問い合せ */
.button-primary-sm {
  background: #274875;
  color: #ffffff;
  border-radius: 0;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 350;
}

/* Outline — フッターの導線 */
.button-outline {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.12);   /* --color-border-gray */
  border-radius: 0;
  padding: 20px 20px 20px 30px;
  font-size: 14px;
  font-weight: 350;
}

/* Floating — 画面右下に固定される予約ボタン */
.button-floating {
  background: #274875;
  color: #ffffff;
  border-radius: 0;
  /* 和文 14px / 0.05em ＋ 欧文 10px / 0.1em(Cardo) の2段組 */
}

Badges

css/* ニュースのカテゴリ */
.badge-category {
  background: #5988c6;      /* --color-blue */
  color: #ffffff;
  border-radius: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 350;
  letter-spacing: 0.1em;
  font-family: var(--font-family-sans);  /* ← ここだけゴシック */
}

Links

css/* 下線がホバーで伸びるテキストリンク */
.link-anim {
  color: #1a1a1a;
  text-decoration: none;
  /* 下線は疑似要素で描く。border-radius も box-shadow も持たない */
}

角丸スケール（実測）

5. Layout Principles

Container

css--site-padding: 6.25vw;   /* 左右の余白はビューポート比 */
--header-height: 8rem;    /* 80px */

Spacing Scale

rem（= 10px 基準）の 2 系統。

css/* セクション間 */
--space-section-lg: 22rem;   /* 220px */
--space-section-md: 15rem;   /* 150px */
--space-section-sm: 10rem;   /* 100px */

/* 要素間 */
--space-element-3xl: 12rem;  /* 120px */
--space-element-2xl: 9.6rem; /*  96px */
--space-element-xl:  8rem;   /*  80px */
--space-element-lg:  6.4rem; /*  64px */
--space-element-md:  4.8rem; /*  48px */
--space-element-sm:  3.6rem; /*  36px */
--space-element-xs:  2.4rem; /*  24px */
--space-element-2xs: 1.6rem; /*  16px */
--space-element-3xs: 1.2rem; /*  12px */
--space-element-4xs: 0.8rem; /*   8px */

セクション間は 100〜220px。 この余白の大きさがサイトの静けさをつくっている。詰めないこと。

6. Depth & Elevation

影を使わない。

実測: box-shadow: none が可視 1046 要素中 1043 要素。残り3つは (a) 値が rgba(0,0,0,0) で透明、(b)(c) 外部チャットウィジェット由来。

カード・ボタン・ヘッダーに影を足さないこと。 階層は rgba(0,0,0,.12) の細い罫線、#f9f8f6 / #eeebe7 / #f4f2ef の面、そして余白で表す。

7. Do's and Don'ts

Do（推奨）

• 本文を明朝（Noto Serif JP）で組む。 ゴシックはナビ・ラベル・日付などの短い文字に限る
• letter-spacing: 0.1em を body に書いて全体に継承させる（実測 1.4px）
• font-feature-settings: "palt" を body に書いて全面に当てる
• ヒーロー見出しだけ letter-spacing: 0.3em にして一文字ずつ離す
• font-weight: 350 を既定にする（可変フォント前提）。強調は 500
• 欧文の飾り見出しは Cardo / 0.06em / line-height 1.2
• 本文の行間は 2.0、長文は 2.2
• 角丸 0・影 0 を貫く
• ページ背景は純白ではなく #f9f8f6
• html { font-size: 10px } を敷き、サイズを rem で書く

Don't（禁止）

• border-radius を付けない。 実サイトは 1008 要素が 0px。丸いのは円形装飾だけ
• box-shadow を使わない
• font-weight: 700 を使わない。 実サイトは 0 要素。Cardo の 700 と notoSerifJp の 700 はロードされていない
• font-weight: 350 を 400 に丸めない
• ヒーローの 0.3em を本文に広げない（読めなくなる）
• letter-spacing を em のまま子要素に再宣言しない。 body から px（1.4px）で継承される
• 縦組みを使わない。 実測の縦組み 4 要素は外部チャットウィジェット由来でサイトの設計ではない
• --color-gold --color-beige --color-brown --color-red --color-orange --color-sorano-bllue を配色に使わない。 変数は存在するが実サイトでは 1 要素も描画されていない
• 紺 #274875 と水色 #5988c6 の役割を混ぜない（紺＝押せるもの、水色＝分類）
• 純黒 #000000 / 純白の背景を使わない（#1a1a1a / #f9f8f6）
• palt と字間のどちらか一方だけにしない（両方でひとつの組版）

8. Responsive Behavior

Breakpoints

max-width 方式（デスクトップファースト）。 実測の出現回数順:

ホバー効果は (hover: hover) and (pointer: fine) で囲む。 タッチデバイスでホバーが貼り付くのを避けている。 not (prefers-reduced-motion) でアニメーションを囲む。 実サイトが 6 箇所で実施している。

タッチターゲット

主要 CTA は padding: 30px 20px ＋ 16px の文字で実高さ 80px 超。十分に大きい。

フォントサイズの調整

html { font-size: 10px } のまま、ブレークポイントごとに --font-size-* を差し替える方式。rem 基準そのものは変えていない。

9. Agent Prompt Guide

クイックリファレンス

ブランドカラー: #274875（紺・CTA）/ #5988c6（水色・カテゴリ）
本文色: #1a1a1a
背景: #f9f8f6（生成り）/ 面 #eeebe7, #f4f2ef
罫線: rgba(0,0,0,0.12)

和文（既定）: Noto Serif JP（明朝）— notoSerifJp 400/500
和文（補助）: Inter + Noto Sans JP（ゴシック）— ナビ・ラベル・日付のみ
欧文（飾り）: Cardo（400 のみ）

root: html { font-size: 10px } → 1rem = 10px
本文: 14px / line-height 2.0 / letter-spacing 0.1em / font-weight 350
長文: line-height 2.2
ヒーロー: 32px / weight 350 / line-height 1.5 / letter-spacing 0.3em
欧文見出し: Cardo / 44px / weight 500 / line-height 1.2 / letter-spacing 0.06em
palt: 全面（body に指定）

角丸: 0（すべて）
影: なし
コンテナ: 1860px / 左右余白 6.25vw / ヘッダー 80px
セクション余白: 100 / 150 / 220px

プロンプト例

SORANO HOTEL のデザインシステムでホテルのトップページを作って。

- html { font-size: 10px } を敷き、サイズは rem で書く
- 本文は明朝: "notoSerifJp", "Noto Serif JP", "游明朝", "Yu Mincho", yumincho,
  "Hiragino Mincho Pro", serif
- ナビ・ラベル・日付だけゴシック: "Inter", "Noto Sans JP", hiragino-kaku-gothic-pron,
  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", yugothic, meiryo, sans-serif
- 欧文の飾り見出しは "Cardo", serif（400 のみ。700 は使わない）
- body に font-feature-settings: "palt" と letter-spacing: 0.1em を書いて全面に継承させる
- font-weight の既定は 350、強調は 500。700 は使わない
- 本文 14px / line-height 2.0、長文は 2.2
- ヒーロー見出しだけ 32px / letter-spacing 0.3em で一文字ずつ離す
- 欧文見出しは letter-spacing 0.06em / line-height 1.2
- CTA は背景 #274875・文字 #ffffff・border-radius 0・padding 30px 20px・weight 500
- カテゴリバッジは背景 #5988c6・11px・ゴシック
- border-radius と box-shadow は一切使わない
- ページ背景は #f9f8f6、本文色は #1a1a1a（純黒・純白を使わない）
- セクション間の余白は 100〜220px を取る
- ホバー効果は @media (hover: hover) and (pointer: fine) で囲む