コンテンツへスキップ
LP制作 制作サンプル 2026年3月

Ange Beauté

銀座駅徒歩3分。完全個室のプライベート美容サロン。フェイシャル、ボディケア、ヘッドスパで至福のひとときを。初回限定30%オフ。

HTML Tailwind CSS JavaScript
デモを見る
https://cleverlab.lol/demos/beauty-lp-mn3w81aq/
Ange Beautéのスクリーンショット

銀座の隠れ家プライベート美容サロン「Ange Beauté」のLP制作サンプルです。完全個室・完全予約制という希少性を前面に打ち出し、初回限定キャンペーンで来店動機を創出する設計です。ターゲットは30〜50代の美意識の高い女性で、上質な空間と施術の魅力を視覚的に伝える構成になっています。

デザインのポイント

ローズゴールド・アイボリー・ウォームブラウンの3色を基調にした、温かみのある上品な配色です。ファーストビューではヒーロー画像にスローズームアニメーションを適用し、サロンの非日常的な空間を演出。キャッチコピー「自分を愛でる時間をあなたに」で、施術ではなく"体験"を訴求しています。

各セクションの見出しにはスクロール連動のアンダーラインアニメーションを採用し、コンテンツの区切りを上品に表現。ドットパターンやストライプパターンの背景装飾で、フラットすぎない奥行きのあるデザインに仕上げました。

工夫した点

01

メニューカードのインタラクション

フェイシャル・ボディケア・ヘッドスパの各メニューをカード型UIで表示。ホバー時に浮き上がるシャドウ効果と、グラデーション背景で選択可能な状態を直感的に伝えます。価格はグラデーションテキストで視線を引きつける処理を施しました。

02

スタッフ紹介による信頼構築

施術者の写真・経歴・得意分野をカード形式で紹介。「この人に施術してもらいたい」という感情的な動機を生み出し、指名予約への導線を設計しています。

03

お客様の声の臨場感

引用符アイコンと星評価を組み合わせたテスティモニアルカード。属性情報(年代・施術内容)を含め、閲覧者が自分と重ね合わせやすい構成で信頼性を強化しています。

04

フローティングCTAとパルスアニメーション

スクロール位置に応じて表示される固定予約ボタンに、脈動するグロー効果を適用。FAQセクションのアコーディオンUIと合わせ、疑問解消→予約という自然な流れを意識した設計です。

同じようなサイトを作りたい方へ

ご要望に合わせて最適なプランをご提案します。まずはお気軽にご相談ください。