このプロジェクトについて
商品数が数百点を超えたあたりから、「目当ての商品にたどり着けない」というユーザーの声が増えてきます。カテゴリを開いて何ページもスクロールするのは、探す側にとってかなりの負担です。そこで重要になるのが、条件を選ぶだけで候補を絞り込めるフィルター機能。ECサイトの使いやすさは、この機能の出来でかなり変わります。
ただ、Shopify（ショッピファイ。ECサイトの土台になるサービス）の標準機能だけでは、「シーズン」や「対象スポーツ」といったサイト独自の切り口では絞り込めません。フィルターの組み合わせが増えると表示が遅くなったり、結果がずれたりする問題もあります。
このプロジェクトでは、Shopifyのカスタムフィールド（Metafield。商品に独自の情報を追加できる機能）を活用し、性別・シーズン・カテゴリ・価格帯など、さまざまな条件で商品を絞り込める仕組みを設計しました。実装は、AIエージェント（AIによる開発支援）に構成を伝えながら進めています。
課題
- 標準のShopifyフィルターでは対応できない項目がある（シーズン、スポーツ種別など）
- フィルターの組み合わせが複雑になると、検索結果が正しく表示されない
- 絞り込みのたびに処理が増え、ページ表示が遅くなりがち
解決策
Metafieldで商品ごとに独自の属性情報を持たせ、標準では対応できないフィルター項目を自由に追加できるようにしました。属性の持たせ方さえ決めてしまえば、あとから項目を増やすのも難しくありません。
あわせて、フィルター処理をサーバー側とブラウザ側で役割分担する構成にしました。Shopifyが直接対応できる条件はサーバー側でまとめて絞り込み、細かい条件はブラウザ側で仕上げる。この分担で、表示速度を保ったまま複雑な絞り込みができるようになっています。
詳しく知りたい方へ
フィルター機能の中身は、2つの記事に分けて解説しています。
カスタムフィールドを使ったフィルタリング
商品にカスタムの属性（性別、シーズン、カテゴリなど）を設定し、それを使ってフィルタリングする仕組みを解説します。
価格帯フィルターの仕組み
価格帯での絞り込みを、使いやすく・管理しやすく設計した方法を解説します。
構成図
図を一言でまとめると、「ユーザーが選んだ条件を、サーバーとブラウザで手分けして絞り込み、結果だけを一覧に返す」という流れです。
使用技術
- Shopify Storefront API（サイトの表側から商品データを取り出すための窓口）
- Shopify Metafield
- Next.js API Routes
- カーソルベースページネーション（大量の商品を少しずつ取得する方式）