Works

進学ゼミ凛明アカデミア

学習塾ランディングページ

自主制作
ランディングページ
HTML / SCSS / JavaScript

Url: https://aktj.jp/demo/rinmei/
担当: 企画・要件整理／情報設計／デザイン／コーディング／動作確認・修正
使用技術: HTML／SCSS（Dart Sass）／JavaScript／Chrome DevTools／Google Fonts／AIツール（Claude Design・Claude Code・ChatGPT：構成・デザイン・文言・実装案など）
機能: レスポンシブ対応／FAQアコーディオン／SPドロワーメニュー／スクロール連動UI／Googleマップ／固定CTA／コンタクトフォーム／フォーム入力チェック（デモ送信）／JSONによるバナー切替／アクセシビリティ対応（スキップリンク・aria属性・フォーカス表示）／WebP画像・遅延読み込み

フレーム内をスクロールすると、ページ全体をご覧いただけます。

Overview

福岡市の架空の進学塾「凛明アカデミア」を題材にしたランディングページです。主なターゲットは、難関校・上位校を目指す中学生とその保護者です。指導力・実績を重視する教育熱心な保護者と、意欲的な生徒本人を想定しています。PC・スマートフォンの両方に対応しています。

Points

塾の特徴、気になる実績をすぐに把握できる構造

ページを開いた直後に目に入るよう塾のキャッチコピーを配置。生徒や保護者がもっとも気になる合格実績へのリンクも配置しました。

費用への不安を減らす情報設計

月謝だけでなく年間費用のモデルケースも掲載し、FAQとも内容を連動。保護者が費用の全体像を判断しやすい構成にしました。

指導内容の3要素を一覧化し見せ方を工夫

指導メソッドを「環境・分析・計画」の3要素に整理。PCではグリッドで一覧化し、仕組み全体を一画面で把握できるようにしました。

本作品はポートフォリオ掲載を目的とした自主制作であり、実在の塾ではありません。塾名・合格実績・講師・体験記・会社情報はすべて架空で、実際のクライアント成果・売上・集客実績はありません。ページ内に架空サイトである旨の注記を常設し、noindexを設定するとともに、フォームの送信機能を無効化して、実在の塾との誤認を防いでいます。