駅前のビジネスホテル（可愛い系）のWebデザイン見本

出張の会社員、就活や受験で泊まる学生、ひとり旅の人。値段と駅からの近さで選ぶが、「ここなら気分よく泊まれそう」と思える小さな楽しさがほしい人。ふつうのビジネスホテルのページより、ちょっとだけ明るく、やさしくする。


業種	宿泊・観光（ビジネスホテル）
系統	可愛い系（丸いボタン・太い枠・やわらかい色・ぽんと弾む動き）
テイスト	かわいい
色	オレンジ・黄
形	ふつうの縦長
スライド	CSSだけ（scroll-snap）（お部屋の3タイプ。矢印は `scrollBy` だけの JS）
メインビジュアル	静止画を動かす（動画風）（客室の写真1枚がゆっくり寄りながら横に流れ、朝の光が差し込む）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A03 全画面の写真が余白のある角丸カードに縮む／B09 横に置いた目次がいまの区切りを示し続ける
架空のホテル	「ホテルステイみかん〇〇駅前」— 駅から歩いて3分、全〇〇室の小さなビジネスホテル

だれに向けたページか

出張の会社員、就活や受験で泊まる学生、ひとり旅の人。値段と駅からの近さで選ぶが、「ここなら気分よく泊まれそう」と思える小さな楽しさがほしい人。ふつうのビジネスホテルのページより、ちょっとだけ明るく、やさしくする。

メインビジュアル（静止画を動かす＋A03）：客室の写真1枚が画面いっぱい。写真はゆっくり寄りながら少しずつ横に流れ、窓から差す光の帯がゆらぐ（CSS の @keyframes。動画のように見える）。左下に「AM 7:00 おはようございます」の吹き出し。スクロールすると写真が余白のある角丸カードに縮み、まわりのクリーム色の地にキャッチコピーが現れる
本編（B09）：PCでは左に縦の目次（はじめに／お部屋／朝ごはん／1階カフェ／べんり／アクセス）を固定し、いま読んでいる区切りに黄色の丸い印が移る。スマホでは、ヘッダーの下に横に並んだ丸い札の目次が貼りつき、いまの区切りの札がオレンジになる
お部屋（scroll-snap）：シングル・ダブル・ツインのカードを指で横に送る。矢印ボタン付き
朝ごはん：焼きたてパンの朝食。写真と吹き出し
1階カフェ：写真と短い文
べんりなこと：丸いアイコン6つ（駅3分・大浴場・コインランドリー・電子レンジ・Wi-Fi・荷物預かり）
アクセス・予約：オレンジの面に大きな予約ボタン
フッター

JSや GSAP が無いとき：メインビジュアルは止まった写真＋コピーで全部見える。角丸カードに縮む演出は無し。目次は動かないリンクの並びとして使える。全部読める
prefers-reduced-motion のときは、写真は寄らず流れない（止まった1枚）
写真の寄りは 1.0→1.12 倍まで。画面は揺らさない
料金・部屋数・住所は見本の値（〇〇）。会員が本物に替える

CSSだけ：overflow-x: auto; scroll-snap-type: x mandatory。矢印は scrollBy だけの JS。JSなしでも指で送れる。

新しく作る：ダブルの客室（メインビジュアル）・シングル・ツイン。写真庫から：カフェの店内（001）・朝の食卓（010）・コーヒー（001）。