Web 制作会社やフリーランス、学内技術支援部門などでの利用を想定した、
見積作成用 Web アプリのプロトタイプを制作しました。
フロントエンドのみで、
「実務で説明できる業務アプリ」を意識して制作した見積作成ツールです。
バックエンドを使用せず、
HTML / CSS / JavaScript のみで完結する構成とし、
項目管理・金額計算・保存・印刷までをフロントエンドで実装しています。
https://stanv.shop/apps/quote/
制作背景・目的
職業訓練の卒業制作として、実務で「実際に使われる」こと
単なる見た目ではなく業務フローを意識した設計
将来的に海外案件にも対応できる拡張性を重視して設計しました。
特に「入力のしやすさ」「見積書としての体裁」「説明可能な設計」
を意識しています。
主な機能
- 見積基本情報の入力
（案件番号、見積名、顧客名、敬称、作成日） - 見積項目の追加・削除
（作業内容／単価／数量／小計の自動計算） - 小計・税額・合計金額の自動算出
- 税率の可変設定（国内外を想定）
- 日本語／英語の表示切替（多言語対応）
- データのローカルストレージ保存
→ ページ更新後も内容を復元 - 印刷・PDF 出力を想定したレイアウト設計
設計上の工夫・こだわり
■ 実務を意識した UI / UX
- 顧客名と敬称は入力しやすさを考慮して独立配置
- 見積明細が主役になる印刷レイアウト
- 案件整理を想定した案件番号の導入
■ 多言語・海外対応を見据えた構成
- 日本語／英語の切替に対応
- 国内外クライアントを想定した税率設計
- 文言は i18n 辞書管理とし、拡張しやすい構造に
■ フロントエンド単体でも破綻しない設計
- バックエンド非使用（課題要件準拠）
- localStorage による状態管理
- 後方互換性を意識したデータ保存設計
セキュリティ面での配慮
バックエンドを持たない構成ですが、
XSS 対策としてユーザー入力は innerHTML を使用せず、
textContent を用いて描画する設計としています。
フロントエンド単体でも、
最低限のセキュリティ意識を持った実装を行いました。
使用技術
- HTML
- CSS（レスポンシブ対応）
- JavaScript（Vanilla JS）
- Web Storage API（localStorage）
補足
本アプリはあくまでプロトタイプですが、
実際の業務で使われることを前提に、
- UI の細かな改善
- 印刷帳票としての体裁
- 国・言語差分への配慮
を段階的に反映して完成させました。
制作時間：4.5時間
使用ツール：Gemini