PLAN A / 悩み起点
ADOPTEDHERO → STORY → WORRY → REASON → MENU → FLOW → STYLIST → RESERVE
ポータルの一覧から来た人がまず確かめたいのは「自分の悩みが解けるか」なので、悩み4つを早い位置で言い当ててから理由と料金へ進むこの順を採用しました。
ヘアサロン オリヒ(orihi)
集客LP と 予約・顧客カルテ管理
2026.08
新規のほとんどが掲載ポータル経由で、クーポンを比べているうちに予約が止まる業種です。自社ページで直接受け切るために、仕上がり写真ではなく「明日の朝が、少し楽になる髪へ。」という朝の再現性を先に出しました。あわせて、閉店後に書き起こしていた顧客カルテを施術直後の数タップに移す管理画面のデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 新規客の入口が掲載ポータルに寄っている。1件ごとに送客手数料が引かれ、クーポン目当てで来た人は2回目につながりにくい。
- 席数と営業時間で受けられる量が先に決まる業種。取りきれる予約の上限が固定なので、単価と再来率の合う人で埋める設計になる。
- 売上を動かすのは新規数より来店間隔。年間の来店回数が1回増えるだけで、1人あたりの年間単価がはっきり変わる。
- 検索されるのは店名ではなく「くせ毛 カット ◯◯市」のような悩みの言葉。悩みの語彙で書いたページのほうが見つけてもらえる。
02
狙った導線
- 最初の画面は「明日の朝が、少し楽になる髪へ。」の1行。仕上がりの写真より、翌朝の手間が減るという具体的な便益を先に出す。
- 悩み4つ(髪型が決まらない・分け目が割れる・担当が替わる・クーポン比較で疲れる)を並べ、そのまま選ばれる理由3つの答えに接続する。
- 料金は税込・指名料なしで全メニューを開示。カット料金にシャンプーとブローを含めて、当日いくらになるかの不安を予約の手前で消す。
- 予約はこのページのWebフォームで完結。第1・第2希望を書いて送るだけにして、会員登録と条件検索の往復をなくす。電話は施術中に出られない前提で副線に置いた。
03
デザインの根拠
- 基調は #C48A7E。赤みの強い彩度は避け、朝の光がリネンに当たったときの色を1色だけ持たせた。清潔さは白と余白の面積で作る。
- FVの直後に世界観バンドを1画面ぶん置き、店名の由来(織 × 陽)を説明する。技術ではなく通う理由の説明に面積を割いた。
- 選ばれる理由の面には手元のカット写真を大きく置き、スタイリスト紹介では人物写真を使う。技術の説明を先に見せてから人を出す順にして、初見の人が人物の圧から入らないようにした。
- 本文は行間広め・1カラム。スマホでは画面下に「電話する / メニュー / Web予約」の3ボタンを固定し、どこを読んでいても1タップで予約に戻れる。
- FVはPCで動きを許可した環境でだけ、店内写真と同じ構図でカーテンと朝の光が揺れる短尺動画に切り替える(画像から動画を生成し、逆再生を継いで途切れないループにした)。スマホと視差抑制の設定では静止画のままにして、動きが無くても成立する作りを崩さない。
04
検証で捨てた案
- スタイリスト紹介をFVの直下に置く案。人で選ぶ業種ではあるが、初見の人にとっては誰なのか分からないまま読む区間になるので、悩み共感の後ろへ下げた。
- スタイル写真のギャラリー。他人の仕上がりは自分に置き換えにくく、モデル写真だと逆に距離ができるため、施術中の手元カット1枚に置き換えた。
- 初回割引クーポンの掲出。ポータルと同じ土俵に戻るうえ、価格で選ぶ層を集めて再来率を下げるので入れなかった。税込の明朗料金だけを残した。
- ヘッダーに電話番号を大きく出す案。施術中は電話に出られない店なので、繋がらない体験を作るだけになる。Webフォームを主線にして、電話は受付時間つきで下段に置いた。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、ポータルから来た人が最初の30秒で「自分の悩みの店だ」と思えるのはどれかで選びました。
PLAN B / 人で選ばせる
HERO → STYLIST → GALLERY → MENU → REASON → RESERVE
指名が付いている店なら強い並びですが、初見の人には知らない人の紹介を読ませる区間が先に来てしまうので見送りました。
PLAN C / 料金先行
HERO → MENU → REASON → FLOW → STYLIST → RESERVE
税込表記の強みは出るものの、金額の並びから読ませるとポータルの比較画面と同じ読まれ方になり、値段で選ぶ層に寄るため見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。悩みの提示から税込の料金、予約フォームまでスクロール1本でつながります。
FIG.07 / PC版 全体スクリーンショット(枠内を縦にスクロールすると全体を確認できます)
(08)
Smartphone
サロン探しはほぼスマホという前提で作りました。画面下の3ボタンは最後まで消しません。
FIG.08-A / トップと固定の3ボタン
FIG.08-B / ご来店の流れ 4STEP
SP DESIGN NOTE
- 画面下に「電話する / メニュー / Web予約」の3ボタンを固定。予約が主線、電話が副線と分かる幅の比率にした。
- 料金は表組みにせず1行1メニューで縦に積む。横スクロールを起こさずに、施術名・所要時間・税込価格まで読み切れる。
- 予約フォームの日時は自由記入。第1・第2希望を書くだけにして、カレンダー操作でつまずく箇所をなくした。
- FAQ7問は閉じた状態が初期値。全部開いた状態にすると予約フォームが遠くなるため、読みたい1問だけ開く形にした。
(09)
Operation Note
業務設計メモ / 予約管理と顧客カルテのデモを作るまでに整理したこと。
01
現状の課題
- 予約が掲載ポータル・電話・帰り際の次回予約に分かれ、その日の並びは紙の予約表を見ないと分からない。
- 一日6枠のうち何枠が埋まっていて、どこが空いているのかが手書きの表からは即答できず、問い合わせへの返事が遅れる。
- 薬剤の処方と前回の仕上げ方がスタイリストの記憶とメモ帳にしか残っておらず、間隔の空いたお客様だと前回と同じ手順を再現できない。
- カルテを閉店後にまとめて書き起こしていて、1人あたり10分前後かかる。書けなかった日は翌日以降に溜まる。
02
ゴール
- 週間予約表と顧客カルテを同じ画面に置き、予約をタップしたらその人の履歴がそのまま開く状態にする。
- 一日6枠の埋まり具合と残っている空き時間を一目で分かるようにして、その日に受けられるかどうかをすぐ返せるようにする。
- 薬剤の処方と施術履歴を記憶ではなく画面に残し、数か月ぶりのお客様でも前回と同じ手順を追えるようにする。
- カルテ記入を閉店後の作業から施術直後の数タップに移し、次回の来店目安まで一緒に残す。
03
打ち手
- 週間予約表と顧客カルテを1画面にまとめた管理画面を作る(デモは単一HTML・予約47件と顧客39名を仮置き)。
- 担当がひとりなので時間軸は1本だけ。日付の下に6枠の目盛りを出し、空いている時間は「空き 13:30〜14:00」と枠ごと表示する。6枠が埋まった日は7件目を登録できない。
- カルテは施術履歴・薬剤メモ・写真の3タブ。パッチテストなどの注意事項はカルテの先頭に固定して見落としを防ぐ。
- 施術内容・髪と頭皮の状態・次回の来店目安を3タップ選ぶと、次回提案メモの下書きが出る。文面を直してカルテに保存する。
04
効果試算
- カルテ1件あたりの記入時間 10分 → 2分 (試算)
- 1日6名ぶんの記入時間 60分 → 12分 (試算)
- 前回の薬剤処方の確認 口頭で確認 → 画面で参照 (試算)
- 次回の来店案内 口頭のみ → 全件が下書き (試算)
上記はすべて架空ブランドを前提とした試算値です。実測値ではありません。実際の数値は業務量と体制によって変わります。
(10) SELECTED WORK ↓
(06) ✶ 2026 / DENTAL
Asanagi Dental Clinic
あさなぎ歯科クリニック / 不安解消型のLP × 問診票のデジタル化とリコール通知