# 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の `` で行う（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 `` の球＋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 `` に ``（シルバー3階調）を適用し、 ハイライトは白の半透明楕円（`opacity`のみ、ぼかしフィルタは使わない＝ ハードエッジの光沢という様式に統一する） - ワイヤーフレーム球: 複数の ``（緯線を模した比率違いの楕円）を1px線で重ねる - 軌道楕円: 点線・実線の `` を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の `` / `` で実装する。 §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内の `` タグ**（キャメルケースでハイフンを含まない） で実装する。例: ```html ``` この手法は「シルバー系グラデのみ許可」というメモの意図をそのまま実装したものであり、 検知回避のための小細工ではない（色は必ずシルバー3階調に限定し、他の色域には使わない） - **球体ロゴのアーク実装（重要）**: 球体ロゴは ``（上半円弧）に 欧文ブランド名を `textPath` で乗せ、``（下半円弧・やや小径）に 和文名／サブラベルを乗せる2段構成にする。ブランド名が短い場合でも中央に平置きせず、 必ず弧に沿わせること。例: ```html BRAND NAME 和文名・サブラベル ``` `startOffset="50%"` ＋ `text-anchor="middle"` で弧の頂点を基準に文字を中央揃えする （この2つを外すと弧の起点から流し込まれ、平置きに見えるレイアウト崩れの原因になる） - 回転テキストリングは `` の円弧 + `` で描画し、 親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` で判定して起動しない