集客ROIシミュレーターを1枚HTMLで作る。広告費の判断を全員が同じ前提で話せる業務ツール

「広告費を月10万円増やしたら、成約は何件増えるのか」。この問いに即答できず、毎回スプレッドシートを開いて数式をこね回している。投資判断のたびにそれをやっている経営者・マーケ責任者は多いと思います。

厄介なのは計算の手間より、前提がそろわないことです。担当者Aは成約率3%で試算し、担当者Bは2%で見ている。会議では「で、結局いくら使えば黒字なの」がふわっとしたまま、なんとなく予算が決まる。後から「あの前提どこから来たの」と蒸し返される。場当たりの試算は、速くないし共有もされていません。

この記事では、集客の費用対効果を試算する集客ROIシミュレーターを、1枚のHTMLファイルだけで作った実例を紹介します。広告投資の判断をする立場の人が、「どう作るか」より先に「そもそも作るべきか」「自社か外注か」「どの方式が向くか」を判断できるところまで書きます。

結論：業務計算ツールは1枚HTMLで足りる場面が多い

集客ROIのようなインタラクティブな計算ツール（＝数字を入れると即座に結果が変わるツール）は、1枚のHTMLファイルで十分作れます。サーバーもビルドツール（＝コードをまとめて動く形に変換する仕組み）もいりません。

なぜそれで足りるのか。このツールに必要なのは次の3つだけだからです。

この3つは全部、ブラウザの中（HTMLとJavaScript＝ブラウザ上で計算を動かす言語）で完結します。データを外部にためる必要も、複数人が同時編集する必要もない。だから常時動かすサーバーは要りません。立派なWebアプリにするより、1枚HTMLで割り切るほうが、業務計算ツールでは長持ちします。

ビフォーアフター：何が変わるか

このツールの価値は「計算が速くなる」ことではありません。判断が速くなり、前提がそろうことです。

「広告費を月X万円増やしたら成約が何件増えるか」を、全員が同じ前提で話せる。これが整うと、予算会議の質が変わります。計算の手間が消えるのはおまけで、本命は判断のスピードと前提の一致です。

なぜ1枚HTMLなのか：3つの理由

業務ツールを作るとき、つい「Reactで作ろう」「バックエンドも用意しよう」と話が大きくなりがちです。集客ROIシミュレーターには、それは過剰です。1枚HTMLが向く理由は3つあります。

理由1：壊れにくい

サーバーがあれば、落ちれば使えません。ビルドツールがあれば、依存パッケージ（＝部品として借りている外部プログラム）の更新で動かなくなることがあります。1枚HTMLはブラウザで開くだけで、何にも依存しません。3年後にダブルクリックしても、たぶんそのまま動きます。

投資判断に使うツールは、機能の豊かさより「いつ開いても動く」ほうがずっと大事です。

理由2：配布が簡単

ファイル1個をメールに添付する、共有ドライブに置く、社内ポータルに上げる。どれも一瞬で終わります。「このURLにアクセスして」とサーバーを立てる準備がいりません。受け取った側もダブルクリックで開くだけ。経営層に「これで試算してみてください」と渡すハードルが低い。

理由3：AIに作らせやすい

1枚HTMLは、見た目（HTML/CSS）と計算（JavaScript）が1ファイルに収まっています。AI（Claudeなど）に「こういう計算をするツールを作って」と頼むと、1ファイルで完結したものが返ってきます。ファイル構成やビルド設定を説明する必要がないので、AIとの相性がいい。AIにLPやツールを作らせる流れはClaude CodeでLPを作った実例でも書いたとおり、構成がシンプルなほど指示が通りやすくなります。

このツールの中身：ファネル計算

集客ROIシミュレーターの計算は、シンプルなファネル（＝集客から成約まで段階的に絞り込まれる流れ）です。

集客（広告費 ÷ CPA ＝ 集客人数）
  ↓ 参加率
イベント参加 / 来店
  ↓ 商談率
商談
  ↓ 成約率
成約（× 単価 ＝ 売上）

入力するのは、広告費（またはCPA＝集客単価）、各段階の歩留まり（参加率・商談率・成約率）、成約単価です。出力は、各段階の人数、売上・粗利、損益分岐点（何件成約すれば黒字か）、利益額と利益率。入力が変わるたびにJavaScriptで再計算し、結果をその場で描き直します。

ここまでは普通のファネル計算ですが、実用に耐えさせるための作り込みが3つあります。

設計の肝1：オンラインとオフラインを分けて計算する

集客チャネルは、オンライン（Web広告・SNS）とオフライン（新聞・チラシ・DM）で経済性がまったく違います。

• オンライン：CPAは変動的で、データが取りやすい
• オフライン：まとめ出稿で規模メリットが出る一方、データは取りにくい

これを1つの平均CPAで丸めると、実態とずれた数字が出ます。そこで、オンラインCPAとオフラインCPAを別々に入力し、それぞれの集客人数を出して合算する設計にしました。

オンライン：広告費A ÷ オンラインCPA ＝ 集客人数A
オフライン：広告費B ÷ オフラインCPA ＝ 集客人数B
合計集客 ＝ A ＋ B

歩留まり（成約率）もチャネルごとに変えられます。「Web経由は数は多いが成約率は低い、紹介経由は数は少ないが成約率が高い」という実態を、そのまま反映できる。チャネルを分けるだけで、試算の現実味がかなり上がります。

設計の肝2：状態をURLで共有する

このツールで一番効く機能が、入力条件をURLに埋め込んで共有できることです。

roi-simulator.html?cpa_on=5000&cpa_off=8000&rate=0.03&...

入力した条件をURLの末尾（クエリパラメータ＝URLに付け足す設定値）に乗せ、「共有」ボタンでそのURLをコピーする。受け取った人がURLを開くと、同じ条件が再現された状態でツールが立ち上がります。

これが「前提の共有」の正体です。「この前提で試算したらこうなった」を、スクショではなく実際に触れる形で渡せる。会議で「CPAを下げたらどうなる」と聞かれたら、その場でスライダーを動かして見せられる。後から「あの数字の前提は」と問われても、URLを開けば条件ごと残っている。属人化と蒸し返しが、この一機能でかなり消えます。

業種別のプリセット（よくある条件をあらかじめ詰めたセット）も用意しておくと、「まずこれを選んで自社の数字に置き換える」という使い方ができます。

設計の肝3：推定値を実績に置き換えられるようにする

シミュレーターの初期値は仮の数字（推定値）です。ただし、運用実績がある項目は実数に置き換えられるようにしておきます。

「過去のイベントでオフライン集客のCPAは実際8,000円だった」という実績があるなら、その数字を入れる。推定と実績を区別すると、実績がある項目ほど信頼度の高い試算になります。入力欄に「この値の根拠」を注記として表示しておくと、後で見たときに「これは実績、これは推定」が一目で分かる。判断材料として効くのは、この区別がある試算です。

どの方式で作るか：選択肢を比べる

「1枚HTMLで作った」と書きましたが、社内で使えるROI計算ツールの作り方はこれ1つではありません。代表的な選択肢を、安さ以外の軸（壊れにくさ・共有しやすさ・作る手間）で並べます。

今回1枚HTMLを選んだのは、「入力に応じて即計算する軽いツールを、安く・壊れず・配りやすく回したい」という条件に最も合ったからです。逆に、実データを自動で取り込んで毎日ダッシュボードで見たいならBIツールが向きますし、作る手間すら惜しいならSaaSを月額で借りる手もあります。安さだけで方式を決めないことが大事です。

いくらかかるか：運用費だけ見ると判断を誤る

1枚HTMLの運用コストはほぼゼロです。サーバーを持たないので毎月の固定費がかからない。ここだけ見ると「タダで作れる」に聞こえますが、発注や内製を判断するなら、コストを4つに分けて見てください。

ここは一般的な試算として書いています。初期構築は、計算ロジックがシンプルなら数時間から半日程度の作業量です。むしろ時間がかかるのは「どの段階を、どの歩留まりで計算するか」を決める設計のほうで、これは作業量というより前提の合意です。安さに飛びつく前に、止まったとき誰が直すのかと、前提を誰が決めるのかまで決めておくと安全です。

自社でやるか、外注するか

「安いなら自社で」と即決する前に、次の3点で判断してください。

AIに作らせれば自社で内製できる場面は増えました。ただし、AIに丸投げする場合は注意点が2つあります。

1つは、計算ロジックの正しさを自分で検算すること。AIが書いた損益分岐の式が自社の前提と合っているか、人が一度は手計算で突き合わせる。ここを確認せず社内に配ると、間違った前提で予算判断する事故につながります。

もう1つは、何を計算したいかを言語化できること。「集客ROIを出すツール」だけでは、AIはどの段階をどう計算すべきか決められません。ファネルの段階・各歩留まり・単価の置き方を自分で説明できる人がいないと、AIに作らせても使えないツールが返ってきます。設計の前提を持っているのは発注側です。

こんなケースには向かない

無理にツール化しないほうがいい場面も正直に挙げます。

• 試算が年に数回しかない：作る手間より、その都度スプレッドシートで計算したほうが速い
• 欲しいのが文章の要約や定性的な分析：それは計算ツールの守備範囲外で、レポート自動化（定例の文章要約・配信）の仕組みの仕事
• 実データの自動取り込みと定点観測が主目的：入力して試算する1枚HTMLではなく、BIツールの仕事

「広告費の投資判断を、繰り返し・複数人で・同じ前提でやりたい」場面ほど、シミュレーター整備の効果が出ます。

まとめ：判断の速さと前提の一致を、1枚で買う

集客ROIシミュレーターを作るときの設計原則は4つです。

1. 1枚HTMLで割り切る（サーバー・ビルド不要、壊れにくく配りやすい）
2. 状態をURLに埋め込んで共有する（前提を条件ごと渡せて、後から蒸し返されない）
3. オンライン/オフラインなど経済性が違うチャネルは分けて計算する
4. 推定値は実績に置き換えられるようにし、根拠を注記する

このツールが生むのは、計算の時短ではありません。「広告費を月X万円増やしたら成約が何件増えるか」を、会議の場で全員が同じ前提で話せる状態です。判断が速くなり、前提がそろい、属人化が消える。立派なWebアプリより、割り切った1枚HTMLのほうが、その目的には合っています。AIに作らせれば、アイデアから形にするまでのハードルはもう高くありません。

集客の投資判断を、社内ツールで整えたい方へ

「広告費をいくら使えば黒字か」を毎回スプレッドシートで計算し直している。担当者ごとに前提がバラバラで、予算会議がふわっと決まる。そういう状態に心当たりがあるなら、計算を仕組みに移すタイミングです。

f2t.jpでは、こうした業務ツールの内製支援（AI活用を含む）から、社内での活用定着までお手伝いしています。まずは「どの判断をツール化すると効くか・自社で作れるか外注すべきか・どの方式が向くか」を一緒に整理するところから始められます。お問い合わせフォームから、自社で繰り返している試算業務をご相談ください。