魔法のラボ
- URL
- https://mahounolabo.too-code.com/
- サイト概要
- 小学生向けプログラミングスクール「魔法のラボ」のLPです。スクールで身につく3つの力、選ばれる理由、3つのコース、保護者の声と実績、よくある質問、無料体験のお申し込みを1ページにまとめました。「魔法」をモチーフにしたやわらかい世界観で、子どもがワクワクできること、保護者が安心して申し込めることの両方を意識したサイトです。
- 担当範囲
- コーディング / アニメーション実装
- 使用技術
- HTML / CSS（Sass） / JavaScript （Swiper.js , GSAP） / Figma
- 実装内容
-
・GSAPによるファーストビューの登場アニメーション
（見出し・星・下線の光の演出、MotionPathで星がラインに沿って流れる動き）
・ロボットや星がふわふわ浮かぶアニメーション
・スクロールに合わせた時間差フェードイン
・実績データのカウントアップ
・無限ループマーキー
・ループスライダー
・アコーディオン
・モーダル
・ハンバーガーメニュー
・スムーススクロール - 工夫した点
-
① ワクワク感と安心して使えることの両立
アニメーションは要素が現れるときの演出にとどめ、内容を読む邪魔にならないようにしました。「視差効果を減らす」設定の端末では、動きを止めて表示します。ハンバーガーメニューやモーダルは、キーボード操作やスクリーンリーダーでも使えるよう、フォーカスの移動や読み上げの状態を管理しています。各セクションの最後に無料体験への導線を置き、読み進めたタイミングで申し込みやすい流れにしました。
② 数字で伝える信頼感
卒業生数・満足度・運営実績は、スクロールして目に入ったタイミングで0から数字が増えていくカウントアップにしました。数字が印象に残りやすく、スクールの実績が伝わりやすくなるようにしています。
③ 入力しやすいお問い合わせフォーム
入力項目を「 いて」「ご希望の内容」の3つに分けて番号を振り、どこまで入力したか分か りやすくしま とすぐにカレンダーが開き、今日より前の日付は選べないようにして、入力の手間とミスを減らしています。 - 制作期間
- １週間
- 値段
- ￥70,000（目安）
