実務社内ツール / 可視化 / PDF自動生成 / データ連携

金融レポート自動化 — 可視化・PDF生成・データ連携

月次PDFレポート作成を自動化する社内ツールで、可視化・データ取得・PDF生成までをフロントエンド側から整理・実装した案件。SQL構造をPrismaモデルに落とし込み、Chart.js と Puppeteer を使って実運用に耐えるレポート生成フローを整えた。

Frontend Partnerフロントエンド画面開発支援フロントエンド画面設計支援フロントエンド画面設計支援MVP概要設計MVP仕様設計MVP初期版実装

背景

営業チームでは、顧客ごとに20〜100ページ規模の月次レポートを手作業で作成しており、毎月1〜2週間分の工数がかかっていました。複雑な金融データへのアクセスや資料整形が必要で、特定のエンジニアに依存しやすい状態でした。

属人的でミスが起きやすい手作業プロセスを、再現性があり、将来的に非技術職でも扱えるフローに置き換える必要がありました。

業務の流れをそのまま画面に落とし込まない

既存の手順を単純にUI化するのではなく、必要な判断・確認・出力の順番を整理し直しました。

エンジニア依存を減らす前提で設計

将来的に営業メンバーでも扱えるよう、複雑なデータ処理は裏側に寄せ、画面側は操作意図が分かりやすい流れにしました。

レポート作成工数

1〜2週間 → 数時間の見込み

金融レポート自動化 — 可視化・PDF生成・データ連携

Frontend Partnerフロントエンド画面開発支援フロントエンド画面設計支援フロントエンド画面設計支援MVP概要設計MVP仕様設計MVP初期版実装

背景

課題

属人的でミスが起きやすい手作業プロセスを、再現性があり、将来的に非技術職でも扱えるフローに置き換える必要がありました。

SQLやスプレッドシートの知識が前提になっていた

毎月の作業負荷が重い

品質や進め方が作業者依存になりやすい

実施内容 / 進め方

手作業の流れをヒアリングし、「データ選択 → グラフ確認 → PDF出力」という自然な作業順に整理

チャート表示とPDF出力を一つのUI上で扱えるよう設計

データ取得部分をPrismaモデルに置き換え、安全性と再利用性を高めた

関係者と連携しながら、実運用に耐えるPDF出力フローを構築

工夫した点 / 設計上のポイント

業務の流れをそのまま画面に落とし込まない

既存の手順を単純にUI化するのではなく、必要な判断・確認・出力の順番を整理し直しました。

エンジニア依存を減らす前提で設計

将来的に営業メンバーでも扱えるよう、複雑なデータ処理は裏側に寄せ、画面側は操作意図が分かりやすい流れにしました。