リノベーション会社（スタイリッシュ）

だれに向けたページか

中古の家を買って、自分たちらしく作り直したい30〜40代。新築より「古い家の良さを残して変えたい」人。 変わる前と後を、自分の手で動かして確かめてもらうページにする。

色

文字

• 英字：Archivo（幅の広い 800 を大見出し・500 を小見出し）
• 日本語：Zen Kaku Gothic New（見出し 700・本文 400）

ページの構成と演出

1. メインビジュアル（演出① A03）：最初は全画面のリビングの写真に、白い大きな文字「Layer the old, live the new.」。スクロールすると写真が四隅に余白をとった角丸のカードに縮み、文字は黒に変わって写真の外に残る
2. 考え方：「壊すより、重ねる。」短い文と数字3つ（〇〇）
3. ビフォー・アフター（演出② G02）：同じ部屋の前と後の写真を重ね、中央の縦線を指やマウスで左右に動かす。キーボードの矢印でも動く（input type=range を使う）。初めて画面に入ったとき、線が一度だけ左右に揺れて「動かせる」と知らせる
4. 施工例（演出③ C02）：5件の施工例の縦長写真が、円柱の内側に貼られたようにたわんで並び、縦スクロールで横に流れる（PCだけ）。中央の写真ほど正面を向き、端ほど奥に傾く。下に定規の目盛りと「01／05」
5. 進め方：4ステップを横一列（スマホは縦）
6. 相談会の予約：黒い面に白い文字、大きなボタン
7. フッター

動きの決まり

• JSや GSAP が無いとき：メイン写真は最初から角丸カードの形。ビフォー・アフターは range を動かせば JS で切り替わるが、JSなしのときは前と後の写真を上下に並べて見せる。施工例は指で横に送る一覧（たわまない）
• prefers-reduced-motion のときは、縮む・たわむ・揺れる動きを出さない（ビフォー・アフターは手で動かせる）
• 数字・価格・工期は見本の値（〇〇）。会員が本物に替える

写真（codex）

リビング／前の部屋／後の部屋（同じ向き）／キッチン・浴室・玄関・寝室・書斎の施工例5枚、の8枚。人は写さない。

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

• 見出しは Archivo の英字（大）＋日本語（小）
• 写真は角丸 16px で揃える。影は付けない
• 黒い面は1ページに1回まで
• 施工例の個別ページの頭には、ビフォー・アフター（.ba）を1つ置く