01 / Assignment
教室案内ではなく、
親子の判断を
助けるページへ。
口コミで知った教室を、保護者がスマホで確かめる場面を想定。費用・指導方法・先生・通いやすさを確認し、体験を選べる設計にしました。
Decision maker
保護者が確かめたいこと
- 対象学年と料金が明確か
- どんな先生がどう教えるか
- 体験後に急いで決めなくてよいか
- スマホから迷わず申し込めるか
Student
子どもが感じたいこと
- 自分にもできそうか
- 先生が怖くなさそうか
- 少人数で質問できそうか
- 教室の空気が明るいか
02 / Information route
迷いを解き、
体験の価値へつなぐ。
「よさそう」だけでは申し込めません。最初に対象と約束を示し、指導の中身、条件、先生、体験後の流れへ進めます。
- 01
Promise
対象と約束を明示
小4〜中3、最大4名、駅からの距離、無料体験を最初の画面で伝える。
- 02
Empathy
家庭の悩みを言葉に
宿題、テスト直し、質問のしにくさなど、保護者が抱える場面から始める。
- 03
Method
学び方を見せる
「見つける → 言葉にする → 試す」の授業プロセスを3段階で説明する。
- 04
Compare
料金と対象を比べる
月謝、教材費、回数、対象学年を同じ書式に揃え、違いを読み取れるようにする。
- 05
Trust
教える人を見せる
講師の顔と指導姿勢、想定する声を通して、人間関係をイメージできるようにする。
- 06
Action
体験後まで説明する
申込み、学習診断、保護者への共有を示し、当日の入会判断は不要と伝える。
03 / Visual identity
真面目すぎず、
軽すぎない。
深いティールで信頼を、イエローで前向きなきっかけを。クリームの余白と人が見える写真で、親子が一緒に見やすい空気を整えました。
Color system
Typography
「わからない」を、
置き去りにしない。
Layout rule
説明は長文にせず、見出し・要点・補足へ分割。色だけに頼らず、数字とラベルで現在地を示します。
04 / Interface & build
保護者の
スマホで、止まらない。
情報を見つける、比較する、フォームへ進む。その一つひとつを、片手でも追いやすい操作にしました。
主要CTAは48px以上
ヘッダーとモバイル固定CTAから無料体験へ移動。誤タップを避ける間隔も確保しています。
コース選択を引き継ぐ
コースカードのボタンから進むと、体験フォームの希望コースへ選択内容を反映します。
入力エラーをその場で伝える
必須項目を項目ごとに案内し、完了時は送信されないデモであることを再度表示します。
メニューの状態を管理する
aria-expanded・aria-hidden・inertを更新し、Escape、外側クリック、フォーカス移動に対応しました。
読む順序を崩さない
見出し階層、スキップリンク、native details、focus-visibleでキーボード操作にも配慮しました。
画像の読込みを分ける
最初の教室写真は優先読込み、講師写真は遅延読込み。幅と高さを指定し、表示のずれを抑えています。
05 / Review note
数字を飾る前に、
行動を確かめる。
自主制作のため、実測成果はありません。本番では、保護者が安心材料を確認し、体験申込みへ進めたかを次の観点で検証します。
Observe A
料金・講師情報の閲覧
意思決定に必要なセクションまで到達し、比較できているか。
Observe B
体験フォームの開始
CTAからフォームまで進み、どの項目で入力を止めているか。
Observe C
コース選択の引継ぎ
比較したコースの文脈を保ったまま、体験申込みへ移れているか。
What I learned
教育サービスでは、見る人と通う人が違う。
保護者には条件と説明責任を、子どもには人の気配と前向きな印象を届ける。両方を同じ順番で扱わず、役割を分けて設計することの大切さを学びました。