月間数百万PVのサイトで商品一覧ページをベストプラクティスに沿って改善した話
家電レンタルサービス レンティオでCTOを務める神谷（@kmy4_）と申します。
先日、レンティオの商品一覧画面をリニューアルしました。レンティオをご存じでない方のためにお伝えしておくと商品点数が数千、月間のページビューが数百万ほどの規模感のサイトです。
今回リニューアルした商品一覧画面や絞り込み機能は訪問者がサイト内を快適に回遊するためにとても重要なページです。こういったページは多くのサイトに存在していることから先人の知恵が多く蓄積されベストプラクティスの確立されている領域でもあります。
今回のリニューアルに際してリサーチを重ねたのですが、Webの世界に長いこと身をおいているものの新しい発見も多かったです。せっかくの機会でもあるので記憶が新しいうちに書き残しておこうと思います！
1. リニューアルした点
まず最初に、こちらがリニューアル後のページです。
PCでは画面左、スマホではモーダル形式のメニューがあり、複数軸での商品絞り込みが可能となっています。このメニューはファセットナビゲーションと呼ばれるもので、Amazonや楽天といった大型サイトでも採用されているUIです。今回のリニューアルはこのファセットナビゲーションの導入とURL設計の変更という大きく2つの軸で進めました。
2. リニューアルの目的
今回のリニューアルの目的はユーザー体験とSEOの改善という大きく2点でした。
2.1 ユーザー体験の改善
レンティオでは「カスタマーファースト」を指針として掲げており、オンライン/オフライン問わずユーザー体験を重要視しながらサービス設計を行っています。
リニューアル前の体験が悪かったみたいな話ではないのですが、レンティオで取り扱う商品ラインナップは日に日に増加し、ついには1万点を目前とする状況になりつつありました。それに伴ってこれまでのサイト構成では商品の検索や絞り込みに難が出てきており、よりスムーズに商品を探せるよう検索・絞り込みの改善を検討しておりました。
2.2 SEOの改善
たとえば「双眼鏡 レンタル」でGoogle検索したときは良いのですが「双眼鏡 キヤノン レンタル」「双眼鏡 倍率10倍 レンタル」のような複数キーワードでの検索に対して返すべき適切なページがインデックスされにくい状態となっており、特にロングテールの検索流入に課題を感じておりました。
そこでサイト内のURL構造や商品分類の構造を見直すことで、ユーザーの検索意図に沿ったページを返せるサイト構成を目指しました。
3. リニューアルの方向性
今回のリニューアルについては、次の2点を意識することで意思決定コストを減らすことを意識して取り組んでいます。
- ベストプラクティスに倣う
- 迷ったら専門家に判断を仰ぐ
商品一覧や検索機能については、長年多くのサイトで試行錯誤が続けられてきた重要要素の1つであり、最適解が確立されている領域でもあります。そのような背景もあり、我々としては試行錯誤を頑張ったり独自性を出すといったことはせずに「確立されているベストプラクティスに倣う」ことを意識してプロジェクトを進めました。
ベストプラクティスに倣うということは、よく見る形になるということです。そういう意味では結果的にあまり目新しいものにはならなかったですね。それが結果的に多くの人が慣れ親しんだUIに着地したということかなと思います。
加えて我々は社内にSEO専任者がいるわけではないため、以前からお付き合いのあったSEOコンサルティングを手がけるLANYさんの見解も伺いながらサイト設計を進めておりました。
ベストプラクティスが確立されているとはいえ、仕様を固める上ではメリデメある複数の選択肢があがってくることも多いです。そういった各局面でベストと思われる選択肢とその根拠を迅速にいただくことができたので、我々が独自に調べながら判断するよりも時間的にも判断の信頼性という観点でもメリットが大きかったように感じています。
4. ファセットナビゲーションの導入
4.1 ファセットナビゲーションとは
ファセットナビゲーションは、複数の属性（ジャンル、メーカー、利用シーンなど）を掛け合わせて検索・絞り込みができるUIのことを指します。Amazonや楽天などの大手を始め数多くのサイトで採用されており広く普及しています。
ちなみにファセット（facet）とは、宝石のカット面を意味し、複数の視点で情報を整理することに由来しているようです。
またファセットナビゲーションについてはこちらのサイトがとてもわかりやすくまとまっており、ファセットを理解するうえで大きな助けになったため紹介させていただきます。
4.2 導入経緯
サイト上での取り扱い商品点数が多くない場合、シンプルな階層型の一覧画面のほうが結果的に扱いやすいといったこともあるかもしれません。しかし、レンティオでは以前と比べて取り扱い商品数やジャンルが広がってきており、単純なカテゴリ分けだけではユーザーが求める商品にたどり着きにくくなっていました。またメーカーや利用シーンといったカタログ情報も充実してきていたことからファセットナビゲーションの開発に踏み切ることとなりました。
4.3 ファセットナビゲーションにおけるベストプラクティス
ファセットナビゲーションを作るうえでもいくつか押さえるべきポイントがあるようです。それについては次のAlgoliaのブログを参考にしました。ちなみにAlgoliaは我々が裏側で使っている全文検索サービスです。
ポイントをいくつかかいつまんで紹介させていただくと、
- ファセット選択後の表示数を予測できるよう件数を表示しておく
- 絞り込みと並び替えをセットでスムーズに行えるようにする
- 選択中条件を簡単に解除できるようにする
といった機能です。これらも日常生活の中で使い慣れたUIですね。今回のリニューアルでは部分的に妥協した箇所はありますが、おおむね実現できたのではないかと思います。
PC版のレイアウトが次のような感じです。
5. URL構造の見直し
前半に記載した通り、今回のリニューアルはUXに加えてSEOの改善も目的としています。
ファセットナビゲーションを論じる際にはセットでURLの最適化についても触れられることが多いように思います。GoogleもファセットナビゲーションにおけるURL構成の記事を2014年時点で公開しています。
また2024年12月にもファセットナビゲーションのクロール管理に関するドキュメントを公開されています。
これらのドキュメントの内容から外れないように気を付けながらURLを設計しました。
5.1 見直し内容
さて、繰り返しにはなりますが我々が抱える課題としては、たとえば「双眼鏡 レンタル」では検索で上位に表示されるものの「双眼鏡 キヤノン レンタル」「双眼鏡 倍率10倍 レンタル」のような複数条件での検索において適切なページを返せるサイト構成になっていなかったこともあり、ロングテールキーワードに伸びしろがあったという点です。
そこで、商品ジャンル x メーカー、商品ジャンル x 利用シーンといった複数条件での絞り込みページを静的URLで表現し、それらのページをGoogleにインデックスしてもらうことでユーザーの検索意図により近いページを提示するといったことを行いました。たとえばカメラ x ソニーの絞り込みページは次のようなURLになります。
https://www.rentio.jp/t/genre/camera/maker/sony
蛇足ですが、他サイトではURLに内部的なIDを使うパターンをよく目にしました。/genre_123/maker_456 みたいなイメージです。我々はURLの視認性も考慮して、内部的なIDでなくslugを使っています。このあたりはもはや好みの問題かなあとも思いますが。
5.2 留意点
ファセットの種類と数が多いとかけ合わせ条件のパターンが爆発的に増え、クロールやインデックス対象が分散してしまうといった問題もあります。それを避けるための方法としてURLの正規化やrobots.txtでの制御、商品の存在しない組み合わせのURLはクロールさせない等のTipsが先ほど紹介したGoogleの記事に掲載されています。
我々としてもインデックス対象のページはジャンル × 利用シーン、ジャンル × メーカーの組み合わせのみ、かつ商品が1点以上ある組み合わせに限定しました。
また、たとえばソニー x カメラのURLを /genre/camera/maker/sony としていますが、 順序を入れ替えただけの/maker/sony/genre/camera というURLが両方存在するのもアンチパターンということでそういったURLが存在しないよう配慮する必要もありました。
このあたりは要件も複雑で、開発を担当していただいたエンジニアの方は苦労されたと思います...そのあたりの話はもしかしたら今後記事が出るかもしれません。
6. まとめ
以上となります。今回のリニューアルについては、リリースを早く行うため一部後回しにしている要件も多少ありますが、重要なポイントについては実践できたのではないかと思います。
まだリリースしたばかりということもあり答え合わせはこれからですが、さらに改善していきたいポイントもすでにいくつか目処が立っていますので、より使いやすいサービスを目指して引き続き改善を続ける考えです。
ということで、レンティオとしてはある程度のフェーズまでは来ることができたものの、我々が実現したい世界までにはまだまだやるべきことが山積みです。エンジニアやPdM、SEOディレクターの方など私達と一緒にこれからのレンティオを育てていっていただける方を募集しています。もし少しでも興味をお持ちいただけたら次のページもぜひ御覧ください！
Discussion