Overview
概要
| クライアント | DE Learning System |
| 業界 | IT教育・eラーニング |
| 制作期間 | 約3〜4ヶ月 |
| 提供範囲 | 要件定義・UI/UX設計・フロントエンド開発・バックエンド開発・公開 |
| 技術スタック | Next.js / TypeScript / Node.js / PostgreSQL / Vercel |
| サイトURL | de-learning-system.com |
Background
背景・課題
IT人材の需要が急増する一方、体系的にスキルを習得できる学習環境はまだ十分に整っていません。特に「現場で即戦力となるスキル」に特化したeラーニングコンテンツは少なく、既存サービスでは理論中心で実践力が身につかないという課題がありました。
本プロジェクトでは、HLTが自社の研修プログラムで培ったIT教育ノウハウを活かし、「実務直結型の学習体験」を提供するeラーニングプラットフォームの開発に取り組みました。
主な課題は以下の3点でした。
- 学習コンテンツの管理・更新が煩雑で、常に最新の技術情報を反映できていない
- 学習者の進捗管理や理解度の把握が困難で、個別最適化された学習支援ができていない
- UIが複雑で、学習開始のハードルが高く途中離脱率が高い
Solution
提案内容
1. シンプルで直感的なUI設計
「学習を始めるまでのクリック数を最小化する」を設計原則に、ログイン後すぐに学習を再開できるダッシュボードを設計。どのデバイスからでもスムーズに学習を継続できるよう、レスポンシブデザインを徹底しました。
2. 段階的な学習パス設計
Java・AWS・ネットワーク等の主要技術領域を、基礎→応用→実践と段階的に積み上げられるカリキュラム構造を設計。学習者は自分のレベルに合わせてスタート地点を選べ、無理なくスキルアップできる設計にしました。
3. 学習進捗の可視化
各コースの完了率・理解度テストのスコア・学習時間をダッシュボードで可視化。学習者自身がモチベーションを維持しやすい仕組みを組み込みました。管理者画面では受講者全体の進捗をCSV出力することも可能です。
Implementation
実装の工夫
コンテンツ管理の効率化
学習コンテンツをMarkdown + MDXで管理する設計を採用。エンジニアでなくてもコンテンツの追加・更新が行えるよう、管理画面を用意しました。バージョン管理にはGitを活用し、コンテンツ変更の履歴追跡も可能にしています。
コードハイライトとインタラクティブな演習環境
プログラミング学習に不可欠なコードハイライト（Shiki使用）を全コンテンツに実装。Java・Python等の主要言語に対応し、読みやすいコード表示を実現しています。また、簡単なコード実行確認ができるインタラクティブな演習セクションも組み込みました。
パフォーマンス最適化
Next.jsのApp RouterとISR（Incremental Static Regeneration）を活用し、学習コンテンツページを静的生成。サーバー負荷を抑えながら高速なページ表示を実現しています。大量の学習者が同時にアクセスしても安定動作するよう、データベース接続のコネクションプーリングも適切に設定しました。
Results
成果
プラットフォームの公開以降、HLTの研修受講者のスキル習得速度が向上。コンテンツの更新工数も従来比で大幅に削減され、常に最新の技術情報を反映した学習環境を維持できるようになりました。
UI改善により学習開始後の継続率が改善。「どこから始めればいいかわかりやすい」「スマホでも使いやすい」という受講者の声をいただいており、学習体験の品質向上を実現しています。
Summary
まとめ・今後の展望
本プロジェクトでは、HLT自身がIT人材育成事業を展開しているというドメイン知識を最大限に活かした開発ができました。「何を学ぶべきか」「どの順序で学ぶと効果的か」というカリキュラム設計の知見が、そのままプラットフォームの機能設計に直結しました。
eラーニングプラットフォーム・社内学習システム・資格対策サービスの開発をお考えの企業様は、ぜひHLTにご相談ください。教育事業のドメイン知識とWeb開発技術を掛け合わせたシステム設計を提供します。