# デザイン方針: ミニマル（Minimal）

## 1. デザインコンセプト
「引き算の美学」。装飾を排し、余白・文字・1色のアクセントだけで階層と操作性を成立させる。ユーザーの注意を内容そのものに向ける。

## 2. デザインキーワード
余白 / モノトーン / 静けさ / 精密 / 無駄がない

## 3. カラーパレット
- 背景 #FFFFFF: ページ背景。純白で紙のように
- サーフェス #F7F7F7: カード・入力欄の背景。差は最小限
- 本文 #171717: 見出し・本文テキスト
- 補足 #737373: キャプション・プレースホルダー
- ボーダー #E5E5E5: 罫線。1pxの細線
- アクセント #171717: プライマリボタン。色ではなく黒で強調

## 4. タイポグラフィ
- 見出し: 本文と同じ書体、ウェイト差（600）とサイズ差で階層を作る。装飾書体は使わない
- 本文フォント: Inter / Noto Sans JP などニュートラルなサンセリフ
- 数字: font-variant-numeric: tabular-nums で桁を揃える
- ウェイト: 400と600の2段階のみ
- サイズ階層: 14 / 16 / 20 / 28 / 40px。段階を少なくする
- 行間: 本文1.7、見出し1.3
- 字間: 見出しは-0.01em、本文は0
- 和欧混植: 英数字は同じ書体で組み、サイズ差を付けない

## 5. レイアウトルール
- スペーシングは8px基準（8 / 16 / 24 / 40 / 64）
- コンテンツ最大幅は720px（テキスト主体）〜1080px
- 1カラム主体。グリッドは最大でも2〜3カラム
- 情報密度はゆったり。セクション間は64px以上
- 角丸は4px以下、または0
- 区切りは背景色の差ではなく余白と1pxの罫線で表現

## 6. UIコンポーネントルール
- ボタン: 角丸4px、黒背景+白文字（primary）／枠線のみ（ghost）。シャドウなし。Hoverで不透明度0.85、Pressでscale(0.98)
- カード: 背景は白、1pxのボーダー。シャドウなし。Hoverでボーダーが本文色に近づく
- 入力フォーム: 角丸4px、1pxボーダー。Focusでボーダーが黒に変わるだけ。ラベルは上に小さく
- モーダル: 白背景・角丸8px・薄い黒オーバーレイ(0.4)。影は控えめに1段
- タブ: 下線のみで選択を示す。背景色は付けない
- ナビゲーション: テキストリンクのみ。現在地は太字または下線
- バッジ: 枠線のみ、角丸2px、小さな大文字またはモノスペース
- トースト: 黒背景・白文字・角丸4px。画面下中央
- 空状態: 短い一文と1つのアクション。イラストは使わない
- ローディング: 細いスピナーかスケルトン。文字は出さない

## 7. 装飾ルール
- 装飾は基本ゼロ。ライン（1px）のみ許可
- グラデーション・ブラー・パターンは使わない
- アイコンは線画（stroke 1.5px）で統一
- 写真を使う場合はモノクロまたは彩度を落とす

## 8. アニメーションルール
- duration 150〜200ms、easing は ease-out
- Hover は色・不透明度の変化のみ。動かさない
- 出現はフェードのみ。スライドやバウンスは使わない
- prefers-reduced-motion では全てのtransitionを無効化

## 9. デザイン原則
- 迷ったら消す
- 階層は「色」ではなく「サイズ・太さ・余白」で作る
- 1画面に主要アクションは1つ
- 要素を足すときは必ず何かを引く
- 一貫性は装飾より重要

## 10. NGデザイン
- 多色使い（アクセントは1色まで）
- 多段のドロップシャドウ
- 装飾目的のアイコンやイラスト
- 大きな角丸（16px以上）
- グラデーションボタン

## 11. 参考になるサービス・デザインスタイル
- Apple のプロダクトページ
- Notion
- Linear
- Vercel
- Muji（無印良品）

## 12. 一言で表現すると
何も足さない、というデザイン。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">FREE</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: "Inter", "Noto Sans JP", sans-serif; color: #171717; }
.card {
  width: 300px; padding: 28px; background: #fff;
  border: 1px solid #e5e5e5; border-radius: 4px;
}
.badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; letter-spacing: .08em;
  border: 1px solid #e5e5e5; border-radius: 2px; color: #737373;
}
h3 { margin: 14px 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: #737373; }
.field { display: block; margin-bottom: 20px; }
.field span { display: block; font-size: 12px; color: #737373; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid #e5e5e5; border-radius: 4px; background: #fff; outline: none;
  transition: border-color .15s ease-out;
}
.field input:focus { border-color: #171717; }
.actions { display: flex; gap: 8px; }
.btn {
  padding: 10px 16px; font-size: 14px; font-weight: 600; border-radius: 4px;
  cursor: pointer; transition: opacity .15s ease-out, scale .15s ease-out;
}
.btn.primary { background: #171717; color: #fff; border: 1px solid #171717; }
.btn.ghost { background: transparent; color: #171717; border: 1px solid #e5e5e5; }
.btn:hover { opacity: .85; }
.btn:active { scale: .98; }
```