Hoshino Resorts (hoshinoresorts.com) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 株式会社星野リゾート コーポレートサイト。

1. Visual Theme & Atmosphere

星野リゾートは コーポレート / リクルートで全く異なるデザインシステムを持つ マルチブランド戦略の好例です。サブブランド（虹夕諾雅・界・リゾナーレ・OMO・BEB）はそれぞれ別ドメイン・別デザインで展開されている。

A. Corporate Site（hoshinoresorts.com トップ・aboutus）

• デザイン方針: 余白と写真主導のミニマル。Noto Sans JP の細身（Regular〜Medium）でブランド全体を整える
• 密度: ゆったり。装飾を抑えて宿泊体験の写真を主役にする
• キーワード: Minimal, Photographic, Clean, Corporate, Multi-brand Hub

B. Recruit Site（hoshinoresorts.com/recruit/）

• デザイン方針: クラフト感のある暖色系。クリーム背景 (#fcf5ef) + 巨大な英字 Display フォント（Mohave 120px）でファッション誌的な編集デザイン
• 密度: 余白を大胆に取り、英字見出しと和文本文の対比で「読ませる」設計
• キーワード: Editorial, Warm, Crafted, Magazine-style, Bold Display Type

2. Color Palette & Roles

Corporate Site

Recruit Site

Multi-Brand Color Hint

実サイトでは触れられないが、サブブランド（hoshinoya / kai / risonare / omo / beb）はそれぞれ独自カラーを持つ。コーポレートサイト自体は中立的な白＋黒に統一されており、サブブランドの色を主張しないハブ的役割。

3. Typography Rules

3.1 和文フォント

Corporate Site

css/* Next.js の自己ホスト Noto Sans JP（ハッシュ化された変数名） */
font-family:
  __Noto_Sans_JP_b9e232,
  __Noto_Sans_JP_Fallback_b9e232,
  sans-serif;

• Next.js の next/font/google で Noto Sans JP を自己ホスト → 変数名にハッシュ付き
• AI エージェント向けに復元すれば: "Noto Sans JP", sans-serif

Recruit Site

cssfont-family:
  "Noto Sans JP",
  "Noto Sans",
  MyYuGothicM,
  游ゴシック,
  "Yu Gothic",
  ...sans-serif;

• Noto Sans JP 最先頭、続いて欧文 Noto Sans、Windows 用 MyYuGothicM、macOS 游ゴシック

3.2 欧文フォント

Recruit Site の特徴

• Mohave (Google Fonts): 巨大英字 Display 用（120px / 600 / letter-spacing: -4.8px）
• Albert Sans (Google Fonts): フッター英字（Copyright 表記等）

css/* Recruit ヒーロー見出し */
font-family: Mohave, sans-serif;
font-size: 120px;
font-weight: 600;
letter-spacing: -4.8px; /* ≈ -0.04em の負トラッキング */

/* Recruit フッター英字 */
font-family: "Albert Sans", sans-serif;

Corporate Site

欧文専用フォントは指定されておらず、Noto Sans JP のラテン部分が出る。

3.3 font-family 指定（まとめ）

css/* Corporate body */
font-family: "Noto Sans JP", sans-serif;

/* Recruit body */
font-family: "Noto Sans JP", "Noto Sans", MyYuGothicM, 游ゴシック, "Yu Gothic", sans-serif;

/* Recruit display (English) */
font-family: Mohave, sans-serif;

/* Recruit footer (English) */
font-family: "Albert Sans", sans-serif;

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

Corporate Site

Recruit Site

3.5 行間・字間

Corporate Site

• 行間: ほぼ normal（ブラウザデフォルト）
• 字間: ナビは 0.32px (≈0.02em)、本文は normal

Recruit Site

• 行間: 一律 ×1.8 が基本ルール（25.2/14, 28.8/16, 32.4/18, 36/20, 57.6/32 すべて 1.8）
• 字間: body level で 0.84px (≈0.06em) の特徴的なプラストラッキング — 編集デザイン的な余裕を出す
• Display 英字: -4.8px の負トラッキング — Mohave の太字を字詰めしてインパクトを出す

3.6 禁則処理・改行ルール

特殊な指定なし（ブラウザデフォルト）。

3.7 OpenType / 特殊機能

• font-feature-settings の明示指定なし（normal）
• palt 不使用

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Corporate

• Hamburger Item: bg #333 / color #fff / 14px / radius 0
• Default Link: ブラウザデフォルトの #0000EE（明示色指定なし）

Recruit

• Primary CTA: bg #D95300 / color #fff / 14px / radius 0（暖色のオレンジ）
• Tag Pill: bg #E3E0DD / color #080808 / 11px 500 / radius 15px（柔らかい角丸）
• Carousel Button: bg #080808 / radius 6px

Cards

Recruit サイトは #fcf5ef クリーム背景 + #e3e0dd タグ + 写真 の組み合わせでカード状コンテンツを構成。

Navigation

• Corporate: 横並びテキストナビ + ハンバーガーメニュー（bg #333）
• Recruit: 上部固定ヘッダー + ENTRY ボタン（角丸ナシ）

5. Layout Principles

• Corporate: 中央寄せ + 写真主体のフルブリードヒーロー
• Recruit: 編集デザイン的な不規則レイアウト。巨大英字を背景的に配置し、和文を前景に重ねる

Multi-Brand Hub

コーポレートサイトは サブブランドへのハブ として設計され、各ブランドサイトへの誘導が主機能:

• hoshinoya.com（虹夕諾雅 / 高級リゾート）
• kai-ryokan.jp（界 / 温泉旅館）
• risonare.com（リゾナーレ / リゾートホテル）
• omo-hotels.com（OMO / 都市観光ホテル）
• beb-hotels.com（BEB / カジュアル）

各サブブランドは独自カラー・独自タイポグラフィ。コーポレートはそれを邪魔しない中立色で統一。

6. Depth & Elevation

• 基本フラット
• 写真によって視覚的奥行きを作る（box-shadow ではない）

7. Do's and Don'ts

Do（推奨）

• コーポレートは Noto Sans JP のみ + 白黒中心 で中立的に保つ（サブブランドの色を主張しない）
• リクルートは クリーム背景 #fcf5ef + 暖色オレンジ #d95300 で編集デザイン感を出す
• リクルートの Display は Mohave 120px + 負の letter-spacing で大胆に組む
• リクルートの本文は letter-spacing 0.06em で余裕を持たせる
• 行間は ×1.8 を基本ルールにする（リクルート系）

Don't（禁止）

• コーポレートにサブブランドカラーを持ち込まない（虹夕諾雅の濃紺・界の朱赤等は使わない）
• コーポレートサイトに装飾的なフォントを混ぜない
• リクルートに白背景を使わない（暖色クリームが基調）
• letter-spacing を負にしない（Display の英字以外）

8. Responsive Behavior

明示的なブレークポイントは抽出データに含まれず。一般的なコーポレートサイト基準（モバイル 〜767px / タブレット 768〜1024px / デスクトップ 1025px〜）を推奨。

9. Agent Prompt Guide

クイックリファレンス

# Corporate Site
Background:       #FFFFFF
Text Primary:     #000000 / Heading: #1A1A1A
Font:             "Noto Sans JP", sans-serif
Body:             16px / 400 / lh normal / ls normal
Page Lead:        28px / 500 / lh 42px (×1.5)
Nav:              16px / 400 / ls 0.32px (0.02em)

# Recruit Site
Background:       #FCF5EF (cream / 暖色)
Text:             #080808
CTA:              #D95300 (warm orange)
Tag Bg:           #E3E0DD
Body Font:        "Noto Sans JP", "Noto Sans", MyYuGothicM, 游ゴシック, sans-serif
Display Font:     Mohave, sans-serif (English only)
Footer EN:        "Albert Sans", sans-serif
Body:             14px / 400 / lh 25.2px (×1.8) / ls 0.84px (0.06em)
Display:          120px / 600 / ls -4.8px (-0.04em) / Mohave
Heading:          32px / 700 / lh 57.6px (×1.8)
LH ratio:         一律 ×1.8 が基本

プロンプト例

星野リゾートのリクルートサイトのデザインに従って、新卒採用ページを作成してください。

- 背景: クリーム色 #FCF5EF
- 本文: "Noto Sans JP" 14px / 400 / line-height 25.2px (×1.8) / letter-spacing 0.84px (≈0.06em) / color #080808
- 見出し: "Noto Sans JP" 32px / 700 / line-height 57.6px (×1.8) / color #080808
- Display 英字: Mohave 120px / 600 / letter-spacing -4.8px / color #080808
- フッター英字: "Albert Sans" 11px / 500 / letter-spacing 0.84px
- CTA: bg #D95300 / color #fff / radius 0
- タグ: bg #E3E0DD / color #080808 / radius 15px
- 行間は一律 ×1.8 ルール
- 編集デザイン感を出すため body letter-spacing は 0.06em の特徴的なプラストラッキング

マルチブランド戦略について

星野リゾートのデジタル展開は 「コーポレートを中立に保ち、サブブランド側で強い個性を出す」 二段構成です。コーポレートサイトで AI に何かを作らせるときは、サブブランドカラーを混入させない注意が必要。サブブランドサイト（hoshinoya / kai / risonare / omo / beb）はそれぞれ別の DESIGN.md を要する別プロジェクトと考えるのが正しい。