0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Shopifyのコレクションページに絞り込み・検索・並び替えを追加する方法|おすすめアプリ徹底比較

0
Posted at

Shopifyのコレクションページに絞り込み・検索・並び替えを追加する方法|おすすめアプリ徹底比較

はじめに

Shopify でストアを運営していると、商品数が増えるにつれて「お客様が欲しい商品にたどり着けず離脱してしまう」という悩みに直面します。特にコレクションページ(商品一覧ページ)に絞り込み・検索・並び替えの導線が無いと、お客様は延々とスクロールして商品を探すことになり、購入前に離脱してしまいます。

Shopify テーマの標準機能だけでは、価格帯やタグ、ましてやメタフィールドを使った柔軟な絞り込みまではカバーしきれません。そこで登場するのが、コレクションページに絞り込み・検索・並び替え機能を追加する Shopify アプリです。

この記事では、実際に開発ストアへアプリをインストールして触りながら、Shopify で商品の絞り込み・検索・並び替えを実現する方法と、代表的なアプリ5本(自社アプリを含む)を徹底比較します。アプリストアの説明文を読んだだけでは分からない、実際に触ったからこそ分かった仕様や不具合も含めて紹介します。


Shopifyの商品絞り込み・検索・並び替えとは?

Shopify の「絞り込み(フィルター)」とは、コレクションページに並ぶ商品を、価格・商品タイプ・ブランド・タグ・在庫状況・商品オプション(カラーやサイズ)・メタフィールドといった条件で絞り込める仕組みです。「並び替え(ソート)」は、新着順・価格順・売れ筋順などの基準で商品の表示順序を並べ替える仕組みで、「検索」はコレクション内の商品をキーワードでその場検索する仕組みです。

この3つはセットで使われることが多く、特にアパレル・雑貨・スポーツ用品・食品など、1つのコレクションに数十〜数百点の商品を並べる業種で効果を発揮します。たとえば、アパレルストアなら「サイズ」「カラー」「価格帯」で絞り込めるようにする、家具ストアなら「素材」や「対応畳数(メタフィールド)」で絞り込めるようにする、といった具合です。絞り込み条件が業種に合っていないと、せっかく導入しても使われない機能になってしまうため、自社のコレクション構成に合わせて項目を選べるアプリかどうかが重要になります。


絞り込み・検索・並び替えのメリットとデメリット

メリット

  • お客様が欲しい商品に最短でたどり着けるため、離脱率の改善につながります。商品数が多いストアほど効果が大きく出ます。
  • 絞り込み条件そのものが「こういう軸で商品を選べる」という提案になり、回遊性が上がります。たとえば「在庫あり優先」の並び替えを用意しておくと、欠品ストレスを減らせます。
  • メタフィールドを使った絞り込み・並び替えに対応したアプリを選べば、Shopify 標準の商品属性だけでは表現できない、業種固有の条件(対応サイズ・素材・仕様値など)でも絞り込めるようになります。

デメリット

  • 導入するアプリによっては、絞り込み項目を1つ追加するだけでも管理画面の操作が複雑になり、設定に時間がかかることがあります。
  • 商品数が多いストアでは、フィルター用のインデックス作成に時間がかかったり、月額が商品数に応じて上がったりするアプリもあります(今回比較した Smart Product Filter & Search は、商品カタログのサイズに応じてプラン料金が変わる仕組みでした)。
  • テーマとの相性によっては、絞り込みバーが正しく表示されない、または動作しないことがあります。導入前に自分のテーマで検証することが欠かせません。

Shopify標準機能だけでは何が足りないのか

Shopify 純正の「Search & Discovery」アプリ(後述)を使えば、無料で絞り込み・検索・並び替えの基本機能を追加できます。ではなぜ有料のサードパーティアプリが多数存在するのでしょうか。

実際に Search & Discovery を触ってみると、絞り込みの追加自体はメタフィールド・メタオブジェクトにも対応しており、機能としては最低限そろっています。ただし、絞り込みUIのレイアウト(ドロップダウン・サイドバー・モーダルなど)を選ぶ仕組みは無く、テーマ側の実装に依存します。また、割引率順や在庫拠点別の並び替えといった、購買行動に直結する高度な並び替え条件までは用意されていません。

つまり、Shopify 標準機能は「絞り込みの土台」を提供しますが、「どう見せるか」「どう並べ替えるか」を作り込みたい場合は、サードパーティアプリで補う必要がある、というのが実態です。特にレイアウトを複数用意して使い分けたい場合や、割引率・在庫状況など Shopify 標準の並び替えに無い条件を使いたい場合は、専用アプリの導入が現実的な選択肢になります。


「シンプル商品絞り込みカスタマイズ|コレクション検索・並び替え」でできること

ここからは、この記事で最もおすすめしたい自社アプリ「シンプル商品絞り込みカスタマイズ|コレクション検索・並び替え」を紹介します。

「シンプル商品絞り込みカスタマイズ」とは

「シンプル商品絞り込みカスタマイズ|コレクション検索・並び替え」は、Shopify のコレクションページに絞り込み・キーワード検索・並び替え機能をノーコードで追加するアプリです。料金は Basic Plan 月額 $14.99 で、インストールから7日間の無料体験が可能です。年払いなら $149.99 で、実質2ヶ月分無料でお得に利用できます。

商品数の多いコレクションページで、お客様が欲しい商品にすぐたどり着けるようにすることを目的に作られていて、テーマにブロックを追加するだけでコーディングなしに絞り込み・検索・並び替えの3つの機能をまとめて設置できます。

「シンプル商品絞り込みカスタマイズ」でできること

価格・タグ・メタフィールドまで絞り込める柔軟なフィルター機能

管理画面の「絞り込み」画面から、絞り込み項目を追加できます。画面右上の「絞り込みを追加」から、標準フィルター(価格・商品タイプ・ブランド・タグ・在庫状況)、商品オプション(カラーやサイズなど)、商品メタフィールドの3系統からソースを選べます。

絞り込み画面。ラベル・ソース・タイプの3列で項目が一覧表示される

一覧の行をクリックすると詳細設定が展開し、表示ラベル・選択方式(複数選択/単一選択)・絞り込み条件(OR/AND)・表示フィールド・絞り込み方式・非表示にする値まで、項目ごとに細かく調整できます。

絞り込み項目の詳細設定(表示ラベル・選択方式・絞り込み条件)

ストアフロントに表示したくない値(内部用タグなど)は「非表示にする値」で個別に除外できます。ただし、在庫状況と価格の2項目については除外値の設定に対応していません。値の表示順はドラッグで並び替えられ、目のアイコンでいつでも表示・非表示を切り替えられます。

ドロップダウン・サイドバー・モーダルの3レイアウトから選べる

絞り込み・検索・並び替えの UI は、テーマに設置するブロックの種類によって「ドロップダウン型」「サイドバー型」「モーダル型」の3レイアウトから選べます。

サイドバー型で絞り込み・検索・並び替えをまとめて表示できる

商品グリッド上部にコンパクトに収めたいストアはドロップダウン型、絞り込み項目が多いストアはサイドバー型、モバイル中心のストアはモーダル型、というように使い分けられます。ドロップダウン型ブロックには並び替え・商品数の配置や順番、絞り込みボタンと並び替えのスタイルといった見た目の設定があり、サイドバー型にはサイドバー幅やスマホ用のボタンテキスト・モーダル位置・商品数の位置、モーダル型にはボタンテキスト・表示位置・ボタン配置・適用モード・商品数の位置といった、ブロックごとに異なる設定項目が用意されています。

なお、管理画面からレイアウトを一括で切り替えるUIは無く、テーマエディタでブロックを差し替える形になる点は覚えておくと良いでしょう。

管理画面から絞り込み・並び替え項目を自由に設定できる

管理画面の「並び替え」画面では、標準並び替え(おすすめ順・価格順・新着順・売れ筋順など)に加えて、拡張並び替え(割引率が大きい順・在庫あり優先)、さらにメタフィールドを使った並び替えまで追加できます。

並び替え画面。標準・拡張・メタフィールドの項目一覧

メタフィールド並び替えでは、値の型(数値・テキスト・日時)とソート対象フィールド、並び順を指定できるため、独自の優先度や仕様値での並び替えにも活用できます。項目はドラッグ&ドロップで表示順を変えられ、目のアイコンで有効・無効を切り替えられます。なお、ストアフロント側でどれを初期状態にするかを個別に選ぶ専用の欄は無く、一覧の先頭にある項目が自動的にデフォルトの並び順として採用される仕組みです。

1クリックでテーマに追加できる

管理画面の「設定」画面からテーマを選んで「テーマに追加」をクリックするだけで、コレクションページに絞り込みバーが自動的に設置されます。

設定画面。テーマへの追加と言語設定

このワンクリック追加で自動的に設置されるのは常にドロップダウン型のブロックで、サイドバー型やモーダル型を使いたい場合はテーマエディタから手動で追加する必要があります。エンジニアがいないストアでも、導入から数分でストアフロントに反映できる手軽さが魅力です。

管理画面もストアフロントも20言語に対応

「設定」画面の言語設定から、管理画面の表示言語を20言語の中から選べます。海外展開しているストアでも、スタッフの言語に合わせて管理画面を切り替えられます。

コレクション内の商品をキーワードですぐに検索できる

コレクションページ内で表示されている商品を、商品名でその場検索できます。絞り込みと組み合わせて使うこともでき、絞り込みと検索は常に AND 条件で適用されます。検索の入力中はテキスト欄のフォーカスが維持されるため、1文字入力するたびに手が離れる、といったストレスもありません。商品数が多いコレクションでは、条件に一致する商品を自動的に無限スクロールで読み込んでいく仕組みも備えています。

アプリをインストールする

  1. Shopify 管理画面の左下にある「設定」をクリックします
  2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します
  3. 検索窓に「シンプル商品絞り込みカスタマイズ」と入力し、表示されたアプリをクリックします
  4. アプリ詳細画面で「インストール」をクリックします
  5. 権限の確認画面を確認し、「インストール」を完了します

料金は Basic Plan 月額 $14.99、インストールから7日間の無料体験が可能です。

この章のまとめ

  • 標準フィルター・商品オプション・商品メタフィールドの3系統から絞り込み項目を追加できる
  • ドロップダウン・サイドバー・モーダルの3レイアウトを、ストアのデザインや商品構成に合わせて使い分けられる
  • 割引率順・在庫あり優先・メタフィールド並び替えまで、管理画面から自由に設定できる
  • 1クリックでテーマに追加でき、コーディング不要ですぐ使い始められる

詳しくは アプリストアのページ から確認してください。


競合アプリ5本を実際にインストールして比較

自社アプリだけでなく、Shopify App Store で人気の絞り込み・検索アプリ4本と、Shopify 純正の無料アプリ1本を、実際に開発ストアへインストールして触ってみました。アプリストアの説明文だけでは分からない、実際に触ったからこそ気づいた仕様や不具合も含めて紹介します。

Smart Product Filter & Search

Smart Product Filter & Searchのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Smart Product Filter & Search
開発者 Globo.io
価格設定 $14/月 / $19/月 / $29/月(年払い $140/年 / $190/年 / $290/年)・14 日間の無料体験
主な機能・特徴 さまざまなコレクション、カテゴリのカスタム フィルター ツリーへのスマート フィルター アプリ、タグ、販売率、レビュー、メタフィールド、ベンダー、バリアント フィルターによる無制限のフィルター...、AI搭載の検索・発見ソリューション。年式、メーカー、モデル検索に対応、AIセマンティック検索、全文検索、自動提案、リダイレクトなどをサポート、9種類のおすすめ商品タイプ。フィルター・検索行動分析レポートを提供
対応言語 管理画面は日本語(実際に確認)

実際にインストールして触ってみた

  • 実際にインストールして触ってみたところ、このdevストアでは過去に一度導入済みで、無料トライアルが既に終了していた。トライアル終了後は「価格」画面へ強制的にリダイレクトされ、フィルター設定などの本来の管理画面には一切アクセスできなかった。
  • 料金ページの実際のプラン構成はベーシック $14/月・プロフェッショナル $29/月の2択のみで、無料プランは存在しなかった。アプリストアの価格設定欄には「無料プランあり。無料体験あり。」と表示されており、実際の料金ページの内容と食い違っている。
  • 商品カタログサイズはスライダーで選択する方式(500〜999K件など)で、プランと連動して料金が変わる仕組み。現在の有効商品数は42件と表示された。
  • 有料プランへの加入には決済方法(クレジットカード)の登録が必須で、実カード情報を入力する必要があったため、そこから先の管理画面(実際のフィルター設定・検索設定画面)は今回未検証。

ワンポイント解説

トライアル終了により肝心のフィルター設定画面までは到達できなかったが、「無料プランあり」というストア掲載情報と実際の料金ページの内容が一致しないという、触ってみて初めて分かる食い違いを確認できた。


Findter Custom Filter & Search

Findter Custom Filter & Searchのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Findter Custom Filter & Search
開発者 FlintVerse
価格設定 $9/月 / $19/月 / $59/月(年払い $97.20/年 / $205.20/年 / $637.20/年)・14 日間の無料体験
対応言語 管理画面は英語のみ(実際に確認)

実際にインストールして触ってみた

  • アプリストアの掲載ページは日本語だが、実際にインストールした管理画面はすべて英語表示だった。アプリストアの対応言語情報だけを見て「日本語対応」と書くと誤りになる典型例。
  • 無料プランで稼働しており、Filter・Search・Metafieldの3メニューを持つ。デフォルトのフィルターセットには「Availability」「Price」「Color」の3項目が最初から設定されていた。
  • フィルター設定画面で「Add filter option」から新しいフィルター項目を追加しようとしたところ、モーダルが読み込み中のまま完全に固まり、いつまで待っても選択肢が表示されなかった。コンソールにエラーは出ておらず、画面上も『読み込み中』のスピナー以外に異常は見えない。実際に触らないと分からない不具合。
  • Search設定画面は正常に動作し、検索対象フィールド(Title・SKU・Product Description・Collection Title・Categoryなど)をチェックボックスで選べる作りだった。

ワンポイント解説

無料プランがあり導入のハードルは低いが、フィルター項目を追加する主要機能がこのdevストアでは動作しなかった。ストアの言語(日本語)と管理画面の言語(英語)が一致しない点も、実際に触らないと分からない発見。


Searchanise Search & Filter

Searchanise Search & Filterのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Searchanise Search & Filter
開発者 Searchanise
価格設定 $19/月 / $39/月 / $49/月(年払い $192/年 / $396/年 / $492/年)・14 日間の無料体験
対応言語 管理画面は英語のみ(実際に確認)

実際にインストールして触ってみた

  • インストール直後にストア規模や業種を尋ねるオンボーディングアンケートが挟まり、実際の設定画面(Dashboard)にたどり着くまでに5〜6ステップかかった。管理画面はすべて英語。
  • フィルターは「Filter list」に商品バリエーション(Vendor・Tagsなど)が自動生成された状態で並んでおり、「Add filter」から新規追加すると『Parent filters(親フィルター)』を指定できる、階層構造(ツリー)のフィルターを組める仕様だった。単純なフラットなフィルターリストではなく、親子関係を持つ絞り込みメニューを構築できる点は、他の競合や自社アプリには無い特徴。
  • メタフィールド・メタオブジェクトを使ったフィルターは「Preferences」セクションから別途設定する形で、機能の入口自体は多いが、その分どこで何を設定するのか把握するまでに時間がかかる作りだった。
  • トライアルは14日間で、トライアル終了後は「Choose a plan」画面で年払い(17%引)・月払いを選ぶ形式。

ワンポイント解説

フィルターを親子階層で組める『Parent filters』機能が独自性として際立っていた。反面、設定項目が多岐にわたる分、初見での分かりやすさでは見劣りする。


Boost AI検索とフィルター

Boost AI検索とフィルターのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Boost AI検索とフィルター
開発者 Boost Commerce
価格設定 $29/月 / $159/月 / $299/月 / $599/月 / $699/月 / $1499/月・21 日間の無料体験
主な機能・特徴 セマンティック検索:各検索クエリの意図とコンテキスト の理解可能、ホーム、コレクション、製品、およびカートページでのさまざまなおすすめ設定、ピン、ブースト、降格、非表示の製品戦略を使用したビジュアルマーチャンダイジングツール、タグ、メタフィールド、バリアントなどの無制限のフィルターオプションを備えたカスタム製品フィルター、フィルターコレクションと検索行動の詳細レポートに関する洞察に満ちた分析
対応言語 管理画面は英語のみ(実際に確認)

実際にインストールして触ってみた

  • インストール後、Shopify のアカウントとは別に「Boostアカウント」をメールアドレスで作成する必要があった。その後「どの機能を入れるか」「どのテーマに適用するか」を選ぶオンボーディングが続き、実際の管理画面(ダッシュボード)に到達するまでの手数は5競合中もっとも多かった。管理画面は英語。
  • ダッシュボードに『Attention: App Metafield GraphQL issue』という、開発元自身が出している既知の不具合告知バナーが表示されていた(Shopify のメタフィールド仕様変更に起因する影響で、テーマ設定などの一部機能が正しく動かない場合があるという内容)。ストア掲載ページには出ていない、触ったからこそ分かる情報。
  • フィルター項目の追加(Add filter option)で選べる項目の種類が非常に多く、Vendor・Product Type・Price・Collection・Product category・Variants' price・Percent Sale(割引率)・Review Ratings(レビュー評価)・Stock Status・Locations(在庫拠点)・Tag・Multi-level tags・Weight・Custom Range Slider・Reviews.io 連携専用の評価属性・Denominations・Color・Metafield と18種類確認できた。自社アプリや他の競合と比べて突出して選択肢が多い。
  • フィルターは「Filter tree」という概念で管理されており、コレクションページ用と検索結果ページ用を別々のツリーとして持てる(自社アプリが単一の設定を両方に使うのとは異なる設計)。
  • 21日間の無料トライアルがあり、トライアル終了までは請求が発生しない旨が明記されていた(登録時にクレジットカード情報の入力を求められなかった)。

ワンポイント解説

フィルター項目の種類の豊富さ(レビュー評価・割引率・在庫拠点など)が際立って多機能。一方で開発元自身が認める既知の不具合が管理画面に表示されている点は、実際にインストールしないと分からない情報だった。


Shopify Search & Discovery

Shopify Search & Discoveryのアプリ紹介画像

アプリ概要

項目 内容
アプリ名 Shopify Search & Discovery
開発者 Shopify
価格設定 無料
主な機能・特徴 複数のカテゴリーで絞り込み検索ができるよう、絞り込みをカスタマイズします、同義語のグループを作り、商品説明と買い物客が使う検索ワードを一致させます、商品の検索順位引き上げ」を使用すると、検索結果で強調したい商品を表示できます、商品詳細ページに関連商品と付加的な商品を追加します、分析機能を活用し、ストアの検索とストアに行き着くまでの行動を把握します
対応言語 管理画面は日本語(実際に確認)

実際にインストールして触ってみた

  • 5競合の中で唯一、インストール直後から管理画面が完全に日本語で表示された。アカウント作成やオンボーディングアンケートも無く、インストールから設定画面到達までが最も速かった。
  • 「絞り込み」画面には『OS 2.0 のテーマ、カスタムストアフロント、またはオンラインストアのカスタム Liquid を使用している場合にのみ、お客様は絞り込みを利用できます』という注記があり、対応テーマの条件が明記されていた。デフォルトでは Availability・Price・Category の3項目のみ。
  • 絞り込みを追加する際の『ソースを選択』では、Brand(販売元)・Color/Denominations(商品オプション)・タグ・商品タイプに加えて、実際にストアに登録済みのメタフィールド(例: Snowboard binding mount)やメタオブジェクトもソースとして選べた。無料の Shopify 純正アプリでもメタフィールド・メタオブジェクトによる絞り込みに対応している。
  • アプリストアの評価は2.7(464件中、★1が90件・★2が34件)と、5競合中もっとも低かった。実際のレビュー本文には「単語の完全一致でしか検索できなくなった」「類義語登録の上限が1000件」といった検索精度に関する不満が複数あった(絞り込み機能ではなく検索機能への不満が中心)。

ワンポイント解説

無料かつ日本語ネイティブで導入の手軽さは随一。ただし評価は5本中最低で、検索精度への不満レビューが目立った。絞り込み自体はメタフィールド対応を含め必要十分な機能を持つ。


5つのアプリを比較

アプリ 管理画面 日本語 絞り込み機能 メタフィールド絞り込み 月額(最安プラン)
シンプル商品絞り込みカスタマイズ ✅ ✅ ✅ $14.99
Smart Product Filter & Search ✅ ✅※ ✅ $14/月
Findter Custom Filter & Search ❌ △※ ✅ $9/月
Searchanise Search & Filter ❌ ✅ ✅ $19/月
Boost AI検索とフィルター ❌ ✅ ✅ $29/月
Shopify Search & Discovery ✅ ✅ ✅ 無料

※ Smart Product Filter & Search はトライアル終了により本記事の検証時点ではフィルター設定画面を確認できていません(アプリストアの説明・機能一覧をもとにした評価)。
※ Findter Custom Filter & Search はフィルター項目の追加機能がこのdevストアで動作しなかったため「△」としています。
対応言語・機能の有無は、実際にインストールして確認した結果です。


まとめ|どのアプリを選ぶべきか

5本のアプリを実際にインストールして比較した結果を、用途別にまとめます。

  • とにかく手軽に、無料で試したい → Shopify Search & Discovery。日本語ネイティブで導入も速いですが、評価が2.7とやや低く、検索精度への不満レビューが目立つ点は認識しておく必要があります。
  • レイアウトを複数使い分けたい・割引率や在庫状況での並び替えまでしたい → 自社アプリ「シンプル商品絞り込みカスタマイズ|コレクション検索・並び替え」。ドロップダウン・サイドバー・モーダルの3レイアウトと、メタフィールド並び替えまで、管理画面から日本語で設定できます。
  • フィルター項目の種類をとにかく多く持ちたい → Boost AI検索とフィルター。レビュー評価や在庫拠点まで含めた18種類のフィルターソースが魅力ですが、管理画面は英語で、開発元自身が既知の不具合を告知している点も踏まえて検討してください。
  • 絞り込みを親子階層で組みたい → Searchanise Search & Filter。Parent filters という独自機能がありますが、設定項目が多く初見では把握に時間がかかります。

今回あらためて実感したのは、アプリストアの説明文と、実際にインストールしてからの挙動は必ずしも一致しないということです。無料プランの有無、管理画面の対応言語、フィルター追加機能が実際に動くかどうかは、触ってみるまで分かりませんでした。導入を検討する際は、無料体験期間のうちに実際の管理画面まで確認することをおすすめします。

自社アプリ「シンプル商品絞り込みカスタマイズ|コレクション検索・並び替え」は、日本語の管理画面でメタフィールド対応の絞り込み・並び替えを設定でき、ドロップダウン・サイドバー・モーダルの3レイアウトから選べる点が強みです。気になった方はぜひ アプリストアのページ から詳細を確認してみてください。


参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?