初期設計
“楽しい”だけでは選ばれない。
“安心して任せられる”と感じてもらうための導線設計を行った。
保護者の検討プロセスに沿い、情報を段階的に理解できる構成にした。
- 理念で共感を得た後、コース紹介・料金で具体的に検討できる流れとし、情報を比較して判断へ進める構成とした
- 各セクションの役割（楽しさ／安心感）を明確に分けることで、情報の受け取りやすさと納得感を高めた
- CTAは複数箇所に配置し、検討段階ごとに適切なタイミングで行動できる導線とした
初期の構成
課題（改善段階）
- 安心材料となる情報の具体性が不足しており、意思決定につながりにくい構成だった。
- 各セクションの役割や訴求軸は設定していたものの、 表現のメリハリが弱く、「楽しさ」と「安心感」それぞれの印象が十分に強調されていなかった。
仮説
情報整理と視覚設計で安心感と楽しさの印象を強化
保護者にとって「安心感」が意思決定の軸であることを踏まえ、
その印象が十分に伝わっていないことが課題だと考えた。
そのため、「楽しさ」と「安心感」の役割を明確に分け、
視覚表現や情報の強弱を調整することで、各印象がより明確に伝わると仮定した。
改善の意図
比較検討しやすい構造へ再設計
サイト全体の構成は維持しつつ、
各セクションの役割に応じて表現のメリハリ（配色・余白・情報量）を調整した。
これにより、「楽しさ → 安心 → 行動」の流れの中で、
保護者が段階的に印象を受け取りながら納得して申し込みに進める状態を目指した。
改善内容
■特徴セクション
楽しさの印象がより明確に伝わるよう、視覚的要素を強化
- 明るい配色・イラスト・動きを加え、直感的に雰囲気が伝わるよう調整
- テキスト量を抑え、視覚中心で理解できる設計に調整
- PCではアートボード型レイアウトを採用し、視覚的な印象強化
Before
After
■料金セクション
検討段階に応じて情報量を整理し、比較しやすい構成へ改善。
- TOPでは情報量を絞り、雰囲気を損なわない構成に調整
- 詳細ページへ自然に遷移できる導線を設計し、段階的に情報を理解できるようにした
- 最終判断に必要な情報を補完し、安心して選択できる状態に調整
Before
After
TOPページ
詳細ページ
■CTA・体験導レッスン線周辺
不安を軽減する情報整理と表現により、迷わず行動できる導線へ改善
- 余白を広めに取り、情報を整理し、保護者の不安を軽減する文言に調整
- 優しい配色やイラストを使用し、心理的ハードルを下げるように設計
- CTA周辺の情報を整理し、迷わず行動に移れる導線に調整
Before
After
デザイン
「楽しさ」と「安心感」のバランスが伝わるよう、視覚的に変化をつけた。
- 楽しさ：明るい配色・イラストで教室の雰囲気を直感的に表現
- 安心感：余白と落ち着いたトーンで判断しやすく設計
レスポンシブ設計
デバイスごとにレイアウト構造を切り替え、最適な情報の見せ方になるよう設計。
- SP：縦積み構成で可読性と操作性を優先
- PC：教室のイメージを視覚的に伝えつつ、情報も整理できるよう、absolute配置＋clamp()によるアートボード型レイアウトで設計。
