ジン・コラージュ Zine Collage

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/zine-collage/DESIGN.md

# DESIGN.md — ジン・コラージュ / zine-collage

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

自主制作ZINEとパンクのフライヤーの切り貼りをWebに持ち込む。整列を捨て、要素を
傾け・重ね・はみ出させ、マスキングテープと値札とスタンプで誌面を埋める。
情報は隙間なく詰め、静けさではなく**手を動かした密度**で説得する。

**キーワード**: 切り貼り / 手作り / 密度 / リソグラフ / スクラップブック
**この見た目が向く場面**: 古着・レコード・ZINE・カルチャーイベント・ライブハウス・
インディーブランド・自主制作物の販売サイトなど、「量産されていない」印象を出したい場面

## 2. タイポグラフィ

- 和文見出し: Dela Gothic One / ウェイト 400（このフォント自体が極太。切り抜き文字として使い、
  一部だけ背景色の帯で囲む・白抜きにする・回転させて「貼った」風にする）
- 手書きアクセント: Yusei Magic / ウェイト 400（値札・注釈・日付・矢印コメント・吹き出し・
  ナビリンクなど「手が入った」印象を出したい小要素すべてに使う）
- 本文: Zen Kaku Gothic New / ウェイト 400（本文は必ず読みやすく素直に組む。本文にまで
  手書き感を出さない。本文だけはニュートラルに）
- 見出しスケール: h1 34〜64px（clamp可）/ h2 30〜46px（clamp可）/ h3 18〜38px
  （見出しは大小混植が前提。同じ見出し内でも行ごとにサイズ・回転・地色を変えてよい）
- 特記: 見出しは1〜3行に分割し、行ごとに `transform: rotate(-2deg〜2.5deg)` を変える。
  1行は背景色（墨 or ビビッド色）で塗って白抜きにする。すべての見出しを同じ角度・
  同じ処理で統一しない（統一した瞬間に「テンプレ」に見える）

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #f0e9d8（藁半紙） | 60% |
| 背景（節替え） | #e6dcc4 | — |
| 切り抜き白フチ・台紙 | #fdf8ee（純白は使わない） | — |
| テキスト（主・墨） | #1d1a16（純黒は使わない） | 25% |
| テキスト（弱・補足） | #6b6255 | — |
| ビビッド1（蛍光ピンク） | #ff4fa3 | 5%以下 |
| ビビッド2（黄） | #ffd900 | 5%以下 |
| ビビッド3（青） | #0057d8 | 5%以下 |

- 配色ルール: ビビッド3色は「マーカーで引いた」「シールを貼った」「スタンプを押した」用途に
  **限定**する（タグ・帯・マーカーハイライト・スタンプ枠・小見出しの背景1行分など）。
  面のベタ塗りは1セクションにつき1色まで（例: アクセス節はインク墨のベタ地でよいが、
  同時にピンクのベタ地セクションを隣に作らない）。3色を1要素に同時使用しない
- コントラスト: ビビッドピンク（#ff4fa3）を藁半紙 #f0e9d8・白フチ #fdf8ee のような明るい地の上に
  **文字色として直接**使わない（コントラスト比が約2.9:1しかなく、AA基準の3:1すら割ることがある）。
  ピンクを使いたい見出しアクセント・ラベル・バッジは、必ず「ピンクを地色として敷いて墨文字にする」か
  「墨地の上にピンク文字を乗せる」のどちらかの塗りつぶし方式にする（実測コントラスト比 約5.7:1）。
  同じ処理を機械的に繰り返さず、要素ごとに“ピンク地×墨文字”“墨地×ピンク文字”“タグの型を流用”など
  異なる表現で塗りを変えてよい（詳細は §9 実装ノートの実例を参照）
- 純白 #ffffff・純黒 #000000 は使わない（地は藁半紙、フチは #fdf8ee、文字は墨 #1d1a16 に寄せる）

## 4. レイアウト・余白

- コンテンツ最大幅: 1160px / 整列グリッドを作らない。要素同士は微妙にサイズ・余白を変えて
  「手で並べた」不揃いさを残す
- セクション間: 太罫線（2〜3px、墨色）で区切る。均等な余白だけで区切らない
- 密度: 疎にしない。入荷リストは日付+品名+価格を1行にぎっしり並べる、フロアガイド・
  買取表は項目を詰める。**余白を持て余さない**（余白主役のデザインにしない）
- 傾き: 主要カード・タグ・帯には必ず `rotate(-2deg〜2.5deg)` の範囲でランダムに近い角度をつける。
  隣り合う要素は互い違いの符号にする（すべて同じ向きに傾けない）
- ヒーローの構成: 中央寄せ見出し＋CTA＋下に画像、という定型を作らない。「ZINEの表紙」として
  組む＝号数（vol.NN）＋発行年月＋バーコード風の縞を最上部に横並びで置き、その下に
  大小混植の特集見出し、本文、CTA1つ（タグ/テープ風。ボタンを2つ並べない）、
  右または下に写真台紙＋手描き吹き出し＋スタンプを不規則に重ねる

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 地は墨 #1d1a16 のベタ、ロゴは白抜き＋一部黄色。ナビリンクは
  Yusei Magic・藁半紙色の小片（付箋のような矩形）にして、各リンクごとに角度をわずかに変える。
  ホバーで角度が水平（0deg）に戻り、背景が黄に変わる（0.15s ease）。本文中の通常リンクとは
  見た目を分ける（ナビは「貼られた紙片」、本文リンクは下線でよい）
- 角丸: 0px（すべて直角。丸が欲しい箇所は必ずSVGの手描き円で表現する。border-radiusは使わない）
- 影: `box-shadow: 4px 4px 0 #1d1a16` のハードオフセットのみ（ぼかさない）。カード・吹き出し・
  写真台紙に使う。多用しすぎない（1画面で目立つ範囲に3〜5個程度）
- 罫線: 2〜3px 実線が基本。区切りに使う点線・破線（dashed）は2px、色は墨または #cfc4a9
- ボタン/CTA: 通常のボタン形状にしない。マスキングテープ風の帯（不透明なベタ塗り＋
  `clip-path` によるギザギザ端）か、値札タグ形状（clip-pathで先端を尖らせる）で作る。
  ボタンを2つ並置しない
- カード的要素: 白フチ台紙（`.cutout`＝#fdf8ee地＋墨の3px枠＋ハードオフセット影）か、
  レシート風の詰め表（罫線区切りのリスト）で表現する。「アイコン＋見出し＋説明」の
  角丸カード3枚並びは作らない
- タグ・スタンプ: 値札タグは`clip-path: polygon()`で先端を尖らせ、影は同色の複製要素で
  ずらして作る（box-shadowと同じ見た目をclip-path要素でも再現する）。スタンプは
  SVGの二重丸（stroke統一・fillなし）に短いテキストを重ねる。丸はborder-radiusでなく
  必ずSVG circle/pathで描く
- フォーム要素: 本デモには問い合わせフォームを設けない（買取・イベントは電話/来店導線）。
  フォームを置く場合は白フチ台紙の中に墨の2px罫線input、フォーカスでピンクに変わる
- 画像の扱い: 本デモは写真を使わずSVGの線画（ハンガーラック・地図など）で代替する。
  実写を使う場合も白フチ台紙に載せ、輪郭は角丸なし・枠3px・ハードオフセット影
- アクセント色の適用範囲: §3の用法（タグ／帯／マーカー／スタンプ／1行背景）に限定。
  ナビ全体やボディ全面をビビッド色で塗らない

## 6. モーション

- 量: subtle。フェード一律・スクロール連動の出現アニメは使わない
- 使う動き: ナビ小片・CTAタグ・カードのホバーで `transform: rotate()` がわずかに水平へ戻る
  （0.15s ease）。スタンプにホバー/クリックで「押される」ような一瞬のスケール変化を
  つけてよい（0.12s、scale 0.94→1 程度）
- 使わない動き: 数字カウントアップ、マーキー、パララックス、全要素一律フェードイン、
  カルーセル自動送り

## 7. 写真・イラスト・図版

- 手描き風の線画SVGを自作する（星・矢印・ぐるぐる丸・地図・時計等）。すべて
  `stroke-width` を統一（3px基準）し、`stroke-linecap/linejoin: round` で手描きの丸みを出す。
  fillは基本使わず線画にする（スタンプの丸枠、矢印コメント、道順地図など）
- 写真の代わりに使うプレースホルダ図版（ハンガーラックの縞など）もこのSVG線画のトーンで統一する
- 3D・グラデーション・抽象ブロブは使わない

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / system-ui をデフォルトで使わない（Dela Gothic One / Yusei Magic /
  Zen Kaku Gothic New で組む。書体を勝手に別のものへ差し替えない）
- グラデーションを一切使わない（背景・文字・ボタンすべて単色の面で構成する）
- border-radius を使わない（常に0。丸が必要な箇所は必ずSVGの手描き円で表現する）
- box-shadow をぼかさない（`4px 4px 0 #1d1a16` のハードオフセットのみ。blurを持つ影を作らない）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋下に製品画像）を作らない。
  ボタンを2つ並置しない
- 「アイコン＋見出し＋説明」の角丸カードを3枚横並びで作らない
- 絵文字をアイコンに使わない（線幅を統一した自作インラインSVGのみ）
- 純白 #ffffff・純黒 #000000 を地・文字に使わない（藁半紙 #f0e9d8・墨 #1d1a16・
  白フチ #fdf8ee に寄せる）
- 要素を整列・等間隔グリッドだけで組まない。傾き（-2deg〜2.5deg）・重なり・はみ出しを
  意図的に残す。全要素を同じ角度に揃えない
- ビビッド3色（ピンク・黄・青）を面のベタ塗りとして1セクションに2色以上重ねない。
  3色を同時に1要素へ使わない
- ビビッドピンクを明るい地（藁半紙・白フチ）の上に**文字色として直接**使わない
  （コントラスト比が3:1未満になり得るため）。ピンクは必ず背景の塗り（帯・タグ・スタンプ・
  ラベル）として使うか、墨地の上での文字色としてのみ使う
- スクロール連動のフェードイン、数字カウントアップ、マーキー、パララックスを使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f0e9d8;         /* 藁半紙。基調の紙色（純白は地に使わない） */
  --color-bg-alt: #e6dcc4;     /* 節替え・古紙寄りの淡いベージュ */
  --color-fringe: #fdf8ee;     /* 切り抜き風の白フチ／写真台紙。純白 #fff は使わない */
  --color-ink: #1d1a16;        /* インク墨。見出し・罫線・影（純黒は使わない） */
  --color-text: #2b2620;       /* 本文 */
  --color-text-weak: #6b6255;  /* 補足・キャプション */
  --color-pink: #ff4fa3;       /* 蛍光ピンク。マーカー／シール／タグ限定 */
  --color-yellow: #ffd900;     /* 黄。マーカー／シール／帯限定 */
  --color-blue: #0057d8;       /* 青。マーカー／スタンプ／タグ限定 */

  /* 変数には総称ファミリを含めない */
  --font-display: "Dela Gothic One"; /* 和文見出し。切り抜き文字として使う超極太 */
  --font-hand: "Yusei Magic";        /* 手書きアクセント。値札・注釈・吹き出し */
  --font-body: "Zen Kaku Gothic New"; /* 本文。ウェイト400 */

  --space-unit: 8px;
  --radius: 0;                 /* 角丸なし。切り紙なので直角のみ（丸は必ずSVGで描く） */
  --max-width: 1160px;

  --tilt-min: -2deg;
  --tilt-max: 2.5deg;

  --shadow-hard: 4px 4px 0 var(--color-ink); /* ハードオフセット影。ぼかさない */
  --line: 3px;                 /* 罫線・枠線の基準太さ（2〜3px） */
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Yusei+Magic&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap`
- マスキングテープの帯は `clip-path: polygon(...)` で端をギザギザにし、背景は不透明のベタ塗り
  （半透明にしない＝マスキングテープの質感は「不透明」であることが本質）
- 値札タグの影は `box-shadow` ではなく、同形状の擬似要素（`::before` に同じ `clip-path`）を
  `transform: translate(4px, 4px)` して墨色で複製する手法で作る（斜めのタグ形状に
  box-shadowのオフセットをそのまま使うと影の形が崩れるため）
- 手描きSVGは共通クラス `.doodle` に `stroke: var(--color-ink); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;` を持たせ、色違いは `.doodle.pink` /
  `.doodle.blue` の修飾クラスで対応する
- ピンクを文字色に使う場合の実例（コントラスト対策・パターンを機械的に統一しない）:
  - 見出し内アクセント語: `display:inline-block; background:var(--color-pink);
    color:var(--color-ink);` の貼り紙風ブロックにする（`.l2` のインク地反転とは逆の配色にして
    単調な繰り返しを避ける）
  - 小ラベル（eyebrow等）: 既存のマスキングテープ手法（`clip-path`のギザギザ＋不透明ベタ塗り）を
    流用し、`background:var(--color-pink); color:var(--color-ink);` にする
  - 重要な状態表示（SOLD等の小バッジ）: `background:var(--color-ink); color:var(--color-pink);`
    の判子（スタンプ）風の塗りつぶしにする。小さい文字ほど塗りつぶし必須（枠線だけ・地の透過は禁止）
  - 装飾的な記号（リストの「―」等）: 無理にピンクを使わず `color:var(--color-ink)` に統一してよい
    （ビビッド色は主張したい箇所だけに使う。装飾記号にまで全部色を付けない）