物語→客室→予約の順にした理由
参考にした老舗系の宿は、客室や料金より先に「どんな土地で、誰が、どう続けてきたか」を読ませていた。上質な宿を選ぶ人は最安値ではなく安心を買うので、来歴が先にあるほうが客室の価格が高くても納得しやすい。そこでヒーローの直後に予約ウィジェットを1つ置いたら、そこから先は宿のこと→客室→過ごし方→アクセス→質問と一本道にし、途中に予約ボタンを散らさなかった。予約へ戻る入口は下端の帯と先頭へ戻るボタンの2つだけに絞っている。
海月の宿 KAIGETSU
海と静けさを売る、余白のホテルサイト
既定: 静
宿のこと
海と月に、
名前をもらった宿
昭和三十二年、月浜の漁師だった初代が、網小屋を改めて四室の湯宿を始めました。名は、満月の夜に海へ落ちる光の道からとった「海月」。二代目が湯を掘り当て、三代目のわたしたちが十二室に整えた今も、やることは変わっていません。窓を海に向け、音を減らし、朝の膳に土地のものを並べる。それだけです。
館内に時計とテレビは置いていません。潮の満ち引きと月の出が、この宿の時間です。
- 創業
- 1957年
- 客室
- 全12室
- 泉質
- ナトリウム塩化物泉
- チェックイン
- 15:00 〜 19:00
客室
三つの間取り、
すべて海向き
料金は1泊2食付き・大人お一人・税込の目安です。季節と曜日で変わります。
-
潮 USHIO
海側・露天風呂付き ／ 58㎡ ／ 2〜4名
縁側の先に、海へ張り出した檜の露天。夜は月の道を湯船から眺められます。
¥58,000〜 ／ 名
-
凪 NAGI
庭側・内風呂付き ／ 42㎡ ／ 2〜3名
松の庭越しに海を望む、いちばん静かな並び。障子を閉めれば、波音だけが残ります。
¥42,000〜 ／ 名
-
月 TSUKI
離れ・専用露天と書斎付き ／ 86㎡ ／ 2名
母屋から渡り廊下で離れた一棟。書斎の窓は月の出の方角に切ってあります。
¥86,000〜 ／ 名
館内ギャラリー
過ごし方
湯、食、そして朝
-
16:00
湯につかる
源泉かけ流しの塩化物泉。大浴場「月の湯」は24時間、貸切の「潮の湯」は50分ずつ予約制です。湯上がりには冷やした甘酒を。
-
18:30
夕の膳をいただく
部屋食か、海に向いた食事処か、お好きなほうで。その日の網で決まる魚を、焼く・煮る・造りの三通りに。地酒は三種を小さな杯で。
-
6:00
朝の海を歩く
松の小道を抜けて浜へ。日の出は宿の東、月の入りは西の岬。帰ったら朝の膳と、焙じ茶の湯気が待っています。
アクセス
東京から、
およそ2時間
〒299-0000 千葉県月浜市海月町1-2（架空）。月浜駅から無料送迎があります。
東京駅から特急「しおさい月浜」で1時間40分、月浜駅下車。駅前ロータリーから送迎車で8分。特急は1時間に1本、最終は19:04 東京発です。
館山自動車道・月浜ICから海沿いの県道を南へ12km、約20分。駐車場は12台（無料・予約不要）。EV充電器を2基備えています。
月浜駅 15:10 / 16:10 / 17:10 / 18:10 発の4便（無料・要予約）。お帰りは 10:00 と 11:00 の2便。ご予約時に到着列車をお知らせください。
よくある質問
ご予約の前に
はい。未就学のお子さまは添い寝なら無料、お布団とお食事付きは大人料金の50%です。離れ「月」は2名定員のため、お子さま連れは「潮」「凪」をご案内しています。
3日前までにお知らせいただければ、魚介・甲殻類・そば・乳・卵などは別の献立に替えます。宗教上の制限にも可能な範囲で対応します。当日のお申し出は替えが利かないことがあります。
7日前から宿泊料金の30%、前日は50%、当日と無連絡は100%です。悪天候で特急が運休した場合はキャンセル料をいただきません。
平日は「凪」でお一人様のご宿泊を承ります（1名料金は2名料金の1.3倍）。土曜・連休は2名様からのご案内です。
使われている技術 15
番号は「解説を重ねる」で画面に出る番号と同じ。各カードの見本はそのまま触れます。
- スクロール1
縮小ヘッダーShrinking Sticky Header
どこで ヘッダー
上端では透明にして海の面を最大にし、読み進めたら縮んで塗りが付く。宿名は常に見える
図鑑で見る（仕様書・コード）→ - クリック2
ハンバーガーメニューHamburger Menu
どこで メニューボタン
案内リンクを畳んでヘッダーをロゴと予約だけにする。PCでも同じ作りにして余白を守る
図鑑で見る（仕様書・コード）→ - 静的3
ヒーローセクションHero Section
どこで ヒーロー
宿名・一言・主ボタン1つ以外を置かない。面はグラデーションと inline SVG の月と波
図鑑で見る（仕様書・コード）→ - クリック4
日付ピッカーDate Picker
どこで チェックイン日
日付の書式を打たせず、カレンダーで選ばせる。過去日は選べないようにしてある
図鑑で見る（仕様書・コード）→ - クリック5
セグメンテッドコントロールSegmented Control
どこで 人数の選択
1〜4名は選択肢が少ないので、ドロップダウンより一目で押せるセグメントにした
図鑑で見る（仕様書・コード）→ - スクロール6
スクロールで現れる固定CTAScroll-Revealed Sticky CTA
どこで 下端の予約帯
ヒーロー直下のウィジェットが画面から消えたときだけ帯を出し、読みものの邪魔をしない
図鑑で見る（仕様書・コード）→ - スクロール7
フェードイン出現Scroll Reveal (Fade In Up)
どこで 各セクションの出現
動モードでは区画ごとに少し浮かび上がる。静モードでは即時に見える
図鑑で見る（仕様書・コード）→ - スクロール8
スタッガー出現Staggered Reveal
どこで 客室カードの出現
3枚のカードが順に現れると、並びの左右関係と数が一目で伝わる
図鑑で見る（仕様書・コード）→ - スクロール9
クリップrevealClip-Path Image Reveal
どこで 宿のことの画像
和紙の面が左から開く登場は、暖簾をくぐる所作に近く、物語の導入に合う
図鑑で見る（仕様書・コード）→ - ドラッグ10
カルーセルCarousel
どこで 館内ギャラリー
露天風呂・ロビー・朝食・散歩道を横に送る。scroll-snap で1枚ずつ止まる
図鑑で見る（仕様書・コード）→ - クリック11
ライトボックスLightbox
どこで 客室写真の拡大
客室は「よく見たい」需要が強い。ページを離れずその場で拡大し、Esc と背景で閉じる
図鑑で見る（仕様書・コード）→ - クリック12
下線スライドタブAnimated Tabs
どこで アクセスの手段切替
電車・車・送迎は同じ場所への別の行き方。並列の情報はタブが最も迷わない
図鑑で見る（仕様書・コード）→ - クリック13
FAQセクションFAQ Section
どこで よくある質問
複数同時に開けるアコーディオン。予約前の不安は一つずつ潰すより並べて読ませる
図鑑で見る（仕様書・コード）→ - スクロール14
Topへ戻るBack to Top Button
どこで 先頭へ戻る
縦長の一本道なので、読み終えた人を予約ウィジェットのある上端へ戻す
図鑑で見る（仕様書・コード）→ - 静的15
サイトマップ型フッターSitemap Footer
どこで フッター
案内・客室・宿泊約款・言語をまとめ、最後にもう一度だけ予約への入口を置く
図鑑で見る（仕様書・コード）→
画面の構成
- 01ヘッダーロゴと予約ボタンだけを常に見せ、案内はメニューに畳んで海の面を邪魔しない
- 02ヒーロー海と月の面に宿名・一言・主ボタン1つ。3秒で「海辺の静かな宿」と分かる
- 03予約ウィジェットチェックイン日・泊数・人数を1行で受け、空室の有無をその場で返す
- 04宿のこと三代続く宿の来歴と土地の話。客室より先に信頼を積む読みもの
- 05客室3タイプのカードと館内ギャラリー。写真は拡大でき、価格は税込で明示
- 06過ごし方湯・食・朝の3つの時間を横並びで示し、滞在の一日を想像させる
- 07アクセス電車・車・送迎の3手段をタブで切り替え、地図と所要時間を添える
- 08よくある質問子連れ・アレルギー・キャンセルなど、予約前に引っかかる点に先回りする
- 09フッターサイトマップ・言語・法務リンク。予約への最後の入口も置く
コンセプト
- 動きの度合い
- 静（出現も即時）
- 空気感
- 上質・静か・余白・和
- 色
- #1f2a30#f4efe6#8aa4a8
- 文字
- 見出しは明朝の serif スタックで字間を広く取り、本文はゴシック 15px・行間 1.9。英字は細く小さく添える
- 主役と脇役
- 主役は海と空の面（グラデーションと和紙の粒感）と、それに負けない余白。写真や動画を並べず、宿の物語→客室→予約の順に一本道で読ませ、予約の入口はヒーロー直下のウィジェットと下端の帯に絞った。
参考にした実在のサイト
見た目を真似た先ではなく、型の使われ方を観察した先。コード・写真・文章は転載していません。
読みもの
動きをどこまで抑えたか
既定は静。海辺の宿の空気は「動かないこと」で伝わると考え、動モードでも足したのは区画の出現・客室カードの順送り・宿のこと画像のクリップ開き・ヒーローの1回きりの浮き上がりだけにした。参考サイトにあった常時のスムーズスクロールや背景動画は入れていない。ループする装飾は波の線1本も置かず、ヘッダーの縮小とタブの下線のような操作への応答は250ms以内に収めて静モードでも動くようにした。reduced-motion の端末では動モードを選んでも出現を即時にする。
予約導線の置き方
参考サイトの多くは予約ボタンだけを置き、日付や人数の入力は別ページか外部の予約エンジンに送っていた。このサンプルでは「日付・泊数・人数を選ぶと空室の有無がその場で返る」ところまでを1行のウィジェットで見せている。PCではヒーローの下端に重ねて海の面と地続きに、スマホでは縦に積んで指で押せる44pxの高さを確保した。ウィジェットが画面外へ消えたら下端に帯を出し、帯は日付と人数の要約と「空室をさがす」だけにして、押すとウィジェットへ戻す。
写真が無いなかで海を作る
宿のサイトは写真が主役だが、このサンプルでは写真を使えない。そこで海と空は2〜3色のグラデーションの面で作り、水平線の位置を画面の6割に置いて「海が広い」と感じる比率にした。月は inline SVG の円に薄いにじみを重ね、波は不透明度の低い曲線を3本だけ引いた。和紙の粒感は feTurbulence のフィルタを不透明度8%で全面に敷いて出している。客室や館内の写真も同じ作法で「窓の外の海」「畳の帯」「湯気」のように形を2〜3個に絞り、細かく描き込まないことで上質さを保った。
写真の出典
見本の写真は商用利用できるライセンス（CC0・パブリックドメイン・CC BY）の作品です。リサイズと WebP への変換を施しています。 店名・価格・文章は架空で、写真の作者とは関係ありません。
- Peace at sea, on a still morningGael Varoquaux・CC BY 2.0・flickr で見る ↗
- Japanese traditional style tea house / CHASHITSU / 茶室(ちゃしつ)TANAKA Juuyoh (田中十洋)・CC BY 2.0・flickr で見る ↗
- 100605tamakisono・CC BY 2.0・flickr で見る ↗
- erik korshagen, korshagehus, architect's own summerhouse, 19seier+seier・CC BY 2.0・flickr で見る ↗
- Onsenrandomidea・CC BY 2.0・flickr で見る ↗
- BMK_6884 mSeptmberSamurai・CC BY 2.0・flickr で見る ↗
- Japanese Breakfast in the AMCity Foodsters・CC BY 2.0・flickr で見る ↗
- Yakisugi House12japanese_craft_construction・CC BY 2.0・flickr で見る ↗
- Japanese Garden at Nightrumpleteaser・CC BY 2.0・flickr で見る ↗