# 重なるカード — Style Reference > 白い紙の上で、会場案内のカードが上から順に積まれていく **Theme:** light **Series:** PARTS 064 **World:** 架空の「海辺の建築祭」の会場案内。5 つの会場を 5 枚のカードで順にたどる ## Concept スクロールすると次のカードが下から上がってきて、前のカードの上に重なる。前のカードは止まったまま少し縮んで奥に下がり、白いベールが薄くかかって、上端の帯だけが残る。積み上がった帯の枚数で「何枚目まで来たか」が一目で分かる。色はカード右側の「額」の中だけに置き、紙(白)と黒の線で全体を組む。読み込み時は 3 枚目が止まる直前の状態で表示し、静止画でも重なりが分かるようにする。 ## Signature Technique - 全カードを同じ親 `.stack` の直下に置き、`position: sticky; top: var(--t)` で止める。`--t` はカードごとに `--top + --step × n`(72px + 22px × n)。同じ親に属するので、後のカードが来ても前のカードは止まったまま残り、DOM 順にそのまま上に重なる。 - カードの高さは `100svh − --top − --step×4 − 64px`、`margin-bottom: 38vh` がスクロール距離になる。 - 進み具合 p は JS で「次のカードの上端が画面下端から止まる位置まで上がる区間」を 0→1 に正規化: `p = clamp((vh − nextRect.top) / (vh − nextTop))`。 - p から前のカードに `transform: translateY(−10px·p) scale(1 − 0.06·p)`(transform-origin 上端中央)と、`::after` の白いベール `opacity: 0.35·p` を与える。scroll イベントは rAF で 1 フレーム 1 回に間引く。 - 初期表示: `history.scrollRestoration = 'manual'` にして、3 枚目の `offsetTop − top − 72px` へ `scrollTo` する(途中の状態から始める)。 - 右の額は `background: var(--c)` の平面と、巨大な数字(Inter 700, 最大 300px)と、角丸を 1 隅だけ変えた正方形(`--sr`)で作る。装飾はこの 2 要素だけ。 - reduced-motion: 縮小とベールは scroll に従属した変化なのでそのまま。自律的な動きは無い。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | --paper | #ffffff | 地とカードとベール、額の面(01) | | --ash | #f2f2f2 | 額の面(03) | | --mist | #e7e7e7 | 額の面(05) | | --ink | #000000 | 文字、1px の枠、額の面(04)、数字 | | --slate | #6a6a6a | 補足文、メタ情報 | | --iris | #6b6bf5 | 唯一の彩色。額の面(02)と図形(01・04) | | --deep | #23234d | 暗い紫の図形(03) | ## Typography - 日本語: Zen Kaku Gothic New 300。カード見出し clamp(30px, 3.8vw, 58px) / 1.05 / 字間 −0.035em / 最大幅 12em(760px 以下は clamp(26px, 8vw, 40px)、幅制限なし)、カード本文 14px / 1.9 / 最大幅 30em、ページ見出し clamp(34px, 5vw, 68px) / 1.05 / 字間 −0.035em、ページ本文 15px / 1.9 / 最大幅 34em。見出しは読点の後で改行し、各行を `white-space: nowrap` の span にして句点だけが次の行に落ちないようにする。 - 欧文: Inter。メタ 500 / 12px / 字間 0.08em、ヘッダーの英語名 500 / 14px、額の数字 700 / clamp(120px, 20vw, 300px) / 字間 −0.06em / line-height 0.8。タグ 11px / 字間 0.1em。 - 太さは 300(本文・見出し)、500(メタとヘッダーの名前)、700(数字)の 3 段。見出しは軽く、数字は重く。 ## Spacing & Layout - 最大幅 1200px、左右 clamp(16px, 4vw, 56px)。 - ヘッダー: sticky、下に 1px 黒線、padding 上 18px(+safe-area)・下 14px、12px / 字間 0.08em。 - intro: padding 上 clamp(40px, 8vh, 96px)・下 clamp(24px, 5vh, 56px)、見出しの下 12px。 - stack: 下 padding 30vh。 - カード: 1px 黒枠、角丸 3px、grid 7fr/5fr(右が額)。文字側 padding clamp(20px, 3vw, 40px)、gap 18px、grid-rows auto/1fr/auto で見出しを下寄せ。 - 額の図形: 幅 62% の正方形を右下に `inset: auto −10% −18% auto` ではみ出させる。 - 重なりの段差 `--step: 22px`、止まる位置 `--top: 72px`。 - 760px 以下: 1 カラム(文字 / 額を上下)、額 min-height 30%、数字 clamp(64px, 24vw, 120px) / line-height 1、図形 幅 40%・`inset: auto −6% −12% auto`、カード高さの下余白 84px、タグは縦積み(間隔 6px)。 - 下部タグは fixed、`mix-blend-mode: multiply` で額の上でも読める。 ## Motion - 入力はスクロールだけ。縮小 0→6%、持ち上げ 0→−10px、ベール 0→35%、すべて線形で p に従属。 - `transform-origin: 50% 0` で上端を軸に縮むので、帯の位置はずれない。 - scroll / resize → rAF で update。transition は使わない(スクロールに 1 対 1 で追従)。 - prefers-reduced-motion: 変更なし(自律アニメーションが無い)。ヒント文だけ変える。 ## Components - head: 左にサイト名、右に英語名。 - intro: 見出し 1 本 + 1 文。 - card: meta(番号 / 会場名 / 英語名)、h2、p、frame(数字 + 図形)。 - tag: 右下に `VALE / PARTS 064 / 重なるカード`、左下に操作説明 1 行。 ## Do / Don't Do - カードは 4〜6 枚。帯の段差は 20〜24px に保つ。 - 色は額の中だけ。カード本体は白のまま。 - 見出しは軽いウェイトで、額の数字を重くする。 - 読み込み時はスクロールの途中から始める。 - 縮小は 10% 以内。ベールは 40% 以内。 Don't - カードに影を付けない。重なりは枠線とベールで見せる。 - 角丸を大きくしない(3px まで)。 - スクロール以外で動かさない。 - 額に写真を入れるなら 1 枚まで、文字は入れない。 - 帯に見出しを詰めない(帯は上端の線だけで良い)。 ## References - 12th Berlin Biennale for Contemporary Art(Iris-and-ink broadsheet): 「白い紙に記念碑的な黒い文字、一色の紫」「3px の角、ヘアラインの黒枠、影を使わない」を取り入れた。構成主義的な重なる矩形を、カードの重なりと額の中の図形に置き換えた。 - Patreon(White gallery): 「UI は退き、色は額縁の中にだけある」「細いウェイトで字間を詰めた見出し」を取り入れた。写真の代わりに数字と平面の色を額に入れ、ピル形の部品は使わず直線の枠にした。 ## Usage 1. HTML: `.stack` の直下に `.card` を並べる。各カードの `style` に `--t:calc(var(--top) + var(--step)*n)`(n は 0 から)と額の色 `--c`、必要なら数字の色 `--n`、図形の色 `--s` と角丸 `--sr` を書く。 2. CSS: `:root` の `--top` `--step`、`.stack`、`.card`(sticky、高さ、margin-bottom)、`.card::after`(ベール)、`.card .frame` 一式、760px のメディアクエリを移植。カード枚数を変えるときは `.card` の高さ式の `--step*4` を「枚数 − 1」に合わせる。 3. JS: `