Project 2

Estimate Tool

見積り作成を効率化するWebアプリ

Web Application

In Progress

React • TypeScript • jsPDF

Client

Personal

Role

UI Design / Front-end Development

Period

2026

WebsiteVisit →
Estimate Tool

Overview

業務で毎日のように繰り返していた見積り作成を、 数分から数十秒へ短縮することを目的に開発したWebアプリケーション。

見積り業務は単純作業に見える一方で、 案件ごとの項目調整、税計算、PDF作成など、 小さな手間が積み重なることで作業時間を大きく消費していた。

本プロジェクトでは、 単なる入力フォームではなく、

「見積り作成という業務そのもの」

を再設計することをテーマに制作した。


Issue

毎回ゼロから見積りを作成する運用では、

  • 同じ入力を繰り返す
  • 税計算が煩雑
  • PDF作成に時間が掛かる
  • 修正のたびに再作成する

という非効率が日常的に発生していた。

業務量が増えるほど、 入力ミスや計算ミスのリスクも高くなり、 改善の余地があると感じていた。


Issue

毎回ゼロから見積りを作成する運用では、

  • 同じ入力を繰り返す
  • 税計算が煩雑
  • PDF作成に時間が掛かる
  • 修正のたびに再作成する

という非効率が日常的に発生していた。

業務量が増えるほど、 入力ミスや計算ミスのリスクも高くなり、 改善の余地があると感じていた。


Approach

最初から機能を増やすことは考えず、

「見積りを最短で完成させる」

という体験を中心に設計した。

そのため、

  • 入力しながら即時計算
  • PDF出力までワンフロー
  • 状態管理を整理した構成

を優先し、 将来的なAI機能やクラウド同期にも発展できるよう、 拡張性を意識して設計している。

Design Decisions

本プロジェクトでは、見積り作成を「入力画面」としてではなく、「業務フロー」として捉えた。

そのため、

  • リアルタイム計算
  • PDF出力
  • 保存

をそれぞれ独立した機能ではなく、一連の体験として設計している。

また、後からAI機能やクラウド同期を追加できるよう、初期段階から拡張性を意識した構成とした。

Challenge

本プロジェクトは、単に見積りツールを作ることだけが目的ではなかった。

ReactやTypeScriptを用いたモダンなフロントエンド開発に加え、Git / GitHub を用いたブランチ運用、Vercelによるデプロイなど、実際の開発現場を意識したワークフローを一つのプロジェクトの中で習得することも大きなテーマとしていた。

特に、機能追加を繰り返す中で状態管理やコンポーネント設計を何度も見直す必要があり、開発を進めるほど設計の重要性を実感した。

また、本プロジェクトではAIを積極的に活用しながら開発を進めたが、コード生成だけで完成するわけではなく、最終的な設計や品質管理は人間が担う必要があることを経験した。


Solution

UIは入力画面ではなく、見積り作成という一連の業務フローとして設計した。

入力内容はリアルタイムで金額へ反映され、PDF出力までを一つの流れとして完結できる構成としている。

また、コンポーネント単位で責務を分離し、状態管理を整理することで、後から機能追加しやすい構成を採用した。

現在も継続して改善を続けており、今後予定しているAI見積り提案やクラウド同期なども見据えた設計となっている。

Development

  • React
  • TypeScript
  • Vite
  • jsPDF
  • LocalStorage
  • Git
  • GitHub
  • Vercel

AIを活用しながら開発を進めたが、最終的な設計や品質管理は人間が行う前提でプロジェクトを進行した。

Features

  • PDF出力
  • 消費税計算
  • ローカル保存


Result

実務で繰り返していた見積り作成を大幅に効率化し、入力からPDF出力までを短時間で完結できるようになった。

また、本プロジェクトを通してReact・TypeScript・Git運用・デプロイフローまで一連のモダンな開発プロセスを実践的に経験することができた。

  • PDFをワンクリックで生成
  • 消費税を自動計算
  • ローカル保存に対応
  • 見積り作成時間を大幅に短縮
  • 継続的に改善しやすい構成を実現

What I Learned

最も大きな学びは、UIを作ることと、業務を設計することは別だということだった。

単に画面を実装するだけではなく、

「どの作業を自動化し、どこで判断を減らし、どのような体験を提供するか」

という視点で設計する重要性を実感した。

また、AIによるコード生成を活用する一方で、アーキテクチャや品質管理、設計判断は開発者自身が担う必要があることも学びとなった。


Next

今後は

  • AIによる見積り提案
  • 顧客管理
  • クラウド同期
  • テンプレート共有

まで発展させ、 業務改善ツールとして継続的にアップデートしていく予定。

Timeline

2026

Concept

見積り作成業務の効率化を構想

2026

Development

React + TypeScriptで開発

2026

Launch

Webアプリとして公開