睡眠ラボ

睡眠ラボ

  • 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
竹内 吉崇

other works

(その他の実績)

豆ラボ

  • WEBサイト
  • サービスサイト

法YOU行政書士事務所

  • WEBサイト
  • コーポレートサイト