
睡眠ラボ
- WEBサイト
- コーポレートサイト
兵庫県丹波市で“極上の睡眠体験”を提供する女性専用サロン「睡眠ラボ」様のサービスサイトを制作しました。
睡眠ラボでは、無重力のような感覚に包まれるドライヘッドスパを中心に、オイルハンドマッサージやドライフットマッサージ、デコルテラインケアなど、心身をゆるめて深い睡眠へ導く心地よさを提供しています。
私たちは、そうした唯一無二の体験を可視化すべく、「夢ごこち。無重力のような、極上の睡眠体験。」というコピーを軸に、視覚的にも浮遊感や幻想的な世界観を感じられるよう、色彩設計やアニメーション、スクロール演出を構成。
閲覧者がスクロールするごとにまるで夢の中へ導かれるようなストーリー構造としながら、視認性やUI/UXにも配慮し、情報の過密を感じさせない設計で仕上げました。
また、ブランドカラーと連動したロゴデザイン、オリジナルの枕(商品)の紹介セクション、CMS連携による「お知らせ管理」機能など、運用性と訴求力の両立を図っています。
mission
(課題・狙い)
- 新たに立ち上げた「睡眠ラボ」の認知度を高めるため、サービスの世界観・価値を正しく伝えるWEBサイトを立ち上げたい
- 睡眠に悩みを持つユーザーに向けて、具体的なサービス内容や流れ、セラピストの人柄・空間の雰囲気などを視覚的に伝え、新規顧客獲得につなげたい
- 単なる店舗情報ではなく、「睡眠体験」をビジュアル的・感覚的に表現することで、共感・没入を促したい
solution
(やったこと)
- ロゴのカラーリングやフォントなどの貴重トーンを生かしたデザインに統一し、ブランドイメージの統一化を図った
- ページ冒頭から徐々にスクロールするごとに、リアルから夢へ没入していくような構成にし、サービス紹介も断片的に切り替わる構成で集中力を保たせた
- ぬるぬると動くアニメーションに加え、要所で余白を取り、アイコンや丸型イメージを使うことで、女性らしい柔らかさと直感的な操作性を確保
- お知らせ機能をWordPressで実装。管理画面から投稿・修正・表示切り替えが簡単にできるようカスタマイズ









design concept
(制作に込めた意図)
-
コンテンツ構成の意図: 「快眠特化」という独自性を、“五感で伝える”サイト構成に
単なるリラクゼーションサロンではなく、“良質な眠り”をテーマに据えた専門サロンであることを、冒頭から明快に打ち出す構成。
「夢ごこち。無重力のような極上の睡眠体験。」というコピーを中心に、あえて専門的な理論を語りすぎず、体感・実感ベースで価値を想像できるよう設計。
女性をターゲットとし、安心・癒し・プロフェッショナル性をキーワードに、サービス紹介や料金、利用の流れなども明快に整理。
特に“睡眠に特化した女性専用サロン”という独自性がブレずに伝わるよう、「静かに際立つ」構成バランスを意識した。 -
UI/UX設計の意図: 浮遊感と余白で、自然と深呼吸できるようなUIに
背景のグラデーションや演出は、まるで夜から朝へのグラデーションのように自然。
アニメーションも最小限で“眠気を誘うようなゆらぎ”を意識し、ユーザーに負荷をかけず、柔らかく導入されるように設計。
全体としては、「重くなく、ゆるくなく、心地よく」という感覚のバランスを重視。
また、スマートフォンユーザーが中心となることから、モバイルファーストでスムーズな操作性を確保しつつ、「眠り」の世界観を崩さない繊細なトーンを保っている。 -
ビジュアル演出の意図: “雲の上にいるような”安心感と心地よさを演出するために
キービジュアルに浮かぶ“雲”やパープルのグラデーションは、「眠り」や「夜」を象徴しつつ、女性が安心して身を預けられる空気感を視覚的に表現。
サービス紹介では、照度を抑えた施術写真を切り抜きで使用し、サービス内容を詳細に伝えつつも、視覚の圧を最小限に抑えている。
また、フォント選定・間合いの取り方・写真と背景のコントラスト処理に至るまで、「いかに邪魔せず、でも確かに伝えるか」を意識した作りとしている。
- 睡眠ラボのWebサイトは、“眠れる世界の入り口”として機能するために設計された。
- 「睡眠」という感覚的・私的なテーマに対し、説得ではなく共鳴を促す構成とビジュアルを採用。
- ふと迷い込んだような、でも明快な導線がある。訪問者が「ここ、ちょっと違うかも」と感じる瞬間から、“行ってみたい”という気持ちを自然と誘導する、静かで強いブランディング設計。
project data
(プロジェクト詳細)
- Client
- 株式会社フィジカル・アイ
- Date
- 2024.9
- URL
- https://suimin-labo.net
- Director
- 有賀 史朗
- Designer / Coder
- 有賀 史朗
- Photographer
- 竹内 吉崇