# デザイン方針: 和風・和モダン（Japanese Modern）

## 1. デザインコンセプト
「間（ま）と余韻」。埋めないことで語る。和色の抑えた彩度と明朝体、縦書きの一部使いで、静かで奥行きのある空間を作る。

## 2. デザインキーワード
間 / 余韻 / 和色 / 縦書き / 素材

## 3. カラーパレット
- 背景 #F5F1E8: 生成り・和紙色
- サーフェス #FBF8F1: カード
- 本文 #1F1D1A: 墨
- 補足 #7C7568: 利休鼠のようなグレー
- アクセント #B7282E: 朱。印・ボタン・強調（小面積で）
- サブ #2E4A3F: 松葉色。リンク・成功
- ボーダー #D9D2C3: 罫線

## 4. タイポグラフィ
- 見出し: 明朝（しっぽり明朝 / Noto Serif JP / Zen Old Mincho）。ウェイト500、大きめ、字間+0.1em
- 本文フォント: 明朝またはZen Kaku Gothic New 400。16px
- 数字: 英数字は細身のセリフ（Cormorant）。漢数字も可
- ウェイト: 400 / 500 / 600。極太を避ける
- サイズ階層: 13 / 16 / 20 / 28 / 44px
- 行間: 本文2.0（広め）、見出し1.5
- 字間: 本文+0.05em、見出し+0.1em、縦書き+0.15em
- 和欧混植: 英字はセリフ体で細く、日本語より小さく（0.9em）。縦書き部分ではtext-orientationに注意

## 5. レイアウトルール
- スペーシングは大きく（16 / 32 / 64 / 128）
- コンテンツ最大幅 1000px。中央に細く
- 縦書きの見出し・キャプションを部分的に（writing-mode）
- 情報密度は最も低い。1画面に1つの要素
- 角丸は0〜2px
- 非対称な配置（左上に見出し、右下に写真など）で「間」を作る

## 6. UIコンポーネントルール
- ボタン: 角丸0、墨の1pxボーダー+透明背景、字間広め。Hoverで墨の塗り+和紙色文字。primaryは朱の細いボーダー
- カード: ボーダーなし、和紙色の面。区切りは細い罫線または余白のみ
- 入力フォーム: 下線のみ。Focusで朱の下線
- モーダル: 和紙色の全画面。閉じるは「閉じる」の縦書き
- タブ: テキストのみ。選択は朱の小さな点（・）を上に
- ナビゲーション: 縦書きのメニューを右端に、または上部に細く
- リスト: 番号は漢数字（一、二、三）または「〇」
- バッジ: 朱の四角い印（判子風）に白文字。小さく
- アイコン: 極力使わない。使うなら細線
- トースト: 墨の帯に和紙色の文字
- 空状態: 縦書きの一文
- ローディング: 朱の点がゆっくり明滅

## 7. 装飾ルール
- 和紙のテクスチャ・微細なノイズを背景に薄く
- 罫線は細く短く（見出し下に短い1本など）
- 朱は印のように小面積で1箇所
- 写真は自然光・低彩度で大きく
- 市松・麻の葉などの文様は極めて薄く、部分的に
- グラデーション・影・ぼかしは使わない

## 8. アニメーションルール
- duration 600〜1000ms、easing は ease-in-out。ゆっくり
- 出現はフェードのみ、少し遅らせて
- Hover は色の反転をゆっくり
- 写真のスクロールはごくわずかなパララックス
- prefers-reduced-motion では静止

## 9. デザイン原則
- 埋めない。余白が主役
- 色は和紙・墨・朱の3色に、和色1〜2色まで
- 太字・大声を避ける
- 縦書きは「一部」に。本文は横書きで読みやすく
- 素材（紙・木・布）の質感を借りる

## 10. NGデザイン
- 純白・純黒・原色
- 大きな角丸・ぼかし影
- 太いゴシックの見出し
- 文様・和柄の全面使用（土産物感）
- 速いアニメーション

## 11. 参考になるサービス・デザインスタイル
- 星のや
- 中川政七商店
- 虎屋
- Aesop（余白の使い方）
- 無印良品

## 12. 一言で表現すると
語らぬところに、余韻がある。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <p class="tate">季節の献立</p>
    <div class="main">
      <span class="badge">限定</span>
      <h3>初秋の会席</h3>
      <p>山の恵みを、器とともに。ひと皿ずつ、ゆっくりと。</p>
      <label class="field"><span>お名前</span><input type="text" placeholder="山田 太郎"></label>
      <div class="actions">
        <button class="btn primary">ご予約</button>
        <button class="btn ghost">詳しく</button>
      </div>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; color: #1f1d1a; }
.card { display: flex; gap: 20px; width: 320px; padding: 28px 24px; background: #fbf8f1; border-left: 1px solid #d9d2c3; }
.tate { margin: 0; writing-mode: vertical-rl; font-size: 13px; letter-spacing: .15em; color: #7c7568; }
.main { flex: 1; }
.badge { display: inline-block; padding: 2px 6px; font-size: 11px; background: #b7282e; color: #f5f1e8; letter-spacing: .1em; }
h3 { margin: 12px 0 6px; font-size: 24px; font-weight: 500; letter-spacing: .1em; }
p { margin: 0 0 20px; font-size: 13px; line-height: 2; letter-spacing: .05em; color: #7c7568; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 12px; letter-spacing: .1em; color: #7c7568; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 6px 0; font-size: 15px; font-family: inherit;
  background: transparent; border: 0; border-bottom: 1px solid #d9d2c3; outline: none; transition: border-color .6s ease-in-out;
}
.field input:focus { border-bottom-color: #b7282e; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 9px 18px; font-size: 13px; letter-spacing: .15em; font-family: inherit; border-radius: 0; cursor: pointer;
  background: transparent; transition: background-color .6s ease-in-out, color .6s ease-in-out;
}
.btn.primary { color: #b7282e; border: 1px solid #b7282e; }
.btn.primary:hover { background: #b7282e; color: #f5f1e8; }
.btn.ghost { color: #1f1d1a; border: 1px solid #1f1d1a; }
.btn.ghost:hover { background: #1f1d1a; color: #f5f1e8; }
```