01 / Brief
サロン選びの迷いを
予約前にほどく。
SNSと電話だけで予約を受ける個人美容室を想定し、来店を決めるための情報を1ページへ整理しました。
初めての美容室では、料金だけでなく「どんな人が担当するのか」「相談してからメニューを決められるか」「店内で落ち着いて過ごせるか」が判断材料になります。
そこで、雰囲気を伝える写真のあとに、相談・料金・施術の流れ・担当者・FAQを配置。予約を急かすのではなく、納得できる材料が順番に揃う設計を目指しました。
美しさを見せるだけでなく、
「ここなら話せそう」を伝える。
相談できる？
髪の悩みや生活に使える時間まで聞く姿勢を、最初に示す。
いくらかかる？
代表メニュー、目安時間、料金を同じ形式で比較できるようにする。
誰が担当する？
顔写真と考え方を掲載し、マンツーマン施術の安心を補う。
02 / Experience strategy
予約を急がせず、
安心が育つ順番へ。
読み手の気持ちを「雰囲気を見る」から「自分にも合いそう」へ移す、5つの場面で構成しました。
- Scene 01
空気を感じる
大判写真と短い言葉で、静かなプライベートサロンの第一印象をつくる。
- Scene 02
相談できると知る
「丁寧に聞く・担当が変わらない・先に確認する」を早い段階で伝える。
- Scene 03
条件を比べる
メニュー、料金、目安時間を揃えて表示し、検討に必要な数字を隠さない。
- Scene 04
来店を想像する
初回来店の3ステップとスタイリスト紹介で、当日の流れを具体化する。
- Scene 05
迷いを残さない
FAQ・アクセスを確認したあと、LINE・Web・電話の予約方法へつなぐ。
03 / Art direction
静けさは、
色と余白、人の気配でつくる。
アイボリーの紙面にモカブラウン、控えめな金、くすんだローズ。施術写真の温度を中心に、触れたくなる落ち着きを整えました。
Palette
Typography
髪と気持ちが、静かにととのう。
Rhythm
短い見出し、ゆったりした余白、細い罫線。情報量が増えても、視線が急かされないリズムにしています。
04 / UI & build
世界観を守り、
迷わず使える形に。
装飾よりも、初めて見る人が理解できることを優先。雰囲気と操作性がぶつかる場面で、次の判断をしました。
Navigation
予約方法を見失わない
デスクトップはヘッダー、モバイルは画面下のCTAから予約方法へ。主要リンクは44px以上の操作領域を確保しています。
Content
メニュー未定でも進める
初回来店の流れとFAQで「相談してから決められる」と明示し、決め切れない人を置き去りにしません。
Accessibility
状態を言葉でも伝える
見出し階層、スキップリンク、ARIA付きメニュー、native details、focus-visibleを実装しました。
Performance
最初の一枚を優先する
ファーストビューはWebP・優先読込み、以降の写真は遅延読込み。画像サイズを明示して表示のずれを抑えています。
制作デモでは、誤送信を防ぐためLINE・Web予約・電話のボタンを意図的に無効化しています。
05 / Review note
完成で終わらず、
迷いが減ったかを確かめる。
これは自主制作のため実測成果はありません。本番なら、次の行動を観察しながら情報の順番とCTAを改善します。
予約導線
ヘッダーや固定CTAが認識され、予約方法まで進めているか。
検討情報
メニュー・料金・担当者・FAQのどこで読み止まりが起きるか。
モバイル操作
片手操作でもメニューや予約導線を無理なく使えるか。
What I learned
「上質」は、装飾量ではなく判断の一貫性で生まれる。
写真・言葉・余白を同じ温度に揃えながら、料金や予約方法は曖昧にしない。その両立が、信頼できるサロンの世界観につながると学びました。