# デザイン方針: カジュアル・ポップ（Casual / Pop）

## 1. デザインコンセプト
「触ると楽しい」。彩度の高い色と丸いフォルム、跳ねる動きで、使うこと自体を遊びにする。ただし色数はルール化して散らかさない。

## 2. デザインキーワード
元気 / 遊び心 / 親しみ / 丸み / 弾む

## 3. カラーパレット
- 背景 #FFFBF0: クリーム色のページ背景
- サーフェス #FFFFFF: カード
- 本文 #1E1B3A: 濃紺。真っ黒は使わない
- メイン #FF5C8A: プライマリボタン・強調
- サブ1 #FFC93C: バッジ・ハイライト
- サブ2 #3ED6C0: 成功・セカンダリ
- サブ3 #6C63FF: リンク・情報
- ボーダー #1E1B3A: 2pxの太い輪郭線

## 4. タイポグラフィ
- 見出し: 太いラウンドゴシック（M PLUS Rounded 1c / Nunito）。ウェイト800、少し大きめ
- 本文フォント: ラウンドゴシック 400〜500
- 数字: 太く大きく。桁は揃えなくてよい
- ウェイト: 500 / 700 / 800
- サイズ階層: 14 / 16 / 20 / 28 / 40px
- 行間: 本文1.7、見出し1.25
- 字間: 見出しは+0.01em（丸文字は詰めすぎない）
- 和欧混植: 同じラウンド系で揃える。英語見出しは大きく

## 5. レイアウトルール
- スペーシング 8px基準（8 / 16 / 24 / 32 / 48）
- コンテンツ最大幅 1040px
- カードグリッドは2〜3カラム、ガター広め（24px）
- 情報密度は標準〜ゆったり
- 角丸は16〜24px。ボタンは全丸（999px）
- 要素はわずかに傾けてもよい（-2〜2deg）

## 6. UIコンポーネントルール
- ボタン: 全丸、太文字、メイン色の塗り+濃紺2pxボーダー+オフセットシャドウ(3px 3px 0)。Hoverで上に2px、Pressで沈んでシャドウ消失
- カード: 白背景、2pxの濃紺ボーダー、角丸20px、オフセットシャドウ。Hoverでわずかに傾く
- 入力フォーム: 角丸12px、2pxボーダー。Focusでメイン色ボーダー
- モーダル: 角丸24px、太ボーダー、オーバーレイは濃紺0.6
- タブ: ピル型、選択中はサブ色の塗り
- ナビゲーション: 下部タブ。アイコンは塗り、選択で色+バウンス
- バッジ: 黄色地+濃紺文字、全丸、太字
- アイコン: 太めの線画（stroke 2.5px）または塗り
- トースト: 角丸16px、メイン色の塗り、白太文字。下から跳ねて出現
- 空状態: キャラクター・イラスト+一言+大きなボタン
- ローディング: 跳ねるドット3つ（サブ色をそれぞれに）

## 7. 装飾ルール
- フラットイラスト・ステッカー風の要素を積極的に使う
- ドットや幾何学の背景パターンを薄く敷いてよい
- シャドウはぼかさないオフセットシャドウ（ハードシャドウ）
- グラデーションは使わない（ベタ塗りの方がポップ）

## 8. アニメーションルール
- duration 200〜300ms、easing は cubic-bezier(0.34, 1.56, 0.64, 1)（オーバーシュート）
- Hover は上に浮く+わずかな回転。Pressは沈む
- 出現はscale(0.8→1)のポップ
- いいね・完了など成功の瞬間にバウンスや紙吹雪
- prefers-reduced-motion ではオーバーシュートをease-outに、バウンスは無効

## 9. デザイン原則
- 色は「メイン1+サブ3」を守り、それ以上増やさない
- 輪郭線を全要素で統一（2px・濃紺）
- 動きは短く、跳ねる
- 文字は短く、語りかける口調
- 楽しいが、読める（コントラストは守る）

## 10. NGデザイン
- 暗い背景・グレー基調
- 細い書体・小さな文字
- ぼかしのドロップシャドウ
- 角丸ゼロの四角
- 色数の際限ない増加

## 11. 参考になるサービス・デザインスタイル
- Duolingo
- Headspace
- Figma のマーケティングサイト
- Spotify Wrapped
- LINE スタンプ系UI

## 12. 一言で表現すると
触りたくなる、弾むUI。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">🔥 7日連続</span>
    <h3>今日のレッスン！</h3>
    <p>あと5分でストリークが続くよ。</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: "M PLUS Rounded 1c", "Nunito", sans-serif; color: #1e1b3a; }
.card {
  width: 300px; padding: 24px; background: #fff;
  border: 2px solid #1e1b3a; border-radius: 20px; box-shadow: 4px 4px 0 #1e1b3a;
  transition: rotate .25s cubic-bezier(.34,1.56,.64,1);
}
.card:hover { rotate: -1deg; }
.badge {
  display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 800;
  background: #ffc93c; border: 2px solid #1e1b3a; border-radius: 999px;
}
h3 { margin: 14px 0 6px; font-size: 22px; font-weight: 800; }
p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; font-weight: 500; }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 14px;
  border: 2px solid #1e1b3a; border-radius: 12px; outline: none; transition: border-color .2s;
}
.field input:focus { border-color: #ff5c8a; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 10px 18px; font-size: 14px; font-weight: 800; border-radius: 999px;
  border: 2px solid #1e1b3a; cursor: pointer;
  transition: translate .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.btn.primary { background: #ff5c8a; color: #fff; box-shadow: 3px 3px 0 #1e1b3a; }
.btn.primary:hover { translate: 0 -2px; box-shadow: 5px 5px 0 #1e1b3a; }
.btn.primary:active { translate: 2px 2px; box-shadow: 0 0 0 #1e1b3a; }
.btn.ghost { background: #fff; color: #1e1b3a; }
.btn.ghost:hover { background: #fffbf0; }
```