バックエンドゼロで実現するAIデータ抽出デモ

技術要件と目的

CrowdWorks・ランサーズでデータ入力案件を受注する際、提案時に添付できる「AI抽出精度の実証デモ」が必要だった。見込み顧客が短時間で精度を確認できること、そして発注判断の心理的障壁を下げることが要件。新規リード獲得は本体サイトが担うため、本デモは提案添付ツールとして位置付けた。

技術スタックの選定

フロントエンドは Next.js 16（App Router）+ React 19 + Tailwind CSS v4 + TypeScript を採用。AI抽出には Claude Opus 4.7 Vision を利用し、サンプル生成と構造化に活用した。インフラは Vercel Hobby枠 + Cloudflare DNS でランニングコストをゼロに抑える構成。補助ツールとして Vitest、サンプル画像生成の Pillow、自動化に gh CLI / Vercel CLI を組み合わせた。

設計ピボットの経緯

当初は双方向Webアプリとして実装した。ユーザーがPDFをアップロード → Next.js API Routes 経由で Claude Vision API を呼び出し → 構造化JSONをCSVとしてダウンロードする、典型的なフルスタック構成である。初版は約4時間で完成した。

しかしその直後、ScaleFactor（総調達額$103M、AI自動化を謳いながら実体は人力のアウトソース簿記担当者で、精度不足により顧客から返金要求や信頼失墜を招き、2020年に事業停止）の失敗事例を批判的にレビューした段階で、設計を全面的に見直した。判断の根拠は3つ。

1. 機密データを「知らないエージェンシー」に送ることへの顧客の心理的抵抗
2. バックエンドを持つこと自体が ScaleFactor 的な不透明性への懸念を残すこと
3. CrowdWorks の実単価（1件 1000〜5000 円）に対して、Vision API の実行コストは事業経済性と整合しないこと

「機密を受け取らない設計」のほうが、信頼獲得と事業継続性の両面で優位だと結論付けた。

最終アーキテクチャ

クライアントサイドのみで完結する静的サンプルギャラリーへ全面リデザインした。請求書・名刺・アンケート回答用紙の3種を、ビルド前に Claude Opus 4.7 Vision でローカル抽出して結果JSONをバンドル。ユーザーはサンプル選択 → Before/After 並列表示 → セル編集 → クライアント側 Blob API で CSV 生成、という流れでダウンロードする。サーバー通信は HTML 初回フェッチのみ、APIルートゼロ、バックエンドゼロ、ランタイムコストゼロを実現した。CTA は問い合わせフォームではなくサービスLPへのリンクに統一し、プラットフォーム内メッセージで受注が完結するよう動線を整理した。

開発成果

初版実装約4時間、ピボット後の最終形実装約3時間、デプロイとドメイン設定約1時間。総計1営業日以内で本番公開まで到達した。Lighthouse は Performance 100 / Accessibility 91 / Best Practices 100 / SEO 96、全ルート静的生成によりエッジCDN配信で LCP 1秒未満。月額運用費はゼロである。

加えて、scaffold → critical review → build → Vercel デプロイ → Cloudflare DNS → Lighthouse 検証 → 状態更新までを product.sh / deploy-demo.sh にワンコマンド化しており、同等のデモは再現性高く量産可能。構想段階で失敗事例を批判的にレビューし実装前に方針転換したプロセス自体が、発注企業が最も気にする「判断の質」を示す成果物となった。