マンション販売（綺麗系・高級感）のWebデザイン見本

40〜60代の住み替え層。子どもが独立した夫婦や、静かな住宅地で長く暮らしたい人。部屋の広さより「どんな朝と夜を過ごせるか」で選ぶ人に、建物・眺め・共用部・間取りを、画廊を歩くように横に見せる。


業種	建設・工務店・不動産（新築分譲マンションの販売）
系統	綺麗系（余白・細い線・明朝・彩度を落とした色・ゆっくりした動き）
テイスト	高級感
色	茶・ベージュ
形	ページ全体が横に動く（PCだけ。スマホとJSなしは縦並び）
スライド	なし
メインビジュアル	画像1枚のLP風（建物の写真1枚を全面に、大きなコピーと資料請求ボタン）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A03 全画面の写真が余白のある角丸カードに縮む／C01 縦にスクロールすると横に流れる（ページ全体）／F06 太いグラデの帯（リボン）が区切りをまたいで伸びていく
架空の物件	「白樫の杜レジデンス（SHIRAKASHI RESIDENCE）」— 〇〇市の住宅地に建つ、総戸数〇〇戸・地上7階の分譲マンション。売主は架空の「〇〇不動産」

だれに向けたページか

40〜60代の住み替え層。子どもが独立した夫婦や、静かな住宅地で長く暮らしたい人。 部屋の広さより「どんな朝と夜を過ごせるか」で選ぶ人に、建物・眺め・共用部・間取りを、画廊を歩くように横に見せる。

変数	値	使う所
`--c-bg`	`#f3eee6`	背景（砂岩のベージュ）
`--c-paper`	`#faf7f2`	カード・板
`--c-dark`	`#2a231d`	濃い茶の区切り・フッター
`--c-main`	`#3b3026`	見出し
`--c-accent`	`#b08d62`	細い線・リボン・濃い茶の上の文字（5.04）・ボタンの面（濃い茶の文字を乗せて 5.04）
`--c-accent-text`	`#7a5732`	ベージュの上の茶の文字（5.62）
`--c-text`	`#374151`	本文（ベージュの上で 8.92）
`--c-sub`	`#4b5563`	補足（6.54）
リボン	`#e3cfae → #b08d62 → #6f4f33`	F06 の帯（線だけ。文字は乗せない）

PC（1080px以上・JSあり）は、縦スクロールでページ全体が右から左へ進む（C01）。左下に「01 / 07」と区切りの名前、下端に細い進み具合の線。

メインビジュアル（A03）：建物の写真1枚が画面いっぱい。「森の静けさを、毎日の住まいに。」の大きな明朝のコピーと「資料請求」ボタン。スクロールを始めると、写真が余白のある角丸のカードに縮み、そのまま横の旅が始まる
コンセプト：大きな余白に短い文。ここから太いグラデの帯（F06）が画面を横切って伸び始め、最後の資料請求まで、区切りをまたいで1本の線でつながる（スクロールに合わせて描かれる）
ロケーション：駅・公園・学校までの距離を細い線の図で
眺望：高層階からの夜景の写真を大きく
共用部：エントランス・ラウンジ・ゲストルームの写真3枚
間取り：3タイプを線の図（SVG）で。広さと価格は〇〇
資料請求・モデルルーム：濃い茶の区切りに、資料請求とモデルルーム予約の2つのボタン
概要・フッター（横の旅が終わったあと、縦に出る）

JSや GSAP が無いとき・スマホ・prefers-reduced-motion：全部ふつうの縦並び。写真は最初から角丸のカード、リボンは区切りごとの短い帯として最初から見える
横の動きは ease: none で、スクロールした分だけ動く（勝手に進まない）。揺らす・回す動きはしない
ヘッダーのリンクは、横の旅の中の位置へスクロールで移動する（JS が位置を計算）

新しく3枚：建物の外観（夕暮れ・メインビジュアル）／リビング／エントランス（縦）。写真庫から3枚：夜景の眺め（023）／ラウンジのカウンター（021）／ゲストルーム（016）。

戸数・価格・広さ・徒歩分数は見本の値（〇〇）。会員が本物に替える。宅建業の免許番号・広告の表示事項も会員が入れる。