毎回同じ計算を、手でやっていませんか
見積もりの金額、料金のシミュレーション、割引後の合計、手数料を引いた手取り。毎回同じ式で、数字だけが変わる計算は、Excelやスマホやメモでやっていることが多いはずです。
式を打ち間違えたり、前回の数字が残っていたり、他の人に渡すと「どこに入力するの？」と聞かれたり。こうした困りごとは、入力欄と答えの欄だけの小さなツールにすると、解消できることがあります。
この記事では、ブラウザで開くだけで動くHTML1ファイルのツールについて、向いている場面、コピーして試せる最小の例、頼むときの準備と費用の目安をまとめます。
先に、筆者について。筆者は設計の仕事をしていて、AIも使ってツールや図面データを作っています。この記事の「頼む場合」では、筆者自身が受けている内容にも触れます。実案件の納品実績はまだありません（作例は、架空の設定で作ったものです）。比較はできるだけ公平に書きます。
HTML1ファイルのツールとは
HTMLファイルを1つ作り、ダブルクリックでブラウザ（Chrome・Edgeなど）で開くと動く、小さなツールです。
向いているところ
- インストールも、サーバーも要りません。ファイルを渡せば、相手のブラウザで開けます。
- インターネットにつながっていなくても動きます（外部と通信するコードを入れない場合）。
- 入力欄と答えの欄だけにできるので、「どこに入れるの？」が起きにくいです。
向いていないところ
- 入力した内容を、あとから一覧にして集計する用途は苦手です（ブラウザの中で動くため、データが残りません）。
- 複数人が同時に同じデータを編集する用途には向きません。
- 個人情報や機密データを大量に扱う用途には、別の仕組みを検討してください。
Excelのままの方がよい場合も、もちろんあります。数字が何百行もあるなら、Excelの方が向いています。ツールにするのは、「入力が数個、計算式が決まっていて、答えを見たい」という場面です。
コピーして試せる、最小の例
次のコードをメモ帳などに貼り付けて、keisan.html という名前で保存し、ダブルクリックで開いてみてください。単価・数量・割引（%）を入れると、税込の合計が出ます。
<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>見積り計算</title></head>
<body>
<h1>見積り計算</h1>
<p>単価（円）<input id="price" type="number" value="1000" min="0"></p>
<p>数量<input id="qty" type="number" value="3" min="0"></p>
<p>割引（％）<input id="off" type="number" value="10" min="0" max="100"></p>
<p>合計（税込）<strong id="out">-</strong> 円</p>
<script>
function calc(price, qty, off) {
// 小数の誤差を避けるため、整数のまま計算し、最後に割る（税10%・円未満切り捨て）
return Math.floor(price * qty * (100 - off) * 110 / 10000);
}
function update() {
const v = id => Number(document.getElementById(id).value);
const ok = ['price', 'qty', 'off'].every(id => Number.isFinite(v(id)) && v(id) >= 0);
document.getElementById('out').textContent = ok
? calc(v('price'), v('qty'), v('off')).toLocaleString('ja-JP') : '入力を確認してください';
}
document.querySelectorAll('input').forEach(e => e.addEventListener('input', update));
update();
</script>
</body>
</html>最初の初期値（単価1,000円・数量3・割引10%）では、2,970円と表示されます。手で計算すると、1,000 × 3 = 3,000円、10%引きで2,700円、税込で2,970円なので、合っています。
作るときの4つのコツ
- 計算の式は、先に紙に書く：入力に何を使い、何を出すか、端数はどうするかを、コードより前に決めます。
- 端数の扱いを決める：切り捨て・四捨五入・切り上げは、業界や社内のルールで決まっていることがあります。上の例は、円未満を切り捨てています。
- 入力のチェックを入れる：空欄・マイナス・文字が入っても、画面が崩れないようにします（上の例では「入力を確認してください」と出します）。
- 手計算と照合する：ツールが出した数字を、電卓や元のExcelと3パターン以上突き合わせてから使います。小数の誤差で1円ずれることがあるためです。
頼む場合
自作が難しい、入力項目が多い、見た目を整えたい、という場合は、頼む方法もあります。
費用の目安
公開されている相場の例です（2026-10-16時点の確認）。
- ココナラで「HTMLツール」を検索すると、1,843件の出品がありました。診断・料金シミュレーター系で15,000円、記録ツール系で7,000円、CSV変換系で3,000円の出品が見つかりました。
- 内容（入力項目の数、計算の複雑さ、デザイン、修正の回数）で、価格は大きく変わります。現物のイメージ（今のExcelなど）を見せて、見積りをもらってください。
頼む前に準備しておくと、話が早いもの
- 今やっている計算の式（Excelなら、ファイルか画面のスクリーンショット）。
- 入力する項目と、出したい答えの一覧。
- 使う人と、使う場所（社内だけ・お客様にも見せる・スマホで使う、など）。
- 確認用の数値例（入力と、そのときの正しい答え。3パターンほど）。
個人情報や社内の機密にあたるデータ、使用許諾のないファイルは、そのまま送らないでください。 数値をダミーに置き換えた形で相談するのが安全です。
頼めない・頼むときに気をつけること
- 健康・医療・金融に関わる判定を、ツールが断定する形にすることはお受けしていません。「目安の表示」にとどめ、断定する表現は入れません。
- 個人情報を大量に扱うシステム、会員管理、決済を伴うものは、HTML1ファイルの範囲を超えます。
- 納品後の継続的な保守は含まれていないことが多いです。必要なら、別途確認してください。
筆者が受けている内容（参考）
筆者は、HTML1ファイルのツール（料金計算、診断（目安の表示）、記録・一覧の管理、CSVの整形など）を受けています。AI（生成AI）を、コードの生成に使い、動作確認と仕上げは本人が行います。納品の目安は4〜10日です。
実案件の実績はまだないため、作例（架空の設定の試算ツール）を公開しています。依頼するかどうかは、作例と見積りを見てから決めてください。
まとめ
- 「入力が数個・計算式が決まっている・答えを見たい」場面は、HTML1ファイルのツールに向いている
- 動く最小の例は数十行。端数と入力チェックを決めておくと、あとで困らない
- 頼むなら、今のExcelなどを見せて見積りをもらう。確認用の数値例（3パターン）を用意しておくと安心
- 個人情報の大量処理・会員管理・決済・断定的な判定は、HTML1ファイルの範囲外
あわせて読みたい：
