ウェブサイト / 温泉旅館・宿泊予約
白樺の里
森の静けさを、
そのまま届けるサイト。
信州の高原にある架空の温泉旅館を題材にした、宿泊予約つきのウェブサイトです。森と湯けむりの映像を入口に、宿のこだわりや客室を知り、空室を探して予約するところまでを一つの流れにしました。
作品を開く架空の事業者を題材にした自主制作です。
どんな森で、
どんな一夜を過ごすのか。
料金や設備を先に並べるのではなく、宿の空気から伝えることを目指しました。冒頭は森の映像が画面いっぱいに広がり、縦組みのコピーだけを静かに重ねています。
その直後に予約の帯を置き、宿の考え方、温泉、客室、食事、一日の過ごし方と続けました。読み進めた流れのまま、空室を探せる順序にしています。
季節の写真の帯を、
文章と交互に渡す。
深い緑と生成りを基調に、見出しは明朝体。ヘッダーは中央にロゴを置いてナビを左右三つずつに分け、右端に弁柄色の丸い判「ご宿泊予約」、左端に輪郭だけの判「予約の確認・取消」を対にしました。動画が終わると、同じ対称の形のまま細い帯になって上部に残ります。
本文は中央揃えの文章と全幅の写真の帯を交互に置き、春の縁側から冬の宿まで季節を順に渡ります。湯けむりや縁側の帯には写真の上を霧がゆっくり流れ、PCではカーソルの周りだけ霧が薄く晴れます。客室は帯の下辺中央に説明の札を重ね、左右対称に並べた白樺・木漏れ日・離れの三つのタブで写真と紹介文を切り替えます。
空いている日を、
その場で確かめる。
予約はページを離れずに進みます。チェックイン日・宿泊数・人数を選ぶと、三つの客室タイプごとに空室の有無と税込の合計金額が並びます。
日程・お客様情報・内容確認・完了の四段階で予約番号を発行し、同じブラウザから確認と取消もできます。実際の宿泊・決済・メール送信は行わないデモです。
縦長の画面でも、
森の広さが伝わる。
スマートフォンでも冒頭の森の映像を縦長の画面いっぱいに敷き、縦組みのコピーを中央寄りに重ねました。ヘッダーは左に丸いメニューボタン、中央にロゴ、右に「ご宿泊予約」の丸い判を置き、PCと同じ左右対称の形を保っています。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript / GSAP
Vite / Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン