# 色を巡るオンライン展示 / Spectrum Exhibition

## 1. デザインの核
ピンクの余白と巨大な色面を、横方向に巡る展示サイト。色の作品ごとに説明を開き、視覚と文脈を行き来する。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
誌面的な展示タイトル → 横方向の三部屋 → 会期・鑑賞案内
デモは架空ブランド「CHROMA / ROOM」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

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

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.exhibit-title{padding:50px 5vw 70px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.exhibit-title .eyebrow{grid-column:1/-1}.exhibit-title h1{font:clamp(70px,11vw,160px)/.88 'Instrument Serif',serif;letter-spacing:-.035em}.exhibit-title>div{align-self:end;max-width:24em}.exhibit-title .cta{margin-top:35px}.exhibition{padding:30px 0 60px;background:#441635;color:#f9d7e7}.gallery-bar{padding:0 5vw 25px;display:flex;align-items:center;justify-content:space-between;gap:20px}.gallery-bar h2{font:26px 'Instrument Serif',serif}.gallery-bar button{padding:8px 18px}.rooms{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 5vw 25px;scrollbar-color:#f9d7e7 #441635}.room{flex:0 0 60vw;scroll-snap-align:center;min-width:0}.art{height:360px;display:grid;place-items:center;overflow:hidden}.art-one{background:#ff5234}.art-one i{width:60%;height:80%;border:25px solid #253cee;outline:25px solid #ffabcf;transform:rotate(-12deg)}.art-two{background:#c9fa65;position:relative}.art-two i,.art-two b{width:220px;height:220px;border-radius:50%;background:#5630c8;position:absolute;left:25%}.art-two b{left:43%;background:#f675b8;mix-blend-mode:multiply}.art-three{background:#fca221}.art-three i{width:70%;height:55%;background:#ad1345;border-radius:50% 50% 0 0}.room-meta{padding:20px 0}.room-meta span{font:12px var(--font-mono)}.room-meta h3{font-size:24px;font-weight:400;margin:10px 0}.room-meta details{border-color:#865373;padding:12px 0}.room-meta summary{font-size:15px}.gallery-hint{margin:15px 5vw}.visit{padding:80px 5vw;display:grid;grid-template-columns:1.2fr 1fr;gap:25px}.visit .eyebrow{grid-column:1/-1}.visit h2{font-size:clamp(38px,6vw,80px);line-height:1.25}.visit h2 em{font-style:normal}.visit dl{margin:0}.visit dl div{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--color-line);padding:18px 0}.visit p:not(.eyebrow){grid-column:1}.visit .cta{justify-self:start}@media(max-width:700px){header>.mono{display:none}.exhibit-title{grid-template-columns:1fr}.exhibit-title>div{margin-top:30px}.room{flex-basis:85vw}.art{height:300px}.gallery-bar h2{font-size:20px}.gallery-bar button{padding:5px 10px}.visit{grid-template-columns:1fr}.visit h2{margin-bottom:20px}.art-two i{left:8%}.art-two b{left:36%}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
scroll-snapによる横回遊。矢印・キーボード・スワイプで同じ展示へアクセス。detailsで作品解説を開く。
- 操作前から内容を読める初期状態を用意する。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にブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。