民泊・一棟貸し（カッコイイ系・スタイリッシュ）のWebデザイン見本

20〜40代の友人どうしや家族、海外からの旅行者。ホテルではなく、一軒を夜まるごと借りる体験を探している人。和の宿のしっとりした見せ方ではなく、黒と紫と幅の広い英字で「夜の隠れ家」に見せる。


業種	宿泊・観光（町家を直した一棟貸しの宿）
系統	カッコイイ系（黒地・幅の広い太い英字・直線・切れのいい動き）
テイスト	スタイリッシュ
色	紫
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）。矢印ボタンは JS の `scrollBy` だけ
メインビジュアル	イラスト・図形：SVG の町家の線画（屋根・格子・月）が主役。写真は脇に1枚
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	D03 ぼかした色の雲がゆっくり形を変える／F03 墨の縁・ちぎれ紙の形で区切る／切り抜く
架空の宿	「一棟貸し夜鷹（よたか）／YOTAKA」— 〇〇市の路地にある、築〇〇年の町家を直した一棟貸し。1日1組・最大6名

だれに向けたページか

20〜40代の友人どうしや家族、海外からの旅行者。ホテルではなく、一軒を夜まるごと借りる体験を探している人。和の宿のしっとりした見せ方ではなく、黒と紫と幅の広い英字で「夜の隠れ家」に見せる。

変数	値	使う所
`--c-bg`	`#0d0a14`	背景（夜の黒）
`--c-panel`	`#171222`	カード
`--c-accent`	`#b794f6`	黒地の上の紫の文字・線・線画（8.01）・ボタンの面（黒い文字で 8.01）
`--c-light`	`#f2eff7`	明るい区切り（予約の流れ）
`--c-accent-text`	`#5b21b6`	明るい区切りの上の紫の文字（7.9）
`--c-on-dark`	`#e4def0`	黒地の上の本文（14.95）
雲	`#6d28d9`・`#c026d3`・`#4338ca`	D03 のぼかした雲（文字は乗せるが、雲の上には暗い幕を敷く）
`--c-text`	`#374151`	明るい区切りの本文
`--c-sub`	`#4b5563`	明るい区切りの補足

メインビジュアル（イラスト・図形＋D03）：黒地に紫・赤紫・藍のぼかした雲がゆっくり形を変え（D03）、手前に町家の線画（SVG）。屋根・格子・のれん・月の線が順に描かれ、格子に明かりが灯る。巨大な「YOTAKA」と「夜を、まるごと借りる。」
この宿のこと：外観の写真を墨の縁（F03）で切り抜き、短い文
数字の札：1日1組・最大6名・〇〇㎡（見本の値）を、太い英字の札で
部屋（scroll-snap）：居間・寝室・浴室・坪庭の4枚。指で横に送り、矢印でも送れる
ちぎれ紙の区切り（F03）：黒→明るい区切りに入る所を、ちぎれた紙の縁で区切る
予約の流れ・料金：明るい区切り。1泊〇〇円〜（見本の値）
よくある質問：details の折りたたみ
予約：紫の大きなボタン
アクセス・フッター（許可・届出の番号は〇〇）

overflow-x: auto; scroll-snap-type: x mandatory。カードは scroll-snap-align: start
矢印ボタンは JS で scrollBy({left: カード1枚分}) するだけ。JSなしでは矢印を出さず、指・横スクロールで送る
自動送りはしない

新しく3枚：夜の外観（縦）／居間／浴室。写真庫から2枚：寝室（006 の客室1）／坪庭に面した和室（006 の客室2）。

料金・広さ・届出番号（住宅宿泊事業 or 旅館業）は見本の値（〇〇）。会員が本物に替える。