SELF-INITIATED DEMO / 自主制作
CSV AUTOMATOR — CSV加工から、毎週の集計まで
OVERVIEW
一度決めた列の意味を覚えて、二回目からは質問しない集計ツール。
Live Demoを操作する自主制作のツールです。処理はすべてこのブラウザの中で行い、ファイルはサーバーへ送信しません。UTF-8 / 10,000行 / 50列まで。AIは使っておらず、増減の理由を断定することもしません。XLSXとPDFの出力は、内容を検証できる形で出せないため用意していません。
- AI
- 使っていません計算と決まった規則だけで動きます。
- 保存先
- このブラウザ保存したルールと処理の履歴を、このブラウザにだけ保存します。読み込んだファイルはこの端末から出ません。
- 外部送信
- なしファイルはサーバーへ送信しません。読み込みも集計も、このブラウザの中で行います。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 仕様確認後に提示
- PRICE GUIDE / 参考価格
- 要件により見積
WORKING VERSION / 操作できる版
画面を動かして試せます
この制作例には、実際に使える業務ツールがあります。CSVを読み込み、列の意味を一度決めて保存すると、次のファイルからは質問なしで集計し、前回との差と読み取れなかった行だけを示します。読み取れない行はその場で直せます。ファイルは端末から出ません。
架空の店舗ではなく、道具です。読み込んだファイルはこの端末から出ず、サーバーへの送信も外部サービスへの連携もありません。作ったルールと履歴はブラウザの中だけに保存されます。
01THE PROBLEM
毎週届く同じ形式のファイルに、毎週同じ説明をやり直していること。
- 想定したクライアント
- 毎週、売上のCSVを手で整えて報告している担当者（架空）
- 想定依頼
- 毎週のCSV整理を簡単な操作に置き換えたい。
- 起きていること
- 毎週同じ形式のファイルが届くのに、毎回「この列は金額」「この列は日付」と説明し直している。
- 困りごと
- 列の順番が変わったり、新しい列が増えたりするたびに集計が壊れ、気づくのが遅れる。
- 制作コンセプト
- 業務の一工程を確実に軽くする。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
一度決めた列の意味を覚えて、次の週からは聞き返さない。
列の対応・通貨・重複条件をルールとして保存し、次のファイルへ自動で当てました。列の順番が変わっただけなら質問せず、前になかった列と税区分のときだけ確認します。
1週目を読み込む
サンプルの1週目（または手元のCSV）を読み込み、列の意味を選びます。
ルールとして保存する
列の対応・通貨・重複の条件をルールにして保存。名前と版がつきます。
2週目は質問なし
列の順番が変わっただけのファイルは、保存したルールでそのまま集計します。
新しい列だけ確認する
3週目は、前になかった列と未確認の税区分だけを聞きます。答えると前回との差と読み取れなかった行が出て、CSVで書き出せます。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
読み取れない行を隠さない
日付や金額が読めない行を一覧にし、その場で直して再集計。元のファイルは変えません。
前回との差
合計・件数・例外の数を前回と比べます。増減の理由は断定しません。
数式として開かれない書き出し
表計算ソフトで数式として動きかねないセルを無害化してからCSVに書き出します。
かんたん加工（/demos/csv）
重複・空白・全角半角の整理と、列の合計・並び替え。2MBまで・UTF-8のファイルに対応します。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- ルール（列の対応・通貨・重複の条件・版）
- 処理の履歴（合計・件数・例外の数、40件まで）
- 読み取れなかった行への修正（元データとは別に持つ）
状態の流れ
- 読み込み
- 列の確認
- 集計
- 差の確認
- 書き出し
安全のための決まりごと
- 前になかった列と税区分のときだけ、人に確認する
- 修正は元データに上書きせず、重ねて持つ
- 書き出すCSVは数式として実行されないよう整える
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- CSVの読み込み・列の対応づけ・ルールの保存と版
- 前回との差・読み取れなかった行の一覧と修正
- 集計結果・読み取れなかった行のCSV書き出し、要約のコピー
- かんたん加工ツール（/demos/csv）
デモ限定
見せ方のために簡略化していること
- サンプルは架空の店舗の3週分
- UTF-8・10,000行・50列まで
未接続
公開版では接続していないもの
- クラウドストレージやメールからの自動取り込み
- XLSX・PDFの出力（内容を検証できる形で出せないため用意していない）
本番化に必要なこと
実案件で追加で設計・実装するもの
- 実際のファイル形式（文字コード・区切り文字・日付の書き方）の確認
- 定期実行やフォルダ監視などの自動化
- 共有の保存先と、誰がルールを変えられるか
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 要件により見積／納期目安 仕様確認後に提示。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
仕様確認後に提示
要件により見積
- 列の意味をルールとして保存し、次回から自動で適用
- 前回との差・変更の記録・読み取れなかった行の一覧
- 読み取れない行をその場で直して再集計（元ファイルは変更しない）
- 数式対策付きのCSV出力と、報告文にそのまま貼れる要約
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- ファイルの種類と、形式の揺れ（列名・日付・文字コード）
- 集計の種類と、報告書の形
- 自動取り込み・定期実行の有無
- 既存のExcelマクロやスプレッドシートとの置き換え範囲
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
検証した内容
- 読み込み・整形・出力を自動テストで確認：引用符・セル内改行・BOM・列数の上限・数式として解釈される値の無害化・負の数値の保持
- このデモを依頼として制作する場合は、実行手順書・サンプルでの確認結果・合意した検収項目が加わります（下の「CSV整形ルーチン 1本」）。
確認日 2026-09-21。記載しているのは実際に行った検証だけで、作業時間の削減や売上の変化は測定していません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「CSV AUTOMATORを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。