日本茶専門店（ナチュラル・やさしい／高級感）

だれに向けたページか

ふだん使いより少しいいお茶を探している30〜60代と、贈りものを選ぶ人。 「この店のお茶は丁寧だ」と静かに伝わるページにする。にぎやかさより、間（ま）。

色

文字

• 見出し：Shippori Mincho（縦書きの句も）
• 英字：Cormorant Garamond（斜体を少し）
• 本文：Zen Kaku Gothic New 16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（E03・F03）：茶畑の写真。下の縁は墨がにじんだような形で切り抜かれ、和紙色につながる。縦書きの「一煎の、しずけさ。」が1文字ずつ、ぼかしから現れる
2. ごあいさつ：短い文と、ちぎれ紙の形で切り抜いた「お茶を注ぐ手」の写真
3. 三つのお茶（B04）：画面を止め、全画面の新芽の写真の中で、中央の小窓だけが「煎茶→玉露→ほうじ茶」と入れ替わる。縦書きの名前と「」に入れた味のことば。右に「一／三」
4. おいしい淹れ方：上の縁は墨のにじみ。白い板に3つの手順
5. 贈りもの（F03）：上下をちぎれ紙の縁で区切った帯。贈りものの写真と2つのセット
6. お店：店の写真と情報、オンラインショップへ
7. フッター

見出しの1文字ずつ（E03）は、短い見出し（句読点こみで10文字まで）だけに使う。長い文には使わない。

動きの決まり

• JSや GSAP が無いとき：三つのお茶は縦に3つ並ぶ（それぞれ大きな写真の中に小窓）。見出しは最初から見える。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 小窓の入れ替えは、ふわっと重ねて替えるだけ。外側の写真はほとんど動かさない（酔わない）

写真（codex）

茶畑／煎茶・玉露・ほうじ茶の器（正方形）／新芽／注ぐ手／店の中／贈りもの、の8枚。顔は写さない。

会員が本物に替えるもの

価格（〇,〇〇〇円）・産地の名前・住所・電話・営業時間は見本の値。

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

• 区切りの縁は「墨のにじみ」か「ちぎれ紙」。1ページに2か所まで
• 1文字ずつ現れる見出しは、1ページに2つまで
• 深い緑の面は1ページに1回まで