かき氷店 白氷(しろごおり)

上の提案をもとに AI が起こした詳細ブリーフです。これがそのままコードを書く AI への入力になりました。原文のまま載せています。

# ブリーフ v1 — かき氷店 白氷(しろごおり)

- slug: `shirogoori` / mode: **Experience**(品書きそのものが作品。UI は退き、氷が主役)
- 前提: headless 実行のため new-work §2 の聞き取りは行わず、選択案 JSON と参考サイトの実物 CSS
  (12 カラム・行 hover で黒地反転・家のイージング `cubic-bezier(.17,.84,.44,1)`・副文字色 `#929292`)から推定した。
  推定した箇所は「仮定:」で明記する。

---

## 1. ブランド軸

- **名前**: 白氷(しろごおり)。欧文補助 `SHIROGOORI`(mono でのみ使う)
- **業種**: かき氷専門店。夏季限定(7月1日〜9月15日、77 日間)。物販・通販なし
- **ペルソナ**: 30 歳前後、夏の週末に 1 時間かけて出かける人。写真より味と時間を優先し、行列は整理券で待つのを厭わない。
  デザインや建築に多少の目があり、「色とりどり」より「白いまま」に惹かれる
- **価格帯**: 1 杯 ¥900〜¥1,300(季節の果実は ¥1,300)。現金・整理券制。仮定: 客単価 1 杯、滞在 30 分
- **ブランド人格(5 語)**: 無口 / 正確 / 涼しい / 潔い / 一つだけ悪戯(12 番「ミルク」)
- **Why-This-Brand**: 天然氷を薄く削ると、口の中で溶けるより先に消えて、味だけが残る。色の付いた完成品の写真はどこの店にもあるが、
  白氷が売っているのは「かける前」だ。氷は白いまま客の前に出され、色は客の手元で、シロップが染みる数秒間にしか現れない。
  この店は夏の 77 日だけ開き、氷が無くなった時点で閉める。サイトはその体験を 1 スクロールで反復する装置で、
  品書きに触れた味の色が、上に固定された白い氷の映像に染みる。それ以外の場所に有彩色は一切置かない。

## 2. 差別化軸

**同業の凡庸な見せ方(3 つ)**
1. ヒーローに色とりどりの完成品写真を並べ、彩度で押す(色を先に見せるので「かける瞬間」が消える)
2. 「ふわふわ」「映え」「行列必至」の語彙と、手描き風フォント・氷旗(赤い「氷」の字と波)・青白グラデの意匠
3. メニューを「写真 + カード + ボタン」の EC 型で並べ、味の違いを写真の色で説明する

**この案の踏み外し方**
- 完成品を一度も見せない。写真は氷と手仕事だけで、すべて白黒(`filter: grayscale(1)` を CSS で強制)
- 色は触るまで出さない。12 色は「値(hex)」として mono で**書く**が、UI 上では一度も**塗らない**
- 品書きは文字だけの均一タイル 4×3。写真も説明文も置かず、番号・味名・価格・色コードの 4 要素で終わる
- 動きの置き所を hover と遷移の 2 箇所に絞り、スクロール連動・parallax・セクション reveal を 0 本にする(参考サイトの「抑制」の翻訳)

**直近コーパスとの距離(署名の申告)**
- メタファー系統: **所作(かける)+ 自然現象(染みる)**。計器・帳票でも街の断面(直近 grind-district)でもない
- コピー構文: **条件 → 結果の 2 拍**(「触れると、染みる。」)と**名詞の列挙**。「Xは、Yではない。Zだ。」の 3 拍は使わない
- 配色型: **明度だけで組む**(白・墨・グレー 2 段)。常時アクセント 0 色。12 の有彩色はデータであり、hover 中の映像内にしか存在しない。
  「地 1 色 + アクセント 1 色」に見えかねないが、アクセントが**無い**点で別物。白黒 2 値は参考サイトの核心なので重ねる(理由: 業種適合よりも参照適合の要請。ブリーフが勝つ)

## 3. トーン&マナー

- **人称**: 一人称なし(店は自分を語らない。「私たち」「当店」禁止)。二人称なし(「あなた」禁止)。呼びかけは末尾の 1 回「溶ける前に、どうぞ。」だけ
- **文体**: 見出し・hero・章リード = **常体・短文**。本文 = **敬体(です・ます)**。役割が違うので混在させる
- **抽象度**: 低い。名詞は氷・色・温度・日付・分量・時間に限る。「感動」「体験」「世界観」のような抽象名詞は使わない
- **リズム**: 2 拍。「〜と、〜。」(条件 → 結果)を基本形にし、hero と各章リードで 1 回ずつ使う。列挙は読点で切る 3〜4 語まで
- **数字**: 半角数字は必ず mono(`0.5 mm` / `-3 °C` / `7.1 — 9.15`)。和文の中の数字は漢数字(十二種、十四日)
- **避ける言葉**: こだわり / 至福 / 極上 / 贅沢 / 本物 / 体験 / ふわふわ / 映え / 絶品 / 至高 / 行列 / 癒し / 特別な / 唯一無二 / 〜をお届け

## 4. デザイン原則

### 配色方向
- 白 `#FFFFFF` 地、墨 `#111111` 文字、罫線 `#D6D6D6`。副文字は `#6B6B6B`(参考サイトの `#929292` は白地で 3.0:1 なので AA を割る。小さい文字には使わない)
- 有彩色の出現場所は **hero の色レイヤー(`mix-blend-mode: multiply`)1 枚だけ**。タイル・ヘッダー・罫線・フッター・フォーカスリング・リンク下線に有彩色を置かない
- hover 中のタイルは**墨地に白文字へ反転するだけ**(参考サイトの行 hover)。色は氷へ行き、タイルには来ない
- 写真は白黒。動画は無彩(白と淡いグレー)で生成し、色は CSS で重ねる。同じ動画 1 本を 12 色で使い回す

### タイポ体系
- **表示**: Noto Sans JP 900(店名・章見出し)。字間 -0.03em、行送り 0.9。店名「白氷」は 2 字で 64〜176px
- **本文**: Noto Sans JP 400。行送り 1.9、字間 0.02em、1 行 36 全角以内
- **UI(数値・ラベル)**: JetBrains Mono 400/700(fallback IBM Plex Mono)。`font-variant-numeric: tabular-nums slashed-zero`。**最小 14px**。字間 0(mono は詰めない・空けない)。和文グリフは Noto Sans JP に落ちるので、味名は Noto Sans JP 700 を同じ級数で並べる
- serif・script・可変フォントの遊びは使わない。eyebrow(章見出し直上の小ラベル)は全章で禁止。章は見出し 1 語 + リード 1 文で立てる
- 色名(hex)は必ず mono で書く。`#E4405F` の 6 桁は大文字で固定

### グリッド / レイアウト原則
- 12 カラム、最大幅 1440px、左右 `clamp(16px, 2.5vw, 40px)`、ガター 24px(390 幅 16px)
- **Stage 構造**(hero と品書きが同じ画面に共存):
  ```css
  .stage { position: relative; }
  .hero  { position: sticky; top: 0; height: 60svh; z-index: 2; }   /* 390: 44svh */
  .menu  { position: relative; z-index: 1; background: var(--paper); padding-bottom: 40svh; } /* 390: 56svh */
  .tile  { scroll-margin-top: 60svh; }  /* Tab で hero の裏に隠れないため。390: 44svh */
  ```
  品書きは hero の**下の帯(40svh)を上へ流れ、hero の下端に潜って隠れる**。Stage が終わると hero も一緒にスクロールして消える
- タイル: 960px 以上 4 列、600〜959px 3 列、599px 以下 2 列。`gap: 1px; background: var(--rule)` + タイル背景白で 1px 罫線 1 本(二重線を作らない)
- 角丸 0。影 0。面は白か墨の 2 値。余白は 8px 基準
- ヘッダーは fixed(56px / 390: 52px)、透明地、墨文字。z-index 3

### モーション言語
- **焦点(署名)**: タイルの hover / focus-visible / タップ固定で、hero の色レイヤーの `--syrup` が transparent → 味の色に **240ms** で染み、離すと **600ms** で抜ける。タイル → タイルの移動は白を経由せず色 → 色へ直接遷移(`background-color` の transition で自然に成立する。class の付け外しで transparent を挟まないこと)
- **フィードバック**: タイル反転 in 160ms / out 240ms。hero 右上の読み出し(番号・味名・hex)は 160ms のクロスフェードで差し替え
- **入場**: 初回 1 度だけ、店名「白氷」を `clip-path: inset(0 0 100% 0) → inset(0)` で 600ms(delay 120ms)。他の要素に入場アニメは無い
- **スクロール連動: 0 本**。`animation-timeline: scroll()` / `view()` は使わない。hero は「sticky で固定」しているだけで、スクロール量を再生位置に使う**ピン留めスクラブではない**し、速度差でずらす **parallax でもない**(両者は別物であり、どちらも採用しない)。参考サイトの「動きをホバーと遷移に集中させる」配分をそのまま翻訳する
- **JS を足す理由**(依存ゼロ、約 60 行): ① タッチのタップ固定(`aria-pressed` の排他トグル。CSS だけでは表現不能) ② 動画ループの継ぎ目処理(`<video loop>` にはシーム処理が無く、注ぐ → 沈むという非循環の 8 秒はハードカットが見えるため 2 バッファでディゾルブする) ③ `:has()` 非対応ブラウザ向けの hover ミラー ④ `document.hidden` と画面外での pause。GSAP 等は入れない
- `prefers-reduced-motion: reduce`: 動画を静止画(染み込み途中 4s 付近のフレーム)に置換、店名の入場を消す、ループスクリプトを起動しない。**色レイヤーの遷移(240/600ms)は残す**(「どの味を見ているか」という状態変化は意味を運ぶ)

### 写真 / 動画の役割
- **動画(1 本)**: 「透明なシロップが白い氷に染みる 8 秒」。色を持たない映像に色を後から乗せるので、映像は無彩・高キーで撮る(生成する)
- **静止画(2 枚、白黒)**: ① 氷室の天然氷ブロック ② 手回し削り機を回す両手。人物の顔は出さない。CSS で `grayscale(1)` を強制し、生成結果に色が混ざっても白黒に落ちる
- 完成品(色の付いたかき氷)の写真は**サイト全体で 0 枚**

## 5. 確定トークン

### 配色(16 進で統一)
```css
:root {
  --paper:   #FFFFFF; /* ページ地・タイル地・ヘッダー地(透明の下地)/ 使わない: 文字色 */
  --ink:     #111111; /* 本文・見出し・mono・hover 中のタイル地・フォーカス輪郭 / 使わない: 大面積の地(hover タイル以外) */
  --rule:    #D6D6D6; /* 品書きの格子線・章の区切り線・表の罫 / 使わない: 文字 */
  --rule-soft: #EDEDED; /* フッター上端・データ行の区切り / 使わない: 主要な境界 */
  --mute:    #6B6B6B; /* hex コード・価格単位・注記・ナビの非アクティブ(白地で 4.9:1)/ 使わない: 本文 */
  --mute-on-ink: #BDBDBD; /* 反転タイル内の hex コード(墨地で 8.6:1)/ 使わない: 白地 */
  --ice-hi:  #FAFAFA; /* CSS フォールバックの氷(明部)/ 使わない: UI */
  --ice-lo:  #E6E6E6; /* CSS フォールバックの氷(陰)/ 使わない: UI */
  --syrup:   transparent; /* 実行時に 12 色のどれかへ。hero の色レイヤー専用。他のどこにも参照させない */
}
```

**12 のシロップ色(データ。UI には塗らない。hero の multiply レイヤーと読み出しの文字列にだけ現れる)**

| no | 味 | hex | 価格 | 材料(シロップ章の行) |
|---|---|---|---|---|
| 01 | いちご | `#E4405F` | ¥900 | 露地いちご、きび砂糖、レモン |
| 02 | 抹茶 | `#4F8A3A` | ¥1,000 | 碾茶、和三盆、湯 |
| 03 | ブルーハワイ | `#2F7FD1` | ¥900 | パイン、ライム、砂糖、バタフライピー |
| 04 | メロン | `#7DBB3C` | ¥1,100 | 赤肉メロン、砂糖、塩ひとつまみ |
| 05 | レモン | `#F0C419` | ¥900 | 国産レモン、はちみつ、砂糖 |
| 06 | みかん | `#F07E1F` | ¥900 | 温州みかん、砂糖、皮少々 |
| 07 | ぶどう | `#6E3FA3` | ¥1,100 | 巨峰、砂糖、赤ワインビネガー |
| 08 | 白桃 | `#F2A0AE` | ¥1,300 | 白桃、砂糖、レモン |
| 09 | 紫蘇 | `#A32C63` | ¥900 | 赤紫蘇、砂糖、梅酢 |
| 10 | 黒糖 | `#5C3B1E` | ¥1,000 | 黒糖、水、生姜ひとかけ |
| 11 | ほうじ茶 | `#9C6A3C` | ¥1,000 | 焙じ番茶、きび砂糖、牛乳少々 |
| 12 | ミルク | `#F3ECDD` | ¥900 | 牛乳、練乳、砂糖 —— 氷は、ほとんど白のまま |

`--syrup-01` … `--syrup-12` として `:root` に定義し、`.stage:has(.tile[data-no="07"]:is(:hover, :focus-visible, [aria-pressed="true"])) { --syrup: var(--syrup-07); }` を Astro の map で 12 本生成する(`:hover` の行は `@media (hover: hover)` で囲む)。

### タイポ(3 役 / 7 段。すべて確定値)
```css
:root {
  --font-display: "Noto Sans JP", system-ui, sans-serif;               /* 900: 店名・章見出し / 700: 味名 */
  --font-body:    "Noto Sans JP", system-ui, sans-serif;               /* 400 */
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "Noto Sans JP", monospace; /* 400 / 700 */

  --fs-display: clamp(4rem, 1.5rem + 11vw, 11rem);      /* 64 → 176px  店名「白氷」          lh 0.9  ls -0.03em */
  --fs-h2:      clamp(2.5rem, 1.5rem + 4vw, 5rem);       /* 40 → 80px   章見出し(氷・シロップ・店) lh 1.0  ls -0.02em */
  --fs-lead:    clamp(1.25rem, 1rem + 1.2vw, 2rem);      /* 20 → 32px   hero 副文・章リード     lh 1.5  ls 0 */
  --fs-mono-lg: clamp(1.125rem, 1rem + 0.8vw, 1.75rem);  /* 18 → 28px   味名・価格・読み出し   lh 1.2  ls 0 */
  --fs-body:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);  /* 16 → 18px   本文                   lh 1.9  ls 0.02em */
  --fs-mono:    clamp(0.875rem, 0.8rem + 0.3vw, 1rem);   /* 14 → 16px   番号・hex・データ行・ナビ日付 lh 1.4 ls 0 */
  --fs-note:    0.75rem;                                 /* 12px        注記(Noto Sans JP 400 のみ。mono 禁止)lh 1.6 */
}
```
- mono は `font-variant-numeric: tabular-nums slashed-zero;` を必ず付ける。番号は 2 桁ゼロ埋め(`01`〜`12`)
- 和文の折返し: 見出しは `text-wrap: balance`、本文は `line-break: strict; overflow-wrap: anywhere; hanging-punctuation: allow-end;`、対応環境では `word-break: auto-phrase`。本文の `max-inline-size: 36em`、リードは `22em`
- hero 副文「触れると、染みる。」は 9 字で `white-space: nowrap`(390 幅で 20.7px × 9 = 約 190px、収まる)
- Google Fonts: `Noto+Sans+JP:wght@400;700;900` + `JetBrains+Mono:wght@400;700`、`font-display: swap`

### モーションの語彙(3 つに絞る)
```css
:root {
  --ease-soak:   cubic-bezier(0.17, 0.84, 0.44, 1);  /* 染みる: 色 in 240ms / タイル反転 in 160ms / 読み出し切替 160ms(参考サイトの家のイージング) */
  --ease-drain:  cubic-bezier(0.45, 0, 0.55, 1);     /* 抜ける: 色 out 600ms / タイル反転 out 240ms / 動画ディゾルブ 600ms */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);      /* 到着: 店名の初回クリップ出現 600ms(delay 120ms)。これ以外に使わない */

  --t-soak: 240ms;  --t-drain: 600ms;  --t-tile-in: 160ms;  --t-tile-out: 240ms;
  --t-arrive: 600ms; --t-hold: 1200ms; /* ループ末尾の静止 */
}
.syrup { background-color: var(--syrup); mix-blend-mode: multiply;
         transition: background-color var(--t-drain) var(--ease-drain); }
.stage:has(.tile:is(:hover, :focus-visible, [aria-pressed="true"])) .syrup {
         transition-duration: var(--t-soak); transition-timing-function: var(--ease-soak); }
```
- 使わない動き: scroll-driven / parallax / hover の持ち上げ(translateY)/ セクション reveal / stagger / bounce / elastic

### 余白・角丸・線
- 基準 **8px**。使う段: `8 / 16 / 24 / 40 / 64 / 96 / 160`。章の上下余白 `clamp(64px, 10vw, 160px)`。章見出しとリードの間 24px、リードと本文の間 40px
- ヘッダー高 56px(390: 52px)。hero 内の文字は左下 `clamp(16px, 2.5vw, 40px)` 詰め、読み出しは右上 `top: 64px`(390: 60px)
- タイル: `min-height: 132px; padding: 16px`(390: `min-height: 96px; padding: 12px`)。番号は左上、味名はその下、価格は右下(右揃え)、hex は左下
- 角丸: **0**(全要素)。影: 0
- 線: 格子・章区切り `1px solid var(--rule)`。hero と品書きの境界 `1px solid var(--ink)`(ページで唯一の墨線)。フッター上端 `1px solid var(--rule-soft)`
- フォーカス: `outline: 2px solid currentColor; outline-offset: -6px;`(反転タイルの内側に白い輪郭が出る)。`:focus` ではなく `:focus-visible`

### 動画トークン
```
--video-src:       /videos/shirogoori/hero-seep.mp4   (h264 / 1280×720 / 8s / 無音 / 3MB 以下 / playsinline muted autoplay preload="metadata")
--video-poster:    /images/shirogoori/hero-seep-poster.jpg (16:9 1600×900。染み込み途中 4s 付近のフレーム相当。data-img-spec 付き)
--video-prompt:    "Static locked-off macro shot from slightly above eye level of a tall soft mound of finely shaved white ice in a plain clear glass bowl on a seamless white tabletop, bright high-key diffused studio light from the upper left, shallow depth of field with the front edge of the ice in crisp focus, clear colorless syrup poured slowly from just above the top of the frame and seeping down through the ice over eight seconds as the surface glistens and gently settles, real-time speed, pure white and pale gray tones only, empty white negative space on the left third, no text, no logos, no people faces."
--video-placement: Stage の hero 全面。`object-fit: cover; object-position: 50% 40%`。1280 幅: 100vw × 60svh / 390 幅: 100vw × 44svh(16:9 を中央やや上でトリミング。氷の山の頂が切れない)
--video-treatment: scrim 無し(不透明度 0)。`.hero-media { isolation: isolate }` の中に <video> と `.syrup`(`position:absolute; inset:0; background-color: var(--syrup); mix-blend-mode: multiply; pointer-events:none`)を重ねる。店名・副文・読み出しは isolate の**外**に置き normal blend、文字色は常に #111(映像が高キーなので scrim 無しで 14:1 以上)。暗い全面 scrim は禁止
--video-loop:      2 バッファ(同じ src の <video> A/B)。A の ended → 最終フレームで 1200ms 静止 → B を currentTime 0 から再生しつつ opacity 0→1 を 600ms --ease-drain → A を非表示にして役割交代。1 周 ≈ 9.8s。JS 不能時は A の `loop` 属性でハードカット
--video-idle:      Stage が画面外に出たら pause(IntersectionObserver)。`document.hidden` でも pause。戻ったら play
```

**フォールバック鎖(必ず何かが映る)**
1. 動画生成成功 → 上記
2. 動画失敗 → `--video-poster`(静止画)を同じ位置に `object-fit: cover` で表示し、同じ `.syrup` を重ねる(色の遷移はそのまま成立)
3. poster も無い → CSS の氷: `.hero-media::before { background: radial-gradient(ellipse 62% 48% at 50% 62%, #FFFFFF 0 38%, #F3F3F3 55%, var(--ice-lo) 70%, var(--ice-hi) 71%); }` に同じ `.syrup` を重ねる(multiply は #F3F3F3 の上でも色が乗る)
4. reduced-motion → 2 と同じ(動画は `display: none`、poster を表示)

## 6. ページ構成

0. **ヘッダー(fixed)** — 主張: 店名と会期だけ。
   - 左「白氷」Noto Sans JP 900 20px / 中央ナビ「品書き / 氷 / シロップ / 店」Noto Sans JP 400 14px(390 幅では非表示。フッターに同じアンカーを置く)/ 右 `7.1 — 9.15` mono 14px
1. **Stage = hero(sticky 60svh)+ 品書き(4×3)** — 主張: **触れると、染みる。を最初の 1 スクロールで体に入れる。**
   - hero: 動画(無彩の染み込み 8 秒)+ `.syrup` レイヤー + 店名「白氷」(左下)+ 副文「触れると、染みる。」+ 右上の読み出し `00 無色 #FFFFFF`(`role="status" aria-live="polite"`)
   - 品書き: `<ul>` に 12 の `<button type="button" aria-pressed="false" data-no="01">`。各タイル = 番号 / 味名 / 価格 / hex の 4 要素のみ。写真・説明・矢印なし
   - hero と品書きの境界に 1px の墨線
   - **この動画が無いと成立しないもの**: 「触れると染みる」の**染みる**。静止画に色を乗せると塗り絵になり、時間でしか見えない「染みる・沈む」が消える。だから動画が主で、色は従
2. **氷** — 主張: 薄く削るから、味だけが残る。
   - 見出し「氷」/ リード「山の氷池で十四日かけて張った氷を、〇.五ミリに削る。」/ 本文 2 段落(敬体)
   - データ行(mono、4 行): `氷池 14 日` / `厚さ 150 mm` / `削り 0.5 mm` / `氷温 -3 °C`
   - 白黒写真 ①(氷室の天然氷ブロック、3:2、`data-img-spec`)
3. **シロップ** — 主張: 十二種、すべて店で煮る。
   - 見出し「シロップ」/ リード「果実と砂糖と、少しの酸。三日で使い切る分だけ煮る。」
   - 12 行のリスト(番号 mono / 味名 / 材料。hover で行が墨地に反転。hero はもう固定されていないので色は乗らない)
   - 白黒写真 ②(手回し削り機を回す両手、3:2、`data-img-spec`)
4. **店** — 主張: 夏のあいだだけ。氷が無くなった日はそこで閉める。
   - 見出し「店」/ リード「七月一日から九月十五日まで。氷が無くなると、その日は閉める。」
   - データ行(mono): `会期 7.1 — 9.15` / `時間 11:00 — 売切` / `整理券 10:30 配布` / `場所 上ノ原 3-2(氷室の隣)` / `休み 雨の日`
   - 結び「溶ける前に、どうぞ。」(ページで唯一の呼びかけ。ボタンにしない。`--fs-lead`)
5. **フッター** — 主張: 色は氷の上にだけ。
   - 12 の hex を mono 1 行で並べる(`#E4405F #4F8A3A … #F3ECDD`。塗らない)/ 「色は、氷の上にだけ。」/ ナビの再掲 / `© 白氷`

英語版(`site-content-shirogoori.en.json`)は同じ構造で差し替える。数値・hex・価格は共通。

## 7. コピー方針

**Hero 副文の候補**(採用 A。B はフッターへ、C は品書きリードへ回す)
- A. 「触れると、染みる。」— EN: "Touch, and it soaks in."
- B. 「色は、氷の上にだけ。」— EN: "Colour lives only on the ice."
- C. 「白い氷に、十二の色。」— EN: "One white ice, twelve colours."
- D. 「夏のあいだだけ、削る。」— EN: "Shaving only through summer."

**各セクションの言葉のトーン**
- 品書き: 名詞だけ。味名・価格・hex。説明文を書かない。リードは C を流用(「十二種、すべて店で煮る。触れた味の色が、上の氷に染みる。」)
- 氷: 工程を数字で言う。「薄く削ると、口の中で溶けるより先に消えます。だから、味だけが残ります。」のように**敬体 2 文**で 1 段落
- シロップ: 材料の列挙で終える。形容詞を付けない(「甘酸っぱい」「濃厚な」禁止)
- 店: 事実の行と、結びの 1 行だけ。値引き・予約・SNS 誘導を書かない
- 読み出し(hero 右上): 既定 `00 無色 #FFFFFF`。hover 中 `07 ぶどう #6E3FA3`。ミルクは `12 ミルク #F3ECDD`(氷はほとんど変わらないが、読み出しだけが変わる)

## 8. クラフトの肝

1. **色の置き場は氷だけ** — タイルは hover で墨地・白文字に反転するだけで、hex は文字として書かれるが一度も塗られない。有彩色はページ中で `.syrup` 1 枚の中にしか存在しない。12 番ミルク `#F3ECDD` はほとんど白で、氷が変わらないことが「正直な悪戯」になる
2. **染みる 240ms / 抜ける 600ms の非対称と、色 → 色の直行** — 染みるのは速く、抜けるのは遅い(シロップが氷から抜けるのは遅い)。タイル間を横切るときは transparent を経由せず前の色から次の色へ直接補間する(`background-color` の transition に任せる。class で transparent を挟むと白が一瞬光る)
3. **読み出しの桁が動かない** — `00 無色 #FFFFFF` → `02 抹茶 #4F8A3A`。番号 2 桁、味名は `inline-size: 6em` の固定幅、hex 7 桁。tabular-nums + slashed-zero で、切り替わるのは文字だけで位置は 1px も動かない
4. **1px の格子** — `gap: 1px` + 地色で線を作り、二重線も欠けも出ない。価格は右揃え tabular、`¥` と数字の間に空白を入れない、番号は左上に `01`。4 列 → 3 列 → 2 列に折れても線の太さと揃えが変わらない
5. **ループの息** — 8 秒で沈み切った氷を 1.2 秒静止させてから、0.6 秒のディゾルブで乾いた氷へ戻す。黒画面もフラッシュも無く、「注ぐ → 染みる → 沈む → 一拍 → また注ぐ」の呼吸ができる。reduced-motion では 4 秒目の静止画で止まり、それでも色は染みる

モーション量の総計: 入場 1(初回のみ)/ 遷移 2(色・タイル反転)/ 読み出し切替 1 / ループのディゾルブ 1。スクロール連動 0、parallax 0、reveal 0。

## 9. ロゴ

- **モチーフ**: 「削り」の所作から導く**極薄の削り屑 1 枚**(有機・面)。かき氷の山ではなく、削られて舞い落ちる 1 枚の氷の曲面。円弧 1 本で構成できる程度に幾何へ寄せ、鋭角を作らない(氷は薄いが冷たく尖らない)。線ではなく面で描き、面は白 1 色。墨地の上に置いたときに初めて見える(= 色が乗ったときに初めて見える、と同じ論理)
- **言葉の扱い**: 和文「白氷」が主。欧文 `SHIROGOORI` は mono の補助表記でロゴの一部にはしない。略称なし。タグライン**なし**(「夏だけ」は日付 `7.1 — 9.15` が担う)。「しろごおり」の読みは初出の本文で 1 回だけ添える
- **避けたい既視感**: 氷旗(赤い「氷」の字・波模様・千鳥)/ 雪の結晶 / 青白のグラデーション / かき氷の山のイラスト / 丸ゴシック・手描き風・レトロ看板 / 「涼」「夏」の筆文字
- シンボルの有無・線幅・字間・サイズ比は Step 1 で参考サイトの型紙(ref-structure.json の logo)に合わせる。ここでは決めない

## 10. 受け入れチェックリスト

1. 1280×800 で、hero が上端に固定され高さが viewport の 60%(±2%)であり、品書きタイルはその下の帯を上へ流れて hero の下端に潜って隠れる(hero が上に重なる)
2. 390×844 で、hero の高さが viewport の 44%(±2%)であり、品書きが 2 列 × 6 行に並ぶ
3. 390 幅で「白氷」と「触れると、染みる。」が横に溢れず、副文は 1 行に収まり、横スクロールバーが出ない
4. **(署名モーション)** 品書きの任意タイルにマウスを乗せると、hero の氷の映像がそのタイルの色(02 抹茶なら緑 `#4F8A3A` 系)に約 240ms で染まり、外すと約 600ms かけて白に戻る
5. hover 中、タイルは墨地・白文字に反転するだけで、タイル・ヘッダー・本文・罫線のどこにも有彩色が現れない(有彩色は hero の氷の中だけ)
6. Tab キーでタイルにフォーカスを移すと hover と同じ染色が起き、タイル内側に 2px のフォーカス輪郭が見える
7. タッチ端末(または DevTools のタッチエミュレーション)でタイルを 1 回タップすると色が固定され、同じタイルを再タップすると白に戻る
8. hero 右上の読み出しが既定で `00 無色 #FFFFFF`、02 を hover 中は `02 抹茶 #4F8A3A` と等幅で表示され、切り替え時に文字の左右位置が動かない
9. **(動画・390px)** 390 幅で hero の動画が自動再生(無音)され、透明なシロップが氷に染みる様子が見え、映像の上に暗い scrim が無い(氷の白が白いまま)
10. **(動画・reduced-motion)** `prefers-reduced-motion: reduce` で hero が静止画(染み込み途中のフレーム)に置き換わり、その状態でもタイルの hover で静止画がその味の色に染まる
11. 動画の終端で沈んだ氷が約 1 秒静止し、黒画面・フラッシュなしに約 0.6 秒のディゾルブで最初の氷へ戻る
12. 390 幅で各タイルの高さが 88px 以上あり、隣接タイル間の罫線が 1px 1 本で描かれている(二重線・欠けなし)

(肝 1 → 5 / 肝 2 → 4 / 肝 3 → 8 / 肝 4 → 12 / 肝 5 → 11 に対応)

---

## 付録 — builder 向け実装メモ

**マークアップ骨格**
```html
<header class="site-head">…</header>
<section class="stage" id="menu">
  <div class="hero">
    <div class="hero-media" aria-hidden="true">
      <video class="v v-a" src="…" poster="…" muted playsinline autoplay preload="metadata" data-vid-spec="…"></video>
      <video class="v v-b" src="…" muted playsinline preload="metadata"></video>
      <img class="poster" src="…" alt="" data-img-spec="…">   <!-- reduced-motion / 動画失敗時 -->
      <div class="syrup"></div>
    </div>
    <h1 class="name">白氷</h1>
    <p class="sub">触れると、染みる。</p>
    <p class="readout" role="status" aria-live="polite"><span class="no">00</span><span class="nm">無色</span><span class="hx">#FFFFFF</span></p>
  </div>
  <ul class="menu" role="list">
    <li><button type="button" class="tile" data-no="01" data-name="いちご" data-hex="#E4405F" aria-pressed="false">…</button></li>
    …×12
  </ul>
</section>
```

**JS の責務(依存なし・60 行程度・`<script>` 1 本)**
1. `.tile` click → `aria-pressed` を排他トグル(Escape で全解除)。`.stage` に `--syrup` と `data-active` を書く(`:has()` 非対応の保険)
2. pointerenter / focusin → 読み出しの 3 span を書き換える(色は CSS が担う)
3. ループ: A の `ended` → 1200ms 待つ → B `currentTime=0; play()` → B に `.is-on`(opacity 遷移 600ms)→ 600ms 後 A を `pause()` して役割交代
4. `IntersectionObserver`(閾値 0)と `visibilitychange` で pause / play
5. `matchMedia('(prefers-reduced-motion: reduce)').matches` なら 3 を起動しない(表示切替は CSS)

**画像スペック(data-img-spec、いずれも白黒)**
- `hero-seep-poster.jpg`(16:9 1600×900): "Still close-up of a tall mound of finely shaved white ice in a clear glass bowl on a seamless white tabletop, clear colorless syrup halfway seeped into the ice, glistening wet surface at the top and dry fluffy ice below, bright high-key diffused studio light, pure white and pale gray tones only, shallow depth of field, no text, no logos, no people faces."
- `ice-block.jpg`(3:2 1600×1067): "Black-and-white photograph of a large translucent block of natural pond ice resting on wooden slats inside a dim ice house, soft window light from one side, fine air bubbles visible inside the ice, film grain, no text, no logos, no people."
- `shaving-hands.jpg`(3:2 1600×1067): "Black-and-white close-up of two hands turning the crank of a cast-iron hand-cranked ice shaver, paper-thin ice shavings falling into a glass bowl, high-key daylight, shallow depth of field, no text, no logos, no faces."

**コーパス台帳への申告(`panel/signature-shirogoori.txt` に 1 行)**
`所作(かける)+自然現象(染みる) | 12 タイルの hover で hero 動画に multiply の色が染みる(UI 側は無彩のまま) | 条件→結果の 2 拍(「触れると、染みる。」)+名詞の列挙`