屋根・外壁塗装（綺麗系・LP）のWebデザイン見本

築15〜25年の家に住む40〜70代。「そろそろ塗り替え？」と気になっているが、訪問営業は怖い人。派手な値引きでなく、丁寧さと仕上がりの美しさで選んでもらう。ゴールは「無料の外壁診断」の申し込み。


業種	建設・工務店・不動産（屋根・外壁塗装）
系統	綺麗系（余白・細い線・明朝・彩度を落とした茶とベージュ・ゆっくりした動き）
テイスト	シンプル／高級感
色	茶・ベージュ
形	LP型（1枚もの）：悩み→解決→特長→守る力→施工例→声→料金→よくある質問→申し込み
スライド	CSSだけ（scroll-snap）：施工例。矢印ボタンは JS の `scrollBy` だけ。JSなしでも指で送れる
メインビジュアル	画像1枚のLP風（大きなコピー）：塗り直した家の写真1枚を全面に、明朝の大きなコピーと申し込みボタン
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A05 写真が下からせり上がり霧の縁・社名がグラデで浮かぶ／E06 ペン先が文を書き、要所に蛍光ペンの下線／A12 点描の地球が日の出のように昇る
架空の会社	「塗装工房結（ゆい）」YUI PAINT WORKS — 〇〇市の、職人4人の屋根・外壁塗装店

だれに向けたページか

築15〜25年の家に住む40〜70代。「そろそろ塗り替え？」と気になっているが、訪問営業は怖い人。 派手な値引きでなく、丁寧さと仕上がりの美しさで選んでもらう。ゴールは「無料の外壁診断」の申し込み。

メインビジュアル（A05）：塗り直した家の写真が、下からゆっくりせり上がる。写真の下の端は霧のようにベージュへ溶ける（mask-image）。その霧の上に、巨大な社名「YUI PAINT WORKS」が茶のグラデ（background-clip: text）で浮かぶ。写真の上に大きなコピー「家は、塗り直すたびに美しくなる。」と申し込みボタン
悩み（E06）：「こんなこと、気になっていませんか」。ペン先のアイコンが1行ずつ文を書いていき、要所（「チョーキング」「ひび」など）に蛍光ペンの下線が引かれる
解決：「塗る前に、まず診る。」ローラーの写真と、診断でやることの説明
特長3つ：細い線で区切った3列（番号は 01〜03）
守る力（A12）：こげ茶の区切りで、点描の地球が下から日の出のように昇り、ゆっくり回る。「太陽と雨から、家を守る。」遮熱・低汚染の塗料と保証の説明
施工例（scroll-snap）：3件を指で横に送る。矢印ボタンつき
お客様の声：3件（引用符と細い線だけ）
料金：3つの目安（30坪の外壁／屋根／外壁＋屋根）
よくある質問：details で開閉
申し込み：こげ茶の区切りにフォーム

JSや GSAP が無いとき：写真は最初からその位置、社名も見えている。悩みの文は最初から全部書かれ、下線も引かれている。点描の地球は CSS の点の模様で止まった絵になる
prefers-reduced-motion のときは、上と同じ「動かない版」
動きはすべてゆっくり（1.2〜2秒）。弾む・揺れる動きは使わない
悩みの文は1行ずつ書く（スマホで1行に収まる長さ＝18字までにする）

新しく作る：塗り直した家（hero）／ローラーで塗る手（roller）／塗り直した屋根（roof）写真庫から：004 工務店の家2枚（case1・case2＝施工例）

料金・保証年数・施工件数・お客様の声は見本の値（〇〇）。会員が本物に替える。