外構・造園（ナチュラル・やさしい）

だれに向けたページか

家を建てたばかり、または庭が手に負えなくなった30〜60代。「庭はほしいけれど、手入れが心配」な人。 一年じゅう、季節ごとに変わる庭の楽しさを見てもらうページにする。

色

文字

• 見出し：Zen Old Mincho（700）
• 本文：Noto Sans JP（400・16px）
• 英字：Cormorant Garamond（イタリック）

ページの構成と演出

1. メインビジュアル：春の庭の写真を、下の縁が葉っぱの波の形に切り抜いて置く（F03）。背景には等高線（D04）
2. ごあいさつ：等高線が2枚重なり、スクロールで奥と手前が違う速さで動く（D04）。文字の後ろは無地のまま（読みやすさ優先・不透明度は 0.5 の細線）
3. 庭の四季（演出① B01）：画面を止めたまま、同じ庭の春→夏→秋→冬が入れ替わる。右に「春・夏・秋・冬」の目盛り、左下に季節ごとの手入れのひとこと
4. できること：庭づくり・外構・お手入れの3つ。写真を葉っぱの形で切り抜く（F03）
5. 施工の流れ：4つの手順
6. お手入れの年間プラン：料金のめやす（〇〇）
7. ご相談：緑の面。上の縁は波（F03）
8. フッター

動きの決まり

• JSや GSAP が無いとき：四季の場面は縦に4つ並ぶ。等高線は止まったまま。葉の縁の切り抜きは CSS なのでそのまま
• prefers-reduced-motion のときも、上と同じ「動かない版」
• 等高線の動きは上下だけ・ゆっくり（画面の高さの 10% まで）
• 料金・施工件数は見本の値（〇〇）。建設業の許可番号も〇〇。会員が本物に替える

写真（codex）

同じ庭の春・夏・秋・冬（4枚）／剪定する手／門まわりのアプローチ／ウッドデッキ、の7枚。顔は写さない。

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

• 見出しは Zen Old Mincho、上に Cormorant のイタリック英字
• 区切りの縁は葉の波（.wave）を使う。1ページに3回まで
• 等高線の背景はページの頭と結びだけ