# デザイン方針: ニューモーフィズム（Neumorphism / Soft UI）

## 1. デザインコンセプト
「柔らかい物質のUI」。画面全体が一枚の柔らかい素材で、ボタンはそこから盛り上がり、入力欄は凹んでいる。触感を視覚で再現する。

## 2. デザインキーワード
柔らかさ / 触感 / 押し出し / 単色 / 静的

## 3. カラーパレット
- 背景 #E0E5EC: 要素と同じ色。全ての基準
- 明るい影 #FFFFFF: 左上からの光（-6px -6px 12px）
- 暗い影 #A3B1C6: 右下の影（6px 6px 12px）
- 本文 #3D4A5C: 本文。濃すぎる黒は浮く
- 補足 #8492A6: キャプション
- アクセント #5B8DEF: ON状態・アイコン・進捗のみに使う

## 4. タイポグラフィ
- 見出し: 丸みのあるサンセリフ（Nunito / Zen Maru Gothic）ウェイト700
- 本文フォント: Nunito / Noto Sans JP 400〜500
- 数字: 太く大きく（計器表示のように）
- ウェイト: 400 / 600 / 700
- サイズ階層: 12 / 14 / 16 / 20 / 28px
- 行間: 本文1.6
- 字間: ラベルは+0.05em
- 和欧混植: 丸ゴシック同士で揃える

## 5. レイアウトルール
- スペーシング 8px基準、要素間は広め（影が重ならないよう最低16px）
- コンテンツ最大幅 960px
- 要素はグリッドに整列し、重ねない
- 情報密度は低め（影に面積が要る）
- 角丸は12〜20px。ダイヤルは全丸
- 区切り線は使わず、凹んだ溝（inset影）で

## 6. UIコンポーネントルール
- ボタン: 背景色と同色、外側に明暗2方向の影で盛り上げる。Hoverで影を少し強く、Pressでinset影に反転（凹む）。角丸16px
- カード: 背景同色、外側影。角丸20px。ボーダーなし
- 入力フォーム: inset影で凹ませる。Focusでアクセント色の細い外光
- モーダル: 大きな外側影。オーバーレイは背景色の80%
- タブ: 選択中だけ凹む（inset）
- ナビゲーション: アイコンボタンの並び。選択中はアクセント色+凹み
- リスト: 各行はフラット。区切りは凹んだ溝
- バッジ: 小さく盛り上がる。アクセント色の文字
- アイコン: 線画。ON状態のみアクセント色
- トースト: 盛り上がるパネル。下部中央
- 空状態: 凹んだ大きな円の中にアイコン
- ローディング: 凹んだ溝の中をアクセント色のバーが進む

## 7. 装飾ルール
- 装飾は影のみ。方向（左上光源）を全要素で固定
- グラデーションは要素表面にごく薄い斜め（明→暗）を可
- パターン・イラスト・写真は使わない
- アクセント色は状態表示にのみ

## 8. アニメーションルール
- duration 150〜200ms、easing は ease-out
- Press で外側影→inset影へ切り替え（触感の核）
- トグルはノブがスライドし、ONでアクセント色に
- 出現はフェードのみ
- prefers-reduced-motion では影の切替を即時に

## 9. デザイン原則
- 光源は1つ、左上に固定
- 全ての要素が背景と同色（色で区別しない）
- 押せるものは盛り上がり、入力するものは凹む
- アクセント色は「状態」にだけ使う
- コントラスト不足を文字の太さとサイズで補う

## 10. NGデザイン
- 要素ごとに違う背景色
- 影の方向がバラバラ
- 影だけで小さな文字リンクを表現する（識別不能）
- グラス・ネオンとの混在
- 高密度なデータ表示

## 11. 参考になるサービス・デザインスタイル
- Dribbble の Neumorphism 作例
- Tesla のアプリ（部分的）
- スマートホーム系アプリ
- Nest サーモスタット

## 12. 一言で表現すると
触れそうな、やわらかい面。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">ON</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: "Nunito", "Zen Maru Gothic", sans-serif; color: #3d4a5c;
  background: #e0e5ec; padding: 24px; border-radius: 16px; display: inline-block; }
.card {
  width: 300px; padding: 24px; background: #e0e5ec; border-radius: 20px;
  box-shadow: -8px -8px 16px #fff, 8px 8px 16px #a3b1c6;
}
.badge {
  display: inline-block; padding: 3px 12px; font-size: 12px; font-weight: 700; color: #5b8def;
  border-radius: 999px; box-shadow: -3px -3px 6px #fff, 3px 3px 6px #a3b1c6;
}
h3 { margin: 16px 0 4px; font-size: 20px; font-weight: 700; }
p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: #8492a6; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 12px; letter-spacing: .05em; color: #8492a6; margin-bottom: 8px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; color: #3d4a5c;
  background: #e0e5ec; border: 0; border-radius: 12px; outline: none;
  box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px #a3b1c6; transition: box-shadow .15s ease-out;
}
.field input:focus { box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px #a3b1c6, 0 0 0 2px rgb(91 141 239 / .4); }
.actions { display: flex; gap: 14px; }
.btn {
  padding: 11px 20px; font-size: 14px; font-weight: 700; border: 0; border-radius: 14px; cursor: pointer;
  background: #e0e5ec; color: #3d4a5c;
  box-shadow: -5px -5px 10px #fff, 5px 5px 10px #a3b1c6; transition: box-shadow .15s ease-out;
}
.btn.primary { color: #5b8def; }
.btn:hover { box-shadow: -7px -7px 14px #fff, 7px 7px 14px #a3b1c6; }
.btn:active { box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px #a3b1c6; }
```