体験で何を確かめるかを、先に伝える。
課題を選ぶ、考えた道筋を確かめる、次の学習を決めるという3段階で説明しました。実在しない点数や合格実績を使わず、授業の進め方が判断できる内容にしています。
制作例へ戻る
会員登録から、
05個別指導塾の体験授業LP
ことり個別学習室
架空の個別指導塾の自主制作です。写真はAI生成のイメージ。体験時間・料金・地域は作品内の設定で、授業や入塾の受付はしません。元のLPの相談フォームは送信・保存しないデモです。会員登録・テスト決済は、別の検証サイトで実装しました。
概要
地域の個別指導塾が、中学生の定期テスト対策に関心のある保護者へ体験授業を案内する場面を想定。対象、教科、授業内容、費用条件と相談後の流れを1ページにまとめ、申し込み前の判断に必要な情報を整理しました。
- 担当範囲
- LP1ページ、プライバシー案内、404。スマホ対応、FAQ、体験教科の引き継ぎ、入力チェック・確認・修正。写真調の素材1点を生成。
- 基本の制作範囲
- 体験授業の案内を1ページに整理。写真・文章・FAQ・入力確認を中心に、小規模な募集LPを制作しました。
- 支給を想定する資料
- 対象学年、指導内容、体験の条件、日程、場所、講師紹介、教室の写真。今回は架空設定と生成素材を使用。
- 追加する場合の候補
- 実際の問い合わせ受付、LINEや予約サービスとの連携、季節講習のページ。今回の実装には含めていません。
- 使用技術
- HTML / CSS / JavaScriptNode.js（静的出力）
LPから広げた、機能の制作例
会員登録から、
テスト決済まで。
ことりを題材に、別の検証サイトで実装しました。
4つの画面で、利用の流れをご覧いただけます。
操作の流れを再構成した紹介画面です。この紹介では登録・メール送信・決済は行いません。
01 / 04
まず、登録する。
メールアドレスとパスワードを登録し、確認メールを受け取ります。メールを確認するまでは、ログインできない仕組みです。
メール確認前のログインを拒否
ことり個別学習室紹介用画面
はじめての方へ
会員登録
メールアドレス
sample@example.com
パスワード
••••••••••••
確認メールを送る
メールの確認後に、ログインできます。
動作を確かめたこと
登録・メール認証・ログイン・本人の決済履歴・Stripeのテスト決済。2026年9月に検証し、制作者本人の操作でも登録から決済完了まで確認しました。
この制作例の範囲
実際の請求は行っていません。予約と決済はそれぞれ独立した検証です。有料予約としての連動や、教室運営用の管理画面は含みません。メール受信はGmailで確認しています。
判断と工夫
教科を選んだところから、相談を始める。
数学・英語の説明から相談へ進むと、その教科を選択済みにします。学年と希望時間は選択式にし、学校名や成績を入力する項目は設けていません。確認後に戻って修正する操作もできます。
片手でも読める、1ページの順番。
スマホでは対象と体験時間、相談への入口を写真より先に配置。授業内容・費用条件・FAQを読み進める順序はPCとそろえ、細かな説明も文字を縮めずに表示しました。
PC
スマートフォン