このプロジェクトについて
ECサイトを運営していると、「商品ページまでは来てくれるのに、1つ見ただけで帰ってしまう」という悩みによく突き当たります。実店舗なら店員が「こちらと合わせるといいですよ」と声をかけられますが、ECサイトではその役割を担う人がいません。
そこで、モーターサイクル用品を扱うECサイトで、店員の提案に当たる部分を自動化する商品レコメンド機能を設計・実装しました。ユーザーが「これと合わせて使えるものは？」「似たような商品は他にある？」と思ったとき、その答えを商品ページの中で先回りして見せる仕組みです。
実装は、AIエージェント（AIによる開発支援）に構成を相談しながら、非エンジニアの立場で進めたもの。このページでは全体像を、続く2つの記事で仕組みの中身を解説します。
2種類のレコメンド
1. コーディネート提案（Complete the Fit）
「このジャケットと一緒に使えるパンツは？」「このヘルメットに合うグローブは？」といった、組み合わせて使える商品を提案します。同じ性別・シーズン・スポーツ種別で、異なるカテゴリの商品を表示するのがポイント。ジャケットを見ている人に別のジャケットを勧めても組み合わせにはならないので、あえてカテゴリを変えて提案します。
2. 関連商品表示
「この商品と似た商品は？」という声に応える、同じカテゴリの別商品の提案です。色違いや価格帯が近い商品など、比較検討の材料になる商品を並べます。コーディネート提案が「買い足し」を促すのに対し、こちらは「納得して選ぶ」ことを助ける役割です。
実装で乗り越えた課題
商品数が多いサイトでは、関連商品を探すたびにShopify（商品データを預けているECの基盤サービス）へ問い合わせると時間がかかり、表示速度が落ちてしまいます。提案する商品を選ぶルールも、条件が重なると複雑になりがちです。
そこで、あらかじめ商品情報を整理した**インデックス（索引）**を作っておき、レコメンド時はそこから素早く取り出す形にしました。あわせて「性別とシーズンが一致し、カテゴリは異なる商品を選ぶ」といったマッチングルールを先に明文化しておき、選定のロジックがぶれないようにしています。
詳しく知りたい方へ
コーディネート提案の仕組み
異なるカテゴリの商品をマッチングさせる「Complete the Fit」機能の仕組みを解説します。
関連商品表示のロジック
同カテゴリの関連商品を適切に選んで表示する仕組みを解説します。
構成図
現在の商品情報を取得（カテゴリ: ジャケット、性別: メンズ、シーズン: 秋冬、スポーツ: モーターサイクル）
「この商品と合わせて」同じ性別・シーズン・スポーツ、異なるカテゴリ → パンツ、グローブ、ブーツなど
「同じカテゴリの商品」同じカテゴリ（ジャケット）、同じ性別・シーズン → 他のジャケット
図を一言でまとめると、いま見ている商品の情報を起点に「組み合わせる商品」と「比べる商品」の2方向へ提案を広げる構成です。
使用技術
- Shopify Storefront API（商品データを取得する窓口）
- Vercel KV（商品インデックスの保存場所）
- Next.js API Routes（レコメンド結果を返す裏側の処理）
- キャッシュ制御（同じ問い合わせの結果を一定時間使い回す仕組み）