きっかけ
先月のスマホ代の明細を見て「高すぎでは？」と思ったのが始まりです。
見直そうと比較サイトを調べたんですが、どこも広告だらけで「本当に自分にとって最安なのはどれ？」がいまいち分からない。
「これ、自分で作った方が早いのでは」と思い立って、最近触っているClaude Codeで作ってみました。
作ったもの
通信費まるごと試算ツール
https://tatsuya-tool.vercel.app
- 8社の料金プランを横断比較
- スマホの月間データ使用量を入力すると、その使用量での最安キャリアが分かる
- 今契約しているキャリアとの差額（月/年/3年）も表示
「20GBならこのキャリア、3GBで足りるならこっち」みたいに、使用量帯ごとに最適解が変わるのを可視化したかったんです。
技術スタック
- Next.js 14 + TypeScript
- Tailwind CSS
- Vercel（デプロイ）
- Claude Code（ほぼ全工程）
Claude Codeでの開発フロー
1. 土台を作らせる（ここまで約4時間）
要件をざっくり伝えて、まず動くものを作ってもらいました。料金データの構造、使用量スライダー、ランキング表示あたりまで一気に。
2. UIを触りながら微調整
ここが一番大事だった気がします。実際に動かしてみて「これは違うな」と思ったところを直していく。
3. 後日、テストスイートも依頼
機能追加のたびに手で確認するのが面倒になってきたので、テストを書いてもらいました。
Jest + React Testing Libraryで 55個のテストケースが7分 で生成されました。料金計算ロジック（帯域別の最安判定、差額計算、容量不足プランの除外など）を網羅してくれたので、以降は pnpm test 一発で回帰確認できるように。
つまずいたポイント
「常に自社を目立たせる」UIになっていた
最初、特定のキャリアが1位じゃなくても目立つ色になっていて、第三者目線で見ると「これ、公平な比較じゃないよね」と気づいて直しました。フラットな比較表示に変更。
容量不足のプランが上位に来る
安いけど「そのデータ量だと足りない」プランがランキング上位に出てしまう問題。除外ロジックを追加して、足りないプランはグレーアウトして別枠に。
所感
「AIに丸投げすれば完成」ではなくて、自分が第三者目線で違和感に気づいて指示する ところが、まだ人間の仕事として残っている感覚でした。
逆に、テスト生成みたいな「面倒だけど定型的な作業」は本当に一瞬で終わるので、そこで浮いた時間をUIの磨き込みに回せるのが良かったです。
個人開発の記録として、また更新していきます。