Case Study — Salon Website
LUEUR
Private Esthetic Salon
大阪・梅田のプライベートエステサロン Lueur のWebサイト。
写真・タイポグラフィ・余白で、静かな上質感を表現しました。
02
Project Overview
Purpose
落ち着いたプライベートサロンの空気感と、
施術への信頼感が伝わるWebサイト。
サロンの魅力や施術内容を直感的に伝えながら、 予約まで自然に進める情報設計を意識しています。 派手な演出ではなく、写真と余白で「ここで過ごす時間」を想像できるページを目指しました。
- Project
- プライベートエステサロン Lueur のブランドサイト
- Industry
- Beauty / Esthetic Salon
- Target
- 落ち着いた空間で、自分のための上質なケアを求める女性
- Role
- Web Design / Coding
- Deliverables
- Website / Responsive Design
- Tools
- Figma / Photoshop / HTML / CSS / JavaScript
03
Design Concept
施術シーンの写真を大きく使い、プライベートサロンらしい落ち着きと上質感を表現。写真の空気感を活かしながら、コピーと導線が自然に視界へ入る構成にしています。
-
静けさ
Quietコピーは最小限に。写真と余白に語らせ、情報を詰め込まない。
-
上質感
Quality細身の明朝体と控えめなゴールドで、装飾に頼らない品の良さを。
-
安心感
Trust施術者の手元や空間を見せ、初めてでも施術をイメージできるように。
-
女性らしさ
Softnessアイボリーとベージュを基調に、やわらかな光と肌の質感を大切に。
-
距離感
Private売り込みすぎない言葉選びで、一人ひとりに寄り添うサロンの距離感を。
04
Page Design
余白と写真を大きく使いながら、コンテンツごとにレイアウトへ変化をつけ、長いページでも単調にならない構成を設計しました。
Design Details
- Typography
- 明朝体 × セリフ体見出しは細身の明朝体、欧文はイタリックのセリフ体で、静かなリズムをつくる。
- Color
- Ivory / Warm Beige / Brown / Muted Gold白ではなくアイボリーを背景にし、写真の温かみと馴染ませる。
- Layout
- 写真とテキストの左右交互配置メニューごとに写真の位置を入れ替え、長いページでもスクロールに変化を。
- Photography
- 光・肌・空間の質感施術シーンや空間の写真を大きく使用し、サロンで過ごす時間を想像させる。
- UI
- 控えめで迷わない導線細いラインのリンクと矢印で世界観を崩さず、予約への最終導線はゴールドの塗りボタンで明確に。
04.1
Section Design
01
ABOUT
サロン名の由来とコンセプトを、内観写真と並べて紹介。テキストは短く区切り、余白でゆっくり読ませる。
02
TREATMENT — Body
大きな番号と英字の見出しでメニューを区切り、コース名・所要時間・料金を一覧で比較しやすく。
03
TREATMENT — Skin
写真を左右反転させて配置し、同じ構成のメニューが続いても単調にならないようにリズムをつくる。
04
SALON
個室空間・技術・仕上がりの3つの特徴を、写真と短い文章のカードで並列に見せる。
05
Information Design
サロンサイトでは「雰囲気の良さ」だけでなく、必要な情報を迷わず確認できることも重要。世界観を維持しながら、必要な情報へ自然にアクセスできる情報設計を行いました。
- 01施術内容
メニューごとに番号・写真・説明をセットにして区切る。
- 02料金
コース名・所要時間・税込価格を揃えて一覧化。
- 03来店の流れ
予約からお会計まで5ステップで、初来店の不安を解消。
- 04アクセス
地図と店舗情報を並べ、営業時間・定休日まで一目で。
- 05予約
電話とWebフォームの2つの導線を、ページ最後に集約。
Flow
ご来店の流れ
番号付きのステップと罫線で縦に整理。写真は1枚に絞り、文字情報を読みやすく。
Access
サロン情報・アクセス
背景をダークブラウンに切り替えて情報エリアであることを明示。項目名と内容を表組みで揃え、探しやすく。
Reservation
予約
電話番号を大きく、Webフォームはゴールドのボタンで。「初回カウンセリング無料」を添えて、最後の一歩を後押し。
06
Visual Direction
Color
- Ivory#FDFAF5
- Warm Beige#F5EFE4
- Muted Gold#896D33
- Deep Brown#1A1208
アイボリーとベージュで肌や光のやわらかさを、ブラウンとゴールドで空間の落ち着きと上質感を表現。
Typography
静かな光の中で、
Body Slimming / Reservation
Japanese Mincho × Serif。和文は細身の明朝体でゆったりと字間をとり、欧文はイタリックを添えて優雅さを。
Photography
施術シーンや空間の写真を大きく使用し、光・肌・空間の質感が伝わるビジュアルを中心に構成。
Mood
- Warm
- Calm
- Elegant
- Natural
- Private
Quiet / Elegant / Private / Warm — 非日常の特別感よりも、心がほどける穏やかさを優先。
07
Responsive Design
PCで設計した余白感や世界観を保ちながら、スマートフォンでも情報が自然に読み進められるよう、文字サイズ・余白・画像配置を調整しました。
About2カラム → 1カラム。テキストを先に、写真を後に配置
Treatment左右交互の写真を、見出し → 写真 → 料金の縦並びへ
Salon Features3列のカードを1列に。写真を大きく残して質感を保つ
Flow写真を省き、ステップの文字情報を優先して表示
