よくある美容サロンサイトの課題をもとに、
“悩みから予約まで進める導線”へ整えた
Concept Work。
複数の美容サロンサイトに共通して見られた、
メニュー選び・初回不安・予約導線の迷いやすさをもとに、
“よくある惜しいBeforeサイト”を設計しました。
そこから、悩み別メニュー導線・Owner Story・First Visit Flow・FAQ・LINE予約までの流れを整理し、
初めてのお客様が安心して相談へ進める構成に改善しています。
- Goal
- 悩み別導線 / 初回不安の解消 / LINE予約導線の整理
- Role
- リサーチ / 課題抽出 / Before設計 / 情報設計 / UI改善
- Tools
- Figma / HTML・CSS / Image Direction / CTA Planning
- Type
- Concept Work / Private Salon
複数の美容サロンサイトに共通する、
“予約前の迷い”を整理しました。
Improvement Theme
“よくある惜しさ”を、
改善の出発点にする。
見た目は整っていても、
初回客が予約前に迷いやすい状態。
Drop-off Points / 主要離脱箇所
- 01 メニュー選択前 自分の悩みに合う施術が分からない
- 02 初回来店前 流れや不安への回答が少なく、予約を迷う
- 03 予約直前 LINE・Hot Pepper・Instagramの役割が曖昧
Before / Observed State
- CTA 相談導線が遠い
- Menu 施術名・価格中心
- Owner 人柄や想いが浅い
- Flow 初回不安への説明が少ない
Overview / Project Outline
この事例で
見直したこと
-
01
Before設計
複数の美容サロンサイトに見られる“惜しい状態”をもとに、清潔感はあるけれど選びにくいBeforeサイトを設計しました。
-
02
情報順序の整理
「悩み共感 → メニュー選択 → 人柄への安心 → 初回不安の解消 → LINE相談」へ、初回のお客様の判断順に並べ替えました。
-
03
予約導線の再設計
Instagram・LINE・Hot Pepperの役割を整理し、迷ったタイミングで相談へ進める導線を設計しました。
Before / Initial State
清潔感はある。
でも、初回のお客様が
選びにくい状態。
Beforeサイトは、あえて大きく崩したデザインにはしていません。
実際によくある美容サロンサイトのように、雰囲気や清潔感はあるものの、
メニュー選び・初回不安・予約導線が弱い状態として設計しました。
- ファーストビューの印象はきれいだが、誰のどんな悩みに向けたサロンかが弱い
- メニュー名と価格中心で、初回のお客様が自分に合う施術を選びにくい
- Owner情報はあるが、人柄や想いが浅く、個人サロンを選ぶ理由になりにくい
- Flow / FAQ が最低限で、初回来店前の不安が残りやすい
- Instagram・LINE・Hot Pepperの役割が分かりにくく、次の行動に迷いやすい
Problem / 判断材料の不足
予約につながりにくい原因は、
デザインの古さだけではありません。初めて見る人が、メニューを選び、安心し、
相談するまでの情報が順番よく届いていないことが大きな課題でした。
“きれいに見える”だけでは、
相談する理由までは届きにくい。
Analysis / 赤入れ・導線分析
画面上で、予約前に
止まりやすい箇所を確認します。
Before / SP
-
01
First View
肌悩み・体の悩みを抱える人に向けた言葉が弱く、初めて見た人が自分ごと化しにくい状態でした。
-
02
Menu
施術名と価格だけでは、初回のお客様が「自分にはどれが合うのか」を判断しにくく、比較や保留につながりやすい状態でした。
-
03
Owner
個人サロンでは「誰に任せるか」も大切な判断材料です。経歴や紹介だけでは、人柄や想いが選ぶ理由として届きにくい状態でした。
-
04
Reservation
Instagram・LINE・Hot Pepperの役割が曖昧で、雰囲気を見る、相談する、予約するという行動の流れが分かれにくい状態でした。
Improvement Arrows / 現状 → 改善方向
- 価格中心メニュー 悩み別 / 初回向け再分類
- Owner紹介のみ 想い・向き合い方を伝えるStoryへ
- Flow / FAQが少ない 初回来店前の不安を先回りして解消
- 予約導線が分散 LINE相談 / 即予約 / 雰囲気確認の役割を整理
※ 既存サイトを観察した上で、構造単位で整理し直した方針です。
Direction / 改善方針
改善方針は、
“悩みから選べて、安心して相談できる”こと。
-
Menu
悩み別にメニューへ進める導線を作る
施術名や価格から選ばせるのではなく、毛穴・肌荒れ・冷え・くすみ・疲れなど、初回のお客様が抱えている悩みからメニューへ進める構成に整えます。
-
Owner
Ownerの想いを、選ぶ理由として伝える
個人サロンでは、技術だけでなく「誰に任せるか」も大切な判断材料です。Owner Storyとして、想いや向き合い方が伝わる構成にします。
-
Flow
初回来店前の不安を先回りして解消する
施術の流れ・所要時間・敏感肌への対応・勧誘の有無など、予約前に気になりやすい情報をFlow / FAQで整理します。
-
CTA
相談と予約の役割を分ける
Instagramは雰囲気確認、LINEはメニュー相談、Hot Pepperは空き状況確認・即予約として役割を分け、次の行動を迷わせない設計にします。
Structure / 構成改善
“見せる順番”を、
判断の順序へ並べ替える。
Before
- Hero 第一印象
- Concept サロン紹介
- Menu メニュー一覧
- Recommend おすすめ導線
- Gallery 雰囲気・施術写真
- News お知らせ
- Owner オーナー紹介
- Flow 施術の流れ
- FAQ よくある質問
- SNS / Reservation 予約導線
- Access アクセス
清潔感はあるものの、メニュー・Owner・予約導線がそれぞれ独立していて、初回客が判断しにくい構成。
After
- Hero 悩みが伝わる第一印象
- Concept サロンの考え方
- Worry Navigation 悩み別メニュー導線
- Menu 施術メニュー
- Owner Story 人柄・想い
- Gallery 空間・施術イメージ
- First Visit Flow 初回の流れ
- FAQ 予約前の不安解消
- Blog 肌悩みの読み物
- Reservation 相談・予約導線
- Access アクセス
Menuの前に悩み別導線を置き、初回のお客様がメニュー名ではなく、自分の悩みから施術を選べる構成へ。
SP Compare / スマホ導線比較
スマホでは、
“迷った瞬間に相談できる導線”を固定。
-
Before
予約導線がページ下部に寄り、読み途中で相談したくなっても行動しにくい状態。
-
After
スマホ下部にLINE相談CTAを固定し、悩みやメニューに迷ったタイミングで相談へ進める状態に。
-
Intent
初回のお客様にとって、予約前の不安をその場で相談できる導線を用意する。
CTA Analysis / CTA配置改善
CTAは“最後に置くボタン”ではなく、
迷いが生まれる場所に置く。
予約導線は、ページ下部にまとめて置くだけでは十分ではありません。初回のお客様が「自分に合うかも」「相談してみたい」と感じるタイミングで、次の行動が見えることが大切です。
- Peak 悩み共感を読んだ直後
- Low 価格比較で冷静になる
- Peak 施術の流れを納得した直後
※ Peakの位置にCTAを置き、Lowの位置は情報補強に充てる方針で再配置しました。
| Position | Before | After | Intention |
|---|---|---|---|
| FV | 雰囲気は伝わるが、すぐ相談できる導線が弱い | 初回相談・LINE導線を早い段階で提示 | 興味を持った直後に、次の行動を見せる |
| Menu | メニュー名と価格を見ても、どれを選ぶべきか判断しにくい | 悩み別導線からメニューへ進み、相談CTAへつなげる | 迷ったまま離脱せず、相談へ進める状態にする |
| Flow / FAQ | 初回不安を解消したあとに行動導線が弱い | 不安解消後にLINE相談・予約導線を配置 | 安心したタイミングで次の行動を提示する |
| Footer / Reservation | 複数の予約導線の役割が分かりにくい | Instagram・LINE・Hot Pepperの役割を明確化 | 雰囲気確認・相談・即予約を迷わず選べるようにする |
同じように、予約導線が止まっている箇所を
見てほしい方へ。
Reservation Flow / 予約導線設計
Instagram・LINE・Hot Pepperの役割を分け、
迷わず相談・予約できる状態へ。
複数の導線があること自体は悪くありません。ただし、それぞれの役割が曖昧なままだと、初めてのお客様はどこから進めばよいか迷ってしまいます。Afterでは、Instagramは雰囲気や施術事例を見る場所、LINEはメニュー相談や初回質問の入口、Hot Pepperは空き状況確認・即予約の場所として整理しました。
-
01
Instagram
雰囲気・施術事例を見る
-
02
Website
悩み別メニュー・Owner Story・Flow / FAQで判断する
-
03
LINE
メニュー相談・初回質問をする
-
04
Hot Pepper
空き状況を確認し、即予約する
Instagram・LINE・Hot Pepperの役割を明確にすることで、
初めてのお客様がどこから進めばよいかを迷わず選べます。
After / Final Composition
悩みから選び、
人柄で安心し、
LINE相談へ進めるサイトへ。
-
01
悩み別メニュー導線を追加し、初回客が自分に合う施術を選びやすくした
-
02
Owner Storyで、個人サロンを選ぶ理由が伝わる構成にした
-
03
First Visit Flow / FAQで、初回来店前の不安を先回りして解消した
-
04
Instagram・LINE・Hot Pepperの役割を分け、予約方法の迷いを減らした
-
05
スマホ下部にLINE相談CTAを固定し、迷ったタイミングで相談できる状態にした
What Changed / 改善によって変わったこと
改善後に変わったのは、
“見た目”ではなく“判断のしやすさ”。
-
選びやすさ
メニュー名ではなく、悩みから施術へ進めるため、初回のお客様が自分に合う選択肢を見つけやすくなります。
-
安心感
Owner Story・First Visit Flow・FAQを通して、来店前に感じやすい不安を先回りして解消できます。
-
行動しやすさ
LINE相談・Hot Pepper予約・Instagram確認の役割を分けることで、目的に合わせて次の行動を選びやすくなります。
Process / 思考の流れ
Beforeを作るところから、
改善プロセスを設計しました。
-
01
Research
複数の美容サロンサイトに共通する、予約前の迷いを整理。
-
02
Before Design
清潔感はあるが、選びにくいBeforeサイトを設計。
-
03
Analysis
Menu / Owner / Flow / Reservation の課題を画面上で分析。
-
04
Direction
悩み別導線・初回不安・LINE相談導線の改善方針を設計。
-
05
After Design
初回客の判断順に合わせて、Afterサイトへ再構成。
Reflection / この事例から
見た目を整える前に、
“なぜ選ばれにくいか”を見つける。
今回の改善では、デザインを華やかにすることよりも、初めてのお客様が予約前に迷う理由を整理することを重視しました。
美容サロンのホームページは、単にきれいに見せるだけではなく、悩み・人柄・安心材料・予約導線がつながっていることが大切です。
LIORNAでは、世界観を大切にしながら、お客様が迷わず予約へ進めるWeb導線を設計します。
きれいに見えていても、
選ばれにくい理由は必ずある。
Note on Project Type
本事例は架空のプライベートサロンを想定したConcept Workです。実在店舗の成果数値ではなく、設計意図と改善プロセスを見せるための事例として掲載しています。
Contact / Consultation
自分のサイトも、
同じように見てほしい方へ。
現在のホームページやSNS導線を拝見し、初回のお客様がどこで迷い、どの情報が足りないかを一緒に整理します。
制作会社・ディレクターの方は、 ブランド導線を相談する。