14

AI · INVOICE REVIEW

Invoice FlowAI請求書チェックツール

カテゴリ

業務自動化 / AIレビューUI

技術

React / TypeScript / Vite

デプロイ

Cloudflare Pages

ステータス

LIVE

何を作ったか

実案件でよく見かける「請求書・領収書をAIで読み取り、スプレッドシートやDriveへ整理したい」という課題を、ポートフォリオ用の架空デモとして再構成しました。

Gmail取込 → AI読取 → 人の確認 → Drive保存までの流れを、実際の業務ツールのようなダッシュボードUIで表現。実データ・顧客情報・本物の請求書は使わず、すべて架空データで制作しています。

画面の流れ

  • Gmail取込 — 添付PDF/JPEGを受け取る想定で、受信件数や処理状況を見える化
  • AI読取 — 取引先・請求番号・発行日・支払期限・金額・税額を抽出する想定のUI
  • 人の確認 — 信頼度が低い項目だけ確認待ちにし、修正・承認できる画面設計
  • Drive保存 — 月別フォルダへ整理し、処理履歴として残す流れを表現

こだわり

  • 最初の画面から、LPではなく実際に使う業務ツールとして見える構成にした
  • 確認待ち・承認済み・要確認の状態が一目でわかるよう、色とラベルを整理
  • 請求書プレビューと読み取り結果を左右に並べ、担当者が確認しやすい導線にした
  • スマホ幅でも崩れないよう、テーブルやフォームを縦並びに切り替えるレスポンシブ設計
  • 公開前提のため、メールアドレス・取引先名・金額はすべて架空サンプルに限定

技術構成

  • React — 画面をコンポーネントとして構成
  • TypeScript — 請求書データの型を定義し、状態表示のミスを減らす
  • Vite — 軽量な開発環境と高速ビルド
  • lucide-react — 業務UIに合うアイコンを使用
  • Cloudflare Pages — 静的デモとして公開