Mar 22, 2026 by ToolCraft Lab 約8分で読めます

Claude Codeと一緒にSEO分析ツールを作ってみる — Google Search Console × Analytics連携【開発記録 Part 1】

Claude Codeを使って、Google Search ConsoleとAnalyticsのデータを自動取得・可視化するWebサービスを開発中。技術選定から動くMVPまでの開発記録をリアルタイムでお届けします。

#Claude Code#個人開発#SEO#Google Search Console#Next.js#Cloudflare Workers

この記事について

いま、Claude Codeと一緒にWebサービスを作っています。

Google Search ConsoleとGoogle Analyticsのデータを連携して、検索順位やアクセス数を自動で追跡・可視化する管理ツールです。まだ開発途中ですが、「Claude Codeで本格的なWebアプリをゼロから作る過程」をリアルタイムで記録していきます。

この記事はPart 1。企画から動くMVPができるまでの記録です。

なぜ作ろうと思ったか

このブログ（ToolCraft Lab）を始めて、記事を公開したらまず気になるのが検索順位です。

「あの記事、Googleで何位に出てるんだろう？」

調べてみると、順位チェックツールはいくつかあります。

ツール	問題点
GRC	Windows専用。Macで使えない
Ubersuggest	無料版は25キーワードまで、週1更新
SERPOSCOPE	開発終了（レガシー）
SerpBear	英語のみ、Docker必要

どれも帯に短し襷に長し。特にMacユーザーにとって、ブラウザだけで使える無料ツールがほぼない。

そこで気づきました。Google Search Console自体がAPIを公開していて、無料で順位データを取得できるということに。

「それなら自分で作れるのでは？」

Claude Codeに相談してみた

普段コードを書くときのパートナーであるClaude Codeに、まず壁打ちから始めました。

自分: 「作ったサイトの自動順位チェックを行うものを開発できないかな？」

すると、3つのアプローチを提案してくれました。

Google Search Console API — 無料、公式データ、2〜3日遅れ
SerpAPI — リアルタイム、月100回無料、それ以上は有料
自前スクレイピング — Google規約違反リスクあり

Claude Codeの推薦は方法1のGSC API。理由は明確で、

完全無料（課金不要）
Googleの公式データなので精度が保証される
ブロックされるリスクがゼロ

ここからClaude Codeとの共同開発が始まりました。

技術選定（Claude Codeと議論）

Claude Codeが提案してくれた構成は以下の通りです。

┌──────────────────────────────────┐
│       Next.js (App Router)        │
│    ダッシュボード + 設定画面       │
└──────────┬───────────────────────┘
           │ @opennextjs/cloudflare
┌──────────▼───────────────────────┐
│    Cloudflare Workers (Hono)      │
│    API + 日次Cron自動取得         │
│         ↕                         │
│    Cloudflare D1 (SQLite)         │
└──────────────────────────────────┘
           │
    Google Search Console API
    Google Analytics Data API

なぜこの構成？

Next.js 15: 将来SaaSとして公開する可能性を考慮。App Routerで最新のReactパターン
Cloudflare Workers: このブログ（Astro）もCloudflareを検討していたので、エコシステムを統一
Hono: Cloudflare Workers上で動く軽量APIフレームワーク
D1: CloudflareのSQLiteデータベース。無料枠が大きい
Cron Triggers: 毎日自動でデータを取得する仕組み

ここまでの議論を経て、実装に入ります。

Claude Codeで一気に開発

ここからがClaude Codeの本領発揮でした。

Phase 1: プロジェクトセットアップ

「では Phase 1 から始めます」とClaude Codeが動き出すと、次々とコマンドを実行していきます。

pnpm create next-app@latest gsc-rank-checker --yes --src-dir
pnpm add @opennextjs/cloudflare hono recharts @tanstack/react-query zod
pnpm add -D wrangler@latest

プロジェクト生成、依存パッケージのインストール、Cloudflareの設定ファイル作成、D1データベースのスキーマ定義、shadcn/uiの初期化——全部を自動で進めてくれます。

自分がやったのは、途中の確認で「はい」と答えることくらい。

Phase 2: Google認証

OAuth 2.0の認証フローも、Claude Codeが全て組み上げてくれました。

Google Cloud ConsoleでのOAuth設定手順を日本語で案内
認証開始 → コールバック → トークン保存 → セッション管理
トークン自動リフレッシュのミドルウェア

Google Cloud Consoleの設定は自分で行いましたが、Claude Codeが「ここをクリックして」「この値を入力して」と画面の手順を逐一教えてくれたので、迷うことはありませんでした。

課金ゼロポイント: GSC APIもGA4 APIも完全無料。Google Cloud Consoleで課金設定をする必要すらありません。

Phase 3〜5: API + ダッシュボード + グラフ

データ取得API、ダッシュボードUI、キーワード詳細画面を立て続けに実装。

Claude Codeが作ってくれた機能:

サマリーカード — クリック数・表示回数・CTR・平均順位を一目で確認
トップキーワード・トップページ — 上位10件をテーブル表示
キーワード詳細 — 90日間の順位推移をRechartsでグラフ化
ソート・ページネーション — 大量データでも快適に閲覧

さらに欲が出て…

MVPが動いた時点で、追加の要望を出しました。

自分: 「GAとも連動したいのと、指定したキーワードの順位を追いかけたいです」

Claude Codeは2つの方式を提案してくれて、

GA4連携: Google Analytics Data APIで PV・セッション・ユーザー数を取得してグラフ表示
キーワードウォッチリスト: 気になるキーワードをピン留めして順位変動を追跡

どちらもその場で実装完了。

ダーク/ライトテーマも

自分: 「公開しても恥ずかしくない管理画面デザインにしてもらえませんか？
       ダーク・ライトのテーマ切り替えも欲しいです」

next-themesを導入して、全画面をモダンなデザインにリニューアル。Lucideアイコン、グラデーション、ホバーエフェクト——プロが作ったような管理画面になりました。

ここまでの所要時間

企画からMVP完成まで、1セッション。

やったこと	概要
壁打ち・企画	技術選定、競合調査、差別化ポイント整理
設計	アーキテクチャ、DBスキーマ、API設計、画面設計
実装（Phase 1-6）	セットアップ → 認証 → API → UI → グラフ → 設定画面
追加機能	GA4連携、キーワードウォッチリスト
UIリニューアル	モダンデザイン、ダーク/ライト対応
Google Cloud設定	OAuth、GSC API、GA4 API有効化

Claude Codeがなければ、同じものを作るのに数日〜1週間はかかっていたと思います。

今のツールでできること

現時点で動いている機能:

✅ Googleアカウントでワンクリックログイン
✅ Search Consoleのサイトを選択して自動連携
✅ 過去90日分のキーワード・ページデータを自動取得
✅ ダッシュボード（サマリー + トップKW + トップページ）
✅ キーワード詳細（順位推移グラフ）
✅ Google Analytics連携（PV・セッション推移グラフ）
✅ キーワードウォッチリスト（ピン留め追跡）
✅ ダーク / ライトテーマ切り替え

これからやること（Part 2 以降）

🔲 rank.toolcraftlab.dev にデプロイして本番公開
🔲 Cron Triggersで毎日自動データ更新
🔲 マルチユーザー対応（一般公開に向けて）
🔲 AI による記事改善提案（Claude API連携）
🔲 アラート通知（順位が大きく変動したら通知）

まとめ

Claude Codeとの開発は「壁打ち → 設計 → 実装」が1つのセッションでシームレスにつながるのが強みです。

普通なら「設計書を書いて → 調べながら実装して → デバッグして」と何日もかかる工程が、対話しながら一気に進みます。自分は要件を伝えて、方向性を判断するだけ。

個人開発のハードルが、かなり下がった実感があります。

次回（Part 2）では、Cloudflareへのデプロイと実際の順位データを使ったレビューをお届けします。

この記事で紹介しているツールは開発中です。公開時にはURLを追記します。