月次PDFレポート作成ツール — 業務フロー・可視化・PDF生成
東京拠点の営業チームが毎月20〜30社へ提出するPDFレポートの作成を支援する社内ツール。1人のバックエンドエンジニアに集中していた業務を整理し、データ選択、グラフ確認、複数ページPDF出力までをReactベースのUIとして実装した。一部の実レポートを用いた試用を行い、個々の処理時間から、最長約10営業日かかっていた作業を数時間まで短縮できると見積もった。
期間：2022年4月〜2023年3月
この実績が活きるご相談
SQL、Excel、PowerPointにまたがる業務を整理し、データ取得から成果物の出力までを一つの社内ツールとして設計・実装した事例です。
- 手作業に時間がかかる定期業務を整理したい
- 特定のエンジニアに集中している作業を再現可能なフローにしたい
- データ取得、可視化、PDF出力までを一つの画面で扱いたい
- 将来的に非技術職へ引き継げる操作フローを設計したい
概要
東京拠点の営業チーム向けに、顧客提出用の月次PDFレポートを作成する社内ツールのフロントエンド開発をリードしました。既存の作成業務をヒアリングし、データ選択、グラフ確認、複数ページPDF出力までを一連のUI操作として構成しました。ReactとTypeScriptによる画面実装に加え、生SQLクエリからPrismaモデルへの移行とChart.jsによる可視化を行い、PDF生成にはPuppeteerを選定して実装しました。
背景
営業チームは、毎月20〜30社の顧客へ、それぞれの状況に合わせたPDFレポートを提出していました。各レポートは20〜100ページ規模で、大規模な社内金融データベースから必要な情報を取得し、PowerPointとExcelを使って組み立てていました。この業務は1人のバックエンドエンジニアが担当しており、長い場合は毎月約10営業日を要していました。処理中はPCがレポート作成作業に占有され、ほかの業務を並行しにくい状況も生じていました。
課題
顧客ごとに異なる大規模なレポートを扱いながら、作成工程を再現可能な操作フローとして整理する必要がありました。
- SQL、PowerPoint、Excelに作業と判断基準が分散していた
- 毎月20〜30社分、各20〜100ページのレポートを扱う必要があった
- 作業が1人のバックエンドエンジニアに集中していた
- 作成に最長約10営業日かかり、その間のほかの業務にも影響していた
- 将来的な営業メンバーへの引き継ぎを見据える必要があった
- 顧客ごとの内容を保ちながら、可視化とPDF出力を安定した手順にまとめる必要があった
主な利用者
- 月次レポートを作成していたバックエンドエンジニア
- 作成状況と成果物を確認するマネージャー
- 将来的な運用引き継ぎ先として想定された営業メンバー
実施内容 / 進め方
既存業務とレポート作成ロジックの把握
社内ユーザーへのヒアリングを行い、金融データの取得、内容の選択、グラフ作成、PowerPointとExcelでの編集、PDF出力までの工程を整理しました。SQLやスプレッドシートに含まれていた判断と作業の流れも確認しました。
操作フローと必要情報の構造化
ヒアリング内容をもとに、レポート作成を「データ選択 → グラフ確認 → PDF出力」という一連の操作として構成しました。顧客ごとのレポート内容を扱いながら、作業者が現在の工程を把握しやすい画面構造を検討しました。
データ取得部分の整理
既存の生SQLクエリをPrismaモデルへ移行し、フロントエンドから必要な金融データを扱える形に整えました。生SQLに直接依存していたデータ取得処理を、アプリケーション内で管理しやすい構成へ移しました。
可視化とPDF生成の実装
React、TypeScript、Material UIを使って画面を構築し、Chart.jsによるグラフ表示を実装しました。Puppeteerを選定し、UIで確認した内容を複数ページのPDFとして出力できるようにしました。
実レポートを使った試用と検証
一部の実レポートを使って各工程を試し、処理時間と操作の流れを確認しました。月次作業を担当していたバックエンドエンジニアとマネージャーから、操作の分かりやすさや負荷軽減についてフィードバックを得ました。
チーム内での仕様調整
GitHub、Slack、Jiraを使い、API仕様、UX上の優先事項、実装内容、進行状況を関係者と共有しました。レポート作成に必要な業務上の要件と、フロントエンド・バックエンドの実装条件をつなぎながら進めました。
設計・実装上のポイント
業務上の判断を操作フローに反映
既存業務に含まれていた判断、確認、出力の工程を整理し、画面上で順番に進められる操作へ落とし込みました。
データ処理と画面設計を一緒に整理
SQLに含まれていたレポート作成ロジックを確認し、Prismaモデル、画面上の選択肢、グラフ表示、PDF出力のつながりを設計しました。
顧客ごとの内容と共通工程を両立
20〜100ページ規模の個別レポートを扱いながら、データ選択から出力までの共通工程を再利用できる形にまとめました。
将来的な運用引き継ぎを想定
複雑なデータ処理をアプリケーション側で扱い、非技術職の営業メンバーが将来操作することを想定して、作業順と画面上の確認方法を整理しました。
結果
レポート作成工数
最長約10営業日 → 数時間（個々の処理時間に基づく試用時の見積もり）
- 一部の実レポートを使ってMVPを試用
- 分散していた作業を、データ選択からPDF出力までの一連のUI操作として構造化
- バックエンドエンジニアとマネージャーから、操作の分かりやすさと負荷軽減について良いフィードバックを獲得
- 非技術職の営業メンバーへの将来的な引き継ぎを想定したワークフローをMVPとして構築
この案件で扱ったこと
レポート作成ロジック、社内ユーザーの作業手順、顧客向け成果物として求められる内容、データ取得、画面設計、PDF生成を一つの業務フローとして整理しました。実装範囲にはフロントエンド開発、生SQLクエリからPrismaモデルへの移行、バックエンドエンジニア・マネージャーとの仕様調整が含まれます。業務要件とデータ処理を確認しながら、実際に操作できるMVPへ落とし込んだ案件です。
期待できる効果
手作業を構造化したことで、以下の運用上の効果が期待できます。
- 手作業による品質のばらつきを抑えやすくする
- データ取得からPDF出力までの工程を共通化する
- レポート作成中にPCと担当エンジニアが長期間拘束される状況を軽減する
- 顧客向け成果物のデータ整合性と品質を管理しやすくする