OMO by 星野リゾート（おも） DESIGN.md

OMO（おも）by 星野リゾート（https://omo-hotels.com/）のデザイン仕様書。 星野リゾートが展開する「街ナカ」シティホテルブランド。 コンセプトは「テンションあがる、街遊び。」。観光やビジネスの拠点として街を遊び尽くすための都市型ホテル。 最大の特徴は 黒地 × ネオンイエロー（#fff778） の大胆でポップなビジュアル。遊び心のあるトーン。 実サイトの computed style 実測（2026-06-27 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 黒地（#000000）× ネオンイエロー（#fff778） を主役にした、大胆・ポップ・遊び心のあるダークデザイン。本文も見出しもリストも黄色テキストで、黒キャンバスに発光するように浮かぶ。「テンションあがる、街遊び。」のコンセプトを色で体現する
• OMO について: 星野リゾートの都市型ホテルブランド。「街ナカ」に立地し、近隣の魅力をスタッフ（OMOレンジャー）が案内する。OMO1〜OMO7 のグレード体系を持ち、施設ごとに独自のアクセントカラーを纏う。ただしブランドの基本フレームは黒×黄で統一されている
• 密度: 中〜高密度。黄色テキストの面が多く、黒地とのコントラストが強い。本文 line-height は 1.75 と日本語向けにゆったり。読み物・特集・街の遊び方コンテンツが多い editorial 寄り
• キーワード: 黒地、ネオンイエロー #fff778、ポップ、遊び心、街遊び、ダークモード、Zen Kaku Gothic Antique、施設別アクセント
• 特徴:
  • 基調は 黒 #000000 × ネオンイエロー #fff778。黄色が OMO のアイデンティティそのもの
  • 見出しは Zen Kaku Gothic Antique（weight 600）。懐が広く親しみのある角ゴシックで OMO の個性を出す
  • 本文・和文は Noto Sans JP（実チェーンは HEmoji, "Noto Sans JP", sans-serif。HEmoji/HNumber は星野リゾートの社内フォント別名）
  • OMO 固有 CTA は黄色アウトライン（黒地 / border 1px #fff778 / radius 4px）。黒地に黄色の縁取りボタン
  • 予約ボタンはシアン #00a0cb（星野リゾート共通の chrome。OMO 固有ではない）
  • 施設別アクセント（例: 緑 #5d9364 = OMO3浅草）。各施設が独自カラーを持つが、フレームは黒×黄で共通
  • 白地サーフェス（ドロワー・フッタータイル）ではテキストは黒 #000 に反転する
  • ダークモードがデフォルト（黒地がブランドの基本状態）

2. Color Palette & Roles

実サイトの computed style 実測値＋星野リゾート系 CSS Custom Properties。すべて hex 表記。基調は黒地×ネオンイエロー。

Brand / Core

• Background (Black) (#000000): ページ背景・メインキャンバス（上部 viewport の支配色 section.my-section も黒）
• Signature Neon Yellow (#fff778): 本文・見出し・リスト・CTA アウトラインの主要テキスト色。OMO のアイデンティティ（黒地に黄色）
• Background (Invert) (#1a1a1a): ダークなチューム面・反転サーフェス（--color-bg-invert）

CSS Custom Properties（星野リゾート系トークン・実測）

実サイトに定義されている設計トークン。引用して使う。

Accent / Semantic

• Cyan / Reservation (#00a0cb): 予約ボタン（星野リゾート共通の chrome。OMO 固有色ではない）
• Strong Red (#d50000): 強調・警告・エラー（--color-text-strong）
• Teal / Link (#006a86): リンク（白地サーフェス）。ダーク面では白 #fff
• Facility Green（例）(#5d9364): OMO3浅草の施設別アクセント。施設ごとに固有色を持つ

Neutral / Grey

3. Typography Rules

3.1 和文フォント

• 本文（ゴシック体）: Noto Sans JP（"Noto Sans JP", sans-serif）。実チェーンは HEmoji, "Noto Sans JP", sans-serif で、HEmoji / HNumber は星野リゾートの社内フォント別名（絵文字・タブラー数字用のエイリアス）。実用上は Noto Sans JP として扱う
• 見出し（角ゴシック）: Zen Kaku Gothic Antique（"Zen Kaku Gothic Antique", sans-serif）weight 600。懐の広い親しみある字形で OMO の個性を担う。Google Fonts にあるため preview でも実フォントで描画可能
• 明朝体: 使用しない（全面ゴシック）
• weight は 400（本文）/ 600（見出し）が中心

3.2 欧文フォント

• 欧文・数字も上記の和文フォント（Noto Sans JP / Zen Kaku Gothic Antique）でそのまま描画する
• 数字は HNumber（タブラー数字のエイリアス）。価格・日付・グレード番号（OMO5 / OMO7）等を揃える
• 等幅が必要な箇所のみ SFMono-Regular, Consolas, Menlo, monospace

3.3 font-family 指定

css/* 本文（和文） */
font-family: HEmoji, "Noto Sans JP", sans-serif;
/* ※ HEmoji / HNumber は星野リゾートの社内フォント別名。
   一般環境では "Noto Sans JP", sans-serif で代替する */

/* 見出し */
font-family: "Zen Kaku Gothic Antique", sans-serif; /* weight 600 */

/* 等幅 */
font-family: SFMono-Regular, Consolas, Menlo, monospace;

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

• 本文は Noto Sans JP 単独運用（Web フォント主体）。HEmoji/HNumber は社内エイリアスなので外部では効かず、Noto Sans JP に落ちる
• 見出しは Zen Kaku Gothic Antique 600 を Web フォントで読み込む
• 数字は HNumber エイリアス（タブラー）。グレード番号や価格の桁を揃える

preview.html での注記: Zen Kaku Gothic Antique・Noto Sans JP はいずれも Google Fonts にあるため、preview でも実フォントで描画できる。HEmoji / HNumber は星野リゾート社内フォントの別名で外部では再現できないため、本文は Noto Sans JP で代替する。

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

実測値（トップページ、2026-06-27 取得）。黒地に #fff778 の黄色テキストが基本。白地サーフェスでは #000。

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 P (16px): 1.75（28px。日本語向けにゆったり）
• 補助テキスト・Body (14px): 1.5（21px）
• リスト (14px): 1.7（23.9px）
• 大見出し H2 (32px): 1.0〜1.5（32〜48px。タイトに詰める場面も）

字間 (letter-spacing) — 実測:

• 本文・リスト: normal
• H2 大見出し: normal〜0.04em（1.3px。場面により軽くトラッキング）
• H3 中見出し: -0.02em（-0.42px。やや詰めて締める）

ガイドライン:

• 本文は 16px / line-height 1.75 とゆったり組み、黒地で黄色テキストを読みやすくする
• 見出しは Zen Kaku Gothic Antique 600 で、H2 はやや開けるか締めるかを場面で使い分け、H3 は軽く詰める
• 本文の letter-spacing は触らず normal

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 施設名（"OMO5東京大塚" "OMO3浅草" 等）はグレード番号と地名が一体。折り返さず white-space: nowrap を基本とする
• グレード番号（OMO5 / OMO7）の数字は HNumber（タブラー）で桁を揃える

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt（プロポーショナルメトリクス）等は未採用。Noto Sans JP / Zen Kaku Gothic Antique のメトリクスをそのまま使う
• 数字のタブラー揃えは HNumber エイリアスで担保（OpenType feature ではなくフォント別名で実現）

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

実測値。OMO 固有のコンポーネントと星野リゾート共通の chromeを区別して記述する。

Buttons / CTA

OMO Signature CTA（実測・OMO 固有） — "特集一覧へ" 等

• Background: #000000（黒）
• Text: #fff778（ネオンイエロー）
• Border: 1px solid #fff778（黄色アウトライン）
• Border Radius: 4px
• Padding: 20px
• 黒地に黄色の縁取りボタン。OMO らしさの中核。hover で地を黄色 → 文字を黒に反転すると映える

Reservation Button（実測・星野リゾート共通） — 予約 CTA

• Background: #00a0cb（シアン）
• Text: #ffffff
• Border: 1px solid #00a0cb
• Border Radius: 2px
• Font: 14px / weight 500
• 星野リゾート全ブランド共通の予約ボタン。OMO 固有色ではない

Plain Button（実測・星野リゾート共通）

• Background: #e6e6e6（--color-button-plain）
• Text: #000000
• Border: 1px solid #7a7a7a（--color-button-border）
• 押下・ダーク化は #4d4d4d（--color-button-darken）
• グローバル chrome の汎用ボタン

Badge

Facility Badge（推奨）

• Background: 施設別アクセント（例 #5d9364）または #fff778
• Text: #000000（黄/緑地）
• Border Radius: 4px
• Padding: 4px 12px
• グレード番号・施設タグを示す。施設ごとの色を纏う

Inputs

Text Input（推奨・ダーク面）

• Background: #1a1a1a（--color-bg-invert）または #000
• Text: #fff778
• Border: 1px solid #7a7a7a
• Border Radius: 4px
• Padding: 12px 14px
• Focus: border #fff778（黄色に発光）。リングは付けず枠線色で示す
• Error: border #d50000（強調赤）

Cards / Surfaces

Facility Card（推奨・ダーク） — OMO5東京大塚 / OMO3浅草 / OMO7旭川 等

• Background: #1a1a1a（ダーク）または #000
• Text: #fff778（黄）
• Border: 1px solid #fff778 または施設別アクセント
• Border Radius: 4px
• 施設別アクセントを左端のストライプや見出し色に使い、フレームは黒×黄で統一
• 影は控えめ（基本は黒×黄のコントラストで魅せる）

White Surface（実測） — ドロワー・フッタータイル

• Background: #ffffff（--color-bg-base）
• Text: #000000（--color-text-base）/ サブ #555 / 注釈 #999
• リンク: #006a86（ティール）
• 白地に反転するサーフェス。テキストは黒系で組む

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1080〜1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜40px
• 黒地キャンバスに黄色テキストのブロックを並べる。コントラストが強いので余白を十分にとる

Border Radius Scale

• OMO 固有要素は radius 4px を基本とする。pill（9999px）は使わない

Grid

• Columns: 推奨 12 カラム
• Gutter: 16〜24px
• 施設カード: 3列（desktop）→ 2列（tablet）→ 1列（mobile）

6. Depth & Elevation

• OMO は影を控えめにし、立体感は黒 ↔ 黄のコントラストと**枠線（黄色アウトライン）**で表現する
• 影が必要な場面でも rgba(0,0,0,0.3) 程度に抑える（黒地では影が見えにくいため、黄色の枠線で輪郭を立てる方が効く）

7. Do's and Don'ts

Do（推奨）

• 基調は 黒 #000000 × ネオンイエロー #fff778。本文・見出し・リストを黄色テキストで黒地に乗せる
• 見出しは Zen Kaku Gothic Antique（weight 600）、本文は Noto Sans JP（実チェーン HEmoji, "Noto Sans JP", sans-serif）
• 本文は 16px / line-height 1.75 とゆったり組み、黒地で読みやすくする
• OMO 固有 CTA は黄色アウトライン（黒地 / border 1px #fff778 / radius 4px）。OMO らしさの中核
• 予約ボタンはシアン #00a0cb / radius 2px（星野リゾート共通）として OMO 固有 CTA と区別する
• 施設別アクセント（例 緑 #5d9364）はストライプや見出し色に少量使い、フレームは黒×黄で統一する
• 白地サーフェス（ドロワー・フッタータイル）ではテキストを黒 #000 / リンク #006a86 に反転する
• 補助色は強調赤 #d50000・リンクティール #006a86。CSS Custom Properties（--color-*）を引用する
• radius は OMO 固有要素 4px / 予約ボタン 2px。影は控えめに

Don't（禁止）

• 黄色 #fff778 を別の黄色に置き換えない（OMO のアイデンティティ。彩度・色相を変えない）
• 黒地以外をデフォルト背景にしない（白地はドロワー・フッター等の反転サーフェスに限定）
• OMO 固有 CTA をシアンで塗らない（シアンは予約専用。CTA は黄色アウトライン）
• 見出しに Noto Sans JP を使わない（見出しは Zen Kaku Gothic Antique 600）
• 本文を line-height 1.5 未満に詰めない（黒地・黄テキストは余白を確保しないと読みにくい）
• 施設別アクセントを全面に塗らない（フレームは黒×黄。アクセントはストライプ・見出し等に限定）
• pill（radius 9999px）を使わない（OMO は radius 4px）
• 影を多用しない（黒地では効かない。黄色の枠線で輪郭を立てる）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• H2 大見出し: 32px → 24〜26px
• 本文 16px / line-height 1.75 は維持（黒地で読みやすさを保つ）
• 施設カード: 3列 → 2列 → 1列
• 黄色アウトライン CTA は横幅いっぱいに伸ばしてもよい（radius 4px は維持）
• 予約ボタン（シアン）はフッターに固定配置されることが多い

タッチターゲット

• CTA・予約ボタン: 高さ 44px 以上
• リスト項目: 高さ 44px 以上（line-height 1.7 で確保済み）
• 施設カード: カード全体をタップ可能に

ダークモード

• ダークモードがデフォルト（黒地がブランドの基本状態）。ライト（白地）はドロワー・フッター等の反転サーフェスに限定される

9. Agent Prompt Guide

クイックリファレンス

Background (Black): #000000
Signature Neon Yellow: #fff778（本文・見出し・CTA アウトライン）
Background (Invert): #1a1a1a

--color-bg-base: #ffffff（白地サーフェス）
--color-text-base: #000000 / --color-text-sub: #555 / --color-text-muted: #999
--color-text-invert: #ffffff（ダーク面の白テキスト）
--color-text-strong: #d50000（強調赤）
--color-text-link: #006a86（ティールリンク・白地）
--color-primary / --color-button-reservation: #00a0cb（予約・シアン）
--color-button-border: #7a7a7a / --color-button-darken: #4d4d4d / --color-button-plain: #e6e6e6
Facility Accent（例 OMO3浅草）: #5d9364

Font (本文): HEmoji, "Noto Sans JP", sans-serif（HEmoji/HNumber は社内別名→Noto Sans JP で代替）
Font (見出し): "Zen Kaku Gothic Antique", sans-serif / weight 600
数字: HNumber（タブラー）/ 等幅: SFMono-Regular, Consolas, Menlo, monospace

H2 大見出し: Zen Kaku Gothic Antique 32px / 600 / line-height 1.0-1.5 / #fff778
H3 中見出し: Zen Kaku Gothic Antique 21px / 600 / letter-spacing -0.02em / #fff778
P 本文: Noto Sans JP 16px / 400 / line-height 1.75 / #fff778
Body / Small: 14px / 400 / line-height 1.5 / #fff778
List: 14px / 400 / line-height 1.7 / #fff778（白地ドロワーでは #000）
Link (dark): #fff / Link (white): #006a86
letter-spacing: 本文 normal / H3 -0.02em

OMO Signature CTA: bg #000 / text #fff778 / border 1px #fff778 / radius 4px / padding 20px
Reservation Button（共通）: bg #00a0cb / text #fff / border 1px #00a0cb / radius 2px / 14px 500
Plain Button（共通）: bg #e6e6e6 / text #000 / border 1px #7a7a7a
Input (dark): bg #1a1a1a / text #fff778 / border 1px #7a7a7a / radius 4px / focus #fff778 / error #d50000
Facility Card: bg #1a1a1a or #000 / text #fff778 / border 1px #fff778 or 施設色 / radius 4px
Radius: OMO 4px / 予約 2px（pill 禁止）
Shadow: none〜0 2px 8px rgba(0,0,0,0.3)（控えめ）
Default mode: DARK（黒地）

プロンプト例

OMO by 星野リゾート（おも）のデザインシステムに従って、施設紹介セクションを作成してください。
- 背景はダーク（黒 #000000）がデフォルト。本文・見出し・リストはネオンイエロー #fff778 で黒地に乗せる
- フォント: 見出しは "Zen Kaku Gothic Antique", sans-serif（weight 600）、
  本文は HEmoji, "Noto Sans JP", sans-serif（HEmoji/HNumber は星野リゾート社内別名なので一般環境では Noto Sans JP で代替）
- H2 大見出し: Zen Kaku Gothic Antique 32px / 600 / line-height 1.0-1.5 / #fff778
- H3 中見出し: Zen Kaku Gothic Antique 21px / 600 / letter-spacing -0.02em / #fff778
- 本文: Noto Sans JP 16px / 400 / line-height 1.75 / letter-spacing normal / color #fff778（黒地でゆったり）
- OMO 固有 CTA は黄色アウトライン: 背景 #000 / 文字 #fff778 / border 1px solid #fff778 / radius 4px / padding 20px
- 予約ボタンはシアン #00a0cb / 文字 #fff / radius 2px / 14px weight 500（星野リゾート共通。CTA とは区別する）
- 施設別アクセント（例 OMO3浅草 = 緑 #5d9364）はストライプや見出し色に少量使い、フレームは黒×黄で統一
- 白地サーフェス（ドロワー・フッター）ではテキストを黒 #000 / リンク #006a86（ティール）に反転する
- 補助色: 強調赤 #d50000、リンクティール #006a86
- radius は OMO 固有要素 4px・予約 2px（pill は使わない）。影は控えめ、立体感は黒×黄のコントラストと黄色枠線で出す
- font-feature-settings: normal（palt なし）。「テンションあがる、街遊び。」のポップで遊び心あるトーンで