variant-matrix

バリエーションマトリクス

概要

商品バリエーションを使用すると、サイズ、色、素材のあらゆる組み合わせを1つの商品リスティングで扱えます。それぞれのバリエーションに独自の価格、SKU、在庫を設定できます。各プラットフォームは、オプションの値から組み合わせの完全なマトリクスを生成し、バリエーション選択 UI を自動的に処理します。主な作業は、オプションを正しく入力すること、すべての SKU を生成すること、バリエーションごとの価格と在庫を設定すること、大規模なマトリクスを効率よく管理することです。

このスキルを使う場面

• 商品に複数のオプション軸があるアパレル、靴、アクセサリーをモデル化する場合
• フラットなバリエーション行をグループ化する必要がある、仕入先の CSV から商品をインポートする場合
• 販売者がバリエーションごとの価格と在庫を管理するための管理画面を構築する場合
• 商品ページのバリエーションセレクターで、選択できない組み合わせを無効化する必要がある場合

基本的な手順

ステップ 1：プラットフォームを特定し、バリエーションモデルを理解する

プラットフォーム	オプション	バリエーションの上限	バリエーションのフィールド
Shopify	最大3つのオプション（例：サイズ、色、スタイル）	商品ごとに100	価格、SKU、バーコード、在庫、重量、画像
WooCommerce	バリエーションに使用する属性は無制限	実質無制限（約50以上でパフォーマンスが低下）	価格、セール価格、SKU、在庫数、重量、寸法、画像
BigCommerce	商品ごとのオプションは無制限	商品ごとに600 SKU	価格調整、SKU、在庫数、重量、画像
カスタム／ヘッドレス	自由に設計	無制限	バリエーションのフィールドを自由に設計

---

ステップ 2：プラットフォームごとにバリエーションを設定する

---

Shopify

オプションからバリエーションを作成する：

1. 管理画面 → 商品 → [商品] に移動します
2. オプション セクションまでスクロールします
3. オプションを追加 をクリックして、最初の軸（例：サイズ）を追加します
4. オプションの値を入力します：XS、S、M、L、XL
5. 2つ目のオプション（例：色）を追加します：赤、青、黒
6. Shopify がすべての組み合わせを自動的に生成します（5 × 3 = 15 バリエーション）
7. バリエーション セクションまでスクロールすると、生成されたマトリクスを確認できます

バリエーションごとの詳細を設定する：

• バリエーションの行をクリックして、価格、SKU、在庫、重量、画像を編集します
• または、一括編集ビューの バリエーションを編集 を使って、複数のバリエーションを一度に更新します

バリエーションを一括管理する：

• チェックボックスで複数のバリエーションを選択し、編集 をクリックしてグループの価格または在庫を更新します
• 大規模なカタログの場合：App Store の Matrixify を使い、バリエーションごとに1行の CSV をインポートします。大規模なマトリクスを設定する最も効率的な方法です

選択できない組み合わせを無効化する：

• 在庫がないバリエーションは、商品ページに自動的に「売り切れ」と表示されます
• Shopify のバリエーションセレクターは、標準では選択できない組み合わせを自動的に無効化しません。多くのテーマでは、売り切れのオプションをグレー表示にするために、ロジックの追加またはテーマアプリの使用が必要です

公開後にオプションの値を追加／削除する：

• 新しいサイズ（例：「XXL」）を追加する場合：オプションセクションに移動し、その値を追加します
• Shopify は新しい値のバリエーションを追加します。既存のバリエーションは変更されません
• 販売終了したバリエーションは削除せず、アーカイブします。削除すると、注文履歴へのリンクがなくなります

WooCommerce

属性からバリエーションを作成する：

1. グローバル属性を作成します：Products → Attributes → Add Attribute（例：XS、S、M、L、XL の値を持つ Size）
2. 商品のAttributes タブを開きます
3. 属性（Size）を選択し、Used for variationsにチェックを入れて、Addをクリックします
4. この商品で使用する値をすべて追加します
5. Variations タブを開きます
6. Generate variationsをクリックすると、WooCommerce が組み合わせごとに 1 つのバリエーションを作成します
7. 各バリエーションを展開して、価格、SKU、在庫、画像を設定します

バリエーションの一括更新：

• WooCommerce のバリエーションエディターは、バリエーションが 20 個以上ある商品では動作が遅くなることがあります
• CSV で大規模なバリエーションマトリックスをインポートするには、WP All Import Proを使用します
• または、Variable Product Bulk Editプラグインを使って価格や在庫を一括更新します

SKU の生成： WooCommerce は SKU を自動生成しません。手動で入力するか、次のパターンを使用します：

• 命名規則：[PRODUCT-CODE]-[SIZE]-[COLOR] → 例：SHIRT-M-RED
• WP All Import を使って、スプレッドシートから SKU を一括設定します

---

BigCommerce

オプションとバリアントを作成する：

1. Products → [Product] → Variations タブを開きます
2. Create optionsをクリックし、オプションセット（Size、Color など）を追加します
3. BigCommerce が SKU のマトリックスを自動生成します
4. 任意の SKU 行をクリックして、次の項目を設定します：
   • 価格調整（例：XL は +$5）
   • SKU コード
   • 在庫数
   • 画像

オプションセット：

• Products → Option Setsを開いて、再利用可能なオプショングループを作成します
• XS～3XL の「Clothing Sizes」オプションセットを一度作成し、すべてのアパレル商品に割り当てます
• 大規模なカタログの管理にかかる時間を大幅に短縮できます

SKU の一括管理：

• Products → Import & Exportを開いて、すべてのバリアント SKU を含むカタログをエクスポートします
• Excel で編集し、再インポートして価格、在庫、SKU を一括更新します

---

カスタム／ヘッドレス

オプションの直積からバリアントを生成し、差分ロジックを使って既存のカタログを安全に更新します：

// lib/variantMatrix.ts

// Generate all variant combinations from option value arrays
// Input:  [['S','M','L'], ['Red','Blue']]
// Output: [['S','Red'], ['S','Blue'], ['M','Red'], ['M','Blue'], ['L','Red'], ['L','Blue']]
export function cartesianProduct(arrays: string[][]): string[][] {
  return arrays.reduce(
    (acc, values) => acc.flatMap(combo => values.map(v => [...combo, v])),
    [[]] as string[][]
  );
}

// Generate variant records with auto-generated SKUs
export function generateVariants(baseSku: string, optionNames: string[], optionValues: string[][]) {
  const combinations = cartesianProduct(optionValues);
  return combinations.map(combo => ({
    sku: [baseSku, ...combo].join('-').toUpperCase().replace(/\s+/g, '-'),
    options: Object.fromEntries(optionNames.map((name, i) => [name, combo[i]])),
    price: null,       // Set individually or via bulk rule
    inventoryQuantity: 0,
    published: true,
  }));
}

// Compute what to create vs. archive when option values change
export function diffVariants(
  existingVariants: { options: Record<string, string> }[],
  newCombinations: string[][],
  optionNames: string[]
) {
  const existingKeys = new Set(existingVariants.map(v => optionNames.map(n => v.options[n]).join('|')));
  const newKeys = new Set(newCombinations.map(c => c.join('|')));

  const toCreate = newCombinations.filter(combo => !existingKeys.has(combo.join('|')));
  const toArchive = existingVariants.filter(v => !newKeys.has(optionNames.map(n => v.options[n]).join('|')));

  return { toCreate, toArchive };
}

// Variant selector logic — which values are available given current selections?
export function getAvailableOptionValues(
  variants: { options: Record<string, string>; inventoryQuantity: number }[],
  currentSelections: Record<string, string>,
  targetOptionName: string
): string[] {
  return variants
    .filter(v =>
      Object.entries(currentSelections)
        .filter(([name]) => name !== targetOptionName)
        .every(([name, value]) => v.options[name] === value)
      && v.inventoryQuantity > 0
    )
    .map(v => v.options[targetOptionName])
    .filter(Boolean);
}

---

Step 3：SKU の命名規則を定義する

一貫性のある SKU は、倉庫業務、レポート作成、サプライヤーとの連絡に欠かせません。商品をインポートする前に、命名パターンを決めておきましょう。

推奨形式：

[PRODUCT-CODE]-[OPTION1]-[OPTION2]

Rules:
- Max 20 characters total
- All uppercase
- Hyphens between segments, no spaces
- Use standard size abbreviations: XS, S, M, L, XL, 2XL
- Use 3-letter color codes: RED, BLU, BLK, WHT, NVY, GRN
- Example: SHIRT-M-BLU → Blue shirt, Medium
           SHOE-10-NVY → Navy shoe, Size 10

既存のカタログにこのパターンで SKU を一括割り当てするには、Matrixify（Shopify）または WP All Import（WooCommerce）を使用します。

---

Step 4：大規模なバリエーションマトリックスを管理する

組み合わせが多い商品（バリエーションが 50 個以上）の場合：

Shopify： 3 つ以上のオプションがある商品では、バリエーション数の上限である 100 個が問題になることがあります。次の方法があります：

• 2 つのオプションを 1 つにまとめます（例：Size と Width を別々にせず、「Size/Width」にする）
• 色ごとに商品レコードを分け、メタフィールドを使って相互にリンクします
• より柔軟な設定が必要な商品には、Shopify ネイティブの Bundles を使用します

WooCommerce： 1 つの商品に 50 個以上のバリエーションを設定すると、パフォーマンスが低下します。WooCommerce Performance OptimizationsまたはYITH WooCommerce Variations Tableを使用して、管理画面とストアフロントの操作性を改善します。

バリエーションの遅延作成： オーダーメイドの塗装色 × 仕上げ × サイズ＝SKU 500 個以上のように、非常に大規模なマトリックスの場合は、すべての組み合わせを事前に作成せず、初回注文時にバリエーションを生成します：

// For very large matrices: create variants on first request rather than upfront
export async function ensureVariantExists(productId: string, options: Record<string, string>) {
  const key = Object.values(options).join('|');
  const existing = await db.productVariants.findFirst({ where: { productId, variantKey: key } });
  if (existing) return existing;

  const product = await db.products.findUnique({ where: { id: productId } });
  return db.productVariants.create({
    data: {
      productId,
      sku: generateSku(product.baseSku, options),
      variantKey: key,
      options,
      price: applyPricingRules(product, options),
      inventoryQuantity: 0,
    },
  });
}

ベストプラクティス

• バリエーションは削除せず、アーカイブします — 削除すると、そのバリエーションを参照する過去の注文に影響します。販売終了時はpublished: falseに設定します
• 価格や在庫の更新には、プラットフォームの一括編集ツールを使用します — バリエーション 100 個を 1 つずつ編集するのは現実的ではありません。すべてのプラットフォームで一括編集を利用できます
• オプションは 2～3 軸に制限します — 3 つを超えるオプション（例：サイズ × 色 × 素材）を設定すると、バリエーション選択欄がわかりにくくなり、マトリックスが指数関数的に大きくなります
• 公開前にバリエーション選択欄をテストします — 選択できない組み合わせが正しく「売り切れ」と表示されること、価格や画像が正しく更新されることを確認します
• 一括インポート前に SKU の一意性を検証します — インポート中の SKU 重複は、プラットフォームによって、該当する行が警告なしでスキップされたり、エラーになったりします

よくある落とし穴

問題	解決策
Shopify の100バリエーション上限に達した	オプションを組み合わせるか、色ごとに個別の商品を作成します。ストアフロントではメタフィールドを使って関連商品をグループ化します
オプションを選択してもバリエーション画像が切り替わらない	各バリエーションに専用の画像を明示的に割り当てます。バリエーションに独自の画像が設定されている場合にのみ、プラットフォームで画像を切り替えられます
新しいオプション値を追加すると重複したバリエーションが作成される	差分ロジックを使って、本当に新しい組み合わせを検出します。Shopify の管理画面では正しく処理されますが、カスタムインポートでは重複排除が必要です
大きなマトリックスによって商品ページの読み込みが遅くなる	バリエーションが100件を超える場合は、すべてのバリエーションを初期ページの HTML に埋め込むのではなく、オプションの変更時に API 経由でバリエーションの在庫状況を取得します
一括インポート中に SKU が重複する	生成前に SKU の各要素を正規化します：toUpperCase().replace(/[^A-Z0-9]/g, '-')。保存前に重複を確認します

関連スキル

• @product-data-modeling
• @inventory-tracking
• @catalog-import-export