ASSUMED ISSUES
想定した課題
仮想案件として設定した課題です。
- SNS投稿だけではサロンの考え方や価格を比較しづらい
- メニューとスタッフ情報が分かれていて予約前に迷いやすい
- スマートフォンから希望内容を選びやすくしたい
CASE STUDY / Hair Salon / Beauty
LUNE
ブランドの世界観を伝え、サービス確認から予約へつなげるWebサイト。
このページは架空の店舗・ブランドを想定したケーススタディです。実際の顧客案件ではありません。
OUR PHILOSOPHY
飾りすぎず、その人らしく。髪質と日々の過ごし方から、無理なく続くスタイルを考えるサロンを想定しています。
01
CUT
¥5,50002
COLOR
¥7,700〜03
CARE
¥4,400〜
STYLIST
一人ひとりの「似合う」を、対話から。
髪の悩みや普段のお手入れを伺い、扱いやすさまで考えるスタッフ紹介を想定した領域です。
DEMO SITE — 実際の予約・注文・決済・個人情報の送信は行いません。
CONCEPT
自然体の美しさを大切にする美容室を想定。余白と大きな文字でブランドを印象づけ、サービス選びから予約までを簡潔にしました。
制作目的サロンの上質な世界観を伝え、メニュー選択から予約へ迷わず進める。
APPROACH
課題へのアプローチ
- コピーと大きなビジュアル領域でブランドの印象を先に伝える
- サービスとスタッフの順に安心材料を配置
- メニューと希望時間を選べる予約UIをデモとして実装
DESIGN
デザインの理由
- 白・チャコール・グレージュで、静かで上質な印象を形成
- 画面いっぱいのHeroと非対称レイアウトで、カフェ案との差を明確化
- 細い罫線と大きな英字を使い、情報量を抑えながら視線を誘導
RESPONSIVE
モバイルで重視したこと
- 大きな見出しが画面外へ切れないよう可変サイズに調整
- サービスとスタッフを縦方向に読み進められる構成
- 選択欄とボタンを親指で操作しやすい幅に設定
FEATURES
デモ内の機能・情報
- コンセプト紹介
- サービスメニュー
- スタッフ紹介
- メニュー・希望時間の選択デモ
TECHNOLOGY
使用技術
- Astro
- HTML
- CSS
- TypeScript
このデモの既存コードから確認できる技術のみを掲載しています。
LET'S TALK
業種と目的に合うWebを考えます。
デモのどの部分が気になったか、相談時にお知らせください。