速報シグナル Broadcast Signal

DESIGN.md

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

https://3pt.co.jp/design-library/md/broadcast-signal/DESIGN.md

# DESIGN.md — 速報シグナル / broadcast-signal

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

## 1. コンセプト

スポーツ中継の画面テロップと、運行管制室の情報端末を掛け合わせる。主役は未来感ではなく、
**「現在地・時刻・確度を一瞬で読ませる編集」**である。黒い舞台に蛍光黄緑を1色だけ置き、
コンデンス体の見出し、等幅の時刻、直角の罫線パネルを役割ごとに組み分ける。興奮を色数や
発光で作らず、級数差・斜めの切断・詰まったデータのリズムで作る。

**キーワード**: 速報 / 中継テロップ / 管制 / 時刻 / 緊張感
**この見た目が向く場面**: スポーツ・大会速報、ライブ配信、イベント運営、エンタメニュース、
交通や物流の運行状況、セキュリティ監視、リアルタイム性の高い編集メディア

## 2. タイポグラフィ

- 大見出し: Barlow Condensed / 800〜900。英数だけでなく和文見出しの外側を囲う役割で使う。
  h1は 76〜132px、h2は 54〜82px、h3は 26〜36px。行間 0.86〜0.96、字間 -0.035em
- 和文本文: Noto Sans JP / 400〜700 / 14〜16px / 行間 1.8 / 字間 0.01em
- 時刻・順位・状態・節番号: IBM Plex Mono / 500〜700。`font-variant-numeric: tabular-nums`
  を必ず指定し、桁を揃える
- 和文と欧文の役割を混ぜない。Barlow Condensedは見出しの骨格、Noto Sans JPは説明、
  IBM Plex Monoは観測値とラベルに限定する
- 見出しを単なる太字ゴシックに置換しない。**細長い文字幅と詰めた字間**が中継画面らしさの核

## 3. カラー

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（黒緑） | #090c0b | 65% |
| パネル | #101512 | 15% |
| 強いパネル | #171d19 | 5% |
| 文字（主） | #f3f5ec | 12% |
| 文字（弱） | #a6afa5 | — |
| シグナル黄緑 | #c8ff35 | 3%以下 |
| 罫線 | #344037 | — |

- シグナル黄緑は **LIVE状態・現在地・主CTA・選択中・計測線**の5用途に限定する
- 状態を赤黄緑の信号色で並べない。確度や進行状態は黄緑1色＋白・灰＋形（実線/破線/点）で表す
- 紫、青、シアンを追加しない。色数を増やしてゲーム感を出さない
- 発光させない。`text-shadow`、色付き`box-shadow`、blurを使わない

### コントラスト実測値

| 文字色 | 背景 | 比率 | 判定 |
|---|---|---|---|
| #f3f5ec | #090c0b | 17.85:1 | AAA |
| #a6afa5 | #090c0b | 8.70:1 | AAA |
| #c8ff35 | #090c0b | 16.66:1 | AAA |
| #090c0b | #c8ff35 | 16.66:1 | AAA |

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

- 最大幅 1440px。外周ガターは `clamp(20px, 4vw, 64px)`
- ヘッダーの前に高さ28〜32pxの**シグナルバー**を置き、更新時刻・配信状態・観測対象を1行で示す。
  自動スクロールさせず、静止した実務情報として置く
- ヒーローは左 7 : 右 3 の非対称分割。左は号数や大会名を含む大見出し、右は現在地・開始時刻・
  状態を並べる直角のデータパネル。中央寄せにしない
- セクション間は96〜120px空けるが、セクション内は罫線と表組みで高密度にする。
  「全体は呼吸、内部は緊張」という二重の密度を守る
- 記事や更新情報を角丸カードにしない。行番号・時刻・カテゴリ・見出し・確度を横一列の
  **ディスパッチ行**にし、上下1px罫線で区切る
- 数値ブロックは同じ大きさの4カードにしない。現在地だけを大きく、残りは細い定義リストにする

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

- ヘッダー: 黒緑の不透明面＋1px罫線。ロゴは文字組みと斜めに切った四角形だけで作る。
  blur・半透明ガラス・丸いロゴマークは禁止
- ボタン: 角丸0、影なし。主CTAは黄緑の矩形を右下だけ斜めに切る。
  ホバーでは背景を白へ切り替え、移動量は最大2px
- データパネル: 不透明な`--color-surface`。上端にIBM Plex Monoの状態名、内部は定義リスト。
  行ごとに1px罫線。浮かせず、面と線だけで置く
- ディスパッチ行: 時刻は固定幅、見出しは可変幅、状態は末尾。モバイルでは
  `時刻 / 状態`を1行目、見出しを2行目に折る
- 装飾線: 45度の短い線、クロスヘア、同心円、計測目盛のみ。すべて1px〜2px、色は罫線か黄緑。
  意味のないドット群や光球は置かない
- カードの角丸・ドロップシャドウ・ガラス面を一切使わない

## 6. モーション

- 量: subtle
- 許可: リンクの色切替（120〜180ms）、主CTAの最大2px移動、罫線が左から伸びるホバー表現
- 禁止: 自動マーキー、タイプライター、背景の動くグラデーション、点滅、数字カウントアップ、
  パララックス、同じフェードインを全要素に適用すること
- `prefers-reduced-motion: reduce` ではトランジションを0.01msにする

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

- この基本形は写真なしで成立させる。背景図版はHTML要素の罫線・円・斜め面だけで作る
- 写真を使う派生では1枚だけをヒーロー全面に置き、彩度を落とし、文字の背後を黒い**単色面**で確保する。
  グラデーションの暗幕やぼかしで可読性を補わない
- 図版はコース、波形、時間軸など実データに対応させる。抽象ブロブや既製アイコンは置かない

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

- Inter / Roboto / Arial / system-uiを主書体に使わない
- 紫〜青の装飾グラデーション、およびCSSグラデーション全般を使わない
- `backdrop-filter`、半透明ガラス、発光するbox-shadow、text-shadowを使わない
- 赤黄緑の信号色トリオを使わない。状態は黄緑1色＋白灰＋形で表す
- 角丸カード、ピル型バッジ、均等3カラムの機能紹介を使わない
- 中央寄せ特大見出し＋説明＋主副ボタン2つの定型ヒーローを作らない
- 英語小見出しを各節の和文見出しの直訳として機械的に付けない。英字は時刻・節番号・
  配信コードなど情報端末として必要なものに限定する
- 自動マーキー、タイプライター、点滅、カウントアップ、全要素の一律フェードを使わない
- 絵文字や寄せ集めの既製アイコンを使わない

## 9. 実装ノート

```css
:root {
  --color-bg: #090c0b;
  --color-surface: #101512;
  --color-surface-strong: #171d19;
  --color-ink: #f3f5ec;
  --color-ink-muted: #a6afa5;
  --color-accent: #c8ff35;
  --color-accent-ink: #090c0b;
  --color-rule: #344037;
  --font-display: "Barlow Condensed";
  --font-body: "Noto Sans JP";
  --font-data: "IBM Plex Mono";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1440px;
}
```

```css
/* 速報行 — カードでなく横罫線の一行データとして組む */
.dispatch-row {
  display: grid;
  grid-template-columns: 92px 120px minmax(0, 1fr) 110px;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--color-rule);
}
.dispatch-row time,
.dispatch-row .state {
  font-family: var(--font-data), monospace;
  font-variant-numeric: tabular-nums;
}
.dispatch-row.is-current { border-top-color: var(--color-accent); }
```

```css
/* 斜めに切った主CTA。角丸・影を足さない */
.signal-action {
  display: inline-flex;
  justify-content: space-between;
  min-width: 210px;
  padding: 16px 22px;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  font-weight: 800;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap`
- 円形の計測図は `border: 1px solid var(--color-rule); border-radius: 50%` のHTML要素で作る。
  角丸禁止はカードやボタンに対する規則であり、計測器の円そのものは例外
- 黄緑面に載せる文字は必ず `--color-accent-ink`、黒緑面は `--color-ink` または
  `--color-ink-muted`。黄緑を本文サイズの文字色として大量に使わない