CSVの「あと少し」が、登録作業を止める
商品名、SKU、価格、在庫、画像ファイル名。必要な情報はそろっているのに、表記ゆれや空欄が残ったままCSVを作ると、登録前の確認が長くなる。
今回作った Catalog Check は、EC運用で出やすいその「あと少し」を、登録する前にまとめて見つけるためのデモ。特定のモールへ接続するサービスではなく、手元のデータを確認しやすくするためのブラウザ内ツールとして設計している。
何ができるプロダクトなのか
商品CSVを入れる
CSVを貼り付けるか、ファイルとして読み込む。
崩れを見つけて整える
読み替えや補正を行い、修正が必要な行を表示する。
登録しやすい形で出力
結果を確認して、次の作業に渡せるファイルを保存する。
先に見つけたい3つの崩れ
列名のばらつき
商品名、SKU、価格などの呼び方を読み取り、出力側に必要な列へ揃える。
価格と在庫の不整合
円記号、カンマ、空欄、マイナス価格、在庫ゼロを確認し、見直す行を分ける。
画像ファイル名の不足
拡張子の抜けや空欄を見つけ、画像が出ないまま登録されるリスクを減らす。
変換だけで終わらせず、確認する場所を残す
単に列を並べ替えるだけだと、「どこを直すべきか」が別の作業になる。そこで、変換プレビューの横に要修正・確認・登録OKの件数と理由を表示し、チェック表CSVにも出力できるようにした。
楽天風、Yahoo風、Amazon風の列構成を選べるようにしつつ、価格の扱い、商品名の空白整理、URL用キーの作成、画像拡張子の補完などを切り替えられる。実際のモール仕様は案件ごとに確認が必要なので、ここでは安全なサンプルデータだけを扱っている。
— What It Leaves Behind
このデモで残るのは、整形済みCSVだけではない。どの列を読み替えたか、自動で何を整えたか、どの行を確認すべきかも見える。納品前の確認や、次にデータを触る人への引き継ぎまで見据えた形にしている。
CSVを外部へ送らない理由
商品データには、公開前の商品名、価格、画像ファイル名などが含まれることがある。デモとして気軽に試せるよう、CSVの読み込みと変換はブラウザ内だけで完結させた。入力内容を外部サーバーへ送信しないため、サンプル以外のデータでも扱いを確認しやすい。
「案件用の画面」から、使えるプロダクトへ
最初は、ポートフォリオとして何を作ったかを説明する要素が強かった。ただ、それでは初見の人が「結局、このツールは何をしてくれるのか」をつかみにくい。
そこで画面を見直し、冒頭から 入力 → 確認 → 出力 の流れを見せるようにした。制作意図はこのブログやポートフォリオ側で伝え、ツール本体は操作と結果を主役にする。この分け方のほうが、実際に試す人にも、制作物として見る人にも分かりやすい。
今回作ったもの
- CSV貼り付け・CSVファイル読み込み
- 楽天風 / Yahoo風 / Amazon風の列名への読み替え
- 価格・在庫・画像名などの確認と一部補正
- 変換プレビュー、要確認リスト、整形済みCSV・チェック表CSVの保存
- PCとスマホで崩れない表示、ブラウザ内完結のデータ処理