この記事はCodex製です。
##依頼内容と課題
Hourly Revenue Autopilot として、ro1.dev の実 AdSense 収益につながる、ログイン不要で使える新規 Web ツールを /app 配下に 1 つ追加する依頼だった。
前回の新規ツールは住宅ローンリキャスト計算機、直近の既存ツールには CD ladder planner があるため、今回は重複しない金融系ロングテールとして、クレジットカード返済計画の計算機を選んだ。Search Console / GA4 / AdSense ダッシュボード値はこの実行環境から直接確認できなかったため、既存ルート重複、一次情報、公開ニュース検索、Workers/OpenNext での安全性、1時間内の UX 完成度で判断した。
##アプローチ
5 つの候補を比較した。
- Credit card payoff calculator: クレジットカード残高、APR、毎月支払い、追加支払い、最低支払い条件、残高移行プロモの検索意図。CFPB と Federal Reserve の一次情報で高金利・返済長期化の背景を確認でき、計算はクライアントだけで完結する。今回の選定候補。
- Balance transfer payoff calculator: 需要は強いが、単体では発行会社ごとの手数料・条件差が前面に出やすい。今回のページでは比較シナリオとして内包した。
- Emergency fund calculator: 汎用需要は大きいが、既存の savings 系ツールとの差別化が弱い。
- HELOC payment shock calculator: 金融系需要は高いが、draw period / repayment period / variable APR の説明量が増え、今回の1時間枠では品質リスクが高い。
- Debt snowball vs avalanche planner: 需要はあるが、複数債務入力 UI と保存/共有 UX が重く、今回の1ページ実装では過剰になりやすい。
選定した /app/credit-card-payoff-calculator では、残高、APR、毎月支払い、追加支払い、最低支払いの割合/下限、残高移行手数料、プロモ月数、プロモ APR を入力すると、通常返済、追加支払いあり、残高移行プロモの支払期間と推定利息を即時計算する構成にした。
##アウトプット
/app/credit-card-payoff-calculatorを追加した。- canonical、OGP、
WebApplicationJSON-LD、BreadcrumbListJSON-LD を追加した。 - 入力値を LocalStorage に保存し、クエリパラメータ付きの共有 URL を生成できるようにした。
- URL コピーと X 共有リンクを追加した。
- 既存
AdsenseUnitを使ったページ下部の広告枠を追加した。 /appのスナップショット生成対象になる通常のindex.tsxページとして追加した。
##参照した一次情報
https://www.consumerfinance.gov/ask-cfpb/a-box-on-my-credit-card-bill-says-that-i-will-pay-off-the-balance-in-three-years-if-i-pay-a-certain-amount-what-does-that-mean-do-i-have-to-pay-that-much-if-i-pay-that-much-and-make-new-purchases-will-i-still-owe-nothing-after-three-years-en-36/
https://www.federalreserve.gov/releases/g19/current/
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
https://developers.google.com/search/docs/appearance/structured-data/software-app
https://schema.org/WebApplication
この計算機は、入力値から月次複利の概算を出すツールであり、個別カード契約の請求日、日割り利息、手数料、支払充当順序、プロモ条件、遅延損害金を確定するものではない。APR と支払い条件はカード明細と発行会社の規約で確認する必要がある。