# 集まるタイポグラフィ / Design Assembly

## 1. デザインの核
黄色のポスターと紫のプログラム。日付を切り替えてタイムテーブルを読む、文字中心のデザインカンファレンス。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
巨大イベントポスター → 日別プログラム → よくある質問 → 参加案内
デモは架空ブランド「ASSEMBLY / 26」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

## 3. 色と書体
背景 #f2fa52、主文字 #322257、強調 #5730bd、罫線 #a8ad33。tokens.css を使う。明暗反転セクションにもこの関係を引き継ぐ。
本文は DM Sans + Noto Sans JP、メタ情報は IBM Plex Mono。表示用書体は下記のCSS仕様に従う。欧文と日本語を同じサイズに揃えず、それぞれの文字密度に合わせる。

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.assembly-hero{position:relative;padding:45px 5vw 70px;display:grid;grid-template-columns:140px 1fr;gap:4vw}.date-block{font:14px var(--font-mono);padding-top:12px}.date-block strong{font:600 48px/1 'Barlow Condensed',sans-serif;display:block;margin:20px 0}.assembly-hero h1{font:800 clamp(68px,12vw,185px)/.83 'Barlow Condensed',sans-serif;letter-spacing:-.035em}.assembly-hero h1>span:not(.asterisk){display:inline-block;padding-left:8vw;color:var(--color-accent)}.asterisk{font:1.2em 'Instrument Serif',serif;display:inline-block;line-height:.4}.assembly-note{grid-column:2;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px;margin-top:20px}.assembly-note>p:first-child{grid-column:1/-1;font-size:20px}.program{background:#5730bd;color:#f2fa52;padding:65px 5vw}.program h2{font:italic clamp(50px,8vw,100px) 'Instrument Serif',serif}.day-tabs{display:flex;gap:10px}.day-tabs button{font:13px var(--font-mono)}.day-tabs button[aria-pressed=true]{background:#f2fa52;color:#322257}.program article{padding:30px 0;border-top:1px solid #997bd9;display:grid;grid-template-columns:130px 1fr 40px;gap:20px;align-items:start}.program time{font:40px 'Barlow Condensed',sans-serif}.program article span{font:12px var(--font-mono)}.program article h3{font-size:clamp(22px,3vw,38px);font-weight:500;margin:8px 0 15px}.program article p{font-size:14px}.program article b{font-size:35px;font-weight:400}.assembly-info{padding:75px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:30px}.assembly-info>.eyebrow{grid-column:1/-1}.assembly-info h2{font-size:clamp(38px,5vw,70px);line-height:1.3}.assembly-info details p{font-size:15px}.end{background:#322257;color:#f2fa52}.end h2{line-height:1.3}@media(max-width:700px){.assembly-hero{grid-template-columns:1fr}.date-block{display:flex;align-items:center;gap:20px;padding:0}.date-block strong{font-size:30px;margin:0}.date-block strong br{display:none}.assembly-note{grid-column:1;grid-template-columns:1fr}.day-tabs{margin-top:25px}.program article{grid-template-columns:60px 1fr;gap:16px}.program time{font-size:28px}.program article b{display:none}.assembly-info{grid-template-columns:1fr}.assembly-info h2{margin-bottom:20px}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
日付ボタンで同じタイムテーブルの内容を更新。aria-pressedとlive領域で状態を伝える。
- 操作前から内容を読める初期状態を用意する。JSが動かなくてもナビゲーションと本文を保持する。
- hoverのみでしか使えない機能は作らない。button、range、details等のネイティブ要素を使い、タッチとキーボードを同等に扱う。
- 選択状態は aria-pressed、結果更新は必要な箇所だけ aria-live で伝える。
- 動作低減設定では自動アニメーションを止め、状態変更は即時または静止画で返す。
- デモ用のCTAは実在する予約・購入として扱わない。移植時に実サービスへ接続する。

## 6. モバイル
700px以下では複雑な分割を一列にする。横回遊の見本だけは意図的な横スクロールを残す。ページ全体には横はみ出しを作らない。見出しはclampで縮小し、本文は16pxを維持する。操作対象は原則44px以上を確保する。

## 7. 禁止事項
- 背景をベージュや茶色に置き換え、全セクションを同じ温度に寄せない。
- 汎用の角丸カード3列へ構成を置き換えない。
- 意味のない紫青グラデーション、絵文字アイコン、架空の顧客ロゴを追加しない。
- すべてをフェードインさせて初期表示を隠さない。
- 参考サイトの画像・ロゴ・コピー・有料プロンプトは流用しない。

## 8. 再現の確認
背景・表示書体・主要な配置比率・固有の操作が保持されていること。別業種への移植では、操作対象をその業種で意味のある内容へ翻訳する。独立セッションによる再現検証は未実施で、検証済みの記録を偽って記載しない。


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。