カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 教室・スクール |
| 系統 | 可愛い系（ぷっくりした立体文字・丸いホールドの形・明るい紫と黄とミント・弾む動き・シール） |
| テイスト | ナチュラル・やさしい／ポップ・元気 |
| 色 | 紫 |
| 形 | ふつうの縦長 |
| スライド | Swiper（vendor/swiper-bundle.min.js・MIT）：コース（はじめて・キッズ・大人の教室・女性の日・回数券）。点・矢印・キーボード・自動送り（止めるボタンあり／動きを減らす設定では送らない）。JSなしは指で横に送れる並び |
| メインビジュアル | 画像1枚のLP風（大きなコピー）：壁を登る人の写真を全面に、ぷっくりした大きな文字「のぼるって、たのしい！」と体験予約ボタン |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A04 ロゴだけの幕から写真がにじみ出て、ロゴがヘッダーの定位置に溶け込む（1回だけ）／F07 線画のホールド（立体）がスクロールで寄ってくる |
| 架空のジム | 「よじぽこ BOULDERING GYM」— 〇〇市の、初心者と親子向けのボルダリングジム |
だれに向けたページか
運動は苦手だけど何か始めたい20〜30代、子どもと一緒に遊べる場所を探す親。 「怖くない・かわいい・手ぶらでOK」がひと目で伝わり、体験予約へ進んでもらう。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f6f1ff |
背景（うすいラベンダー） |
--c-purple |
#7c4ddb |
面・ボタン（白い文字で 5.3） |
--c-ink |
#2e1760 |
見出し・太い線・影（背景で 13.5） |
--c-yellow |
#ffd84d |
シール・ホールド（濃い紫の文字で 10.8） |
--c-mint |
#7fe0c4 |
シール・ホールド（濃い紫の文字で 9.5） |
--c-accent-text |
#6b2fd6 |
背景の上の紫の文字（6.3） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 大きなコピー：Rampart One（ぷっくりした立体の文字）
- 見出し・本文：M PLUS Rounded 1c（見出し800／本文500・16px）
- 英字：Lilita One
ページの構成と演出
- 読み込み（A04）：紫の幕にロゴ「よじぽこ」だけ。幕が透けて写真がにじみ出て、ロゴは縮みながらヘッダーの定位置へ溶け込む（1.6秒・同じタブの2回目は省く）
- メインビジュアル：写真1枚を全面に。左に大きなコピーとボタン。動きは控えめ
- はじめての方へ：手ぶらでOK・インストラクター・やさしい課題の3つ（丸いホールド形のカード）
- ホールドのかたち（F07）：線画で描いた立体のホールドが、スクロールで遠くから回りながら寄ってくる。横に「ガバ・カチ・スローパー」の説明
- コース（Swiper）：5枚のカード
- 料金：表（〇〇円）
- 親子で・カフェ：写真2枚（子ども・カフェ）
- 体験予約・アクセス：ボタンと地図の代わりの案内
- フッター：「このジムは架空です（デザイン見本）」
動きの決まり
- JSや GSAP が無いとき：幕は出ない。ホールドの線画は、止まった絵（SVG）がそのまま見える
prefers-reduced-motionのときは、幕・回転・自動送りを止める- 弾む動きは小さく。画面全体は揺らさない
写真（codex 3枚＋写真庫2枚）
壁を登る人（新・メイン）／ホールドの寄り（新）／子ども（新）／シューズ（008 から・切り抜き）／コーヒー（001 から）。顔は写さない。
下層ページを作るときの決まり
- 大きな言葉は Rampart One、見出しは M PLUS Rounded 1c 800
- カードは丸いホールドの形（大きな角丸）＋太い線3px＋ずらした影
- 紫の面には白い文字、黄・ミントの面には濃い紫の文字
- 料金・人数・お客様の声は見本の値（〇〇）。会員が本物に替える
