株式会社リクルート株式会社リクルート
icon_chevronicon_chevron
「HOT PEPPER Beauty cosme」Reactを活用した高速Webサービス開発支援
「HOT PEPPER Beauty cosme」Reactを活用した高速Webサービス開発支援
Next.js + React + CDNを活用した高速Webサービス開発
nijibox_designparts
クライアント
株式会社リクルート
当社スコープ
開発
体制

クライアント

  • 株式会社リクルート様

ニジボックス

  • フロントエンドエンジニア:3名
期間
  • プロトタイプ検証開発:2019年9月〜2019年10月
  • 本開発:2019年10月〜2020年2月
  • リリース:2020年2月
実施内容
  • 技術調査(Next.js + React + CDN)
  • システム設計
  • フロントエンド開発
nijibox_designparts
クライアント課題
株式会社リクルート様(以下、リクルート様)は、電車の中などネットワーク環境が不安定な状況でも、「思い立ったらすぐに検索できる、高レスポンスなWebサービスを開発したい」と考えていらっしゃいました。
nijibox_designparts
ミッション
利用者が通勤中、通学中でもすぐに検索ができる環境を創出する
nijibox_実績_HOT PEPPER Beauty cosme
No items found.
No items found.
nijibox_designparts
ソリューション
サービス設計にあたって、現在導入可能な技術を検討した結果、Next.js + React + CDNを選択。これまでに類のない設計であったため、実現可能性の検証も重視し、プロトタイプの制作から開発に取り掛かりました。
nijibox_designparts
Next.js + React + CDNによる開発

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

■UI/UX

①Webコンテンツのリッチ化

②様々な端末/環境での利用

■SEO

①コンテンツの質と量

②安定した高速なWebページ

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

No items found.
nijibox_designparts
リリース後の継続的な改善

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

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

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

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

■サイト性能

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

■外部評価

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

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

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