株式会社リクルート株式会社リクルート
icon_chevronicon_chevron
『スタディサプリ 中学講座』ベーシックコース PC版Webアプリケーションリニューアル開発支援
『スタディサプリ 中学講座』ベーシックコース PC版Webアプリケーションリニューアル開発支援
Next.js+React+GraphQLを活用した中学生向け学習Webサービスのリニューアル開発
nijibox_designparts
クライアント
株式会社リクルート
当社スコープ
Webサイト構築・リニューアル
開発
体制

クライアント

  • 株式会社リクルート様

ニジボックス

  • フロントエンドエンジニア: 2名
期間
  • 開発:2021年7月〜2022年2月
  • ローンチ:2022年2月
実施内容
  • 技術調査
  • フロントエンド開発(Next.js+React+GraphQL)
nijibox_designparts
クライアント課題
株式会社リクルート様は、『スタディサプリ 中学講座』ベーシックコースについて、リニューアルを検討されていました。中学生の学習実態にあわせた学習効果が高く継続しやすいサービスとするため、PC版Webアプリケーションの開発支援のご相談をいただきました。また、リニューアルに際して、既存サービス開発時の課題を解消するため、GraphQLを組み込んだ環境でのプロダクト開発をご希望でした。
『スタディサプリ 中学講座』 ベーシックコースとは?

「『スタディサプリ 中学講座』ベーシックコース」は、何かと忙しい中学生でも、ちょっとしたスキマ時間を利用した学習を可能にするサービスです。移動中にはスマホで授業動画や演習問題に手軽にアクセスでき、定期テスト前にはタブレットやパソコンを利用して、テキストを見ながらじっくり学習に取り組むこともできます。

また、学校での授業の進行度や学習記録から、今やるべき学習を一目で分かるようにまとめたミッション機能を搭載しています。一週間の学習を「今週のミッション」として提案してくれるので、迷わず学習を開始できるのが特長です。

nijibox_designparts
ミッション
既存の開発課題を解消しながら、UI構築難易度の高いプロダクト開発を迅速に進める
nijibox_実績_リクルート
No items found.
No items found.
nijibox_designparts
ソリューション
今回、モダンフロントエンド技術であるGraphQLを採用した環境でプロダクト開発に取り組みました。 『スタディサプリ 中学講座』ベーシックコースのPC版Webアプリケーションは、他のプラットフォームよりも遅れて開発がスタートしましたが、UI要件の難易度が高い中、ビジネス要件である 2022年2月のリリースを達成すべく、品質を保ちながらも迅速に開発を進行いたしました。
nijibox_designparts
モダン技術への適応

既存のプロダクト開発時には、ドキュメント化されないAPIが続々と生まれ、仕様への理解が特定の個人に依存してしまう課題がありました。

リニューアルに際しては、この課題を解決するためにGraphQLが技術スタックとして選定されました。GraphQLを使用することで自然とスキーマ駆動の開発体制となり、結果としてドキュメントが整理されます。

実際の開発では、クライアント側でスキーマを確認してクエリを決定することができるため、無駄なコミュニケーションを省くことができました。

また、デザインシステムの管理にAtomic Designを採用しているプロジェクトであったため、今回はFragment Colocationを意識。各コンポーネントに対して、GraphQLのFragmentを定義することをグループ内で認識を合わせた上で開発を進めています。

No items found.
nijibox_designparts
開発基盤のアップデート

ビジネス要件のリリース期日を達成するため、開発速度を上げながら品質を担保すべく、開発基盤のアップデートを行いました。

具体的には、開発生産性の向上を目的として、Storybookを活用した画面の自動テスト機能を追加し、画面のデグレーションを検知できる環境を整備しました。プロダクトとしてのコード開発のみでなく、開発環境を継続的に整える施策を並行して実施している形です。

結果として、予定通りのスケジュールでリリースを完了し、リリース後も大きな不具合はありませんでした。

nijibox_実績_リクルート
No items found.
nijibox_designparts
学習ページの実装

ユーザーが問題を解く学習画面は、下記のようにUI要件の難易度が高いページとなっていました。

  • 数式や化学式、動画や音声メディアが多く使われるページである
  • 学習アプリケーションという特性上、縦書き文章を表示させる箇所もある

これらの条件がある中、ニジボックスが担当するPC版Webアプリケーションの開発とは別にスマホ・タブレット用のNative Appの開発も進行していました。ですが、学習画面については、Native AppにおいてもPCアプリケーションと同じ画面をWebviewで表示させる仕様となっていたため、両環境で適切な表示を実現する必要がありました。

特に縦書きの文章については、既存のプロダクト開発時にはHTMLとCSSでの実装が断念され、やむなく画像で表示させていたのですが、この機会にデバイス種別ごとに綿密な調査をおこない、問題作成チームとも認識をすり合わせながら進めたことで、実装を実現できています。

nijibox_実績_リクルート
nijibox_実績_リクルート
No items found.
nijibox_designparts
No items found.
nijibox_designparts
No items found.
nijibox_designparts
成果
短期間で高品質なアプリケーションをリリースすることで、ビジネス要求に応えた

中学生の学習アプリケーションというサービスの特性上、学年が切り替わる前の2月にリリースをするということはとても重要でした。スケジュールの限定される中、モダン開発体制を整えることで品質と開発スピードを両立。無事クライアントのビジネス要件を達成し、高品質なサービスニューアルを実現することができました。

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