スキーリゾート（綺麗系・緑）のWebデザイン見本

小さな子どもを連れて、はじめて（または久しぶりに）雪山へ行きたい家族。混む大きなスキー場は疲れる、と感じている人。LPの目的は「宿つきプランの予約」。悩み→解決→特長→夏も→声→料金→よくある質問→予約、の1本の流れで読ませる。


業種	宿泊・観光（スキーリゾート）
系統	綺麗系（余白・細い線・明朝・彩度を落とした緑・ゆっくりした動き）
テイスト	シンプル／ナチュラル・やさしい
色	緑（もみの木の深い緑と、霧の淡い緑）
形	LP型（1枚もの）：ヘッダーはロゴ＋予約ボタンだけ。予約ボタンは5か所。スマホは画面の下に予約ボタンを固定
スライド	なし
メインビジュアル	イラスト・図形：SVG で描いた雪山・もみの木・リフト・降る雪。写真は使わない
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	E05 筆記体の一語が見出しの上に一筆書きで描かれ、シールが出る／G02 中央の縦線を左右に動かして、冬と夏のゲレンデを見比べる／A02 雪の寄りの写真が縮み、中央にリフト券が1枚浮かぶ→左右から単語
架空の施設	「みずならの森スノーリゾート」— コース8本・宿が1軒の、家族向けの小さなスキー場

だれに向けたページか

小さな子どもを連れて、はじめて（または久しぶりに）雪山へ行きたい家族。混む大きなスキー場は疲れる、と感じている人。 LPの目的は「宿つきプランの予約」。悩み→解決→特長→夏も→声→料金→よくある質問→予約、の1本の流れで読ませる。

メインビジュアル（イラスト）：淡い空に、重なる3枚の山（遠いほど淡い緑）・もみの木の列・斜めに上がるリフト・ゆっくり降る雪（SVG）。中央に「はじめての雪を、家族で。」と予約ボタン。スクロールで山の層が違う速さで少しだけ下がる
こんなこと、ありませんか（悩み）：3つ。細い線の吹き出し
みずならの森なら（解決／A02）：雪の寄りの写真が画面いっぱい→縮んで角丸の窓に→中央に「1日リフト券」の図が浮かび、左右から「すいている」「ゆるやか」の単語が入る
特長（E05）：見出し「やさしいゲレンデ」の上に、筆記体の「gentle」が一筆書きで描かれ、小さな丸いシール「全8コース」がふわっと出る。特長3つ
夏のみずならの森（G02）：同じゲレンデの冬と夏を、中央の縦線を動かして見比べる（input type=range。キーボードでも動く）
予約ボタン（2回目）
お客様の声：3つ（〇〇）
料金：宿つきプラン3つ（〇〇）＋予約ボタン（3回目）
よくある質問：details
予約（4回目）・フッター。スマホは画面の下に予約ボタンを固定（5回目）

JSや GSAP が無いとき：山は止まったまま、A02 は縮んだ後の形（窓の中に写真・中央にリフト券・単語）で見える。筆記体は最初から描かれた形。G02 は range が無くても冬と夏が半分ずつ見え、range は HTML だけで動く（JS が値を CSS 変数に渡す。JS なしでは 50% で止まる）
prefers-reduced-motion のときは、雪は止まり、A02 は縮んだ後の形
動きは全部ゆっくり（1〜1.6秒）。A02 の固定は画面の高さ1.2倍まで、倍率は 2.2→1 まで（酔わないように控えめ）

雪の寄り（A02）／冬のゲレンデ・夏のゲレンデ（G02、同じ構図）。写真庫から：和モダンの客室（006）・森のサウナ（048）・テントの中（048、離れの部屋として）。

料金・コース数・お客様の声・電話・住所はすべて〇〇。