HOGURE NO YU

ほぐれの湯

温浴施設 / 自主制作

Live Site

温浴施設の空気感を、余白と写真で伝えるサイト。来館前に世界観と基本情報が届く構成です。

ほぐれの湯のWebサイト画面
01

Context

想定した店舗・課題

山間の温浴施設を想定。来館前にスマホで雰囲気を確かめ、設備やアクセスを確認してから訪れたい層。

02

Purpose

サイトの目的

施設の「ほぐれる」空気感を最初に伝え、そのうえで営業情報・設備・アクセスへ迷わず到達できる公式サイトをつくること。

03

Challenge

想定した課題

魅力は写真と空気感に大きく依存します。情報を詰め込むと世界観が崩れ、削りすぎると必要な案内が届きません。余白を保ちながら、来館判断に必要な情報だけを届けるバランスが課題でした。

04

Concept

コンセプト

温泉・温浴の体験を、落ち着いたトーンと写真主導のレイアウトで表現。説明文は短くし、視線の流れで施設の広がりが伝わるようにしています。

05

Intent

設計意図

ファーストビューで世界観を提示し、その後に案内情報へ自然に導く順番に固定。スマホでも片手で読める情報密度にし、スクロールに合わせた軽いrevealで滞在感を足しています。

06

Focus

こだわったポイント

  • 写真を主役にし、タイポグラフィは控えめに抑える
  • 営業情報・設備・アクセスへの到達を短くする
  • スクロール連動の軽い演出で施設のスケール感を補強
  • 暗めのトーンで夜間の温浴らしい空気を保つ

Screenshots

PC / スマホでの見え方

Desktop — MacBook Air 13"
ほぐれの湯 PC表示
Mobile — iPhone 15 Pro
ほぐれの湯 スマホ表示
07

Tech

使用技術

  • HTML
  • CSS
  • JavaScript
  • Astro

Live Site を見る

Webサイトについて、
まずは相談してみませんか。

まだ依頼内容が完全に決まっていなくても大丈夫です。