カフェ（ナチュラル・やさしい）

だれに向けたページか

近所に住む30〜50代。散歩のついでに寄れる店を探している。 ページで知りたいのは「どんな雰囲気か」「何がおいしいか」「いつ開いているか・どこにあるか」。

色

文字

• 見出し：Zen Maru Gothic（太さ 500・700）
• 本文：Zen Kaku Gothic New（400）、16px・行の高さ 1.9
• 英字の小見出し（「Menu」「Access」など）：Lora の斜体

形

• 角丸は大きめ（写真 24px・ボタンは丸いカプセル型）
• 影は使わない。区切りは背景色の違いと余白で付ける
• 手描き風の線（インラインSVG）を見出しの下に1本だけ

ページの構成（上から）

1. ヘッダー：店名（文字のロゴ）・メニュー・アクセス・Instagram。スマホはハンバーガー
2. メインビジュアル：窓辺の席の写真を大きく1枚。左下に「木の下で、ゆっくり一杯。」と短い一言
3. ごあいさつ：店主の短い文（3〜4行）＋豆を焙煎している写真
4. こだわり：3つ（自家焙煎／手作りの焼き菓子／ひとりでも落ち着ける席）。丸い写真＋短い説明
5. メニュー：コーヒー・焼き菓子・ランチを各3品ずつ。写真付きのカードで、値段も入れる
6. お店の様子：写真4枚を少しずらして並べる
7. 営業日・アクセス：営業時間の表、定休日、地図の代わりのイラスト枠（Googleマップは会員が差し込む）
8. フッター：店名・住所（伏せ字）・Instagram

動き

• 写真とカードが、画面に入ったとき下から少しだけ浮き上がる（初期値は表示済み。JSがクラスを付けたときだけ演出）
• メインビジュアルの写真が、ゆっくり拡大する（8秒で1.05倍・1回だけ）
• ボタンに乗せると、背景色がふわっと変わる

写真（codex・承認後に作る）

窓辺の席／焙煎機と豆／コーヒーと焼き菓子／ランチのプレート／店の外観（木と看板）／カウンターの手元、の計6〜8枚。 人の顔は写さない（手元・後ろ姿だけ）。

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

• 見出しの下の手描き線と、英字の小見出し（Lora 斜体）をそのまま使う
• 1ページに使う色は --c-main と --c-accent の2色まで
• 表は罫線を使わず、行ごとに背景色を --c-bg と --c-bg2 で交互にする