見積もり電卓テンプレ ── 自分のサイトに置ける見積もり計算機(vanilla JS + React)
- Digital1,980 JPY



何ができるか 自分のサイトに置ける見積もり電卓です。次の 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 保存)、内訳のコピー、「この内容で問い合わせる」を追加


