概要
東京・表参道を拠点とする架空サロン「Salon HARU」。30代女性を主な顧客層とし、カットよりもトリートメントと艶髪体験を前面に出すLPです。初回予約とInstagram導線を明確にし、信頼感のあるビジュアルでコンバージョンを狙う構成にしました。
制作実績一覧へ
Case study · 美容・ライフスタイル
Salon HARU
トリートメント特化サロンのランディングページ
担当：要件整理 / デザイン / 実装（架空案件・サンプル）
- Next.js 14
- TypeScript
- Tailwind CSS
- Vercel
Glow & calm
要件（仮定を含む）
・モバイルからの予約が主導線になること ・「艶」「透明感」を言語と写真の両方で伝えること ・料金・スタッフ・FAQまで1ページで完結すること（仮定）
サイト構造
- ヒーロー（キャッチ＋CTA）
- サロンの強み（数字・実績は架空の例示）
- 悩み共感 → メニュー・料金
- スタッフ紹介・店内の雰囲気
- FAQ・最終CTA
デザイントークン
- 背景#FAF7F2（クリーム）
- テキスト#2C2C2C
- アクセント#C9A96E（ゴールド）
- タイポ見出しにセリフ系、本文は Noto Sans JP
課題
- 美容系は写真の印象が成果を左右するため、余白と階層で「高級感」と「親しみ」のバランスを取る必要がありました。
- 実在しないサンプルのため、具体性は保ちつつ誇大表現にならないトーン設計が課題でした。
アプローチ
- 8px基準のスペーシングと、色数を3系統に絞って視線の流れをシンプルにしました。
- ヒーロー直下に「誰のどんな悩みに応えるか」を短く整理し、スクロール後の離脱を抑える構成にしています。
成果メモ（サンプル）
架空サンプルとして、制作フロー（構成案→実装→デプロイ）を一通り提示できる状態を目標にしました。公開URLはデプロイ後に差し替え可能です。