ソラ・キッズ — インターナショナルプリスクールの、動きで見せる HP

0 歳から 6 歳までを預かるインターナショナルプリスクールを想定した HP です。スカイブルーとクリームを大きく交互に置いて、園の明るさをそのまま面で見せています。

こんな方に向いています

• プリスクール・保育園・こども園・英語教室を運営している
• 写真をたくさん見せて「園の雰囲気」で選んでもらいたい
• 見学・体験の申し込みを入り口に設計したい
• かたい印象ではなく、動きのある楽しいサイトにしたい

構成

ヒーローは写真 3 点をブロブ（不定形）に切り抜いて散らし、中央にゆっくり回る地球、まわりに手描きの落書きを浮かせています。そのあと園名の流れるテロップ → お知らせ → About（吹き出し型の写真と円弧に沿った英文、数字のカウントアップ）→ コース 6 つの横スクロール → 4 つの特長 → 園のようす（施設写真 2 点）→ FAQ → お問い合わせ（電話カード + 入力フォーム）→ フッタ、と 9 ブロックです。フォームはサンプルのため送信されませんが、未入力チェックは動きます。

動きについて

スクロールで各要素がふわっと上がってくる出現アニメ、園名テロップ、地球の回転、落書きの浮遊、カードのホバーで浮く動き、コースの横スクロール（矢印ボタンと指でのスワイプ両対応）、FAQ の開閉、数字のカウントアップを入れています。

動きは入れていますが、JavaScript が止まっても本文は必ず読めます。出現アニメは「最初から表示」を既定にして、動く時だけ隠す作りにしているためです。また OS 側で「視差効果を減らす」を設定している方には、動きが自動的に止まります。

差し替えるところ

園名・ロゴ・写真・コース名・料金・電話番号・住所が差し替え箇所です。配色は CSS の先頭にまとめてあるので、ブルー基調から別の色に変えるのも 1 箇所の書き換えで済みます。