カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 美容・サロン（メンズ脱毛） |
| 系統 | カッコイイ系（黒地・太く詰まった文字・直線・速く切れのいい動き）／テイスト：信頼感・誠実／スタイリッシュ |
| 色 | 赤・ピンク（黒地に深紅、強調に明るいピンク。1面だけ明るい地） |
| 骨組み | K03 全画面を1枚ずつ送る：1区切り＝1画面（7枚）。html { scroll-snap-type: y mandatory }、各枚 min-height: 100svh。各枚の頭に「02／07」の番号、PC は右端に位置ドット。CSS だけ（GSAP なし・vendor なし）。スマホで文字があふれないよう、1枚ごとの文は短くした（390×844 で7枚とも高さ844pxに収まることを確かめた） |
| 形 | スマホのまま横に延長：PC でも1列。写真と色の面は画面の端まで、文字の列だけ最大680px |
| スライド | なし |
| メインビジュアル | 静止画を動かす（動画風）：施術室の写真1枚が丸窓から全画面に開き（A01・1.4秒）、そのあと28秒かけてゆっくり寄って流れる |
| 演出の型 | A01（1枚目）／A11（2枚目の中だけ：赤い破片が集まって NO SHAVE になり、漂う。canvas・1.1秒で集まる） |
| 動きの主役 | 1枚目の丸窓と寄り続ける写真（CSS のみ）。A11 は2枚目の中だけの小さな動き。「下からふわっと」は使っていない |
| 架空のサロン | 「RED LINE（レッドライン）」— 男性専用の脱毛サロン |
枚の順番と色（隣り合う枚は同じ色にしない）
1 黒（写真）→ 2 黒＋赤い破片 → 3 赤（上に白黒の帯写真）→ 4 黒（プラン4つ）→ 5 濃い黒（上に写真の帯・4ステップ）→ 6 明るい地（よくある質問）→ 7 赤（予約・店の情報）
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent --c-accent-text（黒地ではピンク）--c-on-accent --c-2（深紅）--c-3 --font-ja --font-head（Murecho 900）--font-en（Teko＋日本語の書体）。
枚ごとの色は .s-red .s-light .s-alt .s-dark が同じ名前の変数を全部上書きする（明るい地・赤い地でも文字色・線・アクセント文字を上書き済み）。ヘッダーと位置ドットは常に黒なので、クラスで変数を上書きしている。script.js に色は無く、破片の色は CSS の color から読む。
動かないとき
JS なし：2枚目は文字「NO SHAVE」がそのまま出る。動きを減らす設定：丸窓も寄りも無く最初から全画面、破片は集まった形で止まる。snap は JS なしでも効く。
写真の出どころ
- 新しく作る顔の1枚：hero（赤い光の施術室）。いまの
images/のものを使っている - 見本の中に既にある：jaw（あごのライン・顔は写っていない）
- 写真庫から（画像を開いて確かめた）：shave（015・蒸しタオルのシェービング。赤い面の帯に白黒で使う）
- 使わなかった：care（スキンケアの瓶）・room（白い施術室）は黒と赤の調子に合わない
外した型と理由
B05（カードが上に積み重なる）を外した。scroll-snap の1枚ずつ送りと、sticky の重なりは両立しない。プランは4つの帯を1枚の中に並べた。
下層ページを作るときの決まり
- 1枚＝1画面の作り。文は短く、390×844 に収まる量
- 深紅は線と図形とボタンだけ。黒地の文字の強調はピンク
- 料金・回数・効果の数字は見本の値（〇〇）。会員が本物に替える（効果の言い方は景品表示法・医療広告の決まりに合わせる）
