パッチー・クリエイツでは、2026年1月31日に「簡易お見積もりシミュレーター」を公開しました。
このツールは、お客様からよくいただく「だいたいいくらくらいになりますか？」という質問に、より分かりやすくお答えするために開発したものです。
今回は、その開発の舞台裏と、こだわったポイントをご紹介します。
なぜシミュレーターを作ろうと思ったか
映像制作や撮影のお見積もりは、サービスの組み合わせや時間、場所によって金額が大きく変わります。
お問い合わせをいただく前に「だいたいの予算感を知りたい」というニーズが多く、料金表だけでは分かりにくいという課題がありました。
そこで、お客様自身が条件を入力して、リアルタイムで概算を確認できるツールを作ることにしました。
開発の流れ
フェーズ1: 基本機能の実装
まずは、サービス選択機能と料金計算ロジックを実装しました。
調整ポイント:
- 価格の丸め処理（
Math.ceil）の実装 - 時間の四捨五入（小数点第4位）の実装
- スチル写真の2時間以上割引の自動適用
フェーズ2: Google Maps API連携
柏駅からの所要時間を自動計算する機能を追加しました。渋滞を考慮したルート検索で、より現実的な出張費を算出できるようになっています。
調整ポイント:
- API保護機能の実装（レート制限）
- 当初5秒間隔 → 最終的に15秒間隔に変更
- セッションあたりの最大回数を制限
- キャッシュ機能（当初1時間 → 最終的に10時間に延長）
- ボタンの不活性化とカウントダウン表示
- エラーハンドリングの充実化
一般道優先、有料道路なしの設定で、実際の見積に近い条件で計算しています。
フェーズ3: UI/UXの改善
使いやすさを追求して、細かな調整を重ねました。
納品メディア選択のレイアウト調整:
- PC版：オンライン納品を横1列、その他を3列グリッド
- SP版：全て1列表示
- 978px以下で3列→2列に変更
- 複数選択可能に変更（当初は排他的選択）
所要時間入力の改善:
- 開始日時 + 所要時間（時間・分）の入力システムに変更
- ±ボタン：時間±1、分±15
- タイプ入力時のフォーカス制御（「1.5」入力時に「1.」で確定されない）
- 分のタイプ入力：59以上の場合、下2桁に変換、60以上は0に
数量入力の改善:
- タイプ入力時：フォーカスアウトまで確定しない
- ±ボタン・spinner使用時：即座に全体を更新
- 小数点入力への対応
フェーズ4: ミニマムチャージの実装
平日日中（0:00-20:00）のミニマムチャージを自動判定する機能を追加しました。
- 動画撮影: ¥11,900 × 3 = ¥35,700
- スチル撮影: ¥13,800 × 3 = ¥41,400（割引価格適用）
- ドローン: ¥29,600 × 1.5 = ¥44,400
納品メディア費用を除外して計算し、注意文に「※納品メディア費用除く」を追記しています。
フェーズ5: 追従バーの実装
予算プログレスバーと現在の総額を表示する追従バーを実装しました。
レスポンシブ対応:
- 1401px以上：右側固定、縦並びレイアウト（幅260px）
- 1400px以下：画面下部固定、横並びレイアウト
予算なし時の表示調整:
- PC版（1401px以上）：縦並び表示を維持
- 下部固定（1400px以下）：1行表示でセンタリング
プログレスバーは100%超過時も実際のパーセンテージを表示（例：135%）するようにしています。
フェーズ6: 細かな調整
- 印刷余白の調整（1.5cm）
- レイアウトのブレークポイント調整
- API保護機能の強化
- 残り回数表示（20%以下で表示）
- カウントダウンタイマーの実装
- セッションストレージでの状態保存
技術的なポイント
フロントエンド
- Hugo（静的サイトジェネレーター）
- Vanilla JavaScript（フレームワークなし）
- CSS（レスポンシブデザイン）
API連携
- Google Maps Geocoding API
- Google Maps Directions API
- レート制限とキャッシュによる保護
セキュリティ対策
- API キーの環境変数管理
- レート制限（15秒間隔、セッションあたり上限つき）
- キャッシュによる重複リクエスト防止（10時間）
- セッションストレージでの状態管理
AIとの協働開発
このシミュレーターは、AIとの対話を通じて開発しました。
開発プロセス
- 要件を日本語で伝える
- AIが実装を提案
- 実際の動作を確認しながら細かく調整
- 合計50回以上のイテレーション
調整の例
「納品メディアを選択」欄をバグ修正します。PC・SPともに、各要素内は２行にしてください。 １行目に「オンライン納品」などのタイトルと価格、２行目に説明を設置。 また、要素が現状横に５列並んでいます。これを３列にしてください。 また、オンライン以外を選択すると、オンラインが解除されます。 これらは排他的ではなく、両立しますので、修正してください。
このような具体的な指示を繰り返し、理想の動作に近づけていきました。
こだわったポイント
1. リアルタイム更新
入力値が変わると即座に見積もりが更新されるため、予算内での調整がしやすくなっています。
2. 予算管理の視覚化
プログレスバーで予算との比較を視覚的に表示。予算超過時は赤色で警告します。
3. 手動入力のフォールバック
API検索に出ない場所や、独自の情報を持っている場合に備えて、手動入力モードも用意しています。
開発データ
- 開発期間: 約1日（集中的な開発とテスト）
- イテレーション回数: 50回以上
- コード行数:
- JavaScript: 約1000行
- CSS: 約1100行
- HTML: 約200行
今後の展開
ユーザーフィードバックを元に、さらなる改善を続けていく予定です。
- 新しいサービスの追加
- より詳細な見積もり機能の検討
- ローカルストレージでの入力内容保存
まとめ
お客様により分かりやすく料金をご確認いただけるツールが完成しました。
AIとの協働により、短期間で高品質な実装が可能になり、今後も改善を続けていきます。
ぜひ、簡易お見積もりシミュレーターをお試しください。
ご不明な点がございましたら、お気軽にお問い合わせください。
LINEでお問い合わせ