スマートラーニング
スマートラーニングは、一人ひとりの目標に合わせた学習プランで、確実にスキルアップできるオンライン学習プラットフォームです。無料体験レッスン受付中。
スマートラーニングは、忙しい社会人から学生まで幅広い層を対象とした、オンライン学習プラットフォームのLP制作サンプルです。人気コース一覧から受講生の声までを視覚的に示し、無料体験レッスンへの導線を最適化することで、初回登録率の向上を目指した設計です。
デザインのポイント
ターゲット層の多様性を考慮して、落ち着いた青系とアクセントカラーの橙を組み合わせることで、信頼感と親近感を両立させました。ファーストビューでは大型の動画背景とテキストオーバーレイで学習風景をダイナミックに表現し、スクロール誘導を自然に促しています。
各セクションは白背景で統一しながら、コース情報や講師紹介カードに微妙なシャドウと角丸を加えることで、視覚的な階層感を創出。モバイル表示では2列グリッドを1列に切り替え、タッチ操作での快適性を確保しています。
工夫した点
段階的な信頼構築フロー
「人気コース」→「学習の流れ」→「受講生の声」という順序で、コース内容→実行方法→成功事例を段階的に提示し、ユーザーの心理的ハードルを段階的に低下させました。
受講生の声の動的表示
CSS スナップポイントを活用した横スクロール型レイアウトで、モバイル上でもデスクトップと同等のインタラクティブ体験を提供。写真・名前・評価を可視化することで、信頼性を高めています。
よくある質問のアコーディオン実装
JavaScript を用いたスムーズな開閉アニメーションで、長くなりがちなFAQセクションをコンパクト化。セッションストレージで開閉状態を保持し、UX を向上させています。
講師紹介の差分化戦略
講師カードに専門分野を色分けすることで、ユーザーが自分に合った講師を直感的に検索可能に。ホバー時の拡大アニメーションがCTAを強調しています。