01 / OVERVIEW — PROJECT 04 / WEB APP
データ照合ツール
2つのデータを全部見比べる作業から、
違うところだけ確認する作業へ。
本番公開中／お試しデータで体験できます
02 / WHY & STORY
全部から探すを、確認が必要なところだけ見るへ。
2つのシステムから出力した商品データなどを比べるとき、列名、並び順、商品名の表記、JANや型番の有無が揃っていないことがあります。同じ商品でも、在庫・価格・公開状態は異なるかもしれません。
そのまま行を比べることはできず、データ整理、並び替え、対応付け、フィルタ、差異確認という複数の工程が必要になります。この面倒を、同じ対象を探してから違いを見る流れに整理しました。
03 / FLOW
探してから、違いを見る。
- 012つのデータを読み込む
CSVとXLSXをA・Bへ1件ずつ読み込めます。CSV／XLSXの混在や、XLSXのシート切り替えにも対応しています。
- 02同じ対象を探す
商品名、JANコード、型番、メーカーなどを対応付け、高一致・中一致・低一致・候補なしに分けます。
- 03違う項目だけ確認する
在庫、価格、公開状態、コメントなど、指定した項目の差異を表示。結果の詳細を開き、XLSXへ保存できます。
04 / UI & EXPERIENCE
初めてでも、どこから始めるかが分かるように。
ガイドと作業画面を分ける
PCでは左側に7ステップの使い方を常設し、右側で作業を進めます。スマートフォンではガイドを折りたたみ、操作を縦に並べます。
お試しデータを用意する
ファイルを用意していない人も、完全架空の公開デモで照合の流れを試せます。
差異を見つけやすくする
差異あり・差異なし・B側のみで絞り込み、結果詳細では違う項目を優先して確認できます。
05 / DECISION
できることより、確認しやすさを優先する。
TWO STEPS
照合と差異確認を分ける
単純な行比較ではなく、まず同じ対象の候補を探し、その後に指定項目の違いを確認する2段階にしました。
WEB FIRST
Web画面を確認体験の中心にする
色付きXLSXのためだけに依存を増やすことはせず、画面では色・ラベル・フィルタで確認し、XLSXは保存・持ち出し用の3シート出力にしました。
HUMAN CHECK
結果をそのまま信じない
高・中・低一致や候補なしを分け、最終的な確認は人が行える状態を残しています。
06 / TECH & PRIVACY
データを外へ送らず、照合する。
- INPUT
- CSV / XLSX、A・Bデータの混在利用、XLSXシート切り替え
- OUTPUT
- 照合結果・元データA・元データBを含む3シートXLSX
- PRIVACY
- CSV・XLSXはブラウザ内で処理し、外部サーバーへ送信しない
- TECH
- HTML / CSS / JavaScript / SheetJS Community Edition 0.20.3
- HOSTING
- Cloudflare Pages／サーバーAPIなし
- LIMIT
- XLSX入力は10MiBまで
07 / CURRENT
データ照合ツールを試す
本番公開中です。お試しデータが入っているので、ファイルを準備しなくても照合の流れを体験できます。