Claude Code × Next.js 16 で Web ツール 38 個を Vercel 無料枠で運営している話

概要

lit-forge.com は、日常業務や開発の現場で役立つ小さな Web ツールをまとめた無料サイトです。2026 年 4 月時点で 38 個のツールを公開し、Vercel Hobby プラン（無料）のみで運営しています。

特徴的なのは、設計・実装・テスト・デプロイまでほぼ全工程をClaude Code に任せて作っている点です。1 日で 10 個のツールを追加したこともあり、個人開発の生産性が AI コーディング支援ツールで明確に変わる体験をしています。本記事では、その構成と実態を一次情報としてまとめます。

技術スタック

• Next.js 16.2 (App Router, Turbopack)
• React 19
• Tailwind CSS 4
• TypeScript 5
• Vitest（ユニット 140 件）+ Playwright（E2E 48 件）
• Vercel Hobby（無料プラン、チーム名 nobs-projects）
• ドメインは お名前.com で 0 円で取得、Vercel に DNS 接続

データベースや外部 API は原則使わず、各ツールはブラウザ上で完結する純クライアント実装。これが Vercel 無料枠で 38 ツールを回せる最大の理由です。

Claude Code に任せている工程

本サイトはほぼ全てのコードと文書を Claude Code に書いてもらいました。人間（サイト運営者）の役割は、

• どんなツールを作るかの要件定義（例：「UUID v4/v7 を 100 件まで一括生成、コピーボタン付き」）
• 外部サービスの設定（Vercel 環境変数、A8.net 提携申請、AdSense 審査）
• デプロイ前の最終判断・トラブル対応の方針決め

に集中しています。以下のような作業は Claude Code にそのまま任せました。

• 新ツールの実装（例：UUID 生成、YAML↔JSON 変換、請求書 PDF ジェネレーター）
• 構造化データ（JSON-LD）の全ページ適用（Organization / WebSite / SoftwareApplication / FAQPage / BlogPosting）
• Playwright スモークテストを全ツール分パラメータ化して追加
• Lighthouse の計測スクリプト（scripts/lighthouse-measure.mjs）と、その結果に基づく改善提案・実装
• A8.net 提携先の広告タグを本番管理画面から取得し、各ツールに適切に配置
• この記事そのものの Tailwind レイアウト・MDX 相当の構造化

ざっくり、「何を作りたいか」を人間が決め、「どう作るか」以降を Claude Codeが請け負う分業です。

1 日に 10 ツール量産できた理由

2026-04-18 の 1 日だけで以下の 10 ツールを追加しました。

• UUID 生成ツール（v4/v7）
• YAML↔JSON 変換
• Markdown テーブル生成
• Lorem Ipsum 生成（英語/日本語）
• HTML エスケープ / アンエスケープ
• 文字コード変換（UTF-8 / Shift_JIS / EUC-JP / JIS）
• 郵便番号から住所検索
• 請求書 PDF ジェネレーター
• 源泉徴収計算機
• 色コントラストチェッカー

高速化の鍵は 「既存ツールのパターンがほぼ確立済み」 だったことです。各ツールは

• app/<tool>/page.tsx（UI、"use client"）
• app/<tool>/layout.tsx（metadata + SoftwareApplication JSON-LD）
• app/lib/<tool>.ts（純関数のロジック）
• app/__tests__/lib/<tool>.test.ts（Vitest）

の 4 ファイルの組で実装が完結し、Claude Code にこの定型を伝えれば、1 ツール 20 分程度で「実装 + テスト + ポータル登録 + sitemap 更新 + 型チェック + コミット」まで走ります。

Vercel Hobby 無料枠の実際

Vercel Hobby プランは 2026 年時点で帯域 100 GB / 月、サーバーレス関数 1M 呼び出し / 月などの制約があります。lit-forge は API Route を使っておらず、全て静的生成 + クライアント JS で動くので、実質この制約に引っかかる要素は帯域だけです。38 ツール × 数百 PV /日ペースなら、帯域は 1 桁 GB で収まっています。

ただし、重い依存（jspdfや html2canvas-proなど PDF 生成系）はルート別に動的 import して初期バンドルを小さく保っています。

踏んだ落とし穴と対処

• Tailwind v4 の lab() カラー を html2canvas がパースできず、PDF 生成でクラッシュ。後継の html2canvas-pro に差し替えて解決。
• Turbopack キャッシュが Windows パス文字列で破壊される。WSL 環境で Lighthouse CLI を動かした時、chrome-launcher が user-data-dir を Windows 風パスで生成し、それが Next.js のファイル解決をおかしくしていた。Lighthouse スクリプトに--user-data-dir=/tmp/lighthouse-chrome-userdata を明示して回避。
• AdSense の strategy="afterInteractive" が LCP を悪化させる。ホームの Lighthouse Performance が 57 点と低く、lazyOnloadに変えるだけで 57 → 83 に改善。
• apex から www への 301 リダイレクト で Lighthouse が毎回 800ms 前後を損していた。canonical URL を www.lit-forge.comに揃えて解消。最終的に Performance は 3 URL 平均 91.7 点に。

収益化の下地（ここも Claude Code で準備）

• Google AdSense 審査済み（設置は afterInteractive → lazyOnload に調整済）
• A8.net でカテゴリ別に 27 件申請し、14 件を即時提携成立
• カテゴリ別プロモグループを app/lib/ads.ts に集約し、ツール別に適切な広告を表示
• Google Analytics 4 と Search Console を接続

ここまでの運営準備を「何を設定するか」の指示だけで Claude Code が実装し、人間側は Vercel / AdSense / A8.net の画面で認証が必要な操作のみ実施しました。

まとめ

• Next.js 16 + Vercel Hobby は、静的中心なら 38 ツール規模でも余裕。データベース不要のユーティリティサイトは、個人開発の勝ち筋になりやすい
• Claude Code を使うと、「パターン化された実装」と「既存コードベースへの適切なリファクタ」が極端に速い。1 日 10 ツール量産は誇張ではなく実測
• 人間の役割は「何を作るか」「どの外部サービスにどう接続するか」の判断に集中する形が相性抜群

同じ構成で始めたい方は、まず Next.js + Vercel + Tailwind のテンプレから 1 ツール作って、後は Claude Code にパターンを覚えさせていくのが最短ルートです。