これはREADYFOR Advent Calendarの12日目の記事です。
はじめに
READYFORでデジタルマーケを担当している岩﨑です。
従来は広告やらSEOやらディレクションやらをやっているわけですが、最近はAIの影響で広がってきており、デジタル＆マーケの担当になったような気分です。
AIを使えば簡単に出来るといいますが、体系的な学びをしていない40歳を超えた私にはエンジニアリング畑は単語を聞いたことあるくらいで詳しくは知らないし、基本的に全部英語だし、ハルシネーションに右往左往しながらも何とか形にするという、泥臭い作業の連続です。
だからか、無事に動いた時の喜びもひとしおで、心の中でAIとハイタッチしている変な人間です。
なにこれ？
非エンジニアのデジタルマーケターが、Googleの最新IDE 「Antigravity」と「Claude 4.5 Sonnet」 を使い、構想からわずか2時間で 「自分専用のGEO（AI検索対策）監査ツール」 を開発した全記録です。
既存の高額SaaSにあった「分析回数やドメインの制限」という課題を、「Next.js + PuppeteerアプリをIDEのプレビュー機能で動かす」 という手法で解決しました。
この記事では、開発に使った 具体的なプロンプト や、技術的なハマりポイント（スクレイピングの壁など） も含めて、包み隠さず公開します。
この記事で伝えたいこと
本記事の主張は以下の3点です。
- 非エンジニアでも「Antigravity × Claude」なら、実用的な業務ツールを2時間で作れる。
- 「デプロイ（公開）」は不要。Antigravityのプレビュー機能こそが、自分専用ツールの最適解である。
- ロジック作成において、既存SaaSの「ヘルプページ」をAIに学習させる手法（簡易RAG）が極めて有効である。
最初に成果物（完成品）
まずは、一行もコードを書かずに完成したツール 「GEO Health Check & Report Tool」 をご覧ください。
※今回はCAMPFIREさんの肩を借りてデータを算出しました。個人的には競合ではなく、新しい分野/カテゴリをともに伸ばす仲間だと思っています。引き続き宜しくお願いします。
主な機能
ただのSEOチェッカーではありません。AI検索時代に特化した機能を搭載しています。
-
3つのPillar（柱）による多角的監査
- OnPage (SEO): タイトル長、Hタグ構造などの基礎体力。
- Trust (E-E-A-T): 運営者情報、連絡先の有無など、AIが重視する信頼性シグナル。
- AI Visibility (GEO): 構造化データ（JSON-LD）、Clarity（文章の明確さ）など、AIからの読みやすさ。
-
競合比較レーダーチャート
- 自社（Indigo）と競合（Purple）を重ねて表示し一目で可視化。
-
ベイジ（Bayge）流 UIデザイン
- 視認性の高いゼブラストライプのテーブル、マスター詳細レイアウトを採用。
- ベイジさんのサイトはこちらです。ぜひご覧ください。
-
優先度付き Todo リスト
- 「Impact（効果）」と「Effort（工数）」から優先度を自動算出し、具体的な改善アクションを提案。
解決したい課題：マーケターの「不自由」と「焦り」
私は普段、デジタルマーケティングを担当しています。
昨今、ChatGPTやPerplexityなどのAI検索（GEO）対策が急務となっていますが、現場には 「シンドい課題」 がありました。
1. Otterly.aiは良いツールだが「自由」が足りない
AI検索監視の分野で有名な**「Otterly.ai」**というツールがあります。 AI関連の機能に特化しており、必要最低限の機能が揃っているコスパの良いツールという印象でした。
しかし、本格的なプランは高額で、多くのSaaSには 「分析できるドメイン数」や「月間分析回数」に厳しい制限 があります。
「競合サイトを片っ端から調べたい」「実験的なLPを10個テストしたい」といった、現場の泥臭いニーズに応えるには、既存ツールの制限はあまりに窮屈でした。
2. 「ちょっと試す」のハードルが高い
自作しようにも、私はVS Codeの名前くらいしか知らない非エンジニアです。「環境構築？ Github？ デプロイ？」という 技術的な壁 が高く、これまではアイデアがあっても形にできませんでした。
「制限なく自由に分析できる『砂場』が欲しい。ないならAIに作らせればいい」
課題を解決する技術スタック：なぜ「Antigravity」なのか？
今回の開発には、以下の「最新 × 最強」スタックを選びました。
| コンポーネント | 採用技術 | 選定理由 |
|---|---|---|
| 開発環境 | Google Antigravity | ブラウザだけで完結。「Preview」機能がそのまま本番環境として使えるため、デプロイ作業が不要。 |
| 頭脳 (AI) | Claude 4.5 Sonnet | 複雑な文脈理解とコーディング能力が最強。Next.jsやTailwindの知識も豊富。 |
| フロントエンド | Next.js 16 + Tailwind | モダンなUI構築のため。 |
| バックエンド | Puppeteer + Cheerio | 高度なスクレイピング（SPA対応）のため。 |
| 分析ロジック | OpenAI API | 定性的な評価（文章の読みやすさ等）を定量化するため。 |
Cursorではなく、あえてAntigravityを選んだ理由
普段はCursorを使うこともありますが、今回はAntigravityを選びました。
2025年11月にGoogleから新しいIDE「Antigravity」が発表されましたので「最新ツールなら、私のような初心者でももっと楽ができるのでは？」と思い、今回はAntigravityを試してみました。
技術の効果
-
環境構築・デプロイの消滅
- Antigravityはブラウザを開くだけで開発環境が整います。
- 最大の特徴は**「Preview（プレビュー）」機能**です。デプロイ作業を一切せずとも、プレビュー画面のURLを開けば、それがそのまま「自分専用アプリ」として機能します。
-
専門知識のアウトソーシング
- Claude 4.5 Sonnetに「Otterly.aiのヘルプページ」を読み込ませることで、専門的なGEO評価ロジックをコードに落とし込ませました。
課題がどう解決されたか
「SaaSの制限」を爆殺
自分専用ツールなので、分析回数もドメイン数も無制限です。Antigravityが動く限り、好きなだけ競合分析ができる「砂場」を手に入れました。
「技術の壁」を爆殺
コードはClaudeが書き、環境はAntigravityが用意しました。私がやったのは 「日本語で指示出し」と「プレビュー画面のブックマーク」 だけです。
開発ドキュメンタリー：怒涛の2時間
ここからは、実際に私がClaudeとペアプログラミング（というか丸投げ）をした2時間の記録です。
【0〜30分】プロジェクト爆誕と「教科書」の学習
まず最初に行ったのは、「ロジックの担保」 です。
適当なツールを作らないために、既存のGEOツールのヘルプページや、Googleの検索品質評価ガイドラインなどの情報を集め、Claudeに 「仕様書」 として読み込ませました。
実際に投げたプロンプト（要約）：
「あなたはGEO（AI検索対策）の専門家です。以下のテキストは、著名なGEOツールの評価基準と、GoogleのE-E-A-Tに関するガイドラインです。これを完全に理解してください。
その上で、Next.jsとPuppeteerを使って、入力されたURLに対してこれらの基準で監査を行うアプリケーションを作成してください」
Claudeは即座にプロジェクト構造を提案し、src/lib/audit/pillars/ というディレクトリに onpage.ts, trust.ts, geo.ts という3つの柱となるロジックファイルを生成し始めました。
【30〜60分】スクレイピングの壁と「Puppeteer」の実装
ここで最初の壁にぶつかります。最近のWebサイトはJavaScriptで動的に描画されるものが多く、単純なHTML取得（fetch）では中身が取れないのです。
私が「中身が空っぽで返ってくるよ！」と泣きつくと、Claudeは 「では、Puppeteer（Headless Chrome）を使いましょう」 と提案。
驚いたことに、Antigravity環境では追加の設定なしでPuppeteerが動作しました。
Claudeは api/audit/url/route.ts にバックエンド処理を書き、見事に動的なサイトのコンテンツを取得することに成功しました。
【60〜90分】UIへの執着。「ベイジ流」デザインの実装
機能は動きましたが、見た目に対して指示をしてなかったのであまりに無骨すぎました。
私は管理画面のデザインに定評のある 「ベイジ（Bayge）」 社のガイドラインが好きだったので、無茶振りしてみました。
プロンプト：
「UIがダサいです。ベイジ（Bayge）の『管理画面のUIデザインにおける25の改善ポイント』を意識して、プロフェッショナルな見た目にリニューアルしてください。
具体的には：
- リキッドレイアウトで横幅を有効活用
- テーブルはゼブラストライプにして視認性向上
- 3カラム構成（サイドバー、メイン、詳細パネル）のマスター詳細レイアウトにして」
するとClaudeは ComparisonTable.tsx を書き換え、Tailwind CSSを駆使して、まるでSaaS製品のような洗練されたUIを一瞬で構築しました。
特に、テーブルの行をクリックすると右側に詳細パネルがスライドしてくるアニメーションまで実装された時は、思わず声が出ました。
【90〜120分】LLM統合と仕上げ
最後に、「AIによる定性評価」 を追加しました。
「文章が分かりやすいか（Clarity）」「情報は網羅されているか（Completeness）」といった指標は、ルールベースでは判定できません。
そこで、取得したテキストデータをOpenAI APIに投げ、「あなたは厳しい編集者です。この記事を100点満点で採点して」 と依頼するロジックを llm.ts に組み込みました。
これにより、数値的なSEOだけでなく、「中身の質」 まで監査できるツールへと進化しました。
実装機能の深掘り解説
完成したツールの「ここがこだわり」というポイントを解説します。
1. 独自のスコア算出ロジック
単なる平均点ではありません。各項目に Impact（重要度） と Effort（工数） を定義し、重み付け計算を行っています。
// 実際のコードイメージ（Claudeが生成）
const calculateScore = (audits) => {
// ImpactがHighのものはスコアへの影響を3倍にする
const weightedSum = audits.reduce((sum, audit) => {
const weight = audit.impact === 'high' ? 3 : audit.impact === 'medium' ? 2 : 1;
return sum + (audit.score * weight);
}, 0);
// ...
};
これにより、「重要度の高い項目」を直さないとスコアが上がらない、実践的な評価が可能になりました。
2. レーダーチャート可視化 (Plotly.js)
段々歳を取ってきて、文字と数字の羅列を見ることが堪えるようになってきたので、パッと見で分かるように視覚化しました。
ライブラリには Plotly.js を採用。ダークモードに最適化したカラーリング（自社：インディゴ、競合：パープル）も、Claudeへの「カッコいい色にして」という一言で調整されました。
3. Trust（信頼性）シグナルの自動検出
AI検索において重要な「信頼性」を測るため、正規表現を用いて以下の要素を自動検出しています。
- 「運営会社」「Company Profile」へのリンクがあるか
- 「プライバシーポリシー」があるか
- 執筆者情報（Author）が構造化データに含まれているか
開発の裏話：ハマったポイントと解決策
もちろん、全てが順調だったわけではありません。
1. Claudeの「巻き戻り」現象
機能を追加していく中で、Claudeが修正したコードが原因で、さっきまで動いていた機能が壊れることが何度かありました。
解決策: AntigravityにはGit履歴のようなものがありますが、私は**「動いた瞬間のコードを全選択して、ローカルのメモ帳に貼り付ける」**というアナログなバックアップで乗り切りました。これが一番確実です。
2. Puppeteerの重さ
スクレイピングは重い処理です。最初はタイムアウトエラーが多発しました。
解決策: Claudeに相談すると、「不要なリソース（画像やCSS）の読み込みをブロックして高速化しましょう」と提案され、Puppeteerの設定コードを数行修正するだけで爆速になりました。
おわりに：Antigravityの「プレビュー」こそ最強のデプロイ
今回、これだけの機能を持つNext.jsアプリを作りましたが、サーバー構築もVercelへのデプロイも一切していません。
Antigravityの画面右にある 「Preview」ボタン。
これを押して開くURLこそが、私にとっての「本番環境」です。
- 社内ツールならこれで十分: URLを知っている自分だけがアクセスできればいい。
- 制限なし: SaaSのプラン制限に怯えることなく、Puppeteerをブン回して分析し放題です。
「プログラミングは難しい」「環境構築が面倒」
そんな常識は、AntigravityとClaudeの前では過去のものになりました。
マーケターのみなさん。
「欲しいツールがない」と嘆く前に、Claudeに話しかけてみてください。2時間後には、あなた専用の最強ツールが手元にあるはずです。
[謝辞]
このツールのデザインは、株式会社ベイジ様の「管理画面のUIデザインにおける25の改善ポイント」を参考にさせていただきました。
また、評価ロジックの参考としてOtterly.ai様のドキュメントを参照いたしました。素晴らしい知見に感謝いたします。
私たちREADYFORでは現在一緒に働いていただけるSREを募集中です。もしご興味ある方いらっしゃったらぜひご応募ください！
https://herp.careers/v1/readyfor/yniQMEyaH6IG