見積もり電卓テンプレ ── 自分のサイトに置ける見積もり計算機（vanilla JS + React）

何ができるか

自分のサイトに置ける見積もり電卓です。次の 8 つができます。

税込から逆算

税率 10% / 8%（軽減税率）の切替

源泉徴収の手取り計算

値引き（円または %）

明細行（項目 × 数量 × 単価）

見積書の印刷（PDF 保存）

内訳のコピー

「この内容で問い合わせる」

デモ: suminawa.dev/projects/quote-simulator

※デモは基本の計算だけの無料版です。上の 8 つはこのテンプレートに入っています。

なぜ「埋め込み」にしたか

フリーランスの見積もりは往復しがちです。サイトに置けば、相手が問い合わせの前に自分で概算を出せます。

置き方

zip の embed/ フォルダに 3 ファイル（embed-snippet.html・quote-calculator.global.js・quote-calculator.css）が入っています。

この 3 つを同じ階層に置いて、下のコードを貼るだけです。

ビルドは要りません。

<link rel="stylesheet" href="./quote-calculator.css">

<div id="quote"></div>

<script src="./quote-calculator.global.js"></script>

<script>QuoteCalculator.mount(document.getElementById("quote"));</script>

React 版のコンポーネントも同梱しています。

計算の仕様

小計 = 時間単価 × 工数（日は hoursPerDay 倍）。一式なら一式金額。明細なら数量×単価を行ごとに丸めて合計

オプション = 小計 × 率（四捨五入）

値引き（円 または %）= 円指定は入力額、%指定は（小計+オプション）× 率。上限は小計+オプションの合計

税抜合計 = 小計 + オプション − 値引き。税 = 税抜合計 × 税率（10%/8% から選べる、既定は切り捨て）

税込から逆算 = 税込金額から税額を割り戻して税抜金額を出す。合計は入力額と 1 円もずれない

源泉徴収 = 税抜合計に 10.21%（100 万円超は 20.42%）をかけて、差引お支払額まで出す

負数・空欄は 0 扱い。金額は整数に丸めます（小数のある通貨は今後のバージョンで対応）

設定を変える

mount(要素, 設定) の第 2 引数に、変えたい項目だけ渡します。

項目 既定値 意味

currency.symbol / currency.locale "¥" / "ja-JP" 通貨記号と桁区切り

hoursPerDay 8 「日」入力時の換算

tax.rate / tax.label 0.1 / "消費税" 税率と表示名

tax.choices 10% / 8%（軽減税率） 税率の選択肢（2 つ以上で切替表示）

tax.rounding "floor" 税額の丸め: floor/round/ceil

withholding 10.21%・20.42%・100 万円 源泉徴収の税率としきい値

discount 表示する 値引き欄の表示

defaults 時間単価 5,000 円・10 時間・一式 300,000 円 初期値

sheet 有効期限 30 日・発行者は空 見積書の発行者情報

contact email 空 問い合わせ先。空なら非表示

options 急ぎ+20% / 修正無制限+15% / 土日祝+10% 追加オプション

labels.* 日本語 画面の文言

色と間隔は --qc-* の CSS 変数で変えられます。

価格とライセンス

発売記念価格 ¥1,980（9/17まで）。以降は ¥2,980 です。発売記念価格で買うと、その後の 1.x アップデートも無料で受け取れます。個人・組織ライセンスがあり、再配布・転売・同種商品化は禁止です。note の有料記事版も同価格です。

zip の中身: embed / dist / demo / styles / src / README.ja.md / LICENSE.md / CHANGELOG.md

公式サイト

https://suminawa.dev/projects/quote-simulator

動作環境

Chrome・Safari・Firefox・Edge の最新版で動きます。サーバーは不要で、静的な HTML に置けます。

React 版のコンポーネントは React 18 以上が対象です。

アップデート履歴

2026-09-12: v1.1.0 発売。

税込から逆算、税率 10%/8% の切替、源泉徴収の手取り、値引き、明細行、見積書の印刷（PDF 保存）、内訳のコピー、「この内容で問い合わせる」を追加