カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 教室・スクール（ゴルフスクール） |
| 系統 | カッコイイ系（細長く太い英字・赤と黒と白とピンク・斜めの直線） |
| 骨組み | K10 ポスター：区切りごとに画面いっぱいの巨大な文字の面（赤・黒・ピンク）を挟む。写真は2か所だけ |
| 形 | スマホのまま横に延長：PCでも1列。色の面・写真・スライドは端から端まで、文字の列だけ 600px。例外は料金の B08 だけ |
| スライド | CSSだけ（scroll-snap）：コース5つ。矢印は JS の scrollBy だけ（JSなしは指で送る） |
| メインビジュアル | 分割（3枚）：1枚の写真を斜めの3枚に切り、腕とクラブ・胴・足元と別の場所を見せる |
| 演出の型 | B04（解析の小窓だけが入れ替わる）／B08（料金だけ、PCで左右を固定し中央が流れる） |
| 外した型 | B07（固定した人物写真を人ごとに切り替える）：人物の写真が顔の1枚しか無く、K10 は写真を少なくする骨組みなので、生徒の声は巨大な文字のポスターにした |
| 動きの主役 | メインビジュアルの斜めの幕（3枚が下から順に、0.8秒・1回だけ）。ほかは動かさない。B04 の切り替えは押したときだけ。「下からふわっと」は使っていない。GSAP・ScrollTrigger なし（vendor/ なし） |
| 架空の店 | 「SCARLET LINE GOLF ACADEMY」— 駅前ビルの室内練習場。打席6つ、コーチ4人 |
面の順番
0 メインビジュアル（黒・斜めの3枚＋SCORE IS LOGIC.）→ 1 赤のポスター「感覚じゃなく、数字で。」→ 2 黒の数字（6・4・1）→ 3 B04 解析の小窓（写真＋窓）→ 4 コース（scroll-snap・白）→ 5 ピンクのポスター（声）→ 6 B08 料金（白）→ 7 赤のポスター（体験レッスン）→ フッター（黒）
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent（赤 #e5002d）--c-accent-text（文字用の濃い赤 #b8001f）--c-on-accent --c-2（ピンク・図形だけ）--font-ja --font-head（Murecho 900）--font-en（Barlow Condensed 800＋日本語の書体）。
面の色は .t-white .t-black .t-red .t-pink が同じ名前の変数をすべて上書きする。赤の面は白い文字（4.81）、ボタンは白地に濃い赤の文字。script.js に色は無い。
動かないとき
JSなし・GSAPなし：斜めの3枚は並んだまま。B04 の小窓は3つの解析画面が縦に並ぶ（切り替えボタンは出ない）。コースは指で横に送れる（矢印は出ない）。B08 は CSS の sticky なので同じ。prefers-reduced-motion：幕なしで完成した状態。
スライドの作り方
.slider：overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline。矢印ボタンは scrollBy だけ。
写真の出どころ
新しく作った：swing（スイングの後ろ姿・顔の1枚）。メインビジュアルの3枚と B04 の背景に、同じ写真を切り方と色（白黒に落とした暗い版）を変えて使う。 写真庫は使わなかった：005（タブレットの数字）は紫の事務所、052（スマホを持つ手）はカフェの厨房で、ゴルフに合わない（画像を開いて確かめた）。前の版が写真庫から選んでいた2枚は外した。
会員が本物に替えるもの
料金・回数・有効期限・営業時間・生徒の声・電話番号・住所・解析の数値は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 区切りは「巨大な文字の面」。色の面は4つ（白・黒・赤・ピンク）から選び、隣どうしを同じにしない
- PCでも段組みにしない。文字の列は 600px、面と写真は端から端まで
- 角は丸めない。面の上の縁を斜め（
--slant）にしてよい。赤の面は1ページに2回まで - 英字の見出しは Barlow Condensed 800、和文は Murecho 900。動きは1ページに1つまで
