— Landing Page for Personal Salon —
はじめての扉を、
やさしくひらく。
A first impression, beautifully designed.
個人経営の美容室・サロンを想定した、1ページ完結型ランディングページ。「初来店への不安」を解きほぐす構成とトーンを、デザインと導線で再現した。
Overview
SNS・電話だけの予約から、
Webで完結できる導線へ。
Webサイトを持たず、SNSと電話のみで予約を受けている個人美容室を想定。検索されても情報が見つからず、来店判断に至らない状況を、1ページの設計で解決する。
メニュー・料金・アクセス・予約方法——初来店の不安につながる4要素をファーストビュー近くに集約。サロンの世界観を損なわないビジュアルで、安心感と期待感を両立させた。
Design Concept
上質と親しみやすさの、
ちょうどいい距離。
配色のねらい
深いモカブラウンとゴールドを基調に、背景はアイボリー。落ち着きと華やかさを両立させ、施術後のくつろぎを連想させる色温度にした。
タイポグラフィ
見出しには Noto Serif JP、アクセントには Playfair Display のイタリック。Cormorant Garamond のイタリックを副題・キャプションに使い、手書きに近い柔らかさを足している。
写真と余白
大きな写真を1枚ずつ、ゆっくりスクロールで見せる構成。情報量は控えめにし、「ここは落ち着ける場所」という空気を優先した。
ボタンとアニメーション
ボタンの角丸は控えめに、ホバーで色だけが静かに変わる。派手な動きは避け、高級感を壊さない。
Heading — Noto Serif JP
はじめての扉を、やさしく。
Accent — Playfair Display Italic
A quiet moment.
Information Architecture
1ページで、
予約まで迷わせない。
訪問者のジャーニーを「知る → 安心する → 予約する」の3段階に整理し、ページ構成を7セクションに分割。予約CTAを3箇所に段差をつけて配置した。
ヒーロー / 世界観の提示
キャッチコピーと大きな写真で、サロンの雰囲気を最初の3秒で伝える。予約ボタンを右上に固定配置。
コンセプト / 想いを伝える
オーナーの考えや接客スタイルを短文で。「なぜこの店なのか」を説明。
メニュー / 料金
代表メニューと料金を、迷わないようグループ化。「新規限定メニュー」を目立つ位置に。
ギャラリー / 空気感
店内・施術・スタッフの写真を大きく。テキストは控えめに、視覚で安心感を伝える。
スタッフ紹介
「誰に施術してもらえるのか」が分かる顔写真と一言メッセージ。
アクセス / 営業時間
地図・住所・営業時間・定休日を1ブロックに集約。駅からの徒歩分数も明示。
予約CTA / 最終導線
LINE予約・Web予約・電話の3導線を並べ、利用者の習慣に合わせて選べるように。
Implementation
シンプルなHTML/CSSで、
美しく長持ちする作りに。
— 01
セマンティックHTML
header / main / section / article を意味通りに使い、読み上げでも迷わない構造に。
— 02
CSS Grid + Flexbox
メニュー表・スタッフ一覧・ギャラリーを Grid で、ヘッダーと CTA を Flexbox で組み、レスポンシブが自然に崩れない。
— 03
控えめなアニメーション
スクロール出現はフェード＋数px浮く程度。高級感を損なわない控えめな動き。
— 04
予約CTAの固定配置
ページ下部にスクロール追従の予約ボタンを配置。離脱タイミングで目に入るように。
— 05
画像最適化
大判写真は WebP 化・loading="lazy"・width/height 指定で CLS を抑え、初回表示を軽快に。
— 06
アクセシビリティ
ゴールド系のコントラスト比を丁寧に調整し、キーボード操作の focus-visible も統一。
Learning
この制作で
得たもの。
— Ⅰ
LPは「引き算」で成立する
情報量を増やすほど離脱率は上がる。必要最小限だけ残して、余白で読みのリズムを作る設計を学んだ。
— Ⅱ
世界観と機能の両立
「オシャレだけど使いにくい」を避けるには、CTAのコントラストと位置を死守する必要がある。美と実用の優先順位を身体で覚えた。
— Ⅲ
ターゲットから逆算する
「30代女性の初来店」という具体的なペルソナを想定することで、デザインと文言の判断基準が明確になった。
— Ⅳ
次に進めるなら
本番運用なら予約システム連携（STORES予約・RESERVA 等）、Instagram API でのフィード埋め込み、アナリティクス設計まで踏み込みたい。
実案件と仮定した場合の成功指標
このLPは「30代女性の初来店予約を増やす」ための設計です。公開後3ヶ月時点で、以下の数値を成功ラインと定義しています。
（LP経由）
遷移率
スクロール到達率
※ 本作品はコンセプトワーク（自主制作）のため、実測値ではなく設計時に設定したKPI目標です。
「うちのサロンにも、
こんなサイトがほしい。」
ヒアリング・お見積もりまで無料で対応しています。