ブログ収益シミュレーターをHTML/CSS/JSだけで作った方法【Claude Code活用】

2026年6月4日

Codex / Claude Code

前回公開したブログ収益シミュレーターは、月間PVから収益を予測し、目標月収から必要PVを逆算できるツールだ。AdSenseとアフィリエイトの併用に対応し、RPM・クリック率・成約率・報酬単価を自由に調整できる。

この記事では、そのシミュレーターをHTML・CSS・JavaScriptの単一ファイルでどう作ったかを解説する。これまでAI副業診断、プロンプトビルダー、文章チェッカーと3つのツールを同じ方式で作ってきたが、今回は初めてAIと直接関係のないテーマを選んだ。その理由も含めて共有する。

目次 [ close ]

なぜ「非AI」のツールを作ったのか

理由は3つある。第一に、当サイトの読者はブログ運営者や副業に関心のある人が多く、「収益の見通し」はAIツール以上に普遍的な悩みであること。第二に、サイトの「ブログ収益化」カテゴリにまだツールが1つもなかったこと。第三に、「ブログ収益シミュレーション」系の検索は競合が比較的弱く、ツール＋解説記事の形なら上位を狙えると判断したことだ。

ツール記事はフロー型の記事と違って古びにくく、内部リンクのハブにもなる。AIに限定せず、読者の課題に合うものを置いていく方針に切り替えた。

要件の整理

実装に入る前に、要件を次のように整理した。

「収益予測」と「必要PV逆算」の2モードをタブで切り替えられる
収益モデルはAdSenseのみ／アフィリエイトのみ／併用の3択
RPM・クリック率・成約率・報酬単価を詳細設定で調整できる
初心者向けにプリセット（雑記／特化／高単価アフィリ）を用意する
入力のたびにリアルタイムで再計算する
結果をワンクリックでコピーできる
単一ファイルで、WordPressのカスタムHTMLブロックに貼るだけで動く

実装のポイント

1. 計算ロジックは「PV単価」1関数に集約する

このツールの核心は、収益モデルごとの「1PVあたりの収益（PV単価）」を返す関数だ。AdSenseはRPM÷1000、アフィリエイトはクリック率×成約率×単価。これだけで全機能が成立する。

function perPv(v){
  var ad = (v.model !== 'af') ? v.rpm / 1000 : 0;
  var af = (v.model !== 'ad') ? (v.ctr/100) * (v.cvr/100) * v.unit : 0;
  return { ad: ad, af: af, total: ad + af };
}

2. 「予測」と「逆算」は同じ式の表裏

予測モードは「PV × PV単価」、逆算モードは「目標月収 ÷ PV単価」。モードを増やしても計算関数は1つのままで済む。逆算側は0除算だけ防いでおく。

var need = (p.total > 0) ? v.target / p.total : 0;

3. クラス名は全部プレフィックスを付ける

WordPressのテーマCSSとの衝突を避けるため、クラス名はすべて「brs-」（blog revenue simulator）で始めている。スタイルも要素セレクタを避け、brs-付きクラスにのみ当てる。これを怠ると、テーマ側のtableやbuttonの装飾が混ざって崩れる。過去3ツールで確立したルールだ。

4. テンプレートリテラルをあえて使わない

コード内の文字列結合は、バッククォートではなく「+」で書いている。WordPressに貼り付ける際の文字化けや自動整形のトラブルを避けやすく、コードをコピーして再利用する読者にとっても事故が少ないからだ。見た目は古風だが、埋め込みツールでは堅実さを優先した。

5. クリップボードAPIにはフォールバックを付ける

結果コピーはnavigator.clipboardを使うが、非対応環境やhttp接続では動かない。textareaを一時生成してexecCommandでコピーする旧方式をフォールバックとして残してある。

Claude Codeへの依頼プロンプト例

実装はClaude Codeに任せた。最初の依頼で使ったプロンプトの骨子はこうだ。

ブログ収益シミュレーターを単一HTMLファイルで作って。

要件:
- タブで2モード切替: PVから収益予測 / 目標月収から必要PV逆算
- 収益モデル: AdSenseのみ / アフィリエイトのみ / 併用
- 入力: 月間PV(スライダー併用)、目標月収、RPM、クリック率、成約率、報酬単価
- プリセット3種: 雑記初心者 / 特化 / 高単価アフィリ特化
- 結果: 月収(控えめ/標準/好調の幅)、内訳バー、年換算、PV単価、結果コピー
- 制約: 外部ライブラリ禁止、クラス名はbrs-プレフィックス、
  WordPressカスタムHTMLブロックに貼って動くこと、ダークテーマ

ポイントは、機能だけでなく「制約」を最初に渡すこと。単一ファイル・プレフィックス・埋め込み前提という制約を後出しすると、ほぼ作り直しになる。