LPのSEO/AEO対策&編集をAIで自動化してみた

LPのSEO/AEO対策&編集をAIで自動化してみた

初めまして、今回はAIによるLPの自動改善を行ってみました！
LPを作成したものの、効果が出ていない人はぜひ覗いてみてください。

1. はじめに

誰に向けて書いた記事か

この記事は、以下のような課題を持つ方に向けて書いています。

• フロントエンドエンジニア：LP制作にAIを組み込んでみたい方
• SEO・マーケティング担当者：エンジニアに頼らず、自社LPを高速改善したい方
• 個人事業主：LPの用意から集客・改善までを1人で完結させたい方

（※Next.jsで作成するLPを前提としています。）

想定技術レベル

Webについて基礎知識がある方（HTML、Python、Next.js等のコードは書けなくても、それぞれの役割はわかる程度）

なぜ書いたか

LPのCVR（コンバージョン率）改善やSEO対策は、Webビジネスにおいて最も重要であるにもかかわらず、その運用には膨大な工数がかかります。

[データ分析] → [仮説立案] → [デザイン修正] → [コード書き換え] → [A/Bテスト]

このサイクルを手作業で回し続けるのには限界があります。
一方で、昨今のAIによるコード生成を実運用に持ち込むには、2つの大きな壁がありました。

1. 直接本番反映する恐怖：AI生成コードをそのまま自動デプロイするのは、レイアウト崩れやブランド毀損のリスクが高すぎる。
2. 分析止まりのツール群：世の中のAIツールは改善案のテキスト出力までで、コード編集まで自動化してくれる都合の良い環境がない。

そこで、AIが自律的にコードを編集し、本番環境は壊さない実用的なフローを作れないかと考えたのが開発のきっかけです。

完成したシステムの概要

今回開発したのは、Next.js製のLPに対して、データ分析からコード改修までを自動化するシステム『LP Copilot』です。

アプローチの軸は以下の3つです。

• 行動ログ計測（Firebase）
• ソースコードの静的解析（Python）
• LLMによるコンテンツ評価（Claude API）

これらを元に、AIがSEOおよびAEO（AI検索最適化）に関連する8指標をスコアリングし、改善案の作成からコンポーネントのコード生成までを自動で行います。

最大の特長は、管理画面からワンクリックで回せる安全な承認フローです。
（自然言語での部分的な修正指示も可能です！）

[ 分析 ] （指標を元に分析・改善）
↓
[ 適用 ] （裏側で自動的にGitブランチを作成）
↓
[ プレビュー ] （Next.jsのホットリロードで実際の画面を確認）
↓
[ 承認 / 却下 ] （「承認」された時のみ main へマージ）

人間がプレビューを目視確認して承認しない限り、本番環境には一切影響を与えないという、実運用に特化した堅牢なアーキテクチャを構築しました。

2. 既存のSEOについて

AI時代に迎えた「従来型SEO」の限界

Web集客の要として、長らく特定のキーワードを散りばめ、被リンクを集め、Googleのクローラーに好まれるサイト構造を作るというSEO手法が絶対的な正義とされてきました。

しかし現在、このゲームのルールが根本から変わりつつあります。

ChatGPTの台頭や、GoogleのAI OverviewといったAI検索の普及により、ユーザーの行動様式が劇的に変化しているためです。

• 従来の行動：検索結果のリンクをクリックし、Webサイトを回遊して答えを探す

↓

• 現在の行動：検索エンジン上で、AIが要約した回答を直接読んで完結させる（ゼロクリックサーチ）

つまり、気に入られる必要がある対象がGoogleからAIにシフトしました。

3. AEOについて

AEO（AI Engine Optimization）とは

前章の課題に対する解決策として、SEOの進化系として急速に重要視されているのがAEO（Answer Engine Optimization：AI検索最適化）です。

一言でいうなら、「AIに自社コンテンツを最適な回答として選ばせ、回答の引用元として提示させるための最適化手法」です。

AIに選ばれるための「3つの評価指標」

AIモデル（LLM）に文脈を正しく解釈してもらうためには、人間向けの見た目とは異なるアプローチで情報を整理する必要があります。具体的には以下の3要素が求められます。

• 回答網羅率（Answer Coverage）
  ユーザーが抱くであろう疑問に対し、過不足なくストレートに回答できているか。
• 関連概念網羅性（Entity Coverage）
  そのトピックに付随する重要なキーワードや周辺概念（entity）が、自然な文脈の中に網羅されているか。
• 情報鮮度と構造化データ
  コンテンツが常に最新に保たれているか。
  また、JSON-LDなどの構造化データを用いて機械が読み取りやすい状態になっているか。

これからのLP運用は、人間向けの美しいデザインを作るだけでなく、裏側でAI向けのスコア（AEO指標）を常に高く保ち続けることが、トラフィック獲得の絶対条件になります。

しかし、これらの指標を人間が目視でチェックし続けるのは不可能です。

だからこそ、AIによるAEO評価とユーザー行動に基づくCVR改善を自動で回し続けるシステムが必要だったのです。

4. 今回作成したシステムについて

前章までの背景を踏まえ、「AIの恩恵を最大限に引き出しつつ、本番環境を絶対に壊さない」をコンセプトに開発したのが『LP Copilot』です。

機能と安全設計

単なるAIコード生成スクリプトで終わらせないため、実運用に耐えうる5つの安全設計を施しています。

評価・改善を回す「8つのコア指標」

AEOとCVRの向上を両立させるため、システムは以下の3つのアプローチから8指標を自動計測・スコアリングしています。

3つの操作モード

管理画面（/admin）から、目的に応じて3通りの使い方ができます。

!モード① AI自動改善

8指標の分析結果をもとに、Claudeが改善案を作成してコードを自動生成
→ 大規模な改善サイクルを回したいとき

モード② 自然言語で直接編集

「ボタンを赤にして」「見出しをもっと短く」など、日本語で指示するだけでAIが反映
→ 分析なしでピンポイントに修正したいとき・AIプレビューを見て追加調整したいとき

モード③ ブランドガイドライン登録

使用禁止色・禁止ワード・トーン＆マナーをテキストで登録
→ モード①②のどちらで実行してもAIが毎回このルールを遵守する

全体構成フロー

システムは、大きく4つのフェーズで自律的にサイクルを回します。

5. 開発中に立ちはだかった3つの壁

今回の制作はすべてが円滑に進んだわけではありませんでした。
LP Copilotを作成している中で、2つの壁にぶつかりました。

!壁①　膨大な提案文によるエラー

analyze.py の提案生成で max_tokens=40000 を設定したところ、Anthropic APIが以下のエラーを返してきました。

Streaming is required for operations that may take longer than 10 minutes.

原因: 出力が長くなる可能性をAPIが検知すると、ストリーミング方式を強制する仕様。

アプローチ: そもそも提案文は短くて十分。max_tokens=500 に下げることで、ストリーミング不要な範囲に収め解決できました。

!壁②　AIの出力がコード途中で途切れる

LPのコードが長い状態で、「適用してプレビュー」を押すと以下のエラーが出るようになりました。

コードブロックが見つかりませんでした:

"use client";
import { useEffect, useRef } from "react";
...（途中で切れる）

原因: apply.py の max_tokens=8192 に対して、Claude が page.tsx 全体を再生成しようとすると出力トークンが上限に達する。正規表現でコードブロックの閉じ ``` を探しているため、途切れた出力はマッチせずエラーに。

アプローチ: 3点セットで対処

根本的にはページ規模が大きくなるほど同じ問題が再発します。
完全な解決策としては「差分のみ出力させてパッチを当てる」か「セクション単位で分割してAPIを複数回呼ぶ」方法がありますが、実装の複雑さとのトレードオフです。

6. 実際のデモ

それでは、実際に構築した「LP Copilot」がどのように動くのか、管理画面の操作フローをご紹介します。

① 分析結果と改善案の確認

管理画面（/admin）を開き、「分析＆改善案を生成」ボタンをクリックします。

数十秒後、Firebaseの行動ログとLLMの静的解析に基づいた「8指標のスコア」と、Claudeが生成した「具体的な改善アクション」が出力されます。

下記のように分析結果が出力されました。

分析結果①

これらの結果をもとに、改善点を提案します。

分析結果②

② 適用とプレビュー

提案内容に納得したら、「適用してプレビュー」ボタンを押します。

裏側でClaudeがコンポーネントコードを書き換え、同時にGitの新規ブランチ（例: copilot/improvement-1718500000）が生成されます。

隣のタブで開いておいた localhost:3000 の画面は、Next.jsのホットリロード機能により、手動でリロードすることなく改善後の新UIへと自動で切り替わります。

before

after①

after②

③ 承認または却下

プレビュー画面を実際にスクロールして触り、

• デザイン崩れがないか
• ブランドイメージに合っているか

などを人間の目で最終確認します。

問題なし ⇒「✅ 承認」をクリック
（ここで初めて main ブランチにコードがマージされ、本番環境へデプロイされます）

やり直し ⇒「❌ 却下」をクリック
（生成されたブランチごと破棄され、完全に元の状態へロールバックされます）

④ 自然言語でのダイレクト修正

分析を回すまでもない、ちょっとした修正を出したい時は、自然言語で指示も可能にしています。

画面上部のエディタ欄に ボタンを赤にして と打ち込んで送信するだけ。裏側の edit.py が走り、数秒でピンポイント修正版のプレビューが立ち上がります。

承認＆修正

部分修正後

7. まとめ

なぜ全自動にしないのか

今回、AIを用いてLPの分析からコード生成までを一気通貫で行うシステムを構築しました。技術的には、このまま人間を介さずに、AIが勝手にテストを回し続けて本番コードを直接書き換えるという完全自動化にすることも可能です。

しかし、私たちはあえてプレビュー確認と承認ボタンという「Human-in-the-loop」をシステムの中央に据えました。

その理由は大きく2つあります。

① ブランドセーフティの最終責任は人間にあるから

AIはCVRを追求するあまり過激な煽り文句を作ったり、SEOスコアに引きずられて不自然なFAQを生成したりするリスクを常にはらんでいます。

いくらプロンプトでガードレールを敷いても、自社の看板としてその言葉を世に出すかの責任を負うのは、AIではなく人間です。だからこそ、人間の目による最後の検閲は絶対に省いてはいけないプロセスだと定義しました。

② Gitによる心理的安全性がAI活用を加速させるから

AIがいきなり本番コードを触るという恐怖があると、現場の担当者は怖くてそのシステムを使えなくなります。

裏側で git checkout -b を切り、承認で git merge --no-ff、却下なら git branch -D で捨てる。このGitの仕組みをシステムに組み込んだことで、どれだけAIが暴走しても、無かったことにできるという究極の心理的安全性を担保しました。

ツール導入において最大の障壁となる人間の恐怖心を取り除くことこそが、現場でのAI活用を最も加速させます。

AIにLPを直させるというアイデア自体は誰でも思いつきますが、それをFirebaseのリアル行動データ駆動にし、Gitブランチで絶対に壊れない安全網を張ったことで、現場のマーケターが明日から実務で回せるアーキテクチャへと昇華できました。

本プロダクトの「新規性」と「限界」

今回開発してみて明確になった白黒は以下です。

• ⭕️ 完全自動化できたこと：Firebaseログの集計、静的コードのAEOスコアリング、差分ブランチの発行、Next.jsコンポーネントの構文的な書き換え。
• ❌ 人間にしかできなかったこと：自社のブランドとして、世に出していいかという最後の検閲。

AIは最高の副操縦士（Copilot）にはなりますが、機長席に座って責任を取るのはやはり人間の仕事です。

今後：Claude Codeの「Skills」としてオープンソース化へ

現在はNext.jsのダッシュボード上で動く一元化アプリですが、裏側で動いているソースコードを読んでGitブランチを切り、AIに安全に書き換えるPythonエンジンの汎用性は非常に高いです。

今後はこのコアロジックを独立させ、ターミナル上で対話型AIを動かせる Claude Code のカスタムSkillsとして切り出す予定です。ターミナルで /lpo analyze と叩くだけで、手元のWebプロジェクトをAIが勝手にA/Bテストブランチ化してくれるCLIツールを目指します。

※本システムの全ソースコード、及びローカル環境での立ち上げ手順書（マニュアル）は、以下のGitHubレポジトリにすべて公開しています。手元で動かしてみたい方はぜひ覗いてみてください！

👉 GitHub: LP Copilot レポジトリを見る

(この記事が参考になったら、レポジトリに ⭐️ Star をつけてもらえると開発の励みになります！)

宣伝

弊社ではデータ基盤策定からLLMまで、お客様にあったプロセスでの提案とご支援が可能です、お気軽にお問合せください。

また、中途採用やインターンの応募もお待ちしています！