# 観察するマテリアル / Matter Lab

## 1. デザインの核
白と赤の科学編集。粒子の密度を比較スライダーで切り替え、素材の構造変化を説明する研究組織のトップページ。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
研究姿勢と構造比較 → 固定見出しと研究テーマ → 開発手順 → 共同研究
デモは架空ブランド「MATTER / 04」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

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

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.matter-hero{display:grid;grid-template-columns:1fr 1fr;min-height:650px}.matter-hero>div:first-child{padding:65px 5vw}.matter-hero h1{font:clamp(50px,6vw,90px)/1.03 'Instrument Serif',serif;letter-spacing:-.02em}.matter-hero h1 em{color:var(--color-accent)}.matter-jp{font-size:24px;margin:30px 0 20px}.matter-hero .cta{margin-top:30px}.comparison{position:relative;background:#e8ecef;overflow:hidden;min-height:580px}.particle-field{position:absolute;inset:50px 25px 140px}.particle-field i{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:var(--s);height:var(--s);border-radius:50%;background:#687582}.particle-field.after{background:#e8ecef;clip-path:inset(0 0 0 50%)}.after i{background:#c92c3b;border-radius:2px;transform:rotate(45deg)}.split-line{position:absolute;left:50%;top:50px;bottom:140px;width:1px;background:#24282d}.comparison-labels{position:absolute;left:25px;right:25px;top:23px;display:flex;justify-content:space-between}.compare-control{position:absolute;left:30px;right:30px;bottom:25px;display:grid;grid-template-columns:1fr auto;gap:12px;font-size:13px}.compare-control input{grid-row:2;grid-column:1/-1;width:100%}.diagram-caption{position:absolute;bottom:112px;left:30px;font-size:12px;color:#52616d}.research{display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:80px 5vw;border-top:1px solid var(--color-line)}.research aside{position:sticky;top:40px;align-self:start}.research h2{font:clamp(40px,5vw,76px)/1.05 'Instrument Serif',serif}.research aside>p:last-child{margin-top:25px}.research article{padding:35px 0 65px;border-top:1px solid var(--color-line)}.research article span{color:var(--color-accent)}.research h3{font-size:26px;font-weight:500;margin:25px 0 20px}.research article p{max-width:36em}@media(max-width:700px){.matter-hero{grid-template-columns:1fr}.comparison{min-height:480px}.matter-hero>div:first-child{padding:40px 5vw}.research{grid-template-columns:1fr}.research aside{position:static}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
clip-pathの比較スライダーとstickyの研究テーマ。入力はキーボードでも操作可能、図の意味を本文で説明。
- 操作前から内容を読める初期状態を用意する。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にブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。