サイズチャートのデータ構造とファイル管理

はじめに

サイズチャートを自動表示する仕組みを作るとき、選択ロジックと同じくらい大事になるのが「データをどう持つか」です。チャートの種類は数十にのぼり、商品側の入力には表記のばらつきがあり、しかも「どの商品にどのチャートを出すか」の割り当ては運用の中で変わっていきます。

この記事では、サイズチャート機能を支えるデータの持ち方を解説します。チャートデータの保存方法、表記揺れを吸収する正規化、そして管理画面から割り当てを変更できる二段構えの構成。読み終わる頃には、「動くもの」を「運用し続けられるもの」にするためのデータ設計の考え方が見えてくるはずです。

チャートデータの持ち方

1チャート1ファイルで管理する

サイズチャートのデータは、チャートごとに1つのファイル(JSON。設定や表データを書いておくテキストファイルの形式)として保存しています。全チャートを1つの巨大なファイルにまとめず、あえて分けておく形です。

図を一言でまとめると、「チャートの目次にあたる一覧ファイルと、中身にあたる個別ファイルを分けて置いてある」という構成です。1ファイル1チャートにしておくと、特定のチャートだけ直したいときに他への影響を気にせず編集できます。

IDの名前だけで中身が分かる命名規則

各チャートには、見ただけで対象が分かるIDを付けています。「カテゴリの略 + 性別 + アイテムタイプ」を並べる規則です。

「outer-men-jacket」なら、アウターのメンズジャケット用だとIDだけで読み取れます。数十種類を運用していると、この「名前を見れば分かる」状態が管理ミスの防止にそのまま効いてきます。

1ファイルに入れている情報

個別ファイルには、チャートのID・名前・対象(カテゴリ、アイテムタイプ、性別)に加えて、画面に表示するサイズ表そのものと、採寸ガイド(胸囲は胸の一番高い位置を水平に測る、身長は靴を脱いで測る、といった測り方の説明)を入れています。表示に必要な情報が1ファイルで完結しているので、チャートの追加は「ファイルを1つ足して一覧に載せる」だけで済みます。

表記揺れを吸収する正規化

入力のばらつきは前提にする

商品に付けるカテゴリや性別の情報は、人が入力するものなので必ずばらつきます。「women」「woman」「レディース」が混在する、といった状態です。これを「入力を揃えてください」という運用ルールで解決しようとすると、守られなかったときにチャートが出なくなります。

そこで、判定の前に入力値を決まった形に揃える「正規化」という処理を挟みました。ばらついた入力をそのまま受け取り、システム側で吸収する方針です。

カテゴリの判定ルール

カテゴリは、入力値に含まれるキーワードで判定します。

図を一言でまとめると、「入力の文字の中に特徴的な単語が入っていれば、そのカテゴリとみなす」という判定です。完全一致を求めないので、多少の表記のばらつきなら問題なく分類できます。

性別の判定ルール

性別も同じ考え方で、よくある表記パターンを4つのグループに集約します。

どのパターンにも当てはまらなければ男女共用(unisex)として扱います。判定不能をエラーにせず、いちばん無難な受け皿に流す。この逃げ道を用意しておくと、想定外の入力でもチャート表示が止まりません。

割り当ての二段構え管理

標準の対応表と、上書き用の対応表

「どの組み合わせにどのチャートを出すか」の対応表は、2箇所で管理しています。コードの中に組み込んだ標準の対応表と、Vercel KV(管理画面から書き換えられる、クラウド上の小さなデータ置き場)に置いた上書き用の対応表です。

図を一言でまとめると、「変更したい部分だけKVで上書きし、それ以外は標準の対応表で動かす」という二段構えです。

なぜ二段にしたのか

標準の対応表だけだと、割り当てを1つ変えるたびにサイトの更新作業(再デプロイ)が必要になります。逆にKVだけに寄せると、KV側に障害があったときにサイズチャートが全滅します。二段にしておけば、日々の変更は管理画面から即座に反映でき、万一KVが読めなくても標準の対応表で表示は続く。変更のしやすさと壊れにくさを両取りするための構成です。

取得の流れとキャッシュ

商品ページからの取得の流れ

商品ページでは、API(ページの裏側でデータを問い合わせる窓口)を通じてサイズチャートを取得します。

図を一言でまとめると、「商品ページが商品情報を渡すと、裏側で判定と読み込みが済んで、表示できる形のチャートが返ってくる」という流れです。

変わらないデータは作り置きしておく

サイズチャートは頻繁に変わるデータではないので、キャッシュ(一度用意した結果の作り置き)を積極的に使っています。

3層それぞれで作り置きが効くので、アクセスが集中してもサイズチャートの表示が遅くなりません。変わらないものは作り置き、変わるものだけ都度確認。キャッシュ設計の基本形です。

まとめ

サイズチャートのデータ構造は、「1チャート1ファイルの管理」「表記揺れを吸収する正規化」「標準+KVの二段構えの対応表」「3層のキャッシュ」という組み立てになっています。ばらついた入力を前提に受け止め、変更には管理画面で即応し、障害時にも標準の対応表で動き続ける。運用し続けることを最初から織り込んだデータ設計です。

このデータを使った判定の順序や、ユーザー向けのサイズ提案機能は、関連記事で解説しています。