カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 教室・スクール（子ども向け造形教室） |
| 系統 | 可愛い系（マーカー風の手書き文字・太い線と右下の影・紫とライムとピンク・シール・吹き出し） |
| 骨組み | K06 左固定・右だけ流れる：PC（幅1080px以上）は画面を左右に割り、左 42%（イラスト・名前・申し込みボタン）を position: sticky で固定、右だけが流れる。スマホ・タブレットは左が上に来る1列 |
| 形 | LP型（1枚もの）：ヘッダーはロゴ＋「体験を申し込む」だけ。申し込みボタンは ヘッダー・左・ビフォーアフターのあと・料金・最後の5か所＋スマホの下固定バー。スマホの三本線の中身はページ内リンク |
| スライド | Swiper（作品と教室のようす。点・矢印・キーボード・自動送りの一時停止つき。動きを減らす設定では自動送りしない。JSなしでは指で横に送れる並び） |
| メインビジュアル | イラスト・図形：左の SVG（粘土のキャラ「ぐるりん」・はさみ・クレヨン・紙の星・しずく）が主役。写真は使わない |
| 演出の型 | F06（左端の太いリボン。紫→ピンク→ライムのグラデが、読み進めたぶんだけ伸びる）／G02（材料→作品。中央の線を左右に動かす）／A06（0→100% の数字とマスコット。1.0秒・訪問ごとの1回だけ）。外した型：なし |
| 動きの主役 | リボンが読み進めたぶんだけ伸びる（F06）。G02 と Swiper は触ったときだけ動く。A06 は最初の1回だけ。「下からふわっと」は使っていない。GSAP・ScrollTrigger は使わない（vendor には Swiper だけ） |
| 架空の教室 | 「アトリエぐるぐる」— 4〜12歳の造形教室。紙・段ボール・粘土・絵の具で、毎月ちがうものを作る |
右の流れ
悩み（3つの吹き出し）→ 解決（紫の枠）→ ビフォー・アフター → 特長（3つのシール）→ 作品と教室（Swiper）→ 保護者の声 → 月謝 → よくある質問 → 申し込み（ピンクの枠）。区切りの帯は積まず、角丸の枠と影つきカードで見せる。
色と書体（共通の変数名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（Zen Maru Gothic）--font-head（Yusei Magic）--font-en（Bagel Fat One＋日本語の書体）。
色の面は .is-purple .is-pink .is-lime .is-lilac。同じ名前の変数を上書きする（地・文字・補足・線・アクセント文字。ライムの面だけボタンの色も入れ替える）。イラストの色も CSS のクラスで変数を読む。script.js に色は無い。
動かないとき
JS なし：読み込み画面は出ない（head の1行が JS で付ける）／リボンは最初から描けている／ビフォーとアフターは2枚が並ぶ／写真は指で横に送れる。読み込み画面は、JS が止まっても2.2秒で CSS が消す。prefers-reduced-motion：読み込み画面・リボンの伸び・自動送りを止める。
写真の出どころ
- 顔の1枚：
before（机に広げた材料。前の版で作ったものをそのまま使用） - 写真庫から（画像を開いて確かめた）：段ボールの頭のロボット
robot（041・切り抜き。ビフォー・アフターの「作品」と Swiper）・シールstickers（036）・花のレッスンlesson（047）・発表会present（041） - 使わなかった：前の版の
after・hands（外した）。「作品」は robot で代える
見本の値（会員が本物に替える）
月謝・回数・人数・保護者の声・電話は〇〇。
下層ページを作るときの決まり
- 見出しは Yusei Magic、英字は Bagel Fat One。線は 3px の濃い紫、影は右下 5px
- PC の左（イラスト・名前・ボタン）は全ページで固定。右の中身だけ替える
- リボンは1ページに1本まで。申し込みボタンは各ページに2回以上、スマホは下に固定
