Claude Codeで10日間に82個の無料ツールを量産した開発プロセス

はじめに — 「82個のツールを10日で」は本当か

「個人開発サイトに82個の無料ツールを作った」と言うと、多くの人は「そんなの無理でしょ」と思うかもしれません。正直、私も最初はここまでのスケールになるとは思っていませんでした。

しかし事実として、ZERONOVA LABの 無料ツールセクションには82個の無料オンラインツールが公開されています。OGP画像ジェネレーター、JSON整形ツール、カラーパレットジェネレーター、正規表現テスター、動画フォーマット変換、電子書籍作成ツール、そしてalt属性チェッカーまで。開発期間は2026年2月6日から2月16日の約10日間です。

この記事では、PMとしてどう設計し、Claude Codeとどう協業し、どうやって品質を担保したのかを開発日記から振り返ります。「82個の無料ツール」の裏側にある開発プロセスの話です。

着想 — 「ツール1個 = SEO1ページ」という発想

無料ツール開発のきっかけは、SEO流入の壁でした。この戦略の詳細は「個人開発サイトに74個の無料ツールを作ってSEO流入を増やした話」にも書いています。ZERONOVA LABは個人開発のプロダクト紹介サイトです。プロダクトページだけでは検索流入がほぼゼロ。ブログ記事は効果がありますが、1記事書くのに数時間かかります。

無料ツールのSEO効果: 1ツール1ページで大量のロングテールキーワードを獲得できる

2月6日の開発日記にこう書きました。「OGP画像 生成」「JSON 整形」「QRコード 作成」——ユーザーの検索意図が明確なキーワードを、1ツール1ページで狙い撃ちできる。しかもツールページは記事より滞在時間が長く、リピート訪問も期待できます。

問題は「どうやって大量のツールを短期間で作るか」でした。

Phase分割 — 1日10ツールのリズム

82個を一気に作ったわけではありません。Phase 1からPhase 19まで段階的に開発しました。

Phase 1-4（初日: 10ツール）: OGP画像ジェネレーター、文字数カウンター、QRコードなど、自分がブログ執筆で使うツールから着手。

Phase 5-7（2日目: 15ツール追加 → 25ツール）: JSON整形、パスワード生成、カラーパレットなど開発者向けユーティリティ。5並列エージェントで同時実装するパターンが確立しました。

1セッションで25ツール: Phase 1-4（10ツール）に加え、Phase 5-7（15ツール）を1日で完了。技術基盤（Server Component + Client Component パターン）の再利用と並列実装が成功の鍵

Phase 8（3日目）: FFmpeg WebAssemblyを使った動画フォーマット変換ツール。これだけは技術的な難易度が高く、1ツールに丸1日かかりました。iPad SafariのWASM制約でVP9エンコーダが動かず、VP8フォールバックを実装するまでに5回の反復修正が必要でした。

Phase 9-18（4日目〜9日目: 56ツール追加 → 78ツール）: ここから加速します。CSV変換、UNIX時間変換、テキスト差分、ハッシュ生成、SEOツール群、ビジネス計算ツール群、開発者ツール群を次々と実装。

Phase 19（10日目: 4ツール追加 → 82ツール）: チェックリストツール3種 + alt属性チェッカーで82ツールに到達。

並列エージェント — 5ツール同時開発の仕組み

82個のツールを10日で作れた最大の理由は、並列エージェントによる同時開発です。

Claude Codeには複数のバックグラウンドエージェントを同時に走らせる機能があります。Phase 5以降、ほぼすべてのPhaseで5並列エージェントを活用しました。

Phase 3-4 を5並列エージェントで一気に実装: 5つのツールを5つのバックグラウンドエージェントで並列実装し、1セッションで完成

各エージェントが独立して page.tsx（Server Component）+ Form.tsx（Client Component）を生成します。エージェント間でファイルが重複しなければ、競合なく並行して進みます。

PM-AI 対話: 並列実装の設計

Zeronova

5つのツールを同時に作りたい。ただ、ツール一覧ページ（tools/page.tsx）とsitemapは全エージェントが触るファイルだから競合する。どう設計する？

Zeronova

なるほど。エージェントの完了を待ってから統合作業をする、というルールを徹底しよう。

この「分散実装 → 集約統合」パターンは、Phase 5以降のすべてのPhaseで踏襲しました。5ツールの実装は並列で数分、統合作業は直列で数分。合計10分程度で5ツールが完成します。

2つのアーキテクチャパターン

82個のツールは、大きく2つのパターンに分類されます。

パターンA（API route + Edge Runtime）: OGP画像ジェネレーター、料金表画像、名刺カードなど、サーバーで画像を生成するツール。ImageResponse + Google Fontsサブセットの共通基盤を使い回しました。

パターンB（クライアントサイド完結）: JSON整形、Base64変換、カラーパレットなど、ブラウザだけで動くツール。API routeが不要なため実装コストが圧倒的に低く、82個中70個以上がこのパターンです。

クライアントサイドツールの実装速度: API route が不要なツールは驚くほど速く実装できる。文字数カウンター・QRコード・コントラストチェッカーの3つを1セッションで完成

パターンBの「Server Component（SEO用テキスト）+ Client Component（フォーム操作）」という構成がテンプレート化されたことで、1ツールの開発時間は大幅に短縮されました。

5段階品質保証 — 量産しても品質を落とさない仕組み

82個もツールを作ると品質がバラつきます。Phase 15以降で確立した5段階の品質保証フローが、このプロジェクトの生命線でした。

1. 実装: Claude Codeで基本機能を作る
2. バグ修正: エッジケース（日本語入力、大きなファイル、空入力）を潰す
3. UX最適化: モバイル表示、アクセシビリティ（aria-label、キーボード操作）、レスポンシブ対応
4. SEO監査: FAQ 3問、関連ツール、JSON-LD、meta descriptionを設定
5. ガイドライン準拠: tools-dev-guidelines.md のセキュリティ・コストチェックリストを最終確認

セキュリティレビューの衝撃

最初の25ツールを一気に作った後、包括的なセキュリティレビューを実施しました。結果は衝撃的でした。

CRITICAL セキュリティ修正（3件）: OGPチェッカー SSRF脆弱性、SVGエディター XSS、Markdownプレビューアー XSS

OGPチェッカーにSSRF脆弱性。SVGエディターにXSS。Markdownプレビューアーにもスクリプトインジェクションの穴。速く作ることに集中するあまり、セキュリティの基本を見落としていたのです。

この経験から、tools-dev-guidelines.md にセキュリティチェックリストを整備し、以降のPhaseでは実装直後に必ずガイドライン準拠チェックを行うルールを確立しました。

PM-AI 対話: セキュリティレビュー後の方針

Zeronova

SSRF、XSSが3件見つかった。今後のPhaseで同じことを繰り返さないためにはどうする？全ツール実装後にまとめてレビューする方式だと、修正コストが大きすぎる。

Zeronova

両方やろう。チェックリストは「実装後すぐ」に確認するルールにする。25ツール作ってからまとめてレビューしたのが今回の失敗だった。

チェックリスト起点開発 — 82番目のツールが生まれた理由

Phase 19で面白い展開がありました。SEOチェックリストツール（/tools/seo-checklist）を作ったとき、チェック項目の中に「alt属性を全画像に設定する」という項目がありました。各項目には対応する自ツールへのリンクを設定しているのですが、この項目だけリンク先がなかったのです。

「チェックリスト起点」の開発効率: チェックリストの項目を見ればツールのギャップが一目瞭然。「どのツールを次に作るべきか」の判断が容易になる

つまり、チェックリストを作ったことで「次に作るべきツール」が自動的に見えた。alt属性チェッカーはこうして82番目のツールとして生まれました。チェックリストが「ハブ」として既存ツールを結びつけ、さらに新しいツールの開発を導くという循環が生まれたのです。

数字で振り返る

学んだこと — 量産の先にあるもの

82個のツールを作って学んだことは「量産と品質は両立する」ということです。ただし、それには条件があります。

テンプレートの確立: Server Component + Client Componentの構成をテンプレート化したことで、1ツールあたりの開発コストが劇的に下がりました。

並列エージェントの活用: 5並列で実装し、統合は後からやる。このパターンがなければ10日では不可能でした。

チェックリスト駆動の品質保証: 人間もAIも同じチェックリストで品質を確認する。属人的な品質判断を排除できます。

セキュリティは後回しにしない: 最初の25ツールでSSRF脆弱性を見逃した教訓。速さを追求するほど、セキュリティチェックの仕組みが重要になります。

そして最も重要な学びは、ツール開発には3段階の進化があるということです。

ツール開発の3段階進化: 「ツールを作る（B2C）」→「ツールをチェックリストでつなぐ（ハブ化）」→「ツールをAIに使わせる（B2A）」

82個の無料ツールは、単体のSEO施策にとどまりません。チェックリストで「線」としてつなぎ、さらにMCP Server経由でAIエージェントに「面」として使わせる。この進化の先に、個人開発サイトの新しい可能性が見えています。SSRF脆弱性の技術的な詳細は「Next.js APIルートのSSRF対策」で解説しています。