# デザイン方針: グラスモーフィズム（Glassmorphism）

## 1. デザインコンセプト
「光を透かす層」。背景の色や動きが透けることで、UIが空間の中に浮かんでいるように見せる。パネルは薄く、背景は豊かに。

## 2. デザインキーワード
透明感 / 奥行き / 浮遊 / 光 / レイヤー

## 3. カラーパレット
- 背景グラデーション1 #6D28D9: 背景のグラデーション始点（紫）
- 背景グラデーション2 #0EA5E9: 背景の終点（空色）
- グラス #FFFFFF: パネル。white 12〜20% + blur(16px)
- グラスボーダー #FFFFFF: white 30%の1pxボーダー（上辺は明るく）
- 本文 #FFFFFF: 白文字。必要に応じて薄い影
- 補足 #FFFFFF: white 70%
- アクセント #FFFFFF: primaryボタンは白の塗り+濃色文字

## 4. タイポグラフィ
- 見出し: 幾何学サンセリフ（Outfit / Poppins / Zen Kaku Gothic New）ウェイト600
- 本文フォント: Inter / Noto Sans JP 400。背景が透けるので文字は太めに
- 数字: 大きく太く。tabular-nums
- ウェイト: 400 / 500 / 600
- サイズ階層: 13 / 15 / 18 / 24 / 36px
- 行間: 本文1.6
- 字間: 見出し-0.01em
- 和欧混植: 英字は幾何学サンセリフ、日本語はZen Kaku Gothic Newで丸みを揃える

## 5. レイアウトルール
- スペーシング 8px基準（8 / 16 / 24 / 32 / 48）
- コンテンツ最大幅 1100px
- パネルは重ねて奥行きを作る（最大3層）
- 情報密度は標準。パネル内はゆったり
- 角丸は16〜24px
- 背景は全画面のグラデーション+ぼかした色の玉（blob）

## 6. UIコンポーネントルール
- ボタン: primary=白の塗り+濃色文字、角丸12px。secondary=white 15%+white 30%ボーダー。Hoverで不透明度上げ、Pressでscale(0.98)
- カード: white 12〜18%背景、blur(16px)、white 30%の1pxボーダー、角丸20px、薄い影(0 8px 32px black 20%)
- 入力フォーム: white 10%背景、white 25%ボーダー、白文字。Focusでボーダーwhite 60%
- モーダル: 中央にグラスパネル。オーバーレイは black 30%+blur(8px)
- タブ: ピル型、選択中はwhite 25%の塗り
- ナビゲーション: 上部固定のグラスバー。スクロールで背景が透ける
- バッジ: white 20%背景+白文字、全丸
- アイコン: 線画、白。stroke 1.75px
- トースト: グラスパネル、右上
- 空状態: ぼかした色の玉+一文
- ローディング: グラスのスケルトン（white 10%）がシマー

## 7. 装飾ルール
- backdrop-filter: blur() が主要装飾。ただし1画面に多用しない（パフォーマンス）
- 背景に鮮やかなグラデーション+blur(80px)の色の玉を2〜3個
- パネル上辺に白のハイライト線（光の反射）
- 微細なノイズを背景に重ねるとガラス感が増す
- ドロップシャドウは柔らかく大きく、1つだけ

## 8. アニメーションルール
- duration 200〜300ms、easing は ease-out
- 背景の色の玉はゆっくり漂う（20〜30s、無限）
- パネルの出現はフェード+scale(0.95→1)+blur解除
- Hover は不透明度・ボーダー明度の変化
- prefers-reduced-motion では玉の漂いを停止

## 9. デザイン原則
- パネルは薄く、背景は豊かに
- コントラストを必ず確認する（透けると読めなくなる）
- ブラーの重ね掛けは3層まで
- backdrop-filter 非対応環境では不透明背景にフォールバック
- 光の方向を一定に（ハイライトは上辺）

## 10. NGデザイン
- 真っ白・単色の背景（透ける意味がなくなる）
- グラスパネルの中にグラスパネルを何層も重ねる
- 灰色の文字（透けて読めない）
- 角丸ゼロ
- ブラーの全画面多用（描画負荷）

## 11. 参考になるサービス・デザインスタイル
- macOS / iOS のコントロールセンター
- Windows 11 Mica / Acrylic
- Apple Vision Pro のUI
- Dribbble のglassmorphism作例

## 12. 一言で表現すると
空間に浮かぶ、すりガラスの窓。

## サンプルUI
```html
<div class="bg">
  <span class="blob b1"></span><span class="blob b2"></span>
  <div class="card">
    <span class="badge">Premium</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
.bg {
  position: relative; display: grid; place-items: center; min-height: 360px; padding: 24px;
  overflow: hidden; border-radius: 12px; font-family: "Outfit", "Zen Kaku Gothic New", sans-serif; color: #fff;
  background: linear-gradient(135deg, #6d28d9, #0ea5e9);
}
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; animation: drift 20s ease-in-out infinite alternate; }
.b1 { width: 220px; height: 220px; background: #f472b6; top: -60px; left: -40px; }
.b2 { width: 260px; height: 260px; background: #34d399; bottom: -90px; right: -60px; animation-delay: -10s; }
@keyframes drift { to { translate: 40px 30px; } }
.card {
  position: relative; width: 300px; padding: 24px;
  background: rgb(255 255 255 / .14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .3); border-top-color: rgb(255 255 255 / .6);
  border-radius: 20px; box-shadow: 0 8px 32px rgb(0 0 0 / .2);
}
@supports not (backdrop-filter: blur(1px)) { .card { background: rgb(60 40 120 / .85); } }
.badge { display: inline-block; padding: 3px 10px; font-size: 12px; background: rgb(255 255 255 / .2); border-radius: 999px; }
h3 { margin: 12px 0 4px; font-size: 20px; font-weight: 600; }
p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / .75); }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 12px; color: rgb(255 255 255 / .75); margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; color: #fff;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .25); border-radius: 12px; outline: none;
  transition: border-color .2s ease-out;
}
.field input::placeholder { color: rgb(255 255 255 / .5); }
.field input:focus { border-color: rgb(255 255 255 / .6); }
.actions { display: flex; gap: 8px; }
.btn { padding: 10px 16px; font-size: 14px; font-weight: 500; border-radius: 12px; cursor: pointer; transition: background-color .2s, scale .2s; }
.btn.primary { background: #fff; color: #4c1d95; border: 1px solid #fff; }
.btn.primary:hover { background: rgb(255 255 255 / .9); }
.btn.primary:active { scale: .98; }
.btn.ghost { background: rgb(255 255 255 / .15); color: #fff; border: 1px solid rgb(255 255 255 / .3); }
.btn.ghost:hover { background: rgb(255 255 255 / .25); }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
```