Works
ステラ学舎
学習塾 夏期講習キャンペーンLP
- 担当
- 要件整理／情報設計／デザイン／コーディング／動作確認・修正
- 使用技術
- HTML／SCSS（Dart Sass）／JavaScript／Chrome DevTools／Google Fonts／AIツール（Claude Code・ChatGPT：実装補助・コードレビューなど）
- 機能
- レスポンシブ対応／学年タブ切替（プログラム・料金連動）／FAQアコーディオン／SPドロワーメニュー／フォーム入力チェック（デモ送信）／スクロール連動UI／Googleマップ／構造化データ（FAQPage）／アクセシビリティ対応（aria属性・フォーカス表示）／WebP画像
フレーム内をスクロールすると、ページ全体をご覧いただけます。
Overview
架空の学習塾「ステラ学舎」の夏期講習キャンペーンを題材にしたランディングページです。主なターゲットは、地域で学習塾を探している小中学生の保護者です。子どもの成績や学習習慣に不安があり、合う塾を慎重に選びたい家庭を想定し、無料体験の申し込みにつなげる構成にしています。PC・タブレット・スマートフォンに対応しています。
Points
学年タブで講習内容と料金を連動表示
「中学3年生・中学1・2年生・小学生」のタブを1つの処理で制御し、プログラムと料金の表示を同時に切り替え。保護者が子どもの学年に絞って情報を確認できるようにしました。
申し込み前の不安に寄り添う情報設計
選ばれる理由・指導方法・生徒の声・FAQ・受講までの流れを申し込みフォームの前に配置し、フォーム冒頭に「無理な勧誘は一切いたしません」と明記。ご相談内容の欄を作り、事前に疑問を解消し、面談へのハードルを下げる構成にしました。
入力でつまずかないフォームの検証設計
送信時に入力内容をまとめて確認し、最初のエラー項目へフォーカスを移動。入力中にエラー表示を解除し、aria-liveでエラー内容を支援技術にも伝えるようにしました。
本作品はポートフォリオ掲載を目的とした自主制作であり、実在の学習塾ではありません。塾名・住所・電話番号・料金・生徒の声などはすべて架空で、実在の学習塾から受注した案件ではなく、実際のクライアント成果・集客実績もありません。ページ内に架空サイトである旨の注記を常設し、noindexを設定するとともに、フォームを実際には送信されないデモ仕様にして、実在の塾との誤認を防いでいます。
デモサイトを見る