昭和レトロポップ Showa Retro Pop

DESIGN.md

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

https://3pt.co.jp/design-library/md/showa-retro-pop/DESIGN.md

# DESIGN.md — 昭和レトロポップ / showa-retro-pop

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

## 1. コンセプト

昭和30〜40年代の銭湯ポスター・相撲の番付表・ホーロー看板の様式美をWebに持ち込む。
にぎやかで人懐こいのに、活字と罫線の規律がある。「レトロ風の小綺麗なカフェ」ではなく、
本物の大衆文化の圧を出す。朱と藍の面のベタ塗りを恐れず、罫線の階層と縦書きで秩序を作る。

**キーワード**: 大衆・番付・ホーロー看板・活字の圧・縦書き
**この見た目が向く場面**: 銭湯・温浴施設・商店街の老舗・駄菓子屋・大衆食堂・祭事/催事・
昭和・下町を売りにする小売や飲食

## 2. タイポグラフィ

- 大見出し（屋号・ヒーロー・番付の大字）: Reggae One / ウェイト400のみ（1ウェイトしかない太い
  ブロック体。見出しの圧そのものが主役になる書体なので、字間は詰めすぎない `letter-spacing: 0.02em`）
- 中見出し・飾り文字（セクション見出し・番付タイトル・木札の値）: Kaisei Decol / ウェイト700
  （小見出しや飾り文字は500、本文寄りの飾りは400）
- 本文: Zen Kaku Gothic New / ウェイト400 / サイズ 15.5px / 行間 1.85 / 字間 0.01em
- 見出しスケール: h1（屋号・スクリーンリーダー専用。視覚的には暖簾の意匠で表現）/
  h2 24〜32px（`clamp(24px, 4vw, 32px)`）/ 番付見出し 26〜38px / 本文太字（帳票の項目名など）14px
- 数字は漢数字と洋数字を使い分ける。**格式・伝統を語る文脈（創業年・営業時間の意匠表示・
  番付の番号・暦の日付・室温・人数）は漢数字**（例: 昭和八年、十五時-二十四時、横綱、
  九十度、八名、十二月二十二日）。**実務的に読み取る数値（価格・電話番号・地図上の分数表示・
  最終受付時刻の補足）は洋数字**（例: 550円、03-0000-0000、15:00〜24:00）。
  同じ情報を両方で併記してよい（例: 木札には「十五時-二十四時」、直後に補足で「15:00〜24:00」）
- 特記: **縦書き（`writing-mode: vertical-rl`）を見出しや暖簾風の要素に必ず使う。**
  本デモではヒーローの暖簾（屋号を1文字ずつ縦書き）・番付の「東」「西」ラベル・行司（亭主挨拶）・
  フッターの屋号で使用。英字の eyebrow は多用しない（本テイストは和文の圧で語るため、
  英字ラベルは SAUNA GUIDE 等ごく一部の実務的な節にとどめる）

## 3. カラー

wa-traditional。朱と藍の2色が主役、面のベタ使いを恐れない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース・生成り） | #f5ead3 | 45% |
| 背景（節替え・淡） | #eee0bc | — |
| テキスト（主・墨） | #2b2620 | 25% |
| テキスト（弱） | #6b5c46 | — |
| アクセント主役1（朱） | #c93a2c | 15%（面で使う） |
| アクセント主役2（藍） | #2a4b7c | 10%（面で使う） |
| アクセント少数（抹茶） | #77804a | 3%未満（帳票・一覧内の「特記行」の左罫アクセントのみ） |
| 罫線（太・墨） | #2b2620 | 2px の節区切り |
| 罫線（中） | #6b5c46 | 1px の内部区切り |
| 罫線（細） | #b6a583 | 0.5px の行区切り |

- 配色ルール: 朱と藍は**面（セクション背景・暖簾・木札・番付ラベル）で堂々と使う**
  （スイス系の「点でのみ」とは対照的に、ホーロー看板の色面としてベタ塗りする）。
  抹茶は最小の差し色（3%未満）として、帳票・一覧の中で「特記すべき1行」（限定・行事・
  注意事項・おすすめ等、業種に応じた「通常と違う」行）を示す左罫アクセント
  （`border-left: 3px solid var(--color-matcha)`）にのみ使う。他の2色（朱・藍）と
  同一要素で混在させない。デモでは「湯守暦」の行事湯の行に使用。該当コンテンツが
  存在しない業種でも、価格表・営業案内・メニュー等の帳票内に必ず1行、抹茶罫の
  アクセント行を設けること（例: 大衆食堂なら「本日のおすすめ」「数量限定」の1行等）
- **朱の面（#c93a2c 背景）に載せる小さな文字（14px程度以下・非装飾書体）は白 (#fff) を使う。**
  生成り(#f5ead3) を朱地に載せると 4.3:1 前後でAA基準(4.5:1)をわずかに割るため、
  実務的な可読テキストは白、装飾的な大字（24px以上・Reggae One等）は生成りで良い
- 藍の面（#2a4b7c 背景）に載せる文字は生成り(#f5ead3)で問題ない（コントラスト比 7:1 以上）
- 明朝・オフ黒ではなく墨（#2b2620）・生成り（#f5ead3）を基調にする。純白・純黒は使わない
  （白は上記の朱面上の可読性確保という限定用途のみ）

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

- コンテンツ最大幅: 1180px
- グリッドの性格: 誌面型（editorial）。段組・罫線・囲み記事で構成する。密度は高め
  （density: dense）だが、罫線の階層（太2px／中1px／細0.5px）で情報を整理し、雑然とさせない
- セクションは**朱地・藍地・生成り地を交互に敷く**（ホーロー看板の色面のように、節ごとに
  背景色そのものが変わることを許容する。白背景に薄いアクセントを差す設計にしない）
- 料金表・営業案内・サウナ諸元・売店は**太罫線（2px）で囲んだ帳票（ledger）型**で組む
  （`<table>` に caption・太い外枠・内部は細罫で行区切り）
- 「お風呂番付」は実物の番付表を模す: 中央に行司（店主挨拶を縦書きで）、左右に東方・西方を
  振り分け、各段を横綱・大関・関脇・小結・前頭…の番付語彙で組む。西方は鏡像に右寄せで組み、
  中央から外側に向かって視線が流れるようにする
- **ヒーローは中央寄せ+CTAにしない。** 銭湯の入口として組む: 縦書きの屋号の暖簾
  （3枚の布に1文字ずつ、間に藍の地色が覗く「裂け目」を模した gap を空ける）＋
  「わ」札（営業中を示す木札）＋営業時間を示す木札（漢数字の意匠表示＋洋数字の補足）＋
  入浴料の朱地タグ。ボタンは置かない（CTAという概念自体を持ち込まない）
- 各セクション見出しの頭には「はんこ（角版の朱印風スタンプ。漢数字の壱弐参四伍…を白抜きで）
  ＋ わずかな回転（-4deg）」を置く。節番号の代わりとして機能する固有の型組み

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

- ヘッダー・ナビゲーション: 生成り地・墨文字、下線なし。ホバーで文字が朱に変わり、
  同時に下線が入る（色のみに依存しない状態変化）。ロゴは丸い朱の判（「湯」の1字、白文字）＋
  屋号のKaisei Decol横書き
- 角丸: **矩形要素には使わない（0px）。** ただし「わ」札の丸判・屋号ロゴマークなど、
  実物が円形の木札・判である意匠に限り `border-radius: 50%` の完全な円を許可する
  （角丸カードのような「四角を丸めた」処理とは区別する）
- 影: 使わない。奥行きは版画的な色面の重なりで作る（後述の「版ズレ」参照）
- 境界線: 太2px（節の外枠・帳票の外枠）／中1px（帳票内の列区切り）／
  細0.5px（帳票内の行区切り・リスト内の項目区切り）の3階層を常に使い分ける
- ボタン: **原則として置かない。** 誘導はナビゲーションとページ内アンカーのみで行う
  （銭湯の実店舗案内という性質上、CVボタンを主役にしない設計）
- カード的要素: 「アイコン＋見出し＋説明の角丸カード」は使わない。区切りは帳票（罫線で
  囲んだ表）・番付（罫線グリッド）・売店パネル（太罫線の枠＋墨地の見出し帯）で表現する
- フォーム要素: 本テイストのデモには使用しない（銭湯案内サイトに入力フォームは不要という
  判断。予約や問い合わせを実装する場合は、帳票と同じ太罫線の枠・角丸0で組むこと）
- 画像の扱い: 写真は使わず、線幅2pxで統一した自作インラインSVG（桶・下駄・煙突・富士山）
  のみを使う。富士山アイコンだけは例外的に藍の面と生成りの雪冠の2色フラット塗りを持つ
  （銭湯のペンキ絵そのものの表現のため。グラデーションは使わない）
- アクセント色の適用範囲: 朱＝ヒーローの暖簾/木札/入浴料タグ、はんこ、売店セクションの背景、
  番付の東方見出し。藍＝ヒーロー背景、サウナセクションの背景、番付の西方見出し。
  抹茶＝帳票・一覧内の「特記すべき1行」（限定・行事・注意事項・おすすめ等）を示す
  `border-left: 3px solid var(--color-matcha)` の左罫アクセントのみ（本デモでは
  「湯守暦」の行事湯の行に使用）。業種が変わり該当コンテンツ名が無くても、
  価格表・営業案内・メニュー等の帳票に必ず1行この抹茶罫を設ける。この3色を
  同一要素で混在させない
- **紙のザラつき**: `body::before` に固定オーバーレイとして SVG feTurbulence ノイズを
  opacity 0.05・mix-blend-mode: multiply で重ねる
- **網点（ハーフトーン）**: CSSの `gradient` 関数は使わず、自作の小さな円を敷いた
  SVGデータURIを `background-image` にタイル表示して面に階調を作る（`.halftone-ink` /
  `.halftone-cream` クラス）。**網点は最低1セクションに必ず適用すること。**
  目安は「情報密度が高い節の背景」（一覧・番付・価格表など、罫線が多く紙面が詰まる節）。
  tokens.cssやデモのCSSクラス（`.halftone-ink` / `.halftone-cream`）をコピーしただけで、
  実際にどの要素にも class を付与しない状態（＝未使用の死んだCSS）で終わらせないこと。
  業種が変わっても、「当店の一覧・番付に相当するセクション」に必ず1箇所は適用する
  （本デモでは「お風呂番付」セクションの背景に `.halftone-cream` を適用）
- **版ズレ**: 見出しに墨の本体テキストと、2pxオフセットした朱の複製テキスト（`aria-hidden`）
  を重ねる。`text-shadow` や `box-shadow` は使わず、実要素を2枚重ねて表現する
  （`.kasure` / `.kasure-ghost` / `.kasure-main`）

## 6. モーション

- 量: **static（一切動かさない）。** ポスターの静止の強さで見せる
- 使う動き: リンクのホバーによる色変化＋下線の出現のみ（`transition: color .12s ease`）。
  それ以外のトランジション・アニメーションは一切使わない
- 使わない動き: スクロール連動フェード、パララックス、数字のカウントアップ、
  マーキー、カルーセル、要素の出現アニメーション全般

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

- 写真は使わない。**銭湯の道具（桶・下駄・煙突・富士山）を線幅2pxで統一した自作インラインSVG**
  で表現する。絵文字・既製アイコンフォント・素材アイコンの寄せ集めは一切使わない
  （SVGは `<symbol>` として1箇所に定義し、`<use>` で使い回す）
- 富士山アイコンのみ、藍の山体＋生成りの雪冠という2色のフラット塗りを持つ
  （ペンキ絵の表現。グラデーションでの階調表現は禁止のため、色面の分割で表現する）
- アイコンは1画面に1〜2個程度、意味のある場所（釜・熱源の説明、売店の分類見出し、
  アクセスの目印）にのみ使う。ランク一覧など反復要素の1件ごとにアイコンを並べる
  「アイコン＋見出し＋説明」の量産はしない

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

- Inter / Roboto / Arial / system-ui / Noto Sans をデフォルトで使わない
  （Reggae One / Kaisei Decol / Zen Kaku Gothic New で組む）
- CSSの `linear-gradient` / `radial-gradient` / `conic-gradient` を一切使わない
  （網点による階調表現も CSS gradient 関数ではなく、SVGドットパターンの背景画像タイルで作る。
  `background-clip: text` によるグラデ文字も使わない）
- `box-shadow` / `text-shadow` を使わない（奥行きは色面の重なり・罫線・オフセットした
  実テキスト要素の二重化で作る）
- 矩形要素の角丸を使わない。角丸を許すのは「わ」札や判のような実物が円形の意匠のみ
  （`border-radius: 50%` の完全な円に限る。半端な角丸カードは作らない）
- 中央寄せ＋主/副ボタン2つ＋下に画像という定型ヒーローを作らない。
  暖簾・木札・番付といった「銭湯の実物」で入口を構成する
- 絵文字・既製アイコンフォント・素材アイコンをアイコンに使わない
  （桶・下駄・煙突・富士山など、線幅を統一した自作SVGのみ）
- スクロール連動アニメーション・数字のカウントアップ・パララックス・マーキー・カルーセルを
  使わない（motion: static を厳守）
- 「レトロ＝セピアフィルタ」に逃げない。写真にセピア/ヴィンテージフィルタをかけて
  済ませる表現は使わない（本テイストは面の色・罫線・書体・縦書きで昭和を作る）
- 朱の面（#c93a2c）に生成り色(#f5ead3)の小さな文字（14px前後以下）を直接載せない
  （AAコントラスト比を割るため。白 (#fff) を使うか、墨地の小旗チップに乗せる）
- `.halftone-ink` / `.halftone-cream` をCSSに定義するだけで、実際のHTML要素に
  class を付与しない「死んだCSS」で終わらせない（網点は最低1セクションの背景に
  必ず適用し、目視で確認できる状態にすること）
- 抹茶（`--color-matcha`）を丸ごと未使用のまま終えない。「湯守暦」に相当する
  コンテンツが業種にない場合でも、帳票・一覧の「特記すべき1行」に抹茶の左罫
  アクセントを必ず1箇所設けること（朱・藍の2色構成に縮退させない）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f5ead3;          /* 生成り（地）45% */
  --color-bg-alt: #eee0bc;      /* 生成りの節替え */
  --color-ink: #2b2620;         /* 墨（本文・見出し文字） */
  --color-text: #2b2620;
  --color-text-weak: #6b5c46;   /* 弱色（キャプション・日付） */
  --color-vermillion: #c93a2c;  /* 朱（アクセント主役） */
  --color-indigo: #2a4b7c;      /* 藍（アクセント主役） */
  --color-matcha: #77804a;      /* 抹茶（差し色。3%未満） */

  --color-rule-bold: #2b2620;   /* 罫線・太 2px */
  --color-rule-mid: #6b5c46;    /* 罫線・中 1px */
  --color-rule-fine: #b6a583;   /* 罫線・細 0.5px */

  --font-display: "Reggae One";       /* 大見出し */
  --font-deco: "Kaisei Decol";        /* 中見出し・飾り文字 */
  --font-body: "Zen Kaku Gothic New"; /* 本文 */

  --space-unit: 8px;
  --radius: 0;              /* 角丸は使わない。丸判等の例外のみ50% */
  --max-width: 1180px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Reggae+One&family=Kaisei+Decol:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap`
- 朱の面に載せる14px前後以下の実務文字は `color: #fff` を明示する（`--color-bg` を使わない）。
  代表例: `.sign-price`, `.brand-mark`, `.sign-open .roundel`, 明地セクション上の `.hanko`
- 藍/朱の面地セクション内に生成り地の帳票・カードを置くときは、必ず帳票側で
  `color: var(--color-ink)` を明示すること。親セクションの `color` を継承させたままにすると
  「生成り文字 on 生成り地」で文字が消える事故になる（本パターンでは `.ledger` /
  `.sign-open` / `.baiten-panel` に明示済み）
- 網点は `background-image: url("data:image/svg+xml,...")` の小さな円タイルで作る
  （`gradient` 関数を使うと自動スロップ検知に引っかかるため使用不可）
- 版ズレは `.kasure`（position:relative） > `.kasure-ghost`（position:absolute, 朱,
  aria-hidden） + `.kasure-main`（実テキスト）の二重構造で実装する
- 縦書きは `writing-mode: vertical-rl; text-orientation: upright;`（1〜2文字の見出し）
  または `text-orientation: mixed;`（複数文字の挨拶文）を使い分ける