カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 教室・スクール（英会話教室） |
| 系統 | 可愛い系（丸み・太い線とずらした影・明るい空色と黄・弾む動き・回るシール） |
| テイスト | ナチュラル・やさしい／ポップ・元気 |
| 色 | 青 |
| 形 | ふつうの縦長 |
| スライド | CSSだけ（scroll-snap）。overflow-x: auto; scroll-snap-type: x mandatory。矢印ボタンは JS の scrollBy だけ。JSなしでも指で送れる |
| メインビジュアル | 分割（3枚）。アーチ形に切り抜いた縦長の写真3枚を、高さを変えて並べる |
| アニメーション | あり（GSAP＋ScrollTrigger） |
| 演出の型 | A07（縦3枚に割った写真が時間差でゆっくり拡大＋縦書き）／E07（弧や円に沿って並ぶ文字。体験ボタンの周りを回るシールと、波に沿って流れる見出し） |
| 架空の教室 | 「そらいろ英会話」— 3歳から大人まで。先生と少人数で話す、駅前の小さな教室 |
だれに向けたページか
子どもに英語を始めさせたい親と、話す練習をしたい大人。 「たのしそう・こわくない」が最初の画面で伝わること。
色
| 変数 | 値 | 使う所 |
|---|---|---|
--c-bg |
#f2f8ff |
背景（うすい空色） |
--c-sky |
#3b9cff |
丸・波・飾り（図形だけ） |
--c-skypale |
#d8ebff |
帯・カードの地 |
--c-yellow |
#ffd84d |
シール・体験ボタンの地（紺文字 9.28） |
--c-pink |
#ff9fb2 |
小さな丸（図形だけ） |
--c-main |
#12325c |
見出し・太い線・ずらした影 |
--c-accent |
#1a5fb4 |
ボタンの地（白文字 6.29） |
--c-accent-text |
#1a5fb4 |
空色の上の青い文字（5.88） |
--c-text |
#374151 |
本文 |
--c-sub |
#4b5563 |
補足 |
文字
- 見出し：Potta One（筆で書いたような、ころんとしたポップ体。漢字も入っている）
- 英字：Sniglet
- 本文：M PLUS Rounded 1c 16px・行の高さ 1.9
ページの構成と演出
- メインビジュアル（A07・分割）：アーチ形の写真3枚（子どもたち・大人の会話・地球儀）を高さを変えて並べ、時間差でゆっくり拡大。前に吹き出しの縦書き「えいごで、あそぼ。」と、体験ボタンの周りを回る円の文字（E07）
- そらいろの3つのこと：丸いアイコンつき
- コース（scroll-snap のスライド）：キッズ／小学生／大人／オンライン。矢印ボタンと「1／4」
- 波に沿って流れる見出し（E07）：「Let's talk! いっしょに話そう」が波の線に沿ってスクロールで流れる
- レッスンの流れ：手順4つ
- 料金：表（〇〇）
- 無料体験：黄色の帯と大きなボタン
- アクセス
- フッター
動きの決まり
- 弾む動き（
back.out）。回るシールは 20秒で1周のゆっくり - JSや GSAP が無いとき：写真は止まったまま並ぶ。コースは指で横に送れる。円の文字は止まったまま読める
prefers-reduced-motionのときは回さない・流さない
写真
新しく作る：子どもたち／大人の会話の手元／地球儀を持つ手（3枚ともメインビジュアル）。 写真庫から：022-pediatrics の kid（切り抜き）、001-cafe の hero、005-it の office。
数字・声について
料金・電話番号・住所は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 見出しは Potta One、英字は Sniglet。太い紺の線と、右下にずらした影
- スライドは scroll-snap を使い回す（JS は矢印だけ）
- 回るシールは1ページに1つまで
