← 制作実績一覧へ

オンラインITスクール/ 静的ランディングページ

CODEBRIDGE

受講料シミュレーターと、おすすめコースを提案する診断ウィザードを組み込んだ1ページ構成です。

CODEBRIDGEのランディングページ
紺と紫を基調に、学習の前向きさが伝わる配色にしました。
種別オンラインITスクール/架空のサービスを想定した自主制作
担当範囲企画・デザイン・実装
使用技術HTML / CSS(BEM設計)/ JavaScript(ライブラリ不使用)
構成1ページ(ランディングページ)

金額の不安を先に解消する

スクールの申し込みで最大の障壁は受講料です。コースと支払い方法、給付金の対象かどうかを選ぶと月々の負担額がその場で出るシミュレーターを置きました。問い合わせる前に判断できることを狙っています。

コース選びに迷わせない

「どのコースが自分に合うか分からない」という状態で離脱されないよう、いくつかの質問に答えるとおすすめコースが出る診断を用意しました。

つまずいた点:給付金の対象外コースで補助額が出ていた

料金表には「給付金対象外」と明記しているコースなのに、シミュレーターでは補助額が計算されていました。画面上の表記と計算ロジックが食い違っている状態で、実際のサービスなら申し込み後にトラブルになる箇所です。コースごとに対象可否を持たせ、対象外なら補助額をゼロにしたうえでチェック欄自体を選べなくする形に直しました。自分で作ったものでも、表示と計算は別々に確認する必要があると学びました。