ニュース

  1. リクルートテクノロジーズ
  2. ニューストップ
  3. リクルートテクノロジーズ、最新のAMP技術を活用し、「ホットペッパービューティーコスメ」のWeb版を開発 ~大量の画像を有するページでも読込速度1.2秒を実現。ユーザーの「いま知りたい!」に応える~

リクルートテクノロジーズ、最新のAMP技術を活用し、「ホットペッパービューティーコスメ」のWeb版を開発 ~大量の画像を有するページでも読込速度1.2秒を実現。ユーザーの「いま知りたい!」に応える~

株式会社リクルートテクノロジーズ(本社:東京都千代田区、代表取締役社長:清水 淳、以下リクルートテクノロジーズ)が開発に携わった、「ホットペッパービューティーコスメ(※1)」のWeb版が2020年2月27日(木)より公開。本開発においては、最新版のAMP(※2)が活用されており、ページの高速表示によって快適なユーザー体験を実現します。

※1 下記の「ホットペッパービューティーコスメについて」に概要を記載
※2 Accelerated Mobile Pagesの略。WEBページの高速表示を実現するためのフレームワーク

Web版開発におけるポイント ~AMP、PWAの活用による、優れたUXの提供~

<AMPの活用により、スムーズな検索体験を提供>

今回の開発を進めるにあたっては 「コスメの情報・口コミは店頭で気になったときにすぐ知りたい」「地下鉄の中や地下にある店舗でもスムーズに検索したい」といったユーザーの声を参考にしました。

それらを受けて、本サービスにおいては、時や場所を選ばずにスムーズな検索体験を提供することを目的の一つとして開発。Webページの高速表示を実現できるAMPを採用しました。
AMPの活用により、100枚程度の画像を有するトップページにおいても読込速度約1.2秒(※3)での表示を実現しました。
これにより、スムーズな検索体験の提供を可能にしています。

※3 モバイル環境におけるChrome User Experience Reportの結果
  

<PWAの活用により、DL済コンテンツのオフライン利用が可能に>

本サイトを開発するにあたり、PWA(※4)を活用しました。PWAの機能の1つであるService Workerを使ったキャッシュの活用により、あらかじめ閲覧したページはオフライン環境でも表示可能にしました。これにより、「何度も参照する情報はすぐに見たい」というユーザーの声に応えました。

他にも画像のカルーセル表示、サイドバーやトップに戻るボタンの付加、検索のサジェスト機能の実装などにより、ユーザーに 寄り添った体験の提供を目指しています。

※4 Progressive Web Appsの略。WEBページでネイティブアプリのようなUXを提供するための技術群

ホットペッパービューティーコスメについて

「ホットペッパービューティーコスメ」は、株式会社リクルートライフスタイルが運営する、コスメ専用ユーザー投稿型サービスです。iOSアプリ版は2019年3月に提供開始しています。

■URL:https://hpbcosme.com/
■Web版提供開始日:2020年2月27日(木)

お問い合わせ先

株式会社リクルートテクノロジーズ PR事務局(アウル株式会社内)
TEL:03-5545-3888  FAX:03-5545-3887  MAIL:rtc-ml@aur.co.jp

PDFダウンロード

カテゴリーから探す