01 / OVERVIEW — PROJECT 03 / WEB APP
Shopify用 商品CSV変換
会社ごとに異なる商品データを、
Shopifyへ取り込める形に。
Ver.1 正式公開中／公開後UX改善を反映
02 / WHY & STORY
ばらばらな形式を、毎回整える手間を減らしたい。
出発点は、企業や個人事業者がExcel、CSV、別システムの間で繰り返す商品データの変換作業でした。同じ意味の項目でも、商品名・品名・名称、商品番号・管理コード・SKUのように、会社ごとに列名や並びが異なります。
入力形式を固定するのではなく、最初に利用者が入力列とShopify側の項目を対応させる方式にしました。一度保存すれば、同じ形式のファイルでは次回から設定を再利用できます。Ver.1はShopify新規商品・単一バリエーションへ対象を絞っています。
03 / FEATURES
入力の違いを、設定で吸収
- 01CSV / XLSXを読み込む
ドラッグ＆ドロップにも対応。列名や列順が違うデータを、入力として受け取ります。
- 02対応を保存して繰り返す
「使用しない」と「全商品に同じ値を入れる」を含む項目設定を保存し、次回は選んで再利用できます。
- 03確認してから出力する
プレビューとValidatorで内容を確認します。SKUや価格などに問題があれば、CSV出力を停止します。
04 / DESIGN & THINKING
自動化しすぎず、人が確認できる形に。
入力形式を決めつけない
会社ごとの列名・列順の差は、利用者自身のmappingで吸収します。
繰り返す作業を減らす
一度決めた対応と共通値を設定として保存し、同じ形式の次回作業を短くします。
意味の確認は残す
機械的に正しい対応でも、意図に合うとは限りません。項目対応の確認と変換後プレビューを残しています。
商品データを外へ送らない
商品ファイル・商品データ・生成CSVはブラウザ内で処理し、変換設定だけをlocalStorageへ保存します。
05 / PROBLEMS & IMPROVEMENTS
公開後も、初めて使う人の体験を整える。
SETTINGS
見える設定と、使う設定を一致させる
保存設定を選んだとき、項目対応へ自動反映。画面で見えている内容と、実際の変換内容を揃えました。
HUMAN CHECK
問題だけで終わらせない
異常時は問題行数と問題件数を示し、元ファイルを修正して保存し、再読込する流れまで案内します。
FIRST EXPERIENCE
準備がなくても、その場で試せる
PCの左側に常設の使い方ガイドを置き、お試しセットと詳細マニュアルを追加。CSVやExcelを持っていない初めての利用者も、安全に価値を体験できます。
06 / DEVELOPMENT
作る、使う、直すを繰り返す。
- 01CSV変換の最小構成から始める
基本の変換と確認を作り、XLSX対応と設定の保存・再利用へ広げました。
- 02人が実際に操作して見直す
一時変更、変更警告、項目対応の表示を整え、6種類の手動サンプルで確認しました。
- 03テストと実インポートで確かめる
自動テストを4件から23件へ増やし、Shopifyへ20商品を実インポートして確認しました。
- 04公開後、初回体験を改善する
使い方ガイド、お試しセット、詳細マニュアルを追加し、作って終わりにしない改善を続けています。
07 / TECH & SPEC
技術仕様
- BASE
- HTML / CSS / JavaScript ES Modules
- FILE
- CSV / XLSX / SheetJS Community Edition 0.20.3
- STORAGE
- localStorage（変換設定のみ）
- PRIVACY
- 商品ファイル・商品データ・生成CSVを外部送信・外部保存しない
- VALIDATION
- SKU・価格・Status等を確認し、問題があればCSV出力を停止
- HOSTING
- Cloudflare Pages／サーバー・Shopify API・AI APIなし
- SCOPE
- Shopify新規商品用CSV／単一バリエーション
08 / CURRENT & NEXT
公開中のアプリを使う
Ver.1を正式公開中です。現時点では新規商品・単一バリエーションが対象。今後の対応範囲は、実際の利用状況・問い合わせ・要望を見て判断します。