和菓子店（高級感／やさしい）

だれに向けたページか

手みやげや季節のごあいさつに、きちんとした和菓子を探している30〜60代。 「この一個のために行きたい」と思わせる。商品を一個ずつ、主役として見せるページにする。

色

（）内は --c-bg か --c-dark に対するコントラスト。計算で確かめた。

文字

• 見出し：Zen Old Mincho（700・900）。大見出しは縦書き
• 英字：Cormorant Garamond（イタリック・字間を広く）
• 本文：Noto Sans JP 16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（A02）：練り切りの表面の寄りの写真が画面いっぱいに出て、スクロールで縮みながら丸く消える。中央に椿の練り切りが1個だけ浮かび、左から「ひとつに、」右から「季節をこめて。」が入ってくる
2. ちぎれ和紙の区切り（F03）：区切りの境目は、まっすぐな線ではなく和紙をちぎった縁。スクロールで2枚の縁が少しずれて動く
3. つむぎについて：職人の手の写真を、墨でなぞったような縁で切り抜く（F03）。縦書きの見出し
4. 四季の上生菓子（B04）：お店の写真を全画面で止め、壁の中の小窓だけが春→夏→秋→冬の菓子に入れ替わる。右に縦書きの「菓銘」、下に「春・夏・秋・冬」の目盛り
5. お品書き：最中・どら焼き・羊羹・季節の上生菓子。ちぎれ和紙の札に値段
6. 茶房：寄りの写真の上に、暗いグラデと文字
7. お店の案内・フッター

動きの決まり

• JSや GSAP が無いとき：寄りの写真は出ず、中央の菓子と言葉が最初から並ぶ。四季の菓子は4つが縦（PCは2列）に並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 揺れ続ける動きは置かない。小窓の入れ替えは、ふわっと重ねるだけ（酔わない）
• 値段・営業時間は見本の値（〇〇）。会員が本物に替える

写真（codex）

寄りの練り切り／切り抜きの椿の練り切り（切り抜き）／お店の中／春・夏・秋・冬の菓子／職人の手、の8枚。顔は写さない。

下層ページを作るときの決まり

• 大見出しは縦書きの明朝。英字は Cormorant Garamond のイタリックを小さく添える
• 区切りの境目は、ちぎれ和紙の縁（.tear）を使う。墨の縁の切り抜きは1ページに1枚まで
• 焦げ茶の面は1ページに2回まで。演出は1ページに1つまで