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

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

アパレルやスポーツ用品のECサイトでは、サイズチャートが購入の決め手になります。サイズ感が分からないまま買うのは不安ですし、サイズ違いはそのまま返品につながるので、運営側にとっても軽視できない情報です。

ただ、サイズチャートは1種類では済みません。ジャケットとパンツでは測る場所が違い、メンズとレディースでも寸法が違う。カテゴリ × アイテムタイプ × 性別の組み合わせで、必要なチャートは簡単に数十種類まで増えていきます。これを商品1点ずつに手作業で割り当てるのは、商品数が数百を超えた時点で現実的ではなくなりました。

このプロジェクトでは、商品ページを開いたときに「この商品に合ったサイズチャート」が自動で選ばれて表示される仕組みを構築しました。商品登録のたびにサイズチャートを設定する作業は不要になり、例外的な商品への個別対応も、管理画面からの変更だけで済むようになっています。

課題

モーターサイクル用品などを扱うアパレル系ECサイトで、次の課題がありました。

• 商品数が多く、1点ずつサイズチャートを手動設定するのは非現実的
• カテゴリ × アイテムタイプ × 性別の組み合わせで、サイズチャートの種類が大量にある
• レーシングスーツのような特殊な商品には、専用のサイズチャートが必要
• どの商品にどのチャートを出すかの割り当てを、運用中に管理者が変更したい

解決策

商品に付けているメタフィールド(Shopifyで商品に持たせられる追加情報。カテゴリ・性別・アイテムタイプなど)を手がかりに、「この組み合わせならこのチャート」という対応表を参照して、適切なサイズチャートを自動選択する仕組みを実装しました。対応表に載らない特殊な商品は、例外ルールとして個別に指定できます。

詳しく知りたい方へ

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

構成図

図を一言でまとめると、「商品ページが商品情報を渡すと、選択ロジックが対応表を引いて、合ったサイズ表を返してくれる」という流れです。

主な機能

• 自動選択: 商品のカテゴリ・タイプ・性別から適切なサイズチャートを自動判定
• 優先順位制御: 個別商品の例外 → 型番単位の例外 → 通常の対応表 → 男女共用チャート、の順で判定
• 表記揺れの吸収: 「women」「woman」「レディース」のようなばらつきを統一してから判定
• 動的管理: どの商品にどのチャートを出すかを、管理画面から変更可能
• サイズ目安チェッカー: ユーザーが身長・胸囲を入力すると、体型に合ったサイズを提案

主な実績

• 数十種類のサイズチャートを一元管理
• 商品データ更新時のサイズチャート設定作業をゼロに
• サイズ目安チェッカーで、サイズ選びに迷うユーザーの購入前の不安を軽減

使用技術

• Shopify Storefront API(商品のメタフィールド取得)
• Next.js(フロントエンド・API)
• Vercel KV(管理画面から変更できる対応表の保存先)
• TypeScript