CORE
Salon Verde（サロン ヴェルデ）
ヘアサロン（完全予約制）
※このページは制作見本です。実在のクライアントではなく、basis.が想定で作成したサンプルサイトの紹介です。
クライアント概要
緑にかこまれた静かなヘアサロンの「全体像→世界観→人物→価格→予約」5ステップの心理導線を5ページに分けて設計した制作見本です。完全予約制のサロンに合わせ、コンセプト／施術メニュー／スタイリスト／ご予約の各ページに役割を持たせ、来店までの不安を順序立てて解消する構成にしています。
STEP 1
ヒアリングシートで集めた情報
basis.では、ヒアリングシート1枚で、ここまでの情報を集めます。対面打ち合わせは行いません（LINE中心で本業時間を守ります）。
基本情報
| 店舗名 | Salon Verde（サロン ヴェルデ） |
|---|---|
| 所在地 | 東京都目黒区（架空所在地・自由が丘駅 徒歩4分） |
| 営業時間 | 火〜日 10:00〜20:00 |
| 定休日 | 月曜日 |
| 席数 | セット面 3席（1名ずつ担当・完全予約制） |
お店の想い
| キャッチコピー | 髪と心を、やさしく整える。 |
|---|---|
| 世界観のキーワード | 緑 / 観葉植物 / 静けさ / 自然光 |
| オーナーの想い | 慌ただしい毎日のなかで、自分に戻れる小さな時間を届けたい |
| お店に来てほしい方 | 30〜50代女性 / 髪質改善やヘッドスパに興味がある方 / 一人時間を大切にしたい方 |
施術メニュー
| 主力メニュー | カット 6,600円 / カラー 9,900円〜 / 髪質改善トリートメント 7,700円〜 / ヘッドスパ 4,400円 |
|---|---|
| セットプラン | A：カット＋髪質改善 13,200円 / B：カラー＋ヘッドスパ 12,650円 |
| こだわり | 低刺激の薬剤を厳選 / 髪質診断にもとづくオーダーメイド処方 / カウンセリングは全メニュー込み |
サイトの目的
| サイトに来た方にしてほしい行動 | お電話でのご予約（運用負担を抑えるため、予約フォームは設置せず電話のみで承る方針） |
|---|---|
| 今の集客の悩み | 「一人でゆっくり通える雰囲気か」が伝わっていない / 新規予約の入口がInstagramに偏っている |
| 避けたい雰囲気 | 派手なネオン感 / 量産チェーン店のような印象 / 写真を盛りすぎた華美なデザイン |
STEP 2
お客様の言葉が、
どこに反映されたか
ヒアリングシートでいただいた言葉が、サイトのどの部分になったかを公開しています。
いただいたお話
「一人でゆっくり通える雰囲気を伝えたい」
サイトでの反映
一番上の大きな写真をゆっくり拡大縮小させ、葉のぼかしを浮かべることでサロン全体の「静けさ」を再現／コンセプトページに「3つの約束」を独立配置し、完全予約制の安心感を丁寧に伝えています
いただいたお話
「派手な印象は避けたい」
サイトでの反映
薄い緑・オフホワイト・墨色の3色だけに絞り、明朝とゴシックの2書体だけを使うことで、上品で静かな印象に仕上げました
いただいたお話
「スタイリスト3名のミスマッチを減らしたい」
サイトでの反映
専用ページにスタイリスト3名の経歴・得意・苦手を見開きで紹介し、それぞれに「似合わせカット」「透明感カラー」など専門タグを添えました。週次の在籍カレンダーも併設し、希望日と担当の照合がその場でできます
いただいたお話
「Instagramを見なくても作品の幅を伝えたい」
サイトでの反映
スタイリストページ末尾にヘアギャラリー8枚を横に流れ続けるスライドで配置。カーソルを合わせると一時停止する作りで、気になるスタイルだけじっくり見ていただけます
いただいたお話
「初めての方の不安を減らしたい」
サイトでの反映
ご予約ページに「電話の言い回しサンプル」を基本／指名／お悩み伝達の3パターン用意。各ページ末尾に「次に読むと安心です」誘導カードを置き、戻るボタンを押す前に次の情報へ自然に進める心理導線にしました
いただいたお話
「子育て世代の予約離脱を防ぎたい」
サイトでの反映
メニューページに「お迎え時間からの逆算表」を配置し、15時／17時／19時半のお迎えに対する予約推奨時刻を一目で確認可能。コンセプトページにキッズ同伴ポリシーも明示しました
いただいたお話
「満席状況や臨時休業を、すぐ伝えたい」
サイトでの反映
全ページの上部・メニューのすぐ下に営業ステータスバーを配置し、時間帯で「営業中／準備中／閉店後／定休日」を自動切替。お電話前の状況確認が一目で済む設計にしました
いただいたお話
「予約フォームの管理負担を抑えたい」
サイトでの反映
オンライン予約システムは導入せず、お電話のみの受付に統一しました。営業ステータスバーで現在の状況を自動表示し、ご予約ページに「電話の言い回しサンプル」を3パターン用意することで、フォームがなくても迷わずお電話いただける設計にしています
STEP 3
制作のこだわりポイント
- 01 薄い緑×オフホワイト×墨色の3色配色で、サロンの「静けさ」と「やわらかさ」を伝える
- 02 トップ／コンセプト／メニュー／スタイリスト／ご予約の5ページ構成で、各ページに1つずつ「読む目的」を持たせ、迷わない導線に
- 03 一番上の写真をゆっくり拡大縮小（18秒周期）させ、葉のぼかしを浮かべて「静けさ」を視覚化
- 04 ヘアギャラリー8枚を横に流れ続けるスライドにし、Instagramを開かなくても作品の幅が伝わる作り
- 05 スタイリスト3名の経歴・得意・苦手まで開示し、週次の在籍カレンダーで指名のミスマッチを防ぐ
- 06 メニューページに「お迎え時間からの逆算表」と「施術後セット直し制度」を明示し、子育て世代の予約離脱を防ぐ
- 07 ご予約ページに「電話の言い回しサンプル」を3パターン用意し、電話が苦手な方の心理ハードルを下げる
- 08 画面の右上に常に表示される「文字サイズ切替（あ／A／A＋）」と「動き停止ボタン」で、年配の方や乗り物酔い体質の方にも配慮
- 09 営業ステータスバーが時間帯で自動切替（営業中／準備中／閉店後／定休日）、お電話前の状況確認が一目で済む
- 10 検索エンジン向けの情報タグ（パンくず・よくある質問・サービス一覧）を各ページに分散して設定し、各ページが個別にGoogle検索結果に表示されやすい設計
CASE STUDY
案件の流れ
課題から効果までを、統一フォーマットで記録しています。
01. 課題
【想定課題】完全予約制サロンで、新規予約の入口がInstagramに偏り、「一人でゆっくり通える雰囲気か」「スタイリストとのミスマッチ不安」「電話予約のハードル」で離脱が発生する状況を想定しました
02. 提案
【想定提案】「全体像→世界観→人物→価格→予約」の5ステップ心理導線を5ページに分け、各ページに1つの読む目的を持たせる構成を想定。電話予約完結＋管理負担軽減の方針で組み立てました
03. 実装
【実装内容】薄い緑×オフホワイト×墨色の3色＋葉のぼかしを浮かべる18秒周期の動きで「静けさ」を視覚化。スタイリスト3名の経歴・得意・苦手＋週次在籍カレンダー、メニューページに「お迎え時間からの逆算表」、ご予約ページに「電話の言い回しサンプル」3パターン、文字サイズ切替・動き停止ボタン、営業ステータスバー自動切替まで実装しました
04. 効果
【想定効果】完全予約制の安心感が冒頭で伝わり、スタイリスト選びの不安・電話予約の心理的ハードル・年配や乗り物酔い体質の方への配慮が同時に解消される構造を想定。Instagramに頼らず自社サイトから予約導線を完結できる状態をつくります
basis. start
10分で、
はじめられる。
ヒアリングシート10分・最短2週間で公開。
見積もりまで無料・提出後のキャンセルもOKです。
- ✓ 対面ゼロ / 電話・Zoomなし
- ✓ 文字で残る / 公式LINEでやり取り
- ✓ 7日間キャンセル可 / 署名後7日以内・無料
迷ったらまずLINEで。やり取りはすべて文字で残ります。
