商品に合ったサイズチャートを自動で表示する

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

ECサイトでアパレルやスポーツ用品を扱う場合、サイズチャートは購入の意思決定に欠かせない情報です。しかし、カテゴリ、アイテムタイプ、性別によって、適用されるサイズチャートは異なります。

このプロジェクトでは、商品ページで「この商品に合ったサイズチャート」を自動的に表示する仕組みを構築しました。

課題

アパレルECサイトでは、以下のような課題がありました：

• 商品数が多く、それぞれに適切なサイズチャートを手動で設定するのは非現実的
• カテゴリ × アイテムタイプ × 性別の組み合わせで大量のサイズチャートが存在
• 特殊な商品（レーシングスーツ等）には専用のサイズチャートが必要
• 管理者が運用中に柔軟にマッピングを変更したい

解決策

商品のメタフィールド（例: category, gender, product type など）を活用し、マッピングテーブルに基づいて適切なサイズチャートを自動で選択する仕組みを実装しました。

詳しく知りたい方へ

サイズチャート機能について3つの記事で詳しく解説しています。

構成図

主な機能

• 自動選択: 商品のカテゴリ・タイプ・性別から適切なサイズチャートを自動判定
• 優先順位制御: Handle例外 → SKU例外 → 通常マッピング → フォールバック
• 正規化処理: 表記揺れを吸収（「women」「woman」「レディース」を統一）
• 動的管理: 管理画面からマッピングを変更可能
• サイズ目安チェッカー: ユーザーの体型に合ったサイズを提案

主な実績

• 大量のサイズチャートを一元管理
• 商品データ更新時のサイズチャート設定作業を完全自動化
• サイズ目安チェッカーによるユーザー体験の向上

使用技術

• Shopify Storefront API（メタフィールド取得）
• Next.js（フロントエンド・API Route）
• Vercel KV（動的マッピング管理）
• TypeScript