株式会社リクルート(ブライダル総研)株式会社リクルート(ブライダル総研)
icon_chevronicon_chevron
紙教材で行われていた講座の支援ツールをDX化
紙教材で行われていた講座の支援ツールをDX化
ビジネス検討からモダンフロントエンド開発を採用した開発支援
nijibox_designparts
クライアント
株式会社リクルート(ブライダル総研)
当社スコープ
既存サービスの改善
Webサイト構築・リニューアル
イラスト・アニメーション制作
開発
体制

クライアント:

  • 講座設計・設問設計・成果物承認

ニジボックス:

  • プロジェクトマネージャー:1名
  • UXデザイナー:1名
  • 制作ディレクター:1名
  • デザイナー: 1 名
  • イラストレーター:1名
  • システムエンジニア(開発Dir):1名
  • フロントエンドエンジニア:2名 
  • バックエンドエンジニア:2名
  • インフラエンジニア:1名
  • 営業:1名

期間
  • UX設計・ビジネス設計・要件定義フェーズ:2023年9月〜12月
  • 開発フェーズ:2024年1月〜6月
  • 保守・運用フェーズ(+随時エンハンス):2024年7月〜現在
実施内容

UX/ビジネス設計

  • クライアント要望確認
  • ステートメント設計
  • 課題整理とペルソナ仮説による設問最適化
  • ビジネス設計(ユースケース整理、業務フロー作成、データ設計など)
  • 運用設計

要件定義/ディレクション

  • 要件定義(機能要件/非機能要件)
  • プロトタイプ作成(Figma)
  • リクルート社内稟議申請のサポート
  • リクルート社内セキュリティー診断サポート

設計

  • WF作成(Figma)
  • デザイン作成(Figma)
  • システム設計(ER図、OpenAPI定義書、システム構成図、インフラ構成図など)

開発

  • 開発環境構築
  • フロントエンド開発実装(受講者画面)
  • バックエンド開発実装(管理者画面、API)
  • インフラ環境構築
  • CI/CDパイプラインの構築
  • 単体テスト、結合テスト、システムテスト
  • シナリオテスト
  • 負荷テスト
nijibox_designparts
クライアント課題
- 紙教材では再利用やデータ蓄積ができず、運用コストも高い - 多様な受講者の価値観を前提にした講座構成が必要で、受講者に合わせた汎用的なツールが求められていた - 回答結果の集計や振り返りの効率化も課題だった
nijibox_designparts
ミッション
自分らしい人生を描く体験をスムーズに実現。拡張性ある講座支援ツールを開発。
No items found.
No items found.
nijibox_designparts
ソリューション
■フロントエンド -開発環境:Node.js 18系 -パッケージ管理:npm -JavaScriptフレームワーク:React 18系 ---Reactフレームワーク:Next.js 14系 ---その他:TypeScript、Storybook -HTTPクライアント: Axios ■バックエンド -言語:PHP 8.3系 -PHPフレームワーク:Laravel 10系 ---その他:Larastan、Pint、Docker ■インフラ -AWS上に構築 ---アプリケーション:ECS (Fargate)、ECR、ALB、Auto Scalingなど ---DB:Aurora Serverless (v2) -----エンジン:MySQL 8系 ---その他:S3、CloudFormation、Amazon CloudWatch Logs、ACMなど ■その他 -API仕様書: OpenAPI ---モックサーバー:Prism ---コードジェネレーター:Orval -負荷テストツール:Locust -CI/CDパイプライン:GitHub Actions -ドキュメント:GitHub Wiki、 Mermaid、draw.io
nijibox_designparts
講座目的に寄り添ったステートメント整理

クライアントとの協働によるビジネスコンセプトの明確化とデジタル化戦略の策定

要件整理フェーズでは、クライアントとのヒアリングを通じ、ビジネスコンセプト・現行の運用方式・それらに対する課題を把握。また、実際の『ライフデザイン講座』も受講し、これらの情報を「ステートメントシート」にまとめることで、デジタル化の狙いや範囲、ビジネスの骨組みを明確に定義しました。その後、デジタル化後の業務フローを作成し、新しい運用についてクライアントと共に設計・デジタル化の方向性を決定させたことで、要件定義工程へスムーズに移行することができました。

No items found.
nijibox_designparts
デザインプロトタイプを駆使し、クライアントと共に描いた理想の画面

限られた講座時間の中でも、受講者が「無理なく・楽しく・自分の人生を考えられるように」という思いを実現するため、デジタル化後のデザイン検討は重要課題でした
ブラウザ上の操作となると、どうしても紙を使った講座より自由度が下がってしまいます。それでも「楽しさ」を感じながら講座に取り組んでもらえるように、親しみやすいUIを検討しました。また、Figmaを使用してデザインプロトタイプを作成し、クライアントに具体的なデザインと操作感を体験してもらうことで、フィードバックが得やすくなり、画面仕様を詳細に効率よく決定していくことができました。

さらに、プロトタイプの作成と並行して、データ設計などシステム面の設計も実施。上流工程で多くの改善点を見つけ、システム基盤の設計を固めることで、後工程での大きなフィードバックや手戻りを防ぎ、プロジェクト全体をスムーズに進行させることができました。

No items found.
nijibox_designparts
フルスタック開発による効率化と品質向上の取り組み

設計、実装、開発環境を含むインフラ構築、テスト、納品までをフルスタックで対応しました。

限られた時間で複雑な仕様を実現するため、手戻りを最小限に抑えることを目指し、フロントエンドとバックエンドのスムーズな連携を図るために詳細設計に注力しました。また、生産性と品質向上のためのツールも導入し、作業者が実装に専念できる環境を整えました。

さらに運用面では、人の手を介さずにアプリケーション性能を担保できる仕組みを実現しました。

◼︎フロントエンド開発の効率化と品質向上

  • フロントエンドのUIパーツを個別に開発・テストするためのStorybookを導入しました。これにより、バックエンドがAPIを完成するのを待たずにフロントエンドの実装を独立して行えるため、開発のスピードが大幅に向上しました。
  • Prismを使用してOpenAPI(API仕様書)からモックサーバーを自動で構築しました。仕様書のデータを活用して模擬APIを作成することで、結合テストに近い環境で実装や単体テストを行うことができ、バグの早期発見につながりました。この取り組みにより、実際のバックエンドとの結合がスムーズに実施できるなど、開発の生産性が向上しただけでなく、全体的な品質の向上にも寄与しています。
  • API仕様書からTypeScriptのコードを自動生成するOrvalを導入しました。これにより、API実行処理やリクエスト・レスポンスのパラメータ定義が自動で生成され、開発のスピードが大幅に向上しました。その結果、コード設計や実装により多くの時間を割くことが可能になりました。

◼︎バックエンドの効率化と品質向上

  • 管理者画面は、あらかじめデザインされたUIコンポーネントを提供するPreline UIを使用して実装しました。これにより、画面の設計やデザインにかかる時間を大幅に短縮し、開発コストの削減にもつながりました。
  • コード整形ツールのPintとコード解析ツールのLarastanを導入し、コードの規約チェックやエラー、問題点の指摘を自動化。これにより、実際の機能面を最適化する時間を十分に確保することができ、コードレビューの時間削減にもつながりました。


◼︎不定期な講座開催に対応した自動運用システムの構築
普段は管理者のみが使用するシステムですが、講座がある時間には最大400人の受講者が同時にアクセスします。負荷テストツールのLocustを使用して同時に400人がアクセスする状況を再現し、必要なシステム性能を算出しました。これをもとに、普段は低スペックでコストを抑え、講座がある時だけ自動で性能を切り替える仕組みを構築しました。

これにより、不定期な講座開催でも人の手を介さずに運用でき、運用コストの削減とアプリケーション性能の両立を実現しました。

No items found.
nijibox_designparts
実運用に基づくテストで実現した高品質システム

システムの品質を確保するため、システムテストに加えて実際の運用業務に基づいたシナリオテストと負荷テストを実施しました。これにより、機能の正確性とパフォーマンスを確認し、実運用に耐えうる堅牢なシステムを構築しました。

No items found.
nijibox_designparts
継続したエンハンス対応によるビジネス成長

初期構築では最小限の機能でシステムを立ち上げ、運用を通じて浮かび上がった課題に対してエンハンス対応を行っています。エンハンス時には要件定義から開発まで一気通感で進めますが、ビジネスの成長を目指し、費用対効果を考慮しながらも「楽しい!ワクワクする!」と感じられる機能を提案させていただきました。

No items found.
nijibox_designparts
成果
講座に取り組むことのワクワク感はそのままに、受講者に応じた柔軟な講座実施が可能に。

紙教材による講座運営では、設問変更の難しさやデータの蓄積・活用が困難といった課題がありました。

これらの課題に対し、設問テンプレート単位で講座を柔軟に構成できる仕組みや、受講データの保存・再利用が可能なデジタルツールをフルスクラッチで開発することで、講座の目的や対象に応じた柔軟なカスタマイズを可能にしました。

結果として、各講座ごとに内容を最適化しやすくなっただけでなく、受講者データの蓄積や分析といった、デジタルならではの活用にもつながる仕組みを実現しました。  

お客様の声
nijibox_designparts
株式会社リクルート(ブライダル総研)
株式会社リクルート(ブライダル総研)
※本記事の内容は、記事作成当時の情報です
開発についてもお気軽にご相談ください
開発について詳しく見る
UI UXデザインのお役立ち情報を無料公開中!
nijibox_pattern
nijibox_資料ダウンロード
UI UXデザイン概要やその他の実績も掲載!
ニジボックスはリクルートのノウハウを活かし、お客様の事業フェーズに合わせて、UXデザインフローをご用意。課題に即したサービスを提供しております。
こんな方におすすめ
square
ニジボックスの強みを知りたい方
square
具体的なデザインフローを知りたい方
square
ご相談事例ごとの参考価格を把握したい方
ほかの実績
実績一覧へ戻る