星月夜旅館

“見る旅館サイト”から、“過ごす前に感じるサイト”へ。

Overview

星月夜旅館は、 夜の静けさそのものを価値として見せる架空の高級旅館サイトです。
建物や客室を並べて紹介するのではなく、 星空・灯り・料理・湯・館内で過ごす時間までを一つの物語としてつなぎ、 宿を訪れる前からその空気を感じられるWeb体験を目指しました。

Challenge

高級宿のサイトでは写真の美しさが重要になる一方、 写真を並べるだけでは他の宿泊施設との差が生まれにくくなります。
また、客室・料理・温泉・館内施設など情報量も多いため、 演出を増やしすぎれば情報が読みにくくなります。 そこで「映像で魅せること」と「迷わず情報を得られること」を 同時に成立させる必要がありました。

Solution

• セクションごとに背景動画を切り替え、 ページ全体を一つの夜の時間として構成
• 背景 → テキスト → 写真・カードの順に見せることで、 スクロールそのものに間とリズムを設計
• 客室詳細はモーダルへ集約し、 一覧ページの静かな世界観を保ったまま情報量を確保
• 予約フォームにも星座入力など独自の体験を加え、 最後の入力画面までブランドイメージを継続

Highlights

• 複数の背景動画をクロスフェードで切り替え、 シーン転換を感じさせない映像演出。
• 背景だけが先に動き、 その後に文字や画像が現れるスクロール設計。
• 客室・料理・温泉・館内でUIルールを共通化し、 コンテンツが増えても操作方法を迷わせない構成。
• PC・タブレット・スマートフォンで、 情報量を整理しながら同じ世界観を維持。

Design

深い藍黒を基調に、 星空の青紫と灯りを思わせる淡い金をアクセントとして使用。
強い装飾を足すのではなく、 暗部・余白・細い罫線・ゆっくりした動きを組み合わせることで、 高級感と静けさが同居する画面を目指しました。 写真や動画を主役にしながら、 情報は必要な場所で自然に読めるバランスに整えています。

Result

映像を目立たせるだけではなく、 スクロール・情報配置・モーダル・予約フォームまで 同じ世界観の中で設計することで、 「高級旅館を紹介するサイト」から 「宿の時間を疑似体験するサイト」へ仕上げました。
ビジュアル表現と実用的なUIを両立させた制作事例です。

Role & Deliverables

• 企画：旅館コンセプト・ブランド世界観・コンテンツ設計
• デザイン：UI・配色・コピー・レスポンシブ設計
• 映像設計：各セクションの背景動画と切り替え構成
• UI設計：客室モーダル・カード・ギャラリー
• フォーム設計：日付選択・宿泊人数・星座入力
• 実装：HTML / CSS / JavaScript