Webアプリ（見積作成）

Web制作会社やフリーランスが使用する 見積作成用Webアプリのプロトタイプを作成しました。

URL：https://www.otomoko.shop/quote

本課題では バックエンドやAPIは使用せず、 HTML / CSS / JavaScript / ローカルストレージのみで作成しています。
フロントエンドだけでどこまで実務に近い体験を再現できるかをテーマにしています。

見積名・顧客名・作成日といった基本情報に加え、作業内容・単価・数量を入力することで金額が自動計算され、小計・消費税（10%）・合計金額をリアルタイムで確認できます。

また、ローカルストレージを利用して

を可能とし、ページをリロードしても作業を継続できる点を重視しました。

作業内容はテンプレート選択と自由入力を併用し、実務で価格が案件ごとに異なることを考慮して、柔軟に設定できる設計にしています。

さらに、画面操作用UIと印刷用レイアウトを分離し、印刷時にはA4縦の提出可能な見積書形式で出力されるよう実装しました。
ダーク／ライトテーマ切替やスマートフォン操作にも対応し、実際の利用シーンを意識したUI設計を行っています。

使用技術

ChatGPTにて作成
作業時間：4時間（＋調整1時間30分）