このプロジェクトについて
ECサイトでは、お客様が「これと合わせて使えるものは?」「似たような商品は他にある?」と考えることがよくあります。こうしたニーズに応えるため、商品レコメンド機能を設計しました。
2種類のレコメンド
1. コーディネート提案(Complete the Fit)
「このジャケットと一緒に使えるパンツは?」「このヘルメットに合うグローブは?」といった、組み合わせて使える商品を提案します。
同じ性別・シーズン・スポーツ種別で、異なるカテゴリの商品を表示します。
2. 関連商品表示
「この商品と似た商品は?」といった、同じカテゴリの別商品を提案します。
色違いや価格帯が近い商品など、比較検討に役立つ商品を表示します。
課題
- 商品数が多いと、関連商品の取得に時間がかかる
- 適切な商品を選ぶロジックが複雑
- 毎回APIを呼ぶとパフォーマンスが低下
解決策
商品インデックスの活用
あらかじめ商品情報を整理して**インデックス(索引)**を作成しておき、レコメンド時はそこから素早く取得します。これにより、APIの呼び出し回数を減らし、表示速度を改善しています。
マッチングルールの定義
「どの商品を提案するか」のルールを明確に定義しています。性別やシーズンが一致し、かつ閲覧中の商品と異なるカテゴリの商品を選ぶ、といったロジックです。
詳しく知りたい方へ
コーディネート提案の仕組み
異なるカテゴリの商品をマッチングさせる「Complete the Fit」機能の仕組みを解説します。
関連商品表示のロジック
同カテゴリの関連商品を適切に選んで表示する仕組みを解説します。
構成図
現在の商品情報を取得(カテゴリ: ジャケット、性別: メンズ、シーズン: 秋冬、スポーツ: モーターサイクル)
「この商品と合わせて」同じ性別・シーズン・スポーツ、異なるカテゴリ → パンツ、グローブ、ブーツなど
「同じカテゴリの商品」同じカテゴリ(ジャケット)、同じ性別・シーズン → 他のジャケット
使用技術
- Shopify Storefront API
- Vercel KV(商品インデックス保存)
- Next.js API Routes
- キャッシュ制御