ASURA WORKS. 作品一覧へ

ウェブサイト / 温泉旅館・宿泊予約

白樺の里

森の静けさを、
そのまま届けるサイト。

信州の高原にある架空の温泉旅館を題材にした、宿泊予約つきのウェブサイトです。森と湯けむりの映像を入口に、宿のこだわりや客室を知り、空室を探して予約するところまでを一つの流れにしました。

作品を開く

架空の事業者を題材にした自主制作です。

どんな森で、
どんな一夜を過ごすのか。

料金や設備を先に並べるのではなく、宿の空気から伝えることを目指しました。冒頭は森の映像が画面いっぱいに広がり、縦組みのコピーだけを静かに重ねています。

その直後に予約の帯を置き、宿の考え方、温泉、客室、食事、一日の過ごし方と続けました。読み進めた流れのまま、空室を探せる順序にしています。

季節の写真の帯を、
文章と交互に渡す。

深い緑と生成りを基調に、見出しは明朝体。ヘッダーは中央にロゴを置いてナビを左右三つずつに分け、右端に弁柄色の丸い判「ご宿泊予約」、左端に輪郭だけの判「予約の確認・取消」を対にしました。動画が終わると、同じ対称の形のまま細い帯になって上部に残ります。

本文は中央揃えの文章と全幅の写真の帯を交互に置き、春の縁側から冬の宿まで季節を順に渡ります。湯けむりや縁側の帯には写真の上を霧がゆっくり流れ、PCではカーソルの周りだけ霧が薄く晴れます。客室は帯の下辺中央に説明の札を重ね、左右対称に並べた白樺・木漏れ日・離れの三つのタブで写真と紹介文を切り替えます。

空いている日を、
その場で確かめる。

予約はページを離れずに進みます。チェックイン日・宿泊数・人数を選ぶと、三つの客室タイプごとに空室の有無と税込の合計金額が並びます。

日程・お客様情報・内容確認・完了の四段階で予約番号を発行し、同じブラウザから確認と取消もできます。実際の宿泊・決済・メール送信は行わないデモです。

縦長の画面でも、
森の広さが伝わる。

スマートフォンでも冒頭の森の映像を縦長の画面いっぱいに敷き、縦組みのコピーを中央寄りに重ねました。ヘッダーは左に丸いメニューボタン、中央にロゴ、右に「ご宿泊予約」の丸い判を置き、PCと同じ左右対称の形を保っています。

制作情報

種別
自主制作・架空サイト
制作範囲
構成・文章・デザイン・実装
使用技術
HTML / CSS / JavaScript / GSAP
Vite / Node.js / SQLite
対応画面
PC・タブレット・スマートフォン