| 業種 | 美容・サロン(脱毛サロン) |
| 系統 | 可愛い系(丸み・太い線・明るいミント・弾む動き・吹き出しとシール) |
| テイスト | ポップ・元気/ナチュラル・やさしい |
| 色 | 緑(ミント)+レモンの黄を少し |
| 形 | ふつうの縦長 |
| スライド | Swiper(部位ごとのメニュー。点・矢印・キーボード・自動送りの一時停止つき) |
| メインビジュアル | 文字が主役(タイポ):画面いっぱいの丸い「つるん。」と英字「SMOOTH DAYS」。写真は使わない |
| アニメーション | あり(GSAP+ScrollTrigger) |
| 演出の型 | E04 崩れた英字が少しずつ正しい綴りに揃う(スクランブル)/A02 寄りの写真(ミントのジェル)が縮み、中央に機械が1台浮かぶ→左右から単語 |
| 架空のサロン | 「つるみんと」— 個室2部屋の、女性向けの小さな脱毛サロン |
だれに向けたページか
はじめて脱毛をしてみたい20代。痛そう・高そう・勧誘されそうで、一歩が出ない人。 「明るくて、こわくない」とひと目で気持ちが軽くなるページにする。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f1fbf6 |
背景(ごく淡いミント) |
--c-mint |
#7fdcb5 |
ミントの面(上の文字は --c-ink で 7.96) |
--c-deep |
#0f5d45 |
深い緑の面(白 7.86) |
--c-ink |
#12372c |
文字・太い線 |
--c-lemon |
#ffe66b |
差し色の面・シール(上の文字は --c-ink で 10.43) |
--c-accent-text |
#0b7350 |
淡いミントの上の緑の文字(5.55) |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 和文の大見出し:Hachi Maru Pop(丸くはずむ手書き風)
- 英字:Baloo 2(800)
- 本文:Zen Kaku Gothic New 16px
ページの構成と演出
- メインビジュアル(タイポ・E04):画面いっぱいの「つるん。」(ミントの面に太い縁取りと影)。上に英字「SMOOTH DAYS」が、読み込み時に崩れた記号から正しい綴りに揃う(E04)。まわりに吹き出し「いたくない?」「高くない?」と丸いシール「はじめて 〇〇円」。スクロールで文字が少しずつ縮む
- A02(機械の紹介):ミントのジェルの寄りの写真が画面いっぱい→縮んで丸い窓に→中央に機械の切り抜きが浮かぶ→左右から「COOL」「QUIET」の単語と、日本語の説明
- 3つの「こわくない」:痛み・料金・勧誘。それぞれ見出しの英字(NO PAIN など)がスクランブルで揃う(E04)
- 部位のメニュー(Swiper):わき・うで・あし・顔・VIO・全身の6枚。料金は〇〇
- はじめての流れ:4段。丸い番号
- お部屋:個室の写真と文
- お客様の声:3つ(〇〇)。吹き出し
- 予約・アクセス・フッター
動きの決まり
- JSや GSAP が無いとき:英字は最初から正しい綴り(スクランブルの文字は
aria-labelにも本文を入れる)。A02 は縮んだ後の形(丸い窓・中央に機械・単語)で見える。Swiper が無いときは、メニューが指で横に送れる並び prefers-reduced-motionのときは、スクランブルをせず最初から正しい綴り。A02 は縮んだ後の形。Swiper の自動送りもしない- 弾むのは読み込み時の1回とシールだけ。スクランブルは各見出しで1回だけ
- A02 の固定は画面の高さ1.2倍まで、倍率は 2.2→1 まで
写真(codex 3枚+写真庫2枚)
機械(切り抜き)・ミントのジェルの寄り・ミントの個室。写真庫から:美容液とコットン(017)・ラナンキュラス(017)。
見本の値(会員が本物に替える)
料金・回数・お客様の声・住所・電話はすべて〇〇。効果の言い方は、会員が自分の施術に合わせて、広告の決まりの範囲で書き直す。
下層ページを作るときの決まり
- 見出しは Hachi Maru Pop、英字ラベルは Baloo 2 の大文字(E04 は1ページに1つ)
- 線は 3px の --c-ink、角丸は大きく。影は右下 5px の --c-ink
- 色の面はミント・レモン・深い緑。1区切りに1色
カツプロ(ホーム)
カツプロ AI SEO
サイト診断
MoteRaku
デザインギャラリー
画像ツール
カツプロPR