# デザイン方針: ナチュラル・温かみ（Natural / Warm）

## 1. デザインコンセプト
「手ざわりのある安心」。紙や木、土の色を借りて、画面の冷たさを消す。急かさず、押しつけず、そばにいる感じを作る。

## 2. デザインキーワード
素朴 / 安心 / 手ざわり / 穏やか / 生成り

## 3. カラーパレット
- 背景 #F6F1E7: 生成り色のページ背景
- サーフェス #FFFDF8: カード。背景より少し明るく
- 本文 #3B3128: 焦茶。黒は使わない
- 補足 #8A7A68: キャプション
- メイン #5F7A4E: オリーブグリーン。ボタン・リンク
- アクセント #D98E4A: テラコッタ。バッジ・強調
- ボーダー #E3D9C8: 罫線

## 4. タイポグラフィ
- 見出し: 柔らかい明朝またはラウンド寄りのゴシック（Zen Maru Gothic / Klee One）。ウェイト500〜600
- 本文フォント: Zen Kaku Gothic / Noto Sans JP 400。少し大きめ（16px）
- 数字: 本文と同じ書体。強調しすぎない
- ウェイト: 400 / 500 / 600
- サイズ階層: 14 / 16 / 18 / 24 / 32px
- 行間: 本文1.8、見出し1.4
- 字間: 本文+0.02em（ゆったり）
- 和欧混植: 英字はセリフ気味（Lora等）で温かみを揃える

## 5. レイアウトルール
- スペーシング 8px基準、やや広め（8 / 16 / 24 / 40 / 64）
- コンテンツ最大幅 960px
- 2カラム中心。左右非対称のレイアウトも可
- 情報密度はゆったり
- 角丸は12〜16px。角ばらせない
- 区切りは罫線ではなく背景色の差と余白で

## 6. UIコンポーネントルール
- ボタン: 角丸12px、オリーブの塗り+生成りの文字。シャドウなし。Hoverで少し明るく、Pressで少し暗く
- カード: サーフェス色、1pxの薄いボーダー、角丸16px。影はごく薄い暖色系(rgb(59 49 40 / .06))
- 入力フォーム: 角丸12px、1pxボーダー、背景は白。Focusでオリーブのボーダー
- モーダル: 角丸20px、オーバーレイは焦茶0.4
- タブ: テキスト+下に丸いドットで選択を示す
- ナビゲーション: 生成り背景・焦茶文字。選択中はオリーブ
- バッジ: テラコッタ10%背景+テラコッタ文字。角丸8px
- アイコン: 線画、角が丸いもの（stroke-linecap: round）
- トースト: サーフェス色、左にオリーブのアイコン
- 空状態: 手描き風イラスト+優しい一文
- ローディング: ゆっくり脈打つ丸。スピナーは使わない

## 7. 装飾ルール
- 紙・布・木の写真やテクスチャを薄く背景に
- 手描き風のライン・イラストを使ってよい
- 写真は自然光・暖色で統一
- シャドウは暖色系で薄く。グラデーションは使わない

## 8. アニメーションルール
- duration 250〜400ms、easing は ease-in-out
- Hover は色が少し明るくなる程度。動かさない
- 出現はゆっくりフェード
- 呼吸のようなゆっくりした脈動はローディングにのみ
- prefers-reduced-motion では静止

## 9. デザイン原則
- 黒と純白を使わない（焦茶と生成り）
- 角を立てない
- 急かさない（タイマー・カウントダウンを避ける）
- 写真とイラストのトーンを揃える
- 文字は大きめ・行間広め

## 10. NGデザイン
- 純黒・純白・ネオンカラー
- 鋭角・角丸ゼロ
- 速く派手なアニメーション
- 冷たい青グレーの影
- 高密度なテーブルUI

## 11. 参考になるサービス・デザインスタイル
- Airbnb（初期）
- クックパッド
- Patagonia
- Muji のEC
- Headspace（配色）

## 12. 一言で表現すると
画面なのに、あたたかい。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">季節限定</span>
    <h3>今週の野菜セット</h3>
    <p>旬の野菜を農家から直接お届けします。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">申し込む</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; color: #3b3128; }
.card {
  width: 300px; padding: 26px; background: #fffdf8;
  border: 1px solid #e3d9c8; border-radius: 16px;
  box-shadow: 0 2px 8px rgb(59 49 40 / .06);
}
.badge {
  display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 500;
  background: rgb(217 142 74 / .15); color: #b8702e; border-radius: 8px;
}
h3 { margin: 14px 0 6px; font-size: 20px; font-weight: 600; }
p { margin: 0 0 20px; font-size: 14px; line-height: 1.8; letter-spacing: .02em; color: #8a7a68; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 13px; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 15px;
  border: 1px solid #e3d9c8; border-radius: 12px; background: #fff; outline: none;
  transition: border-color .3s ease-in-out;
}
.field input:focus { border-color: #5f7a4e; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 11px 18px; font-size: 14px; font-weight: 500; border-radius: 12px;
  cursor: pointer; transition: background-color .3s ease-in-out;
}
.btn.primary { background: #5f7a4e; color: #f6f1e7; border: 1px solid #5f7a4e; }
.btn.primary:hover { background: #6b8a58; }
.btn.primary:active { background: #506841; }
.btn.ghost { background: transparent; color: #8a7a68; border: 1px solid #e3d9c8; }
.btn.ghost:hover { background: #f6f1e7; }
```