“説明する”より、“灯りで伝える”。
Overview
Beyond the Lampは、架空のバーラウンジを想定した世界観訴求型サイトです。
料金や営業時間を前面に出すのではなく、最初に「静けさ」「灯り」「席の距離感」を感じてもらう構成にしました。
Challenge
バーやラウンジの魅力は、単純な情報量だけでは伝わりにくいものです。
そこで、訪問者がスクロールするほど店内を進んでいくような体験を作り、空気感そのものをWeb上で表現する必要がありました。
Solution
- 固定スクロール構造で、1画面ごとに夜のシーンが切り替わる体験を設計
- 背景画像をゆっくり揺らし、静かなラウンジの空気を演出
- カードをスクロール量で順番に表示し、情報の出し方に余韻を持たせる
- スマートフォンでは情報カード内部をスクロールさせ、見出しの印象を保ったまま閲覧性を確保
Highlights
- Heroでは複数背景をフェードさせ、灯りが揺らぐような印象を作成。
- Conversation / Alone / Window の各章で、席の使い方を短いカードで提示。
- 右側の進捗バーで、現在どの章にいるかを直感的に把握できるように設計。
- InformationはAccessとChargeを分け、体験の最後に必要情報へ着地させる構成。
Design
黒と琥珀色を基調に、文字・背景・余白のすべてを“夜の静けさ”に寄せました。
強い演出ではなく、ゆっくりした背景の動き、淡い光、カード登場時の発光で、落ち着いた高級感を表現しています。
Screenshots
Result
情報を並べるだけでは伝わりにくい“店の空気”を、スクロール体験として表現できました。
高級感・静けさ・余韻を活かした、世界観訴求型サイトの制作事例です。
Role & Deliverables
- 企画：バーラウンジの体験設計
- UI設計：固定スクロール / 進捗バー / カード演出
- 実装：HTML / CSS / JavaScript
Technology
- HTML / CSS / JavaScript ・ Scroll Stage ・ Background Transition ・ Responsive Layout
参考制作費
約 ¥300,000〜¥380,000
世界観設計 / 固定スクロール演出 / 背景遷移 / カード演出 / SP最適化を含む想定です。
※演出内容・ページ構成・素材点数により変動します。
“空気感まで伝わるサイト”、設計します。
店舗やブランドの雰囲気を、写真・余白・動きまで含めてWeb上で表現します。
この規模感で相談する
このテイストで作りたい方へ。
灯りと余韻で伝えるサイトを体験できます。