商品レコメンドの設計

コーディネート提案と関連商品表示で、お客様の購買体験を向上

レコメンドコーディネート関連商品UX
読了時間: 4分

このプロジェクトについて

ECサイトでは、お客様が「これと合わせて使えるものは?」「似たような商品は他にある?」と考えることがよくあります。こうしたニーズに応えるため、商品レコメンド機能を設計しました。

2種類のレコメンド

1. コーディネート提案(Complete the Fit)

「このジャケットと一緒に使えるパンツは?」「このヘルメットに合うグローブは?」といった、組み合わせて使える商品を提案します。

同じ性別・シーズン・スポーツ種別で、異なるカテゴリの商品を表示します。

2. 関連商品表示

「この商品と似た商品は?」といった、同じカテゴリの別商品を提案します。

色違いや価格帯が近い商品など、比較検討に役立つ商品を表示します。

課題

  • 商品数が多いと、関連商品の取得に時間がかかる
  • 適切な商品を選ぶロジックが複雑
  • 毎回APIを呼ぶとパフォーマンスが低下

解決策

商品インデックスの活用

あらかじめ商品情報を整理して**インデックス(索引)**を作成しておき、レコメンド時はそこから素早く取得します。これにより、APIの呼び出し回数を減らし、表示速度を改善しています。

マッチングルールの定義

「どの商品を提案するか」のルールを明確に定義しています。性別やシーズンが一致し、かつ閲覧中の商品と異なるカテゴリの商品を選ぶ、といったロジックです。

詳しく知りたい方へ

構成図

商品レコメンドの全体像
商品ページを表示

現在の商品情報を取得(カテゴリ: ジャケット、性別: メンズ、シーズン: 秋冬、スポーツ: モーターサイクル)

コーディネート提案

「この商品と合わせて」同じ性別・シーズン・スポーツ、異なるカテゴリ → パンツ、グローブ、ブーツなど

関連商品

「同じカテゴリの商品」同じカテゴリ(ジャケット)、同じ性別・シーズン → 他のジャケット

使用技術

  • Shopify Storefront API
  • Vercel KV(商品インデックス保存)
  • Next.js API Routes
  • キャッシュ制御

関連記事