# デザイン方針: プレミアム・高級感（Premium / Luxury）

## 1. デザインコンセプト
「静かな自信」。声を張らず、余白・上質な書体・抑えた色数で品格を示す。ユーザーを急かさず、じっくり眺めさせる体験を作る。

## 2. デザインキーワード
品格 / 静寂 / 素材感 / 余裕 / 一点豪華

## 3. カラーパレット
- 背景 #0F0E0C: ページ背景。真っ黒ではなく墨
- サーフェス #1A1815: カード。背景との差はわずかに
- 本文 #EDE6D8: 生成り色のテキスト。純白は使わない
- 補足 #8C8272: キャプション
- ゴールド #C9A961: アクセント。ボタン枠・罫線・強調。面で塗らない
- ボーダー #2C2925: 罫線

## 4. タイポグラフィ
- 見出し: セリフ体（Playfair Display / Cormorant / しっぽり明朝）。ウェイトは細め、サイズは大きく
- 本文フォント: 細身のサンセリフまたは明朝。ウェイト300〜400
- 数字: セリフ体のオールドスタイル数字。価格は大きく、通貨記号は小さく
- ウェイト: 300 / 400 / 500。太字を使わない
- サイズ階層: 14 / 16 / 24 / 40 / 64px。見出しと本文の差を大きく
- 行間: 本文1.9、見出し1.2
- 字間: 見出し+0.02em、小さな大文字ラベルは+0.2em
- 和欧混植: 日本語は明朝、英語はセリフで組み、英語を少し小さく

## 5. レイアウトルール
- スペーシングは大きめ（16 / 32 / 64 / 128）
- コンテンツ最大幅 1100px。中央揃えの1カラムを基本に
- 写真は全幅、テキストは狭幅（640px）で対比
- 情報密度は最もゆったり。1画面1メッセージ
- 角丸は0〜2px。直線的に
- セクション区切りは細い金の罫線（1px, 短い）

## 6. UIコンポーネントルール
- ボタン: 角丸0、金の1pxボーダー+透明背景、小さな大文字。Hoverで金の塗り+黒文字にゆっくり反転（400ms）
- カード: 背景はサーフェス色、ボーダーなし。Hoverで画像がごくわずかにズーム
- 入力フォーム: 下線のみ（1px）。Focusで金に変化。ラベルはフローティング
- モーダル: 全画面に近い黒オーバーレイ(0.8)。中身は余白たっぷり
- タブ: 小さな大文字テキスト。選択は金の下線
- ナビゲーション: 細い書体・広い字間。背景は透明で上部固定
- バッジ: 金のテキストのみ。背景・枠なし
- アイコン: 極細線画（stroke 1px）。数は最小
- トースト: サーフェス色・金の左罫線
- 空状態: 一文のみ。装飾なし
- ローディング: 細い金のラインが伸びる。スピナーは使わない

## 7. 装飾ルール
- 写真は高品質・暗め・被写体を大きく。フィルタで統一トーン
- 微細なノイズテクスチャで質感を出してよい
- 金は「線」で使う。面で塗ると安っぽくなる
- グラデーション・ブラー・イラストは使わない

## 8. アニメーションルール
- duration 400〜800ms、easing は ease-in-out または cubic-bezier(0.16, 1, 0.3, 1)
- 出現はゆっくりフェード+わずかな上昇（8px）
- Hover は色の反転をゆっくり。動きは小さく
- 画像はスクロールで微かなパララックス
- prefers-reduced-motion では静止

## 9. デザイン原則
- 急がせない。速さより滑らかさ
- 色は3色以内（墨・生成り・金）
- 太字・大声の表現を避ける
- 写真と余白が主役、UIは脇役
- 細部の精度（1pxの罫線、字間）が格を決める

## 10. NGデザイン
- ゴールドを面で塗ったボタン
- 太いサンセリフの見出し
- 派手なアニメーション・バウンス
- 割引・緊急を煽るバッジ
- 角丸の大きいカード

## 11. 参考になるサービス・デザインスタイル
- Aman Resorts
- Cartier
- Aesop
- Rolex
- Hermès

## 12. 一言で表現すると
囁くように語る格。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">MEMBERS</span>
    <h3>Private Reservation</h3>
    <p>特別な一夜のために、静かな時間をご用意します。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">Reserve</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Cormorant Garamond", "Hiragino Mincho ProN", serif; color: #ede6d8; }
.card {
  width: 320px; padding: 36px 32px; background: #1a1815;
  border-top: 1px solid #c9a961;
}
.badge { font-size: 10px; letter-spacing: .25em; color: #c9a961; }
h3 { margin: 18px 0 8px; font-size: 28px; font-weight: 400; letter-spacing: .02em; }
p { margin: 0 0 28px; font-size: 14px; line-height: 1.9; color: #8c8272;
    font-family: "Hiragino Mincho ProN", serif; }
.field { display: block; margin-bottom: 28px; }
.field span { display: block; font-size: 11px; letter-spacing: .15em; color: #8c8272; margin-bottom: 8px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 8px 0; font-size: 15px; color: #ede6d8;
  background: transparent; border: 0; border-bottom: 1px solid #2c2925; outline: none;
  transition: border-color .4s ease-in-out;
}
.field input:focus { border-bottom-color: #c9a961; }
.actions { display: flex; gap: 12px; }
.btn {
  padding: 12px 22px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: background-color .4s ease-in-out, color .4s ease-in-out;
}
.btn.primary { background: transparent; color: #c9a961; border: 1px solid #c9a961; }
.btn.primary:hover { background: #c9a961; color: #0f0e0c; }
.btn.ghost { background: transparent; color: #8c8272; border: 1px solid transparent; }
.btn.ghost:hover { color: #ede6d8; }
```