株式会社リクルートテクノロジーズ（本社：東京都千代田区、代表取締役社長：清水 淳、以下リクルートテクノロジーズ）が開発に携わった、「ホットペッパービューティーコスメ(※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：https://www.recruit.co.jp/support/form/