NotionAI（Opus 4.6）で企画・設計し、Antigravity（Gemini 3.1 Pro）に実装を丸投げして、Webツール集を作った話。

計画から公開まで、AIエージェントをどう使い分けたかの実例記録。

この記事でわかること

AIコーディングエージェント「Antigravity」でWebツール集を構築した実例
NotionAI × Antigravityの具体的なワークフロー
3週間見積りの実装を1日で完了させた並列実行の仕組み

動機

業務で使うWebツール、探せばいくらでも見つかる。全角半角変換、JSON整形、CSV加工……。

ただ、どれもちょっと引っかかる。入力したデータ、サーバーに送信されてないか？

業務データを扱う以上、「たぶん大丈夫」では済まない。情シスとしてはなおさら。

かといって既存ツールのUIは古かったり、広告まみれだったり。仕事で使うには微妙なものが多い。

なら自分で作ろう、と思った。

完全クライアントサイド処理。サーバーへのデータ送信ゼロ。モダンUI。

ちょうどAIコーディングエージェントの実験もしたかったので、開発の大半をAIに任せる前提で始めた。

技術スタック

項目	技術
フレームワーク	Astro + React Islands
UIコンポーネント	shadcn/ui + Tailwind CSS
ホスティング	Cloudflare Pages
CI/CD	GitHub Actions
テスト	Playwright（E2E）
コスト	実質 ¥0（Cloudflare Pages + GitHub Actions 無料枠）

Astro + React Islandsの組み合わせは、AIエージェントとの相性がいい。ツール1つ追加するのに「ロジック（lib）+ コンポーネント（component）+ ページ（page）」の3ファイルで完結する。テンプレートが定型化されるので、AIへの指示がシンプルになる。

ソースコードは GitHub で公開している。「サーバーと通信しません」を口だけでなくコードで証明するため。

👉 github.com/maru0014/tools-codelife-cafe

AIワークフロー：計画 → プロンプト → 実装

このプロジェクトでは、2つのAIエージェントを役割分担して使った。

計画フェーズ：NotionAI（Opus 4.6）

最初にNotionAIに企画書の作成を依頼した。渡した情報はざっくりこんな感じ。

codelife.cafeというドメインでブログを運用している
tools.codelife.cafe というサブドメインでWebツール群を提供したい
広告収益を得たい
似たWebツールはたくさんあるが、データを収集されたりせず、仕事で安心して使える、使いやすくカッコいいWebツールがそもそも自分が欲しい

NotionAIはここから深掘りの質問を返してきた。ツールの初期ラインナップ、技術スタック、データ処理方針、ビジネス面、スケジュール・リソース。必要な情報を順に聞いてくる。

回答を返すと、ホスティングはCloudflare Pagesが最適解、技術スタックはAstro + React Islands を推奨という提案付きで企画書を生成してくれた。競合分析（ラッコツールズ、IT-Tools、CyberChef等）、収益試算、リスク分析、ロードマップまで含む、かなり網羅的な企画書だった。

↓参考までに企画Notionページそのまま公開しちゃいます

👉 企画書：tools.codelife.cafe — 仕事で安心して使えるWebツール集 | Notion

この企画書をベースに、Phase 2（7ツール追加）のAntigravity向け実装プロンプトもNotionAIに生成させた。各ツールの仕様、共通ルール、バッチ分割、並列実行ガイドまで一式。

NotionAIの役割は「計画と設計」。 コードは一行も書かせていない。

実装フェーズ：Antigravity（Gemini 3.1 Pro）

NotionAIが生成したプロンプトを、そのままAntigravityに渡して実装させた。

Antigravityの強みは Agent Manager による並列実行。複数のエージェントを同時に走らせて、それぞれ別のツールを実装できる。

Phase 2の実行順序はこう設計した。

Step 1: E2Eテスト基盤 + CI統合（単独）
  ↓
Step 2: Batch A — 3エージェント並列
  - Agent 1: 和暦⇔西暦変換
  - Agent 2: Base64変換
  - Agent 3: 正規表現テスター
  ↓
Step 3: Batch B — 3エージェント並列
  - Agent 4: SQL整形
  - Agent 5: ダミーデータ生成（日本語）
  - Agent 6: 個人情報マスキング
  ↓
Step 4: Batch C — 単独
  - Agent 7: CSVビューア/エディタ
  ↓
Step 5: 仕上げ（E2Eテスト作成 → SEO最適化）

依存関係のないツールは並列で一気に実装。共通ファイル（トップページのグリッド、ナビゲーション等）への変更は仕上げステップでまとめてコンフリクトを回避。

公開ツール一覧（全13ツール）

すべてのツールは 完全クライアントサイド処理。サーバーへのデータ送信は一切なし。

Phase 1：初期5ツール

ツール	概要
全角⇔半角変換	カナ・英数・記号の全角半角を個別指定で相互変換
文字数カウント	空白込み/なし、バイト数、行数をリアルタイムカウント
JSON整形	JSON文字列の整形・圧縮・バリデーション
QRコード生成	URL・テキストからQRコードを生成。サイズ・色変更、PNG/SVGダウンロード対応
テキスト差分比較	2つのテキストの差分を行単位・文字単位でハイライト表示

Phase 2：追加7ツール（Antigravityで1日実装）

ツール	概要
和暦⇔西暦変換	明治〜令和の和暦と西暦を相互変換。干支・年齢も表示
Base64変換	テキスト・ファイルのBase64エンコード/デコード。Data URI出力対応
正規表現テスター	リアルタイムマッチング、キャプチャグループ表示、置換モード付き
SQL整形	MySQL/PostgreSQL/T-SQL等の方言対応。整形・圧縮・キーワード大文字化
ダミーデータ生成（日本語）	日本語の氏名・住所・電話番号等のテストデータを一括生成。JSON/CSV/TSV出力
個人情報マスキング	メール・電話番号・カード番号等を自動検出してマスキング
CSVビューア/エディタ	CSVファイルの表示・編集・ソート・フィルタ。Shift-JIS対応

Phase 3：新規追加

ツール	概要
ユニコード相互変換	文字とユニコードコードポイントの相互変換

品質担保

AIに実装させたコードの品質担保も、AIで回した。

Playwright E2E テスト — 全ツールの基本動作（入力→出力→コピー→クリア）をCI/CDで自動実行
GitHub Actions — PRごとにE2Eが走り、mainマージで自動デプロイ
Antigravityによる全ツール動作確認 — 実装後、Antigravity自身にブラウザ自動実行エージェントで全12ツール（当時）の動作検証とデザイン改善提案を出させた

結果、機能面でのバグはゼロ。レスポンシブ対応も問題なし。デザイン改善の提案は的確なものが多く、Phase 3以降のバックログに積んである。