サイズ目安チェッカーの仕組み

サイズ目安チェッカーとは

サイズ目安チェッカーは、ユーザーが自分の身長・胸囲（またはウエスト）を入力すると、サイズチャートのデータを参照して推奨サイズを提案する機能です。

「自分に合うサイズがわからない」という購入前の不安を解消し、サイズ選びをサポートします。

解決したい課題

• サイズチャートの数値を見ても、自分に合うサイズがわからない
• 「Euro 50」「M」などの表記と、自分の体型の関係がわかりにくい
• サイズ選びに迷って購入を諦めてしまう

入力項目の自動切り替え

サイズチャートの内容に応じて、入力項目を自動で切り替えます。

推奨サイズの計算ロジック

1. テーブルデータのパース

サイズチャートのHTMLテーブルから、各サイズの範囲データを抽出します。

変換後のデータ構造：

// 身長の範囲データ
heightRanges = [
  { min: 160, max: 165, size: "S" },
  { min: 165, max: 172, size: "M" },
  { min: 172, max: 180, size: "L" },
  { min: 180, max: 188, size: "XL" },
  // ...
]

// 胸囲の範囲データ
chestRanges = [
  { min: 84, max: 92, size: "S" },
  { min: 92, max: 100, size: "M" },
  { min: 100, max: 108, size: "L" },
  { min: 108, max: 116, size: "XL" },
  // ...
]

2. サイズ判定アルゴリズム

ユーザーの入力値を元に、推奨サイズを計算します。

3. 境界値の処理

入力値がサイズの境界（例：身長172cmはMとLの両方に該当）にある場合、両方のサイズを候補として保持し、胸囲との組み合わせで最終判定します。

結果は「M-L」のようにハイフン連結で表示し、ユーザーに選択肢を提示します。

推奨結果の表示

計算結果は、サイズだけでなく判断理由も含めて表示します。

表示例：

推奨サイズ: L

• 身長175cm → L
• 胸囲96cm → M-L
• 胸囲を基準にLをお勧めします

UI設計

サイズ目安チェッカーは、サイズチャートパネル内に配置してみると良いでしょう。

インタラクションの流れ

実装のポイント

状態管理

const [height, setHeight] = useState<number | null>(null);
const [chest, setChest] = useState<number | null>(null);
const [recommendation, setRecommendation] = useState<Recommendation | null>(null);

const handleCalculate = () => {
  if (height && chest) {
    const result = calculateRecommendedSize(height, chest, tableHtml);
    setRecommendation(result);
  }
};

計算関数

const calculateRecommendedSize = (height: number, chest: number, tableHtml: string) => {
  const heightRanges = parseHeightRanges(tableHtml);
  const chestRanges = parseChestRanges(tableHtml);

  const heightMatch = heightRanges.find(r => height >= r.min && height <= r.max);
  const chestMatch = chestRanges.find(r => chest >= r.min && chest <= r.max);

  // サイズインデックスの差を計算して推奨を決定
  // ...
};

今後の拡張案

• 購入履歴連携: 過去に購入したサイズを自動入力
• サイズ比較: 「普段着ているブランドのMサイズ」からの変換
• 体型タイプ選択: 「標準」「がっしり」「細身」などで調整

まとめ

サイズ目安チェッカーは、サイズチャートのデータを活用して推奨サイズを計算します。身長と胸囲（またはウエスト）の両方を考慮し、わかりやすいメッセージとともに結果を表示することで、ユーザーのサイズ選びをサポートします。