カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 教室・スクール |
| テイスト | 信頼感・誠実／ポップ・元気 |
| 色 | 青（黄の蛍光ペンを差し色に） |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | E06 ペン先が文を書いていき、要所に蛍光ペンの下線が引かれる／B06 1年の流れが付箋タブのように積み重なる（CSSだけ）／D01 コースに入るたびにページ全体の背景色が変わる |
| 架空の塾 | 「そらいろ学習塾」— 小学生から高校生まで、1対2の個別指導の塾 |
だれに向けたページか
子どもの塾を探している保護者（主に小4〜中3の親）と、本人。 「ここなら、ちゃんと見てくれる」という安心と、通うのが楽しそうな明るさを両方出す。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f7fbff |
背景（ノートの白） |
--c-ink |
#10233f |
見出し・文字 |
--c-blue |
#2b7bff |
面・線（上の文字は --c-ink で 4.03 → 大きな文字だけ） |
--c-btn |
#1a5fd6 |
ボタンの面（白文字で 5.75） |
--c-accent-text |
#1a5fd6 |
白の上の青い文字（5.53） |
--c-marker |
#ffe066 |
蛍光ペンの線（上の文字は --c-ink で 12.07） |
--c-k1〜3 |
#dbeafe・#fff3c4・#d5f5e8 |
D01 で切り替えるコースの色（小学生・中学生・高校生） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：M PLUS Rounded 1c 800
- ペンで書く文：Klee One 600（手書きに近い教科書体）
- 本文：BIZ UDPGothic 16px（読みやすいユニバーサルデザイン書体）
ページの構成と演出
- メインビジュアル（E06）：ノートの罫線の上に、ペン先のアイコンが「わかった！が、つづく塾。」を1行ずつ書いていく。書き終わると「わかった！」に黄色の蛍光ペンの線がスッと引かれる。横に勉強する手元の写真
- 3つの約束（E06の続き）：約束の文の要所にも、読むと蛍光ペンの線が引かれる
- コース（D01）：小学生・中学生・高校生の3区切り。入るたびにページ全体の背景がそのコースの色（水色・クリーム・ミント）に変わる
- 1年の流れ（B06）：4月・7月・10月・1月の4枚のカードが、付箋のタブを見せながら上に積み重なる。タブはずれた位置に並び、重なっても月の名前が読める
- 料金：見本の値
- 合格の声：見本の文（会員が本物に替える）
- 無料体験：大きなボタン
- アクセス・フッター
動きの決まり
- JSや GSAP が無いとき：ペンで書く文は最初から全部出ていて、蛍光ペンの線も引かれた形。付箋の積み重ねは CSS の sticky だけなので JS なしでも動く。コースはそれぞれの色の帯で並ぶ。全部読める
prefers-reduced-motionのときは、ペンの動きを止め、付箋は普通に縦に並べる- 書く速さは1行 0.8秒くらい。読むのを待たせない（全部で3秒以内）
写真（codex）
教室／ノートに書く後ろ姿／ノートと蛍光ペン／自習室／先生と生徒の後ろ姿／桜、の6枚。顔は写さない。
見本の値（会員が本物に替える）
料金・合格実績・生徒数・合格の声・住所・電話は見本（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 見出しは M PLUS Rounded 1c、強調したい一語に蛍光ペンの線（1区切りに1か所まで）
- ペンで書く演出は1ページに1回まで（最初の画面だけ）
- コースのページは、そのコースの色を背景にする
