No.002 / Systems & Tools / 2025
建設・外構向け配置見積シミュレーター
建設・土木・外構分野の形状・配置検討から、必要数量と概算の確認、見積資料の作成までを支援するレスポンシブWebアプリケーション。
Project facts
- Role
- Webシミュレーター開発・継続改善
- Deliverable
- 見積シミュレーター
- Industry
- 見積・配置設計 / 建設・土木・外構
- Capability
- フロントエンド開発 / パフォーマンス最適化 / 保守・改善 / UI設計
- Technology
- JavaScript / SVG / WordPress / html2canvas / PHP
- Audience
- 建設・土木・外構分野で配置計画を行う担当者 / 施工条件に応じた必要数量と概算を確認したい利用者 / PCやスマートフォンから見積資料を作成したい担当者
課題
建設・土木・外構分野では、施工対象の形状や配置条件によって面積、必要数量、概算が変化する。これらを一つの画面で確認し、端末ごとに異なる操作UIでも描画、集計、見積資料の整合を保つ必要があった。
解決策
SVGによる配置プレビューと、形状・配置条件に連動する数量計算をブラウザ上に実装。描画完了データを集計の基準として扱い、画面表示と資料出力が同じ計算結果を参照する構成へ整理した。
主要機能・工夫
- 形状・配置編集
施工対象の形状と複数の配置パターンを画面上で切り替えて検討する。
- 数量・概算の連動計算
面積、必要数量、関連指標、概算を描画状態に合わせて更新する。
- 端末別の操作UI
PCとモバイルの特性に合わせた編集方法を提供する。
- 描画と集計の整合
描画完了データを数量集計の基準として扱う。
- 数量の手動調整
算出結果を確認しながら必要数量を調整できるようにする。
- 作業状態の復元
ブラウザ内へ状態を保存し、再訪時の作業再開を支援する。
- 見積資料への接続
配置結果と計算内容を見積・提案資料の生成へつなげる。
成果・変化
- 描画と数量集計の参照経路を統一
描画完了データを集計の基準とし、表示と内部計数が分岐しにくい構成へ整理した。
- 画面と出力資料の計算経路を共通化
調整後の数量と小計を、画面と出力資料で共通の計算結果から取得する構成にした。
- 端末ごとの操作性と計算整合性を両立
PCとモバイルに専用UIを用意しながら、同じ計算契約に基づいて結果を扱えるよう整理した。
- 継続運用を支える状態管理を整備
モード切り替えや再訪時にも、対象となる状態を適切に復元できる構成へ改善した。
建設・外構分野の配置検討と概算確認を、ひとつの画面に
建設・土木・外構分野における配置検討を支援するWebシミュレーターです。施工対象の形状や配置条件を変更すると、完成イメージ、面積、必要数量、概算が連動して更新されます。
PCとスマートフォンにはそれぞれの操作特性に合わせたUIを用意し、配置検討から見積・提案資料の作成までを一つの流れにつなげています。
配置条件と計算結果のずれをどう防ぐか
施工対象の形状や配置方法によって必要数量が変化するシミュレーターでは、描画結果、画面上の集計、出力資料が別々の計算結果を参照すると不整合が起こりやすくなります。
端末ごとに異なる操作UIを提供しながらも、同じ条件から一貫した結果を得られることを重視しました。
SVG描画を基準にした数量・概算計算
SVGによる配置プレビューと、形状・配置条件に連動する計算処理をブラウザ上に実装しました。描画完了データを集計の基準として扱い、面積、必要数量、関連指標、概算を同じ状態から更新します。
画面上で調整した数量も資料出力へ引き継ぎ、表示と出力の計算経路が分岐しにくい構成へ整理しています。
主な機能
- 施工対象となる形状の入力・編集
- 複数の配置パターン切り替え
- SVGによる配置イメージの描画
- 面積・必要数量・概算の連動計算
- 数量の手動調整
- PCとモバイルに最適化した操作UI
- 作業状態の保存・復元
- 見積・提案資料の生成
継続運用を支える計算整合性と状態管理
描画、画面集計、資料出力の参照経路を整理し、端末や製品モードを切り替えた場合にも対象となる状態を適切に扱えるよう改善しました。
ブラウザ内の状態保存と復元、描画負荷の制御、回帰確認を組み合わせ、運用中の変更を継続的に反映できる構成を整えています。