教室案内を、
体験したくなる
広告へ。From information to action.
小4〜中3・最大4名の少人数塾を想定した、自主制作の架空ランディングページ。対象と悩みを絞り、学習プロセス・料金・講師・無料体験を順に示すことで、保護者が安心して体験を選べる広告導線へ刷新した。
完成デモのファーストビュー。画面内の写真はAI生成です。
01 — Overview
「通わせて大丈夫？」
という保護者の不安に、
真正面から答える。
個人塾・習い事教室の集客は、昔から口コミが強い。でも今は、保護者はスマホで事前に情報を調べる。Webサイトがないだけで選択肢から外れる時代に、必要なのは「最低限」ではなく「信頼の設計」。
本プロジェクトでは、対象・悩み・指導方法・先生の人柄・費用・体験条件を、意思決定の順番に沿って提示。一般的な教室案内ではなく、無料の学習診断へ迷わず進める1ページを設計した。
02 — Persona
見る人を、
2人に絞る。
ランディングページでは「誰に届けるか」を絞ることが情報整理の助けになる。この自主制作では、意思決定者（保護者）と利用者（子ども）を分け、情報の順番を検討した。
Persona 01
40代の保護者
子どもの習い事・塾選びにスマホで情報収集。口コミで聞いた教室のサイトを開き、費用・先生の人柄・通いやすさを確認している。
Needs
料金の透明性、先生の顔と雰囲気、体験可否、アクセスの分かりやすさ。
Persona 02
小学4年生〜中学3年生
親と一緒にサイトを見る。「なんか楽しそう」「怖くなさそう」の第一印象が、通うモチベーションに直結する。
Needs
明るい色、親しみやすい先生の写真、楽しい授業風景、自分にできそうな難易度。
03 — Design Concept
真面目すぎず、
ゆるすぎない。
配色の決め方
深いティール（信頼）と、明るいイエロー（親しみ）、クリーム地で温かみを出す3色構成。「かたい塾」と「ゆるすぎる教室」の中間の空気感を狙った。
タイポグラフィ
見出しは Noto Sans JP の Extra Bold で広告としての強さを出し、英字・数字には Manrope。本文は16px以上を基本に、スマホでも一度で意味を取れる階層を整えた。
形と動き
ボタン・カードはすべて角丸。丸みで「近寄りやすさ」を作り、アイコン的なイエローのハイライトで重要情報を直感的に伝える。
写真の使い方
先生の顔、授業風景、生徒の笑顔。「人」が見える写真を優先。建物や教材よりも、その場の人間関係がわかる写真にウエイトを置いた。
Heading — Noto Sans JP Extra Bold
体験レッスン受付を想定。
Accent — Manrope
Small class, big growth.
04 — Page Structure
不安を1つずつ
解消していく流れ。
強い約束から始まり、共感・指導の仕組み・証拠・料金・講師・体験条件へ進む6段階の導線。最後に「無料の学習診断＋体験授業」という最小リスクのアクションへ接続する。
01
約束とオファー
対象・地域・最大4名・無料体験をFVで明示し、最初の画面内に主CTAを配置。
02
共感と指導方法
保護者の悩みを言語化し、「見つける→言葉にする→試す」の学習プロセスを提示。
03
コース・料金
人気プランを中央で強調し、月謝・教材費・回数・対象学年を同じ形式で比較可能に。
04
講師と声の設計
顔写真・指導姿勢・想定コメントで、教室に通った後の変化を具体化。
05
体験価値と流れ
体験で得られるものを先に示し、申込み→診断・授業→フィードバックの3段階へ。
06
反論処理と申込UI
FAQ・アクセスで迷いを解消し、コース選択を引き継ぐ入力チェック付きフォームへ接続。
05 — Implementation
基本を押さえて、
丁寧に実装。
スマホで開く保護者を想定し、表示領域とタップ操作を確認しながら実装した。
レスポンシブ切替
900 / 640 / 380pxで情報量と列数を調整し、320pxでも横スクロールが出ない設計にした。
タップしやすいCTA
ボタンは最低48px高さ、間隔を8px以上で配置。誤タップを減らす設計。
見出し階層の整理
h1→h2→h3 の順序を整理し、読み上げ時にも文書構造を追いやすくした。
画像の最適化
FVはWebP・width/height・eager/fetchpriority、講師写真はWebP・lazyで読み分けた。
モバイルメニュー制御
aria-expanded・aria-hidden・inertを更新し、Escape・外側クリック・フォーカス移動にも対応。
操作しやすさへの配慮
スキップリンク、focus-visible、native details、入力エラー、コース引き継ぎ、reduced-motionを実装。
06 — Learning
この制作で
見えてきたこと。
01
意思決定者と利用者の分離
見る人と通う人が違うケースは、情報の順番がまったく変わる。保護者の意思決定プロセスを主軸に据える重要性を学んだ。
02
「体験」が最大のCTA
いきなり入会を促さず、「まず体験」という小さなアクションへ案内することで、申込みの心理的ハードルを下げる狙いを持たせた。
03
真面目すぎないトーン
教育系は固くなりがちだが、子ども自身が「楽しそう」と思える余地が必要。色と形の選び方で、トーンを調整できる手応えを得た。
04
次に踏み込むなら
本番では実績・許諾済み口コミ・正式な料金条件を反映し、送信処理、計測、プライバシー導線を接続して改善を続けたい。
設計意図を検証する測定項目
このLPは「口コミ・チラシ中心の集客に、体験申込みの受け皿をWebで足す」ための設計です。保護者が安心して体験申込みへ進めるかを、以下の観察項目で検証します。
視認とクリック行動
入力開始までの流れ
閲覧状況
※ 本作品は自主制作による架空案件のため、実測値・成果保証ではなく、設計意図を説明するための仮説指標です。
「うちの教室にも、
こんなサイトがほしい。」
教室・塾・習い事向けのサイト制作、お気軽にご相談ください。ヒアリング・お見積もりまで無料です。