子どものプログラミング教室（ポップ・元気）のWebデザイン見本

子どもに「ゲームばかり」ではなく「つくる側」を体験させたい親と、その子ども本人。子どもが一緒に画面を見て「行きたい！」と言うページにする。親が知りたい料金・時間はきちんと読める。


業種	教室・スクール
テイスト	ポップ・元気
色	紫（黄・ミントを差し色に）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A06 0→100% の数字とマスコット（1.3秒以内）／E04 崩れた文字が少しずつ正しい綴りに揃う（スクランブル）／G01 マスコットが隅からのぞき、区切りごとに吹き出しのひとことが変わる
架空の教室	「ぴこラボ（PICO LAB）」— 小学1年〜中学生が通う、ゲームづくりとロボットの教室
マスコット	ロボットの「ピコ」（自作の SVG。四角い顔に丸い目、頭にアンテナ）

だれに向けたページか

子どもに「ゲームばかり」ではなく「つくる側」を体験させたい親と、その子ども本人。 子どもが一緒に画面を見て「行きたい！」と言うページにする。親が知りたい料金・時間はきちんと読める。

読み込み（A06）：紫の幕に、ピコと「000%」。1.3秒で「100%」になり、幕が上に抜ける。JSなし・動きを減らす設定では出さない。2回目以降（同じタブで再読み込み）も出さない
メインビジュアル（E04）：「つくるって、おもしろい！」と、ドット文字の「LET'S MAKE GAMES & ROBOTS」。英字は記号が混じった崩れた状態から、1文字ずつ正しい綴りに揃う（aria-label に正しい文）
ピコの吹き出し（G01）：画面の右下の隅から、ピコが半分のぞいている。区切りに入るたびに吹き出しのひとことが変わる（「ようこそ！」「なにがつくれるの？」「月謝はここ！」など）。スマホでは小さく、本文にかぶらない位置
ぴこラボで身につくこと：3つの力。区切りの英字の見出しはスクロールで画面に入ったときにスクランブルで揃う
コース：ゲームづくり（小1〜）・ロボット（小3〜）・テキストプログラミング（小5〜中学生）
発表会：年2回、つくったものを家族に発表
料金：表（金額は〇〇）
無料体験：黄色の大きなボタン
アクセス・フッター

ロボットとタブレットの手元／切り抜きのブロックのロボット／ゲームづくり／配線する手／教室／発表会、の6枚。子どもの顔は写さない。