tools24.jp開発ストーリー——24本のツールを個人で作って学んだこと
公開日: 2026年3月29日 ・ 読了時間: 約7分
tools24.jpは、「自分が使いたいツールを自分で作る」という動機から始まった個人開発プロジェクトです。 確定申告の計算ツール1本からスタートし、現在では24本のWebツールを公開しています。 この記事では、開発の経緯や技術選定の理由、ツールが増えていく中での設計判断について振り返ります。
tools24.jpを作り始めた経緯 — 確定申告の計算を自分でやりたかった
きっかけは、自分の確定申告の所得税を事前に試算したかったことでした。 既存のWebツールもいくつかありましたが、広告が多すぎたり、入力項目が複雑だったり、 計算ロジックが不透明だったりと、満足できるものがありませんでした。 「シンプルで、計算過程が見えて、広告が少ないツールが欲しい」——そう思って作ったのが最初の所得税シミュレーターです。 自分用に作ったツールをデプロイして公開したところ、 思った以上にアクセスがあり、他の計算ツールも作ってみようという気持ちになりました。
技術スタック選定の理由 — Next.js / TypeScript / Tailwind CSS / Vercel
技術スタックは「個人開発で最も生産性が高い組み合わせ」を基準に選びました。
Next.js（App Router）
ファイルベースルーティング、SSG/SSRの柔軟な切り替え、画像最適化、SEOメタデータの管理など、 ツール系サイトに必要な機能がフレームワークに組み込まれています。 ツールごとにページを追加するだけでルーティングが自動設定されるのは大きなメリットです。
TypeScript
計算ツールでは型安全性が特に重要です。数値を文字列として扱ってしまうバグは、 TypeScriptの型チェックで未然に防げます。24本のツールを1人で保守する上で、 型による自己文書化の効果は非常に大きいです。
Tailwind CSS
ユーティリティファーストのCSSフレームワーク。デザイナーなしの個人開発でも、 一貫したデザインシステムを維持できます。shadcn/uiとの組み合わせで、 アクセシブルなUIコンポーネントを素早く構築できるのも強みです。
Vercel
GitHubにプッシュするだけで自動デプロイ。プレビュー環境、カスタムドメイン、CDN、 エッジ関数まで無料枠で利用でき、個人開発には最適なホスティングです。
最初のツール（所得税シミュレーター）で学んだこと
最初の所得税シミュレーターを作る中で、いくつかの重要な学びがありました。 まず、税金の計算ロジックは見た目以上に複雑だということ。累進課税の税率テーブル、 各種控除の適用条件、復興特別所得税の計算など、正確に実装するには国税庁の資料を何度も読み返す必要がありました。 次に、計算過程の可視化がユーザー体験を大きく左右すること。 単に最終的な税額を表示するだけでなく、「なぜこの金額になるのか」をステップごとに表示することで、 ユーザーからの信頼度が格段に上がりました。 この「計算過程を見せる」というアプローチは、tools24.jpの全ツールに共通する設計原則になっています。
6本→12本→24本と増えていく中での設計判断
ツールが増えるにつれて、以下の設計判断が重要になりました。
- 共通コンポーネントの抽出 — ツールカード、パンくずリスト、FAQ、広告枠、SEOメタデータなど、 繰り返し使うUIパターンを共通コンポーネントとして切り出しました。 新しいツールを追加する際のコード量を大幅に削減できています。
- SEOテキストのパターン化 — メタデータ（title/description）、構造化データ（JSON-LD）、パンくずリストの構成を テンプレート化することで、SEO品質のばらつきを防いでいます。
- パフォーマンスの最適化 — すべてのツールページをStatic Generation（SSG）で配信し、 インタラクティブな計算部分だけをClient Componentにすることで、 初期表示速度を最大化しています。
- モノレポ構成への移行 — 確定申告ツール、開発者ツール、マスキングツールなど、テーマごとにサブプロジェクトを分けつつ、 1つのリポジトリで管理するモノレポ構成を採用。デプロイ先も分離しつつ、共通設定を一元管理できます。
個人開発のメリット — スピード感・ユーザーの声に即対応
個人開発の最大のメリットは意思決定の速さです。 「このツールがあったら便利そうだ」と思ったら、その日のうちにプロトタイプを作って翌日にはデプロイできます。 ユーザーからフィードバックをもらったら、その場で修正して数分後には本番環境に反映可能です。 チーム開発のように、仕様書の作成、レビュー、承認プロセスを経る必要がありません。 もちろんコードレビューがないことはリスクでもありますが、 TypeScriptの型チェック、ESLintの静的解析、そしてAIによるコードレビューを組み合わせることで、 品質を維持しながらスピードを落とさない開発フローを実現しています。
結論: 「自分が使いたいツールを作る」が最良の動機
24本のツールを作ってきて確信したのは、「自分が使いたいものを作る」ことが最も持続可能な開発動機だということです。 自分がユーザーなので、何が不便で何が必要かを肌感覚で理解できます。 開発のモチベーションが下がることもありません。 tools24.jpはこれからも「自分が欲しいと思ったツール」を追加し続けていきます。 もし便利だと感じたツールがあれば、ぜひ日常の業務で使ってみてください。