1. HOME
  2. 実績一覧
  3. 「HOT PEPPER Beauty cosme」Reactを活用した高速Webサービス開発支援
  • 開発

株式会社リクルート
「HOT PEPPER Beauty cosme」Reactを活用した高速Webサービス開発支援

1.プロジェクト概要

利用者が通勤中、通学中でもすぐに検索ができる環境を創出する

株式会社リクルート様(以下、リクルート様)は、ニジボックスと共に利用者が通勤中、通学中でも欲しい情報がすぐに検索して取得できる環境を作るため、Next.js + React + CDNを活用したWebサービス開発を行いました。

アウトプット

プロジェクト全体像

プロジェクト実施内容
・技術調査(Next.js + React + CDN)
・システム設計
・フロントエンド開発
プロジェクト期間
・プロトタイプ検証開発:2019年9月〜2019年10月
・本開発:2019年10月〜2020年2月
・リリース:2020年2月
体制
クライアント
・株式会社リクルート様
ニジボックス
・フロントエンドエンジニア:3名

2.プロジェクト背景

どのWebサービスよりも高速なWebサービスを創りたい

リクルート様から、電車の中などネットワーク環境が不安定な状況でも、「思い立ったらすぐに検索できる、高レスポンスなWebサービスを開発したい」とのご相談をいただきました。
サービス設計にあたって、現在導入可能な技術を検討した結果、Next.js + React + CDNを選択。これまでに類のない設計であったため、実現可能性の検証も重視し、プロトタイプの制作から開発に取り掛かりました。

3.プロセス

1)Next.js + React + CDNによる開発

私たちは、メディア型のWebサービスを開発する際の重要な2つの要件として以下を意識しました。

■UI/UX
①Webコンテンツのリッチ化
②様々な端末/環境での利用

■SEO
①コンテンツの質と量
②安定した高速なWebページ

技術的には、Next.jsとReactにCDNとAMPを組み合わせた構成を採用。要件となっている、コンテンツの質と量、Webページの速度を最大限に引き出せる形での開発を実現しました。

2)リリース後の継続的な改善

リリース後の運用フェーズでも、ご要望に応じて追加開発を行います。しかしながら、運用を続ける中で、後発的な要因から再びアプリが遅くなってしまう問題がありました。

問題への対処として、運用フェーズへの移行後もパフォーマンスモニタリングの継続を重視いたしました。 体制づくりにおいても、不具合修正や性能劣化が発生した場合は即座に改善の対処が可能な、連携感の高いチームビルディングを積極的に行っています。

具体的には、プロダクト改善に向けてのモブプログラミングの実施です。チームで同じコード画面を見ながら開発に取り組むことで、知見の平均化と連携の強いチームづくりが可能となり、組織全体の総合的な技術向上も期待できます。

4.結果

高サイトパフォーマンスを実現し、直帰率低下と目標MAUを達成

■サイト性能
・初期表示は約1.4秒。再訪ならわずか0.05秒で表示可能
・一度見たページはオフラインでの回遊が可能

■外部評価
・SEO上の指標になるCore Web Vitalsではオールグリーンを達成
・ユーザーヒアリングにおいても「表示速度が速い」という声多数

性能向上は直帰率に寄与しており、他サービスと比較しても効果的な結果を出すことに成功しました。

'