Y2Kクローム Y2K Chrome

DESIGN.md

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

https://3pt.co.jp/design-library/md/y2k-chrome/DESIGN.md

# DESIGN.md — Y2Kクローム / y2k-chrome

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

## 1. コンセプト

2000年前後の「未来」をノスタルジーとして再演する。クロームの金属光沢、ワイヤーフレーム球、
楕円軌道、ピクセル書体の液晶表示。チープさは手抜きではなく**意図的な様式**であり、
線の精度・色数の抑制・組版の几帳面さでそれを裏づける。中央のステージ（球体＋ロゴ）を
軌道が取り囲む求心的な構図で、どのセクションも「主役1つ＋周辺の衛星情報」を貫く。

**キーワード**: クローム / 軌道 / 液晶 / テクノ楽観主義 / 2000年の未来
**この見た目が向く場面**: 音楽レーベル・カルチャーイベント・ガジェット系プロダクト・
配信サービス・レトロフューチャーを掲げるブランド

## 2. タイポグラフィ

- 和文見出し: DotGothic16 / ウェイト 400（ピクセル書体。世界観の核なので飾りに使わず、
  h2見出し・液晶表示・アーティスト名など「表示device」を連想させる箇所に一貫して使う）
- 和文本文: M PLUS 1 / ウェイト 400 / サイズ 15px / 行間 1.8 / 字間 0em
- 欧文ロゴ・大見出し: Zen Dots（ロゴタイプ・CH.番号・ボタンのラテン文字ラベルに使用。
  本文には使わない＝装飾専用の書体として役割を絞る）
- 見出しスケール: h1（視覚上非表示・ロゴSVGが代替）/ h2（sec-title）24〜34px
  `clamp(24px, 4.2vw, 34px)` / セクションラベル（CH.番号）13px・11px
- 特記: 見出し（h2・CH.番号・欧文ロゴ）は**字間 +0.1em**で組む（メモ指定の必須ルール）。
  本文・説明文には字間を足さない。DotGothic16とZen Dotsを混在させる場合は
  DotGothic16=情報表示、Zen Dots=固有名詞・ロゴ、と役割を混同しない

## 3. カラー

無彩色はシルバー系クロームのみ。ビビッド3色は「点・面の小要素」に限定する。
**紫〜藍系（indigo/violet）は一切使わない。**

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（ベース） | #d6d9e0（シルバー） | 55%（→適用ルールは§4参照） |
| 地（節替え） | #ffffff | →適用ルールは§4参照 |
| 濃紺鉄色プレート（LCD/コンソール面） | #22262e | — |
| テキスト（主） | #22262e | 30% |
| テキスト（弱） | #565c68 | — |
| プレート上の文字 | #eef1f5 | — |
| ビビッド・シアン | #00c2ff | 5%以下 |
| ビビッド・ライム | #c6ff00 | 5%以下 |
| ビビッド・マゼンタ | #ff2fd6 | 5%以下 |
| 金属光沢グラデ（明→暗） | #eef0f4 → #b8bdc9 → #9aa0ac | 球体・バッジのみ |
| 罫線・軌道線 | #9aa0ac | — |

- 配色ルール: ビビッド3色は①ナビ球のホバー背景（常時シアン1色に固定。後述） ②ジャンルチップ
  （ジャンルの系統ごとに固定。後述） ③LCD/コンソールのラベル文字 ④装飾スパーク（十字キラキラ）
  の4用途に限定。**面（大背景）には使わない**
- **ジャンルチップの色は出現順のラウンドロビンで割り当てない。** 音楽性の系統を3つに分け、
  系統ごとに色を固定する（チップの文字は常に濃紺 `--color-text` で統一。3色いずれの背景でも
  AA以上のコントラストを確保できる組み合わせのため、背景ごとの文字色出し分けは不要）:
  | 系統 | 色 | 該当ジャンル |
  |---|---|---|
  | ビート系（BPM・パーカッシブ主導） | ライム | チップチューン・ハードコア／ハッピーハードコア／ブレイクビーツ |
  | エレクトロ系（シンセ・4つ打ち主導） | シアン | トランス／エレクトロクラッシュ／IDM |
  | メロウ系（メロディ・空間表現主導） | マゼンタ | シティポップ・チューン／アンビエント |

  新しいアーティスト／ジャンルを追加する場合も、この3系統のどれに属するかで色を決める
  （系統に当てはまらない場合は新しい系統を追加してよいが、出現順で機械的に割り当てない）
- **軌道ナビ（ヒーロー内5項目）のホバー色は項目ごとに変えず、常にシアン1色に統一する。**
  5項目に対し3色を割り当てようとすると余りが出て意味を持たせられないため、
  「現在地シグナルは常にシアン」という単一ルールにした（位置座標のみが項目ごとに異なる）
- 金属光沢グラデ（シルバー系）は**球体・バッジ等の「金属パーツ」にのみ**使用可。
  実装は必ずSVGの `<radialGradient>` で行う（CSSの `radial-gradient()` は本ライブラリの
  自動検知にかかるため使わない。詳細は §9）。**このグラデをアニメーションさせない**
- ビビッド背景（シアン／ライム／マゼンタ）に文字を乗せる場合は**常に濃紺 #22262e の文字**を使う
  （白文字はマゼンタ背景でコントラスト比約3.2:1・AA未達のため禁止。濃紺文字ならマゼンタ背景でも
  約4.8:1でAA適合。シアン・ライム背景は濃紺文字で常に7:1以上を確保できる）。
  文字色を背景ごとに出し分けない＝**常に濃紺文字**という1ルールに統一する
- 紫・藍（indigo/violet）を一切足さない。信号色（赤/黄/緑）の装飾利用もしない

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

- コンテンツ最大幅: 1180px / ヒーローの「ステージ」は正方形コンテナ
  `width: min(520px, 82vw); aspect-ratio: 1/1;` を中央配置
- レイアウトの性格: **中央の主役＋周辺の衛星情報**を全セクションで貫く。セクション例ごとに
  必須要素をチェックリストで確認すること（いずれも「主役」を欠かすと本ルール違反になる）:
  - **リリース**
    - [ ] 中央: カバーアート（主役）
    - [ ] 左右: メタ情報＋トラックリスト（衛星）
  - **アーティスト**（一覧系）
    - [ ] 中央: バッジ（主役）
    - [ ] 表題2組の横帯
    - [ ] 残り6組のカードグリッド（衛星）

    **中央のバッジは表題2組の横帯があっても省略してはならない独立した必須要素である。**
    表題・カードグリッドだけで構成すると「中央の主役」が消え、全セクション貫通ルールに
    反する。中央バッジの内容例: 総数を示す数字＋カテゴリ名（例: 8 ACTS。業種に応じ数字と
    単位を差し替える）
  - **イベント**
    - [ ] 中央: コンソール（LCD風・主役）
    - [ ] 周囲: 出演・参加方法・定員の3ブロック（衛星）

  3カラムの角丸カード羅列を機能紹介として使わない（使う場合も「衛星」の役割を持たせる）
- **セクション背景はシルバー地（`--color-bg`）と白地（`--color-bg-alt`）を1セクションおきに
  交互反転させる**（実装例: `section:nth-of-type(even) { background: var(--color-bg-alt); }`）。
  装飾ではなく「地の節替え」というテイストの一部（§3参照）
- **カードグリッドの単調化を避ける型崩し（必須）**: アーティスト一覧は8組全員を
  「角丸カード＋アイコン＋見出し＋説明」の同一グラマーで並べない。8組のうち代表2組
  （コンピレーションの表題曲を歌う組・折り返しの1曲を担当する組など、収録上の理由が
  説明できる2組）を `.artist-featured` として先に配置し、カードの箱・角丸・アイコンを
  持たない横帯（罫線＋大きめの和文タイポグラフィ＋ジャンルチップ＋説明文）で見せる。
  残り6組だけが `.artist-grid` の角丸カードになる。イベントの3ブロック
  （出演ライン・参加方法・定員）はアイコンを持たない（§7参照）ため、アーティストグリッドと
  連続しても「カード＋アイコン」のグラマーが2回続かない
- セクション間余白: 上下72px基準 / 要素間は8pxの倍数
- ヒーローの構成（型外し・必須）: **中央にボタン2つを並べない。** 代わりに
  ①クローム球体＋ロゴ（SVG `<radialGradient>` の球＋textPath弧のロゴ） ②球体を囲む
  内側の回転テキストリング（`@keyframes` の `rotate`） ③球体の外側を囲む楕円軌道上に
  固定配置したナビ（5項目・ピル型） ④その下に液晶パネル「NOW PLAYING: …」のステータス
  表示、の4層で構成する。ナビの位置は角度計算（-90°を先頭に72°刻み）で楕円上に固定し、
  クリック領域として機能させる（テキストリングとは役割を分離する）

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

- ヘッダー・ナビゲーション: 常設のトップバー（白地・下1px罫線 #9aa0ac）にロゴバッジ
  （SVG球体・26px）＋ユーティリティナビ。リンクは通常時下線なし、ホバーで
  濃紺プレート背景＋反転文字＋`skewX(-6deg)`。本文リンクと同じ扱いにはしない
  （ナビは常にピル/バー型の「ボタン的」ホバーを持つ）
- 軌道ナビ（ヒーロー内）: 白地ピル、1px罫線、内側ハイライト1本線
  （`box-shadow: inset 0 1px 0 rgba(255,255,255,.9)`）。ホバーで
  `skewX(-8deg) scale(1.1)` ＋**常にシアン1色**（背景・罫線ともシアン、文字は濃紺のまま）。
  5項目に3色を割り当てる出現順ラウンドロビンは行わない（§3参照）
- 角丸: 基本18px（`--radius`）/ ボタン・ピル要素は999px（完全な丸＝エアロ的な丸み）
- 影: ハードエッジの小さいオフセット影のみ使う（例: `0 2px 0 rgba(34,38,46,.18)`。
  ぼかし半径は0〜4pxまで。**colored glow（色付きの大きくぼけた発光）は禁止**）
- ボタン（エアロボタン）: ピル型・フラットな単色（ビビッド1色）塗り＋
  `box-shadow: inset 0 2px 0 rgba(255,255,255,.55)` の**ハイライト1本線**で光沢を表現する。
  グラデーションで光沢を作らない。ホバーで `skewX` ＋ `scale` のみ（色は変えない）
- カード的要素: アーティストカードは1px罫線＋18px角丸＋ホバーで `translateY(-4px) scale(1.015)`。
  3枚以上並べる場合も中央バッジ（「衛星」の主役）とセットで配置し、単独の機能紹介グリッドとして使わない。
  さらに8組中2組は**カード化しない**（上記「型崩し」参照）— カードは常に「一部」であって
  一覧の唯一の表現形式にしない
- フォーム要素: 本テイストでは入力フォームを持たない構成を基本とする
  （デモ応募は `mailto:` の送信ラインボタン＋要項リストで代替）。フォームが必要な場合は
  白地・1px罫線・角丸18px・フォーカス時に罫線をシアンへ変える
- 画像の扱い: 写真は使わない。カバーアート等はSVGの幾何形（円・楕円・十字スパーク）で構成する
- アクセント色の適用範囲: §3の4用法に限定。ナビ・本文の通常リンクにビビッド色を
  地の色として機械的に広げない

## 6. モーション

- 量: experimental（動きがコンセプトの一部）だが、使う動きは**限定された3種**に絞る
- 使う動き: ①内側テキストリングの周回回転（`animation: orbitspin 42s linear infinite`）
  ②ホバーでの `skewX` / `scale` 変形（ナビ・ボタン・カード） ③液晶の点滅表示
  （LCDステータスの丸ドット `opacity` を `steps(1)` で1.2〜1.4s周期に点滅／
  NOW PLAYING表示を5.4秒ごとに他の曲名へ**ハードカット**で切り替える。
  スライドやタイプ表示にはしない）
- 使わない動き: 無限マーキー（横流れテキスト）、タイプライター、パララックス、
  カウントアップ、自動カルーセル、金属光沢グラデーションのアニメーション
- `prefers-reduced-motion: reduce` 対応必須: 回転アニメーション・点滅・NOW PLAYING切り替え
  （JS側の `setInterval` も起動しない）・ホバー変形をすべて無効化し、静止状態で成立させる

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

- 写真は使わない。すべて自作インラインSVGの線画・幾何形で構成する
- 球体: SVG `<circle>` に `<radialGradient>`（シルバー3階調）を適用し、
  ハイライトは白の半透明楕円（`opacity`のみ、ぼかしフィルタは使わない＝
  ハードエッジの光沢という様式に統一する）
- ワイヤーフレーム球: 複数の `<ellipse>`（緯線を模した比率違いの楕円）を1px線で重ねる
- 軌道楕円: 点線・実線の `<ellipse>` を1px線で。塗りは持たない
- 十字キラキラ: `M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z` 型の
  4方向スパークをビビッド3色のいずれか1色でフラット塗り。Unicodeの★☆絵文字は使わない
  （`docs/ai-slop-signatures.md` のemoji判定レンジに★☆が含まれるため、区切り記号は
  `◆`（U+25C6）または `・` を使う）
- アイコン: 線幅1.4pxで統一した自作インラインSVGのみ。既製アイコンセット・絵文字は使わない
- **アーティストカードのアイコンは、同一形状の使い回しを禁止する。** 円＋楕円のような
  抽象汎用モチーフ1種を全カードに複製しない。各アーティストのジャンル・バイオの内容から
  固有のモチーフを1つずつ描く（線幅1.4px／`fill="none"`／`stroke="currentColor"`で作法は統一、
  形は個体ごとに異なる）。本パターンでの実例:
  | アーティスト | モチーフ | 由来 |
  |---|---|---|
  | 8bit洗濯機 | 洗濯機（角丸ボディ＋ポート窓＋ダイヤル） | 「型落ち洗濯機一台」がバイオの核 |
  | サテライト・ドリブン | 静止衛星＋パラボラアンテナ | 「静止衛星の高度3万6千km」 |
  | 液晶レイン | 液晶ピクセル＋走査線（雨だれ状） | 「携帯液晶の残像」 |
  | クロムメロウ | ジグザグの金属質波形 | 「金属質のボーカルエフェクト」 |
  | 惑星電話 | 受話器＋小さな軌道楕円 | 「発信音と衛星軌道の周期を重ねる」 |
  | ナイトモール保安部 | パトロール灯（光の三方向ビーム） | 「閉店後のショッピングモール」の保安巡回 |

  表題2組（モアレ理恵子＝干渉縞の3重円でモアレを表現／ピクセル・パルフェ＝段状パフェグラス）は
  カードを持たないため、アイコンではなく組版（横帯タイポグラフィ）でジャンル・世界観を示す
  （§4「型崩し」参照）。新規アーティストを追加する場合も、必ずバイオ文の具体的な語（機材・
  行為・場所など）から専用モチーフを起こすこと。抽象的な円・星・稲妻などの汎用記号に逃げない
- **イベントの3ブロック（出演ライン／参加方法／定員・料金）にはアイコンを使わない。**
  同一のキラキラ形状を色替えするだけの装飾は禁止。代わりにセクション見出しの `CH.NN` 表記を
  踏襲した `CH.03 — A / B / C` のサブ番号ラベルで区別する（他セクションのeyebrow表記と
  同じ組版語彙の一部であり、機械的に足したアイコンではない）

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

- Inter / Roboto / system-ui をデフォルトで使わない（DotGothic16 / Zen Dots / M PLUS 1 で組む）
- 紫〜藍（indigo/violet、例 `#6366f1` 系）のグラデーションを一切使わない
- CSSの `linear-gradient()` / `radial-gradient()` / `conic-gradient()` 関数を**一切使わない**
  （金属光沢が必要な箇所は必ずSVGの `<radialGradient>` / `<linearGradient>` で実装する。
  §9参照）
- グラデーションをアニメーションさせない（金属光沢はホバー・回転などで色を動かさない）
- `backdrop-filter: blur` を使わない（グラスモーフィズムを作らない。面は不透明にする）
- 無限マーキー（横流れテキスト）・タイプライター演出を使わない（回転・変形で動きを代替する）
- box-shadowを色付きの大きなぼかし（glow）として使わない。影は影＝オフセット表現に限定し、
  ぼかし半径は0〜4px、色は無彩色寄りのアルファのみ
- 絵文字・★☆などのpictographic Unicode記号をアイコンや装飾に使わない
  （区切りは `◆` や自作SVGスパークで代替する）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。
  ヒーローは必ず「球体ステージ＋軌道ナビ＋回転テキストリング＋液晶ステータス」の型で組む
- マゼンタ `#ff2fd6` の背景に白文字を乗せない（コントラスト比不足。濃紺 `#22262e` 文字を使う）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #d6d9e0;
  --color-bg-alt: #ffffff;
  --color-panel: #22262e;
  --color-text: #22262e;
  --color-text-weak: #565c68;
  --color-text-on-panel: #eef1f5;

  --color-cyan: #00c2ff;
  --color-lime: #c6ff00;
  --color-magenta: #ff2fd6;

  --color-chrome-1: #eef0f4;
  --color-chrome-2: #b8bdc9;
  --color-chrome-3: #9aa0ac;

  --color-line: #9aa0ac;
  --color-line-strong: #22262e;

  /* 変数には総称ファミリを含めない */
  --font-jp-display: "DotGothic16";
  --font-en-display: "Zen Dots";
  --font-body: "M PLUS 1";

  --space-unit: 8px;
  --radius: 18px;
  --radius-pill: 999px;
  --max-width: 1180px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=DotGothic16&family=Zen+Dots&family=M+PLUS+1:wght@400;500;700&display=swap`
- **金属光沢の実装方法（重要）**: シルバーの球体・バッジは、CSSの `background:
  radial-gradient(...)` を使うと本ライブラリの `slop-scan.py` が機械的に🔴判定する
  （紫グラデと区別せず、ハイフン付き `*-gradient(` 文字列を検出するため）。
  そのため必ず **SVG内の `<radialGradient>` タグ**（キャメルケースでハイフンを含まない）
  で実装する。例:
  ```html
  <svg viewBox="0 0 40 40">
    <defs>
      <radialGradient id="chromeGrad" cx="35%" cy="30%" r="75%">
        <stop offset="0%" stop-color="#eef0f4"/>
        <stop offset="60%" stop-color="#c9cdd6"/>
        <stop offset="100%" stop-color="#b8bdc9"/>
      </radialGradient>
    </defs>
    <circle cx="20" cy="20" r="18" fill="url(#chromeGrad)" stroke="#8b909c" stroke-width="1.5"/>
  </svg>
  ```
  この手法は「シルバー系グラデのみ許可」というメモの意図をそのまま実装したものであり、
  検知回避のための小細工ではない（色は必ずシルバー3階調に限定し、他の色域には使わない）
- **球体ロゴのアーク実装（重要）**: 球体ロゴは `<path id="arcTop">`（上半円弧）に
  欧文ブランド名を `textPath` で乗せ、`<path id="arcBottom">`（下半円弧・やや小径）に
  和文名／サブラベルを乗せる2段構成にする。ブランド名が短い場合でも中央に平置きせず、
  必ず弧に沿わせること。例:
  ```html
  <svg viewBox="0 0 300 300">
    <defs>
      <radialGradient id="chromeGrad" cx="35%" cy="28%" r="78%">
        <stop offset="0%" stop-color="#eef0f4"/>
        <stop offset="55%" stop-color="#c9cdd6"/>
        <stop offset="100%" stop-color="#9aa0ac"/>
      </radialGradient>
      <!-- 上半円弧（大径）: 欧文ブランド名用 -->
      <path id="arcTop" d="M42,150 A108,108 0 0 1 258,150" fill="none"/>
      <!-- 下半円弧（やや小径）: 和文名／サブラベル用 -->
      <path id="arcBottom" d="M60,150 A90,90 0 0 0 240,150" fill="none"/>
    </defs>
    <circle cx="150" cy="150" r="128" fill="url(#chromeGrad)" stroke="#8b909c" stroke-width="2"/>
    <text font-family="Zen Dots" font-size="16" letter-spacing="3" fill="#22262e">
      <textPath href="#arcTop" startOffset="50%" text-anchor="middle">BRAND NAME</textPath>
    </text>
    <text font-family="DotGothic16" font-size="13" letter-spacing="2" fill="#565c68">
      <textPath href="#arcBottom" startOffset="50%" text-anchor="middle">和文名・サブラベル</textPath>
    </text>
  </svg>
  ```
  `startOffset="50%"` ＋ `text-anchor="middle"` で弧の頂点を基準に文字を中央揃えする
  （この2つを外すと弧の起点から流し込まれ、平置きに見えるレイアウト崩れの原因になる）
- 回転テキストリングは `<path>` の円弧 + `<text><textPath>` で描画し、
  親svgに `animation: orbitspin 42s linear infinite;` を適用する
  （`@keyframes orbitspin { to { transform: rotate(360deg); } }`）
- 軌道ナビの5項目は角度 -90°, -18°, 54°, 126°, 198°（72°刻み）を
  `x = 50 + rx*cos(θ), y = 50 + ry*sin(θ)`（rx=36%, ry=29%）で算出し、
  `position: absolute; top; left; transform: translate(-50%,-50%);` で配置する
- `prefers-reduced-motion: reduce` 時は回転・点滅アニメーションを `animation: none` にし、
  JS側の `setInterval`（NOW PLAYING切り替え）も `matchMedia` で判定して起動しない