ホームページに見積もりシミュレーターを置くQuote Calculator

見積もりシミュレーターは、単価・数量・オプションの率・消費税といった料金の決まりを先に書き出し、入力のたびに内訳と合計を計算し直す電卓としてページに置くと作れます。消費税の端数をどう丸めるかと、オプションの率をどの金額に掛けるかを先に決めておくと、あとで出す見積書と金額がずれません。

見積もりのやり取りが何度も往復するとき、料金の決まりを書き出してページに自動計算の電卓を置く手順と、消費税の端数・源泉徴収・見積書の PDF までを入れた電卓を置く方法です。

公開日 2026年10月4日／書いた人: 墨縄（suminawa）

ホームページに見積もりシミュレーターを置くと、何が変わりますか

問い合わせの前に、相手がご自分で概算を出せる。「だいたいいくらですか」の往復が減る
条件を変えるたびに内訳と合計がその場で変わるので、どのオプションでいくら上がるのかが相手に伝わる
出した内訳をそのまま問い合わせのメールに入れてもらえば、どの条件の話かを取り違えない

どう見えるかは、見積もりシミュレーターの見本で試せます。時間単価・一式・オプション・消費税だけの、基本の計算をする版です。

料金の決まりは、どう書き出しますか

コードを書く前に、紙か表に料金の決まりを書き出します。ここが決まれば、電卓は決まりを写すだけです。

小計の出し方を決める。時間単価 × 工数か、一式の金額か、項目 × 数量 × 単価の明細か
オプション（急ぎ・土日の対応など）の率と、その率を何に掛けるかを決める。小計に掛けるのがいちばん分かりやすい
値引きを円で引くのか % で引くのか、引ける上限をどこにするのかを決める
消費税の率と、1 円未満の端数を切り捨てるのか、四捨五入か、切り上げかを決める
「税抜合計＝小計＋オプション − 値引き」「税込＝税抜合計＋消費税」のように、式を 1 行ずつ書く

手で置ける電卓は、どう作りますか

時間単価 × 工数に「急ぎ」のオプションと消費税を足すだけなら、下の HTML を 1 つ貼れば動きます。入力のたびに計算し直し、合計を書き換えます。

<!-- ページの置きたい場所に貼る。単価・率・税率はご自分の料金に直す -->
<form id="quote">
  <label>時間単価（円） <input id="rate" type="number" min="0" value="5000"></label>
  <label>工数（時間） <input id="hours" type="number" min="0" value="10"></label>
  <label><input id="rush" type="checkbox"> 急ぎ（+20%）</label>
  <p id="total"></p>
</form>
<script>
  const $ = (id) => document.getElementById(id);
  const num = (id) => Math.max(0, Number($(id).value) || 0); // 空欄・負の数は 0
  const yen = (n) => n.toLocaleString('ja-JP') + ' 円';
  function update() {
    const subtotal = Math.round(num('rate') * num('hours'));
    const option = $('rush').checked ? Math.round(subtotal * 0.2) : 0;
    const net = subtotal + option;                // 税抜合計
    const tax = Math.floor((net * 10) / 100);     // 消費税 10%、端数は切り捨て
    $('total').textContent = '税込 ' + yen(net + tax) + '（うち消費税 ' + yen(tax) + '）';
  }
  $('quote').addEventListener('input', update);
  update();
</script>

消費税を「net × 0.1」と書かずに「net × 10 ÷ 100」としているのは、小数の掛け算で出る誤差で、切り捨ての結果が 1 円ずれることを避けるためです。オプションや明細を増やすときも、1 つの計算の中で「小計 → オプション → 値引き → 税」の順を守ると、表示と見積書の金額がそろいます。

オプションを増やすときは、チェックボックスを 1 つ足し、option の行を同じ形で足します。問い合わせにつなぐなら、内訳の文を encodeURIComponent で包んで mailto: のリンクの body に入れると、内訳が本文に入った状態でメールが開きます。

税込からの逆算や源泉徴収、見積書の PDF はどうしますか

電卓を仕事で使い始めると、次の 3 つが欲しくなります。キットではこう扱っています。

税込からの逆算: 税込の金額から税額を割り戻して税抜を出す。合計は入力した税込の額と 1 円もずれないようにする
源泉徴収: 税抜合計に 10.21%（100 万円を超えた分は 20.42%）を掛け、差し引いたお支払額まで出す
見積書: 宛名・件名・発行者・有効期限の入った A4 1 枚を、ブラウザの印刷から PDF で保存する

自分で組むか、キットを使うか、設定ごと頼むか

道は 3 つあります。

自分で組む: 料金の決まりが単純なら、上の HTML で足ります。費用はかかりません
キットを使う: 「見積もり電卓テンプレ」（¥2,980 の買い切り）は、時間単価・一式・明細・税込からの逆算の 4 つの方式、10% と 8%（軽減税率）の切り替え、値引き、源泉徴収、見積書の印刷、内訳のコピー、内訳を本文に入れた問い合わせのメールまでを行います。ファイルを 3 つ置いてコードを 4 行貼れば、ビルドなしで動きます。React 版の部品も入っています ── BOOTH / note
設定ごと頼む: お使いの料金表に合わせた設定と、サイトへの設置までお受けします ── 制作のご相談

見本・キット・ご相談

見積もりシミュレーターの見本を開く（その場で試せます）
見積もり電卓テンプレ（キットとテンプレートの一覧）
制作のご相談（料金の目安と進め方）