非公開動画eラーニング配信システム実績

UIコンポーネント共有と静的HTML要件
ユーザー画面と管理画面など複数のアプリケーションで再利用可能なUIコンポーネント集の構築が求められました。UIとシステム組込の工程を完全に分業する方針の中、システム側への組み込みを容易にするため画面を100%静的なHTMLで生成する必要がありました。また、完成したUIコンポーネントをカタログ化してチーム全体で共有し、迅速に開発を推進できるテックリードが必要とされていました。

Storybookと静的サイトジェネレーターのministaを活用し、完全に静的なHTMLとアセットを出力するUIコンポーネントライブラリを実装しました。React製のコンポーネントから静的ファイルを生成することで、要求された静的HTML要件を満たし、システム組込に最適化されたUIを提供しました。

静的HTML出力に対応したUIコンポーネント開発基盤の構築からプロジェクトを開始し、新しいコンポーネント設計指針を策定しました。

• Storybook導入によるUIコンポーネントのドキュメント兼カタログ整備
• React + minista（Viteベース）による静的HTML/アセット出力環境の構築
• MUI UnstyledとCSS Modules採用によるCSS分離とスタイル組み込み負担の軽減
• ユーザー画面・管理画面双方で再利用可能な汎用コンポーネント設計の徹底

Storybookを使って構築したUIコンポーネントカタログの画面イメージ。チーム全員がブラウザでコンポーネントを一覧・検証でき、ドキュメントとしても活用されています。

UIコンポーネントをヘッドレスに静的出力する構成としたことで、システム側の実装との結合度を下げ、UIとバックエンドの並行開発が可能になりました。Storybook上のコンポーネントカタログによって、実装済みコンポーネントを誰でも容易に確認でき、コンポーネントの共有・管理コストを大幅に削減しました。その結果、システム開発チームはUI実装のボトルネックを意識することなく、新機能の開発やサービス改善施策を迅速に進められる体制が整いました。