JetSmartFiltersのAJAX絞り込みで一覧ページを使いやすくする考え方

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

制作事例一覧にカテゴリの絞り込みを付けたのに、条件を選ぶたびにページ全体が読み直される。これだけで、読者は少し待たされます。PCでは気にならなくても、スマホでは一瞬の引っかかりが積み重なります。

今回作るのは、JetEngineで作った制作事例一覧に、JetSmartFiltersのAJAX絞り込みを組み合わせる構成です。ページ全体を再読込するのではなく、一覧部分だけを滑らかに更新する検索UIを目指します。

ただし、AJAXにすれば何でも速くなるわけではありません。元の一覧が重い、画像が大きい、条件が多すぎる、対象の一覧が正しくつながっていない。そういう状態では、動きだけを変えても使いやすくなりません。

この記事で作るもの

例として、Web制作会社の「制作事例一覧」を作ります。静的なElementorページでも事例カードは並べられますが、事例が増えるとカテゴリ別ページを作る作業が面倒になります。業種別、予算別、担当範囲別に見せたいなら、事例をデータとして管理した方が自然です。

今回の検索条件は、次の3つに絞ります。

最初からキーワード検索、タグ検索、価格スライダー、複数の並び替えまで入れない方が扱いやすいです。制作事例ページでは、読者が本当に知りたい条件を3つ程度に絞るだけでも十分に探しやすくなります。

JetEngineでは、制作事例を入れるデータの箱（CPT）を case_study として作ります。表示名は「制作事例」です。各事例に、一覧カードと絞り込みに必要な入力項目を持たせます。

表示名	フィールド名	タイプ	サンプル値	用途
業種	`industry`	SelectまたはTaxonomy	美容	業種フィルター
予算帯	`budget_range`	Select	30〜80万円	予算フィルター
担当範囲	`work_scope`	Checkbox	WordPress構築	対応内容フィルター
公開状態	`case_status`	Select	公開 / 下書き確認	一覧に出すか判断
メイン画像	`main_image`	Media	事例画像	カード表示

業種は文字入力でも作れますが、表記ゆれが起きやすいです。「美容」「美容室」「サロン」が混ざると、絞り込み結果も散らかります。選択肢として管理するか、分類として管理するかを先に決めます。検索に使う項目ほど、自由入力にしすぎないのが実務では大切です。

Elementor側では、制作事例1件分の一覧テンプレートを作ります。カードには、事例画像、業種、担当範囲、短い説明、詳細ページへのリンクを置きます。予算帯は出してもよいですが、実績ページで細かく見せたくない場合は、フィルター条件としてだけ使う選択もあります。

一覧表示では、JetEngineのListing Gridを置き、制作事例のデータを並べます。ここで先に一覧が正しく出ていることを確認してから、JetSmartFiltersを置きます。フィルターを先に作ると、うまく動かないときに「フィルターが悪いのか、一覧が悪いのか」が分かりにくくなります。

カード構成は次の程度から始めると、検索結果として読みやすいです。

JetSmartFiltersでは、フィルターがどの一覧を対象にするかをProviderとしてつなぎます。AJAX更新を使う場合も、この対象一覧の指定が基本です。Providerが合っていないと、条件を変えても一覧が変わらなかったり、別の一覧が更新されたりします。

設定としては、次のように考えます。

条件が少ないなら、値を変えた瞬間に一覧が更新される形でも使いやすいです。条件が多い場合は、読者がいくつか選んでから「適用」する方が落ち着いて操作できます。更新タイミングは速さではなく、迷わなさで選ぶと失敗しにくいです。

AJAX検索で意外と大事なのが、読者が今どの条件を選んでいるかを見せることです。ページ全体が再読込されないぶん、状態の変化が分かりにくいことがあります。選択中の条件をチップのように表示し、外せるようにしておくと、読者は戻りやすくなります。

たとえば「美容」「30〜80万円」「WordPress構築」を選んだときに、一覧の上にその条件が並ぶ形です。条件を外すと、一覧だけが再度更新されます。検索結果が0件になった場合も、どの条件が効いているのか分かるので、読者が自分で戻せます。

特にスマホでは、フィルター欄が画面上部にあり、結果は下に出ることが多いです。選択中条件を一覧の直前に置くと、「今この条件で見ている」と分かりやすくなります。

AJAX更新は便利ですが、すべての一覧で必須ではありません。検索条件が1つだけで、ページの構造も単純なら、通常更新でも十分な場合があります。逆に、事例一覧のようにページ内で何度も条件を変えながら見る画面では、AJAXの方が体験は軽くなります。

判断の目安は次の通りです。