はじめに
ECサイトの運営を続けていると、「シーズンで絞り込めるようにしたい」「対応スポーツごとに商品を探せるようにしたい」といった要望が出てきます。ただ、Shopify（ECサイトの土台になるサービス）の標準機能に用意されているのは価格や在庫といった基本的な切り口までで、サイト独自の分類軸はそのままでは追加できません。
この記事では、ShopifyのMetafield（メタフィールド。商品に独自の情報を追加できる機能）を使って、標準に無いフィルター項目を実現した方法を解説します。読み終わる頃には、独自フィルターがどういう部品の組み合わせで動いているのか、全体像がつかめるはずです。
標準のフィルターだけでは足りなくなる場面
「シーズンで絞りたい」に標準機能は応えられない
モーターサイクル用品を扱うECサイトを例にすると、ユーザーが商品を探すときの切り口は「春夏もの か 秋冬もの か」「メンズ か レディース か」「どのスポーツ向けか」といった、そのジャンルならではのものになります。ところが、こうした属性はShopifyの商品情報に最初から用意されているわけではないので、標準のフィルターには項目として出せません。サイトの品ぞろえが特徴的であるほど、この「絞り込みたい軸が標準に無い」問題は早く表面化します。
Metafieldは商品に付ける「独自のメモ欄」
そこで使うのがMetafieldです。イメージとしては、商品ごとに追加できる独自のメモ欄。「シーズン: 春夏」「対象スポーツ: モーターサイクル」のように、標準には無い情報を商品に持たせられます。一度ルールを決めて登録しておけば、その情報を使って絞り込みも並べ替えもできるようになるので、フィルターの自由度は標準機能と比べて大きく広がります。
実際に設定した属性
このプロジェクトで商品に持たせた属性は、次のようなものです。
表のとおり、「どの季節の、誰向けの、何のスポーツ用の商品か」という探すときの切り口を、そのまま属性として商品に持たせています。
選んだ条件が商品一覧になるまでの流れ
条件はURLに載せて受け渡す
ユーザーがフィルターで「シーズン: 春夏」「性別: メンズ」を選ぶと、その条件はページのURLの後ろにパラメータ（条件を書き添えるための部分）として付きます。URLに条件が入っているので、その状態のままブックマークしたり人に共有したりでき、開き直せば同じ絞り込み結果が再現される仕組みです。サーバーはこのURLを読み取って、どんな条件で商品を探せばよいかを把握します。
表記ゆれを揃える「正規化」
商品データの登録は人の手で行われるため、同じ意味でも「メンズ」「Men」「Man」「男性」のように表記がばらつくことがあります。ばらついたままだと、「メンズ」で絞り込んだのに「Men」で登録された商品が漏れる、という取りこぼしが起きてしまう。そこで、どの表記で登録されていても内部では1つの表記に揃える正規化という処理を挟んでいます。データ登録の細かいゆれをシステム側で吸収してくれる、地味ながら効果の大きい工程です。
変換してShopifyに問い合わせる
正規化まで済んだ条件は、最後にShopifyのAPI（データを問い合わせるための窓口）が理解できる形式に変換され、条件に合う商品だけが返ってきます。流れを図にすると、こうなります。
図を一言でまとめると、「ユーザーの選択を、表記を揃えながらShopifyに伝わる言葉に翻訳していく」流れです。
サーバーとブラウザで仕事を分ける
サーバー側に任せるフィルター
性別・シーズン・カテゴリ・スポーツ種別・在庫の有無といった条件は、Shopifyの検索機能が直接対応できるので、サーバー側でまとめて絞り込みます。大量の商品から候補を一気に減らす重い仕事を、データの持ち主であるShopifyに任せる形です。該当する商品だけが返ってくるため、通信するデータ量も抑えられます。
ブラウザ側で仕上げるフィルター
一方、複数のサイズ体系が混ざるサイズ絞り込みや、細かい価格帯の切り分けは、取得済みのデータに対してブラウザ側で行います。すでに手元にあるデータを並べ替えたり間引いたりするだけなので、追加の問い合わせが発生せず、条件を変えたときの反応も速いんですよね。
分担して得られたこと
すべてをサーバー側で処理するとAPIの呼び出し回数が増え、すべてをブラウザ側で処理すると最初に大量のデータを読み込むことになります。「大きく減らすのはサーバー、細かく仕上げるのはブラウザ」という分担にしたことで、表示速度と絞り込みの柔軟さを両立できました。フィルター項目を今後追加するときも、どちらで処理すべきかの判断基準がはっきりしています。
まとめ
Metafieldを使うと、標準機能には無いサイト独自のフィルター項目を追加できます。ポイントは、属性の持たせ方を最初にルール化すること、表記ゆれを正規化で吸収すること、そして絞り込み処理をサーバーとブラウザで分担すること。この3点を押さえておけば、商品数が増えても使いやすさを保てるフィルターになります。