自社サイトでの実装事例 ／ 実際に動くものはこちら
課題
制作の相談で最初に聞かれるのは、ほぼ必ず「いくらかかるか」です。ところが料金表を載せても「自分の場合はいくらなのか」は分からないため、問い合わせをためらう方が多くなります。かといって細かい表を並べると読まれません。
もうひとつ、受け取る側の問題もあります。「ホームページを作りたいです」だけの問い合わせは、そこから何往復もヒアリングが必要で、双方の時間を消費します。
対応した内容
- 6つの質問に答えるだけで概算金額と目安納期が出るシミュレーターを実装。ラジオボタン・チェックボックス・スライダーのみで、テキスト入力や会員登録は一切不要にした
- 金額の内訳を全項目その場で表示。「基本料金80,000円＋ページ追加60,000円＋…」と加算の根拠を見せ、ブラックボックスにしない
- 選んだ種類に応じて不要な設問を自動で隠す（例：表示速度改善を選ぶとページ数と機能の設問が消える）
- 算出結果をお問い合わせフォームの本文へ自動転記。「この内容で相談する」を押すと、選択内容・概算・希望納期が入力済みの状態でフォームが開く
- 転記には
sessionStorageを使用。URLのクエリ文字列に依存しないため、選択内容がブラウザ履歴やアクセスログに残らない - Contact Form 7 の「ご依頼の種類」プルダウンも自動選択。転記後はストレージを破棄する
- 結果パネルは
position: stickyで追従。aria-live="polite"を付与し、選択のたびに読み上げが更新される - 外部ライブラリ不使用。追加の読み込みはゼロで、外部ドメインへのリクエスト0件を維持
検証で見つけて直した不具合
実装後、条件を変えながら全パターンを検証したところ、納期の計算に2つの欠陥が見つかりました。書いておきます。
- 「急ぎ」を選ぶと規模に関係なく納期が1〜2週間に固定されていた。10ページ＋予約機能＋多言語でも1〜2週間と表示され、守れない納期を提示してしまう状態だった。規模から算出した週数に係数を掛ける方式に変更
- 表示速度改善で「急ぎ」を選ぶと納期が1週間から1〜2週間へ逆に伸びていた。短縮後が元より長くならないよう上限を設けて修正
- あわせて「1〜5週間」のような幅が広すぎて意味をなさない表示も、下限を上限に連動させて解消
金額を出すツールは、間違った数字を出すくらいなら無いほうがましです。実装より検証に時間をかけました。
使用技術
JavaScript（素のDOM操作のみ）、PHP（WordPressショートコード）、CSS Grid、sessionStorage、Contact Form 7 連携
結果
| 項目 | 実装前 | 実装後 |
|---|---|---|
| 自分の場合の金額 | 料金表から自分で判断 | 6問で即時算出 |
| 問い合わせ時の入力 | 要件をゼロから記述 | 自動転記・追記のみ |
| 追加の読み込み | — | 0 件 |
同じ仕組みが向いている案件
料金が条件で変わる業種——リフォーム、引越し、修理、士業、レンタル、撮影など——では、同じ考え方の見積もりツールが有効です。問い合わせ数だけでなく、問い合わせ1件あたりの質が変わります。ご相談ください。