# 奥行きの層 — Style Reference > 白い誌面の 5 層。手前は速くぼけ、焦点の札だけが鮮明 **Theme:** light **Series:** PARTS 063 **World:** 架空の誌面「Folio」。見出し・本文・札・番号・飾りの 5 層が奥行きに並ぶ。 ## Concept 5 つの層を `translateZ` で前後に置き、ステージに `perspective` を与える。スクロールで全層を同じ量だけ縦に動かすと、透視のため手前の層ほど大きく速く動き、奥の層は小さくゆっくり動く。焦点(z = 0)の白い札だけ鮮明で、前後の層は z の距離に応じて `blur` がかかる。残り火のグラデーションは札の点と手前の縦の棒の 2 か所だけ。読み込み時に 42% の位置から始めるので、静止画でも層がずれた状態が写る。 ## Signature Technique CSS 3D の透視 + 一様な平行移動 + 距離に比例するぼけ。 - ステージ: `position: sticky; perspective: 1100px; perspective-origin: 50% 50%`。層は `position: absolute; inset: 0; transform-style: preserve-3d` - 層の z: −700 / −350 / 0 / +250 / +480。画面上の倍率は `persp / (persp − z)` = .61 / .76 / 1 / 1.29 / 1.77 - 移動: `y = −(p − .5) × H × travel`(travel 1.1)。全層に同じ y を与え、`translate3d(0, y, z)`。速度差は透視が作る(手前 1.77 倍、奥 .61 倍) - ぼけ: `blur = min(maxBlur, |z| / blurPer)`(blurPer 200、maxBlur 5)。z = 0 は `filter: none` - 読み出し: 各層の見かけの移動量 `y × 倍率` を px で表示 - 進捗 `p = −top / (height − H)`。同じ値(1/1000 刻み)なら書き換えない - 初期位置: `load` 後に `(height − H) × .42` へ - reduced-motion: ぼけを 0 にし、移動はスクロール連動のまま - 手前の層は倍率で外へ広がるので、要素は中央寄りに置く(番号は右 `clamp(60px, 22vw, 320px)`、手前の字は左 12% など) ```js const scale = P.persp / (P.persp - l.z); const y = -(p - .5) * H * P.travel; l.el.style.transform = `translate3d(0,${y}px,${l.z}px)`; l.el.style.filter = blur ? `blur(${blur}px)` : 'none'; ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --porcelain | #F4F4F2 | 地色 | | --white | #FFFFFF | 焦点の札 | | --ink | #141414 | 見出しと番号。手前の字にも | | --graphite | #5A5A5A | 本文 | | --ash | #9A9A9A | 読み出し、mono ラベル | | --hair | #E2E2DF | 札の枠、罫 | | far text | #D9D9D4 | 最奥の大きな字 | | --ember | linear-gradient(135deg, #FF7A1A, #E8322B) | 札の点と手前の棒。2 か所だけ | ## Typography - 最奥の字: Noto Serif JP 400 `clamp(120px, 24vw, 420px)`、tracking .06em - 本文の層: Noto Serif JP `clamp(15px, 1.3vw, 19px)` / line-height 2、見出し 500 1.3em - 札: Noto Serif JP 500 `clamp(20px, 2vw, 28px)`、本文 Noto Sans JP 14px、mono 11px - 番号: JetBrains Mono 500 `clamp(90px, 16vw, 260px)` / tracking −.04em - 手前の字: Noto Serif JP `clamp(160px, 24vw, 380px)`、opacity .8 ## Spacing & Layout - ラッパー 360vh、ステージ 100svh - 札 `min(520px, 80vw)`、padding `clamp(22px, 3vw, 36px)`、radius 8px、1px hairline、影はほぼ無し - 本文の層: 左 `clamp(20px, 8vw, 120px)`。上 22%。幅 22em - 番号: 右 `clamp(60px, 22vw, 320px)`、上 58%。手前の字: 左 12%、下 16%。棒: 右 34%、上 18% - 640px 以下: 罫と注記を消し、番号・字・棒を内側へ寄せる ## Motion - 自走なし。スクロールだけが層を動かす - 焦点の札は 1 倍で動き、手前は 1.77 倍、最奥は .61 倍 - ぼけは固定(スクロールで変えない)。焦点を動かす場合は `blurPer` の基準 z をずらす - reduced-motion: ぼけなし ## Components - 上の帯: 名前 / 区画名、右に `scroll for parallax` - L1 最奥の字、L2 本文と罫、L3 焦点の札(点 + 見出し + 本文 + meta)、L4 番号と注記、L5 手前の字と棒 - 左下の読み出し: 各層の z と見かけの移動量。JetBrains Mono 12px、5 列 gap 14px(640px 以下は 3 列) - 右下のタグ `VALE / PARTS 063 / 奥行きの層`(11px) - 読み出しとタグの下敷き: `rgba(244,244,242,.82)` + `backdrop-filter: blur(8px)`、radius 6px、padding 8px 10px を負の margin で相殺(文字の位置は動かさない)。手前の番号や字がぼけて重なっても、ラベルが読める ## Do / Don't Do - 全層に同じ y を与え、速度差は透視に任せる - 焦点の層を 1 つ決め、そこだけ `filter: none` - 手前の層の要素は中央寄りに置く(倍率で外へ出る) - 色は 2 か所まで。残りは無彩 Don't - 層ごとに別の速度係数を手で付けない(透視と矛盾する) - blur を 6px より強くしない(白地で灰色の染みになる) - 手前の層に本文を置かない(ぼけて読めない) - 5 層より増やさない ## References - Poly(Ember on porcelain): 白磁の誌面に墨、残り火のグラデーション 1 点、hairline の枠と 8px の角。残り火を札の点と手前の棒に限定し、写真の代わりに大きな字を層に使った - Ramp(Editorial finance desk): 近無彩の誌面に 1 色の印、display は 1 ウェイトを大きく、行間 1.0。番号の層の組み方(mono を巨大に、tracking を詰める)を引き、印の色は黄緑でなく残り火にした ## Usage 1. HTML: `
` の中に `
…
` を 5 つ置く。`data-z` が奥行き(px) 2. CSS: `.wrap` `.stage`(perspective)`.layer` の 3 ルールを移植する。層の中身は自由 3. JS: `