PLAN A / 約束起点
ADOPTEDHERO → CONCEPT → WAY → STYLE → MENU → STYLIST → SALON → FAQ → RESERVE
ポータルの一覧から来た人がまず確かめたいのは「どんな店で、誰が、いくらで」なので、担当ひとり・一日6名の決めごとを早い位置で示し、髪の質感と税込の料金を見せてから人を出すこの順を採用しました。
ヘアサロン オリヒ(orihi)
集客LP と 予約・顧客カルテ管理
2026.09
新規のほとんどが掲載ポータル経由で、クーポンを比べているうちに予約が止まる業種です。自社ページで直接受け切るために、最初の画面は「明日の髪に、やわらかな光」の見出しと「一日6名まで」の金のバッジにして、担当がひとりという店の約束を仕上がり写真より先に出しました。あわせて、閉店後に書き起こしていた顧客カルテを施術直後の数タップに移す管理画面のデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 新規客の入口が掲載ポータルに寄っている。1件ごとに送客手数料が引かれ、クーポン目当てで来た人は2回目につながりにくい。
- 席数と営業時間で受けられる量が先に決まる業種。取りきれる予約の上限が固定なので、単価と再来率の合う人で埋める設計になる。
- 売上を動かすのは新規数より来店間隔。年間の来店回数が1回増えるだけで、1人あたりの年間単価がはっきり変わる。
- 検索されるのは店名ではなく「くせ毛 カット 灯野市」のような悩みの言葉。悩みの語彙で書いたページのほうが見つけてもらえる。
02
狙った導線
- 最初の画面は「明日の髪に、やわらかな光」の2行と、「担当はひとり、一日6名まで。」から始まるリード1文。仕上がりの写真より、店の約束を先に出す。約束の数字「6」は、アーチ写真の左下に掛けた金のバッジでもう一度見せる。
- 「はじめに」は、髪を濡らす前にくせと毛量を見せてほしいという店からの一言で始め、そのまま「決めごと」3つ(最初から最後まで同じ手・くせを見てから決める切る順番・一日6名までの予約)に接続する。悩みを箇条書きで言い当てる型はやめ、朝のどこで手が止まるかを店側が聞く形にした。
- 料金は税込・指名料なしで全12件を開示し、カット・カラー・パーマ・縮毛矯正・ケアの4タブに畳む。行ごとに所要時間の線を引き、当日いくらで何分かかるかを予約の手前で分かるようにする。カット料金にはシャンプーとブローを含める。
- 予約はこのページのフォームで完結。メニュー・希望日・時間帯の3つを選んで確認するだけにして、会員登録と条件検索の往復をなくす。電話番号はページに載せず、FAQの1問で「施術中は出られない。フォームは24時間受け付けて翌営業日までに返信」と答える。
03
デザインの根拠
- 地は紙色 #FBF7F1。有彩色は主色のローズブラウン #8B5B5E(ボタン・章名・リンク)、セージ #3F665F(決めごとの番号・タブの下線・所要時間の線・Qの番号)、淡金 #C8A676(糸・アーチの外周線・バッジ)の3つに絞った。面の切り替えは淡いベージュ #F2EAE1、スタイリストの面だけ濃い茶 #2F2725 に反転し、予約の面をローズ #EBD5CE にした。
- 見出しは Kaisei Opti、本文は Murecho。斜体の Bodoni Moda は屋号「orihi」と数字(バッジの6・決めごとの01〜03・フッターの透かし)だけに使う。最初の画面に出る字だけを切り出した小さなフォントを同梱し、Google Fonts の本体を待たずに見出しを本来の書体で出す。英語の小見出しはヒーローの「Hair salon · Akarino」1か所で、章の目印は金の小さな点と和文の章名(はじめに・決めごと・手ざわり・担当・お店のこと・ご予約)にした。
- 写真は上が半円のアーチ形に切り、外側に細い金の線を1本ずらして添える。店の白いアーチ窓と同じ形をヒーロー・はじめに・担当の3か所で繰り返し、PCでは店内動画の枠も上を丸くした(動画は店内写真から生成し、逆再生を継いで途切れないループにしたもの。PCは枠の半分が見えたら再生、スマホはボタンで再生)。PCのヒーローは左にコピー、右に画面端まで届くアーチ写真。入場は幕を使わず、アーチが中央の縦の裂け目から約1.1秒で開くことにして、見出しは行ごとに下から上がり、続いてバッジが弾んで出る。同じタブの2回目は完成形から始める。
- 看板の演出は「光の糸」。1本の淡金の線がバッジから出て、スクロールに合わせてページの左端を縫い下り、決めごと3列の上の罫を右へ渡り、メニューのタブの下線をなぞって戻り、章の目印ごとに小さな結び目を作って、予約フォームの下で蝶結びになる。濃い茶の面では明るい金に切り替え、動きを減らす設定では最初から描き終えた飾り罫として残す。orihi(織る × 陽)の名前をそのまま画面にした。
- スマホは上から屋号・アーチ写真(屋号の下端に重なる)・バッジ・見出し・リードの順に積む。糸は左の余白を細く下り、PCだけに出す先端の光は付けない。髪の質感の5枚は横スワイプ、PCではピン留めの横送りにした。ヒーローのボタンが画面から出ると、画面下に「メニュー / 予約を試す」の固定バーが下から現れる。
04
検証で捨てた案
- スタイリスト紹介をFVの直下に置く案。人で選ぶ業種ではあるが、初見の人にとっては誰なのか分からないまま読む区間になるので、メニューと料金の後ろへ下げ、名前より先に「この分け目が嫌」「夕方になると膨らむ」というお客さまの言葉を置いた。
- モデルの顔が映る仕上がり写真のギャラリー。他人の仕上がりは自分に置き換えにくく、顔が出ると距離ができるため、髪の質感と手元だけの5枚(ボブの後ろ姿・ハイライトに当たる光・くせの毛先・乾かす手・洗う手)に置き換えた。名前のあるスタイリストの顔が映る新しい写真も作っていない。
- 初回割引クーポンの掲出と、料金の数字が0から増えていく演出。前者はポータルと同じ土俵に戻って再来率を下げ、後者は途中の数字が本物の料金に見える。どちらも入れず、動かすのは所要時間の線だけにして、税込の明朗料金を残した。
- ロード時の幕、流れる文字帯、バッジの外周を回る英字、リング型のカスタムカーソル、磁石のように寄るボタン。最初の設計には全部あったが、6本の事例を並べると同じ型に見える原因だったので外し、動きは糸・アーチの開き・所要時間の線に絞った。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、ポータルから来た人が最初の30秒で「担当ひとり・一日6名の店だ」と分かり、そのまま料金と予約まで下りられるのはどれかで選びました。
PLAN B / 人で選ばせる
HERO → STYLIST → STYLE → MENU → WAY → RESERVE
指名が付いている店なら強い並びですが、初見の人には知らない人の紹介を読ませる区間が先に来て、担当ひとり・一日6名という決めごとが後半に沈むので見送りました。
PLAN C / 料金先行
HERO → MENU → WAY → STYLE → STYLIST → RESERVE
税込表記の強みは出るものの、金額の並びから読ませるとポータルの比較画面と同じ読まれ方になり、値段で選ぶ層に寄るため見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。ヒーローのバッジから出た1本の金の糸が、決めごと・髪の質感・税込の料金・スタイリスト・店の案内を縫って、予約フォームの下で結ばれるまでスクロール1本でつながります。
FIG.07 / PC版 全体スクリーンショット(枠内を縦にスクロールすると、糸が予約フォームの下で結ばれるところまで確認できます)
(08)
Smartphone
サロン探しはほぼスマホという前提で作りました。ヒーローを過ぎると画面下に「メニュー」と「予約を試す」の固定バーが出て、予約フォームに着くまで消えません。
FIG.08-A / トップ(屋号・アーチ写真・バッジ・見出し)
FIG.08-B / メニューと料金(タブと時間バー)
SP DESIGN NOTE
- 画面下の固定バーは「メニュー」の文字リンクと「予約を試す」のボタンの2つ。ヒーローのボタンが画面から出たら下からせり上がり、予約フォームが見えたら引く。予約が主線と分かる幅の比率にした。
- 料金は4タブに畳み、1行1メニューで積む。上段に施術名と税込価格、下段に「約60分」の文字と所要時間の線(210分を右端に、30分ごとの目盛り)を置く。320pxでもタブ4つが横に収まる字間にして、「ケア」が横スクロールの先に隠れないようにした。
- 予約フォームは、メニュー・希望日・時間帯の3つを選ぶだけ。時間帯は「早い時間を希望 / 遅い時間を希望 / 相談して決めたい」の3択にして、細かい枠の照合を店側に残す。定休日(火曜・第3水曜)を選ぶと、欄の下に文で知らせる。
- 髪の質感の5枚は横スワイプで見せ、下のセージの線と「01 / 05」の数字が進みを示す。FAQ 7問は閉じた状態が初期値にして、予約フォームが遠くならないようにした。
(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 ↓
(03) ✶ 2026 / DENKI
Tomoshibi Densetsu
地域の電気工事店 / 緊急対応型のLP × 現場写真からの見積書ドラフト