絞り込むたびにページが最初に戻る、あの”使いにくさ”

ネットショップや物件・求人サイトで商品を探すとき、条件を1つ選ぶたびにページ全体が再読み込みされ、スクロール位置も先頭に戻ってしまう――。あの小さなストレスが積み重なると、ユーザーは探すのをやめて離脱してしまいます。せっかく在庫や商品が充実していても、「探しにくい」だけで機会を失うのは、非常にもったいない状態です。

今回の開発事例レポートは、WooCommerceで作られたスマホ販売サイトから、「絞り込み検索の使い勝手を改善したい」とご依頼いただいた案件です。

結論からお伝えすると、絞り込むたびに再読み込みされる使いにくさは、AJAXでリロードなしの検索に作り替えれば解消できます。今回はキャリア・メーカー・容量など多数の条件を、ページ遷移なしで即座に結果へ反映できるようにし、あわせて表示速度も改善しました。ただ正直なところ、AJAXの実装よりも「既存データの構造解析」のほうが、はるかに大きな山場でした。

ご相談：条件を絞り込むたびにページ遷移が起きてしまう

ご相談時のサイトは、検索条件を変えるたびにページ遷移（再読み込み）が発生する仕様でした。スマホは、キャリア・メーカー・容量など条件が多く、ユーザーは何度も絞り込みます。そのたびにページが切り替わるため、操作性が良くありません。「条件の変更に応じて、該当する機種や件数が、ページ遷移なしで動的に切り替わるようにしたい」というのがご要望でした。あわせて、ページの読み込み速度の改善もご依頼いただいていました。

じつは一番の山場は、AJAX化の前の「データ構造の解析」だった

意外に思われるかもしれませんが、この案件で一番苦労したのは、AJAXの実装そのものではありません。既存の商品データが、どういう構造で登録されているかを読み解くことでした。スマホはカスタム投稿タイプで管理され、キャリア・メーカー・容量といった項目が多数ありましたが、その登録のされ方が揃っていなかったのです。

具体的には、ある項目は「タクソノミー（分類）」として登録されていて絞り込みに使える一方、別の項目は「商品情報のカスタムフィールド」として入っていて、そのままでは検索・絞り込みに使えない、という状態でした。下の画面が、その分かりにくさを示す例です。同じ”キャリア”という情報でも、登録されている場所によって、検索できるものとできないものが混在していました。

同じ「キャリア」でも、タクソノミーとして登録されていれば検索可能、商品情報のカスタムフィールドだと検索困難という、データ構造の不揃いを示すWooCommerceの管理画面

さらに、パンくずリストの構造も複雑でした。こうした状態でいきなりAJAX化に手をつけても、うまくいきません。まずは「何を検索の軸にできて、何ができないのか」を丁寧に整理するところからのスタートでした。派手な新機能よりも、こうした地味な”既存の状態を読み解く”作業こそが、実は開発の成否を分けます。

提案：左に条件を固定し、AJAXでリロードなしに。なぜこの形にしたか

整理ができたら、UIの設計です。今回は画面の左側に検索条件を固定表示し、右側のメインエリアに結果を出すレイアウトにしました。条件を変えると、AJAX（非同期通信）でページを再読み込みせずに、結果と件数が即座に切り替わります。

「なぜ左固定か」には、2つの理由があります。

うまくいっている競合サイトの実装方式を採用した：ゼロから奇抜なUIを考えるより、すでに使いやすいと実証されている型を採り入れるのが確実だからです。
デスクトップの操作性も改善したかった：アクセスはスマホだけでなくデスクトップからも多く、広い画面で条件を常に見せられる左固定が向いていました。

実装は、カスタム投稿タイプとカテゴリー（ターム）を活用し、条件変更時にAJAXで結果を即反映する形にしました。表示件数の設定やページャー（ページ送り）機能も、新たに実装しています。

PCは左に検索条件を固定して右に結果を表示、スマホは条件をアコーディオンで畳む、リロードなしの絞り込み検索レイアウト

地味に手強い「件数カウント・並び替え・ページネーション」

AJAX検索で意外と手こずるのが、絞り込み・並び替え・ページ送りの整合性です。条件を変えるたびに「該当◯件」を正しく数え直し、並び替えやページ送りの状態と、絞り込み条件を破綻なく連動させる必要があります。ここは正直、地道に一つずつ詰めていく作業でした。

また、スマホでは検索条件エリアが縦に長くなりすぎると、肝心の商品にたどり着く前にスクロールで疲れてしまいます。そこで、条件エリアをアコーディオン開閉式にして、必要なときだけ開ける形にし、画面を圧迫しないよう工夫しました。

コミュニケーションの山場：オーナーは海外の方だった

技術以外にも、印象に残った山場があります。実は、ご依頼をお引き受けした時点では気づいていなかったのですが、オーナー（やり取りの相手）が海外の方でした。対面で打ち合わせをして、初めて分かったのです。日本語は話せる方でしたが、細かいニュアンスは時々うまく伝わらないことがあり、認識合わせには工夫が要りました。

こうした場面でこそ効くのが、言葉だけに頼らず、実物を見せて確認する進め方です。文章での説明が難しいときほど、実際に動く画面を見ながら「これで合っていますか？」と確認する。技術力だけでなく、こうした伝え方の工夫も開発の一部だと、あらためて感じた案件でした。

成果：操作性が上がり、とても喜ばれた

リロードなしの検索によって、絞り込みの操作性は大きく向上し、とても喜んでいただけました。あわせてご依頼のあったページの表示速度も改善できています。なお、今回は在庫の連動をこちらで作り込む必要はなく、そこはWooCommerceの仕組みに任せられたのは幸いでした。

正直にお伝えすると、問い合わせや売上といったCVの数値については、フィードバックをいただけていません。ただ、検索のたびに待たされていた状態から、条件を変えた瞬間に結果が切り替わる状態へ。この「探しやすさ」の改善が、離脱を減らす方向に働くのは間違いありません。表示速度の改善について詳しくは、WordPressの表示速度を改善する方法もあわせてご覧ください。