# デザイン方針: ブルータリズム（Brutalism / Neo-Brutalism）

## 1. デザインコンセプト
「隠さない、飾らない」。構造をむき出しにし、デフォルトのような見た目を意図的に選ぶ。洗練の反対を洗練として提示する。

## 2. デザインキーワード
むき出し / 太線 / 原色 / 非対称 / 主張

## 3. カラーパレット
- 背景 #FFFDF5: 少し黄みの白。またはそのまま純白
- 本文・線 #000000: 純黒。2〜3pxの輪郭線、影
- メイン #FFE600: 黄。ボタン・ハイライト
- サブ1 #FF4D4D: 赤。警告・強調
- サブ2 #4D7CFF: 青。リンク
- サブ3 #7CFF7C: 緑。成功

## 4. タイポグラフィ
- 見出し: 極太の幅広サンセリフ（Archivo Black / Anton）またはシステムフォントの太字。大文字、巨大
- 本文フォント: システムフォント（Arial / Helvetica / system-ui）またはモノスペース。加工しない
- 数字: 極太・巨大。桁数を気にしない
- ウェイト: 400 / 900の両極
- サイズ階層: 14 / 16 / 24 / 48 / 96px。極端に
- 行間: 本文1.5、見出し0.95（詰める）
- 字間: 見出し-0.03em
- 和欧混植: 日本語は極太ゴシック（Dela Gothic One 等）で英字と重さを揃える

## 5. レイアウトルール
- スペーシング 8px基準だが、非対称・はみ出しを許可
- コンテンツ最大幅は設定しない、または1400px
- 要素を太い線で格子状に区切る（テーブルのように）
- 情報密度は高め。空白は「意図的な空白」として大きく
- 角丸は0
- 要素の重なり・回転・ずらしを積極的に

## 6. UIコンポーネントルール
- ボタン: 3pxの黒ボーダー、黄のベタ塗り、黒の太字大文字、ハードシャドウ(4px 4px 0 #000)。Hoverでシャドウ拡大(6px)、Pressでシャドウ0+位置ずらし
- カード: 白背景、3px黒ボーダー、ハードシャドウ(6px 6px 0)。角丸0
- 入力フォーム: 3px黒ボーダー、角丸0、白背景。Focusで黄背景
- モーダル: 黒ボーダー+巨大なハードシャドウ。オーバーレイは黒のドットパターン
- タブ: 選択中は黒背景+白文字（反転）
- ナビゲーション: 上部に黒の太い帯、または各リンクをボーダー付きボックスに
- リスト: 各行を黒の線で区切る。番号は巨大
- バッジ: 原色のベタ+黒ボーダー、角丸0
- アイコン: 太い線画（stroke 3px）または絵文字・テキスト記号（→ ★ ※）
- トースト: 黒背景・黄文字・ボーダー。画面上部全幅
- 空状態: 巨大な「NOTHING HERE.」
- ローディング: 「LOADING...」テキストの点滅

## 7. 装飾ルール
- ハードシャドウ（ぼかしゼロ）・太い黒線が主要装飾
- マーキー・スタンプ・矢印・テキスト記号を散らす
- ドットや斜線のパターンを背景に
- グラデーション・ブラー・柔らかい影は使わない
- 画像はボーダーで囲む、または粗いハーフトーンに

## 8. アニメーションルール
- duration 100ms程度。easing は linear または steps()
- Hover はシャドウ拡大・色反転。滑らかさは不要
- マーキー（流れるテキスト）を装飾に
- 出現は即時、またはカクカクしたステップ
- prefers-reduced-motion でマーキーと点滅を止める

## 9. デザイン原則
- 線は太く、色は原色、影はぼかさない
- 「きれいに整える」衝動に抗う
- テキストが最大の装飾
- 構造（ボーダー・グリッド）を見せる
- それでも操作性は担保する（クリック領域・コントラスト）

## 10. NGデザイン
- 角丸・ぼかし影・グラデーション
- パステル・グレー基調
- 細い書体
- 整いすぎた対称レイアウト
- 小さな要素・繊細な装飾

## 11. 参考になるサービス・デザインスタイル
- Gumroad（リニューアル後）
- Figma Config のビジュアル
- Bloomberg Businessweek
- brutalistwebsites.com
- Balenciaga

## 12. 一言で表現すると
飾らないことを、飾りにする。

## サンプルUI
```html
<div class="ui">
  <div class="card">
    <span class="badge">FREE!!</span>
    <h3>JOIN THE LIST</h3>
    <p>週1回、本当に読む価値のあるものだけ。</p>
    <label class="field">
      <span>メールアドレス</span>
      <input type="email" placeholder="you@example.com">
    </label>
    <div class="actions">
      <button class="btn primary">SUBSCRIBE →</button>
      <button class="btn ghost">キャンセル</button>
    </div>
  </div>
</div>
```
```css
.ui { font-family: "Archivo Black", "Dela Gothic One", Arial, sans-serif; color: #000; }
.card {
  width: 300px; padding: 22px; background: #fff;
  border: 3px solid #000; box-shadow: 8px 8px 0 #000;
}
.badge {
  display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 900;
  background: #ff4d4d; border: 3px solid #000; rotate: -4deg;
}
h3 { margin: 14px 0 6px; font-size: 30px; font-weight: 900; line-height: .95; letter-spacing: -0.03em; }
p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; font-family: Arial, sans-serif;
  border: 3px solid #000; border-radius: 0; background: #fff; outline: none; transition: background-color .1s linear;
}
.field input:focus { background: #ffe600; }
.actions { display: flex; gap: 12px; }
.btn {
  padding: 10px 16px; font-size: 14px; font-weight: 900; text-transform: uppercase; font-family: inherit;
  border: 3px solid #000; border-radius: 0; cursor: pointer; box-shadow: 4px 4px 0 #000;
  transition: box-shadow .1s linear, translate .1s linear;
}
.btn.primary { background: #ffe600; color: #000; }
.btn.ghost { background: #fff; color: #000; }
.btn:hover { box-shadow: 6px 6px 0 #000; translate: -2px -2px; }
.btn:active { box-shadow: 0 0 0 #000; translate: 4px 4px; }
```