AIコーディングツールでAEO対応サイトを30分で作る実践ガイド2026
2026.04.18 · aeolab編集部
📌 TL;DR（冒頭結論）
AIコーディングツールにAEOチェックリストを渡せば、構造化データ完備のページが30分で完成する。
AIコーディングツールは「AEO対応コード」を自動で書いてくれない。
Cursor・Windsurf・Bolt.newといったバイブコーディングツールの普及により、Webページの制作速度は劇的に向上しました。指示を出すだけでHTML・CSS・JavaScriptが生成され、デザインも整った状態でブラウザに表示される。そんな体験が当たり前になりつつあります。
しかし、AIが生成したコードには致命的な欠点があります。構造化データがほぼ入っていないのです。
FAQPageスキーマも、Articleスキーマも、BreadcrumbListスキーマも、AIは明示的に指示しない限り省略します。AEO（Answer Engine Optimization）の観点からいえば、いくら見た目が美しいページでも、JSON-LDがなければ ChatGPT Search や Perplexity AI に引用されにくいコンテンツになってしまいます。
このガイドでは、CursorやWindsurfなどのAIコーディングツールをAEO対応に活用する具体的な手順を、ツール別の特徴とコピペ用プロンプトとともに解説します。
ツール別の特徴とAEO用途
AIコーディングツールはそれぞれ設計思想が異なり、AEO対応という観点でも得意な用途が分かれます。まず代表的な3ツールの特徴を整理します。
Cursor AI — 既存サイトへのAEO後付けに最適
Cursorは「既存コードを読んで修正する」作業に特化しています。
VS Codeをベースに構築されており、プロジェクト全体のファイルをAIが把握した状態で編集を行えます。Composerと呼ばれる機能では、複数ファイルを横断した変更を一括で指示できます。
AEO対応への活用では次のような使い方が有効です。
lib/schema.tsに構造化データ生成ヘルパー関数を新規作成させる- 既存の記事ページに FAQPage・Article・BreadcrumbList の JSON-LD を追加させる
generateMetadata()関数に canonical URL・OGP・author 情報を一括追加させる
特に既にNext.jsやNuxtで構築されたサイトにAEO施策を後から組み込む作業では、Cursorのプロジェクト全体把握能力が活きます。「このプロジェクトの記事ページに、以下のスキーマを実装してください」という指示だけで、既存の型定義に合わせたコードを生成してくれます。
Cursor向けのプロンプト例を示します。
このNext.jsプロジェクトの app/guide/[slug]/page.tsx に
以下のJSON-LDスキーマを追加してください:
1. Articleスキーマ（author, datePublished, dateModified含む）
2. FAQPageスキーマ（frontmatterのfaqsフィールドを使用）
3. BreadcrumbListスキーマ（ホーム > ガイド > 記事タイトル）
lib/schema.ts にヘルパー関数として切り出し、
page.tsx の <head> 内に <script type="application/ld+json"> として出力してください。
Windsurf（Cascade）— 新規ページの一括AEO対応に強い
WindsurfのCascadeは「ゼロからページを作る」作業で真価を発揮します。
エージェント型AIが自律的にファイルを作成・編集・確認するサイクルを回します。単一の指示から複数ファイルにまたがる実装を完結させる能力は、CursorのComposerより強い傾向があります。
新規のランディングページやガイド記事テンプレートをAEO対応済みの状態で一括生成させる用途に向いています。「以下の要件でAEO対応ランディングページを作ってください」という指示一つで、構造化データ込みのページが完成します。
ただし、既存プロジェクトへの組み込みでは、Cascadeがファイル構造を誤読するケースがあります。新規プロジェクトではWindsurf、既存プロジェクトへの追加ではCursorと使い分けるのが現実的です。
Bolt.new / v0 — プロトタイプ向け・本番前にAEO追加が必要
Bolt.newとv0はブラウザだけで完結する手軽さが強みですが、AEO対応は別途必要です。
Bolt.newはStackBlitzベースのブラウザ内開発環境でフロントエンドアプリを素早くプロトタイプできます。v0はVercel社が提供するUIコンポーネント生成ツールです。どちらも構造化データの生成は苦手で、FAQPageスキーマを指示しても正確な形式で出力されないことがあります。
活用パターンとしては「Bolt.newでUI骨格を作り、CursorにインポートしてAEO対応を追加する」というハイブリッドワークフローが現実的です。
AEO対応プロンプトテンプレート（コピペ用）
AIコーディングツールへの指示で最も重要なのは、AEO要件を明示的にリストアップすることです。「AEOに対応させてください」という曖昧な指示ではなく、必要な要素を箇条書きで渡します。
以下のプロンプトをそのままコピーしてご利用ください。
以下の要件でランディングページを作成してください:
【構造化データ（JSON-LD形式・<head>内に出力）】
- FAQPageスキーマ（最低3Q&Aを含む）
- ArticleスキーマまたはWebPageスキーマ
- author: { "@type": "Person", name: "著者名", url: "著者ページURL" }
- datePublished・dateModified を含む
- BreadcrumbListスキーマ（最低2階層）
【HTMLマークアップ】
- H1タグは1ページに1つのみ
- H2以下で論理的に構造化（H3をH2の子要素として使用）
- FAQ Q&Aはページ本文にも表示されること（スキーマだけでなく可視コンテンツとして）
【メタデータ】
- meta description（120字以内）
- canonical URL
- og:title・og:description・og:type
【E-E-A-Tシグナル】
- 著者情報セクション（name・bio・sameAs を含む）
- 最終更新日の表示
- 参考文献・出典リンクのセクション
このプロンプトを渡せば、AIは構造化データ込みのページを生成します。ただし生成後に必ず検証が必要です。AIが Schema.org の古いフォーマットを出力することがあるため、後述するチェック手順を実施してください。
AIが生成したコードのAEOチェック手順
AIコーディングツールが出力したコードをそのまま本番公開してはいけません。構造化データが正しく実装されているか、4つの手順で確認します。
手順1: Google リッチリザルトテストでスキーマを検証する
Google の リッチリザルトテスト にURLまたはHTMLコードを貼り付けます。FAQPageスキーマが正しく認識されているか、エラーや警告が出ていないかを確認します。「検出されたアイテム」に「よくある質問」が表示されれば成功です。
手順2: Schema.org バリデーターで型の正確性を確認する
Schema.org バリデーター でより詳細な型チェックを行います。Googleのテストでは検出されないプロパティの誤りも見つかることがあります。特に @type の値が最新の Schema.org 仕様に沿っているか確認してください。
手順3: PageSpeed Insights でモバイル速度を確認する
構造化データの実装がページ速度に影響することはまれですが、AIが生成したコードに不要なスクリプトやレンダリングブロック要素が含まれることがあります。モバイルスコアが70点を下回る場合は、生成されたコードのパフォーマンス問題を調査します。
手順4: 著者情報・E-E-A-Tシグナルを手動で確認する
AIは著者情報を省略するか、架空の情報を入力することがあります。Articleスキーマの author フィールドに正しい著者名とURLが入っているか、ページ本文にも著者情報が表示されているかを目視で確認します。
よくある失敗パターンと対策
AIコーディングツールを使ったAEO対応で頻出する失敗を5つ紹介します。
失敗1: 古いSchema.orgフォーマットを出力する
学習データに古いコードが含まれるため、廃止済みのプロパティが出力されることがあります。たとえば BlogPosting スキーマで articleSection を category と書くなど。
対策: プロンプトに「schema.org の最新仕様（2025年以降）に準拠してください」と明記します。また生成後に schema.org バリデーターで必ず検証します。
失敗2: FAQスキーマは入っているがページにFAQが表示されない
JSON-LDのFAQPageスキーマだけ実装し、ページ本文にQ&Aのテキストがない状態になることがあります。Googleはスキーマと本文の内容が一致しているかを確認するため、スキーマだけのFAQは評価されません。
対策: プロンプトに「FAQはJSON-LDスキーマだけでなく、ページ本文のHTMLにも表示してください」と明示します。FAQスキーマの実装ガイドも参照してください。
失敗3: 著者情報が入っていない
AIはコンテンツのデモとして「著者名: 山田太郎」のような架空の情報を生成することがあります。本番サイトでは実際の著者情報が必要です。
対策: プロンプトに著者情報を具体的に渡します。「著者: 鈴木一郎、著者ページURL: https://example.com/author/ichiro」のように実際の値を含めてください。
失敗4: canonical URLが相対パスになっている
<link rel="canonical" href="/guide/article"> のように相対パスになっていると、一部のクローラーが正しく解釈しません。
対策: canonical URLは必ず https:// から始まる絶対パスで生成するよう指示します。
失敗5: BreadcrumbListの順序が逆になっている
AIがパンくずの順序を末尾から生成するミスが発生することがあります。position: 1 が記事ページ、position: 3 がホームになっているケースは実際に確認されています。
対策: プロンプトに「BreadcrumbListのpositionはホームが1、カテゴリが2、記事が3の順で生成してください」と明記します。
30分で完成させるワークフロー
実際の作業時間目安と手順をまとめます。
0〜5分: プロジェクトへの指示準備
上記のAEO対応プロンプトテンプレートに、実際のサイト情報（著者名・サイトURL・カテゴリ構造）を埋め込みます。このステップを省略するとAIが架空の情報を使います。
5〜20分: AIによるコード生成
Cursorなら既存プロジェクトに対してComposerで指示します。Windsurfなら新規ファイルとして生成させます。生成が完了したらブラウザで表示を確認します。
20〜30分: 4ステップの検証
リッチリザルトテスト → Schema.orgバリデーター → PageSpeed → 著者情報目視確認の順で検証します。エラーがあればその場でAIに修正を指示します。
日本のWebサイトへの影響。
日本でもバイブコーディング採用者は急増しています。X（Twitter）やYouTubeでは「Cursorで30分でサービスを作った」という投稿が毎日流れ、エンジニア以外のビジネスパーソンがWebサービスを構築する事例も出てきました。
しかし、速く作れることと、AI検索に引用されることは別の話です。ChatGPT Searchや Perplexity AIが普及し、ユーザーの情報収集行動が変化しつつある今、ページが存在するだけでは検索流入は見込めません。構造化データを持たないページは、AI検索エンジンの引用候補から外れます。
AEOの観点では、AIコーディングツールは「高速に骨格を作るツール」であり「AEO対応を自動化するツール」ではありません。FAQPageスキーマ・E-E-A-Tシグナル・適切なHTML構造は、人間が要件として明示しなければAIは省略します。
このガイドで紹介したプロンプトテンプレートと検証手順を使えば、スピードと品質を両立させたAEO対応ページを30分で完成させられます。バイブコーディングのスピード感を保ちながら、AI検索への引用率を高めるワークフローとして活用してください。
よくある質問
AIコーディングツールで作ったサイトはAEOに対応できますか？
はい、ただし適切なプロンプトが必要です。FAQPageスキーマ・Articleスキーマ・BreadcrumbListスキーマを明示的に指示しないと、AIは構造化データを省略する傾向があります。
CursorとWindsurfどちらがAEO対応に向いていますか？
どちらも使えますが、Cursorは既存プロジェクトへの組み込みに強く、WindsurfのCascadeは新規ページの一括生成に強い傾向があります。用途に応じて使い分けることを推奨します。
Bolt.newやv0で作ったサイトはAEO対応できますか？
プロトタイプとしては使えますが、本番AEO対応には限界があります。生成後にCursorやVS Codeで構造化データを追加するのが現実的なワークフローです。
関連記事
ChatGPT Searchに引用されるサイトの作り方【2026年最新版】
OpenAI ChatGPT Searchの引用アルゴリズムを解説。どんなコンテンツが引用されやすいか、実際の対策手順をステップバイステップで紹介。
2026.04.18
AEO効果測定ガイド：KPI設定から計測ツールまで完全解説
AI検索時代のSEO効果測定は従来と全く違う。AI Overview出現率・引用回数・ゼロクリック率など、AEO特有のKPIと計測方法を実践的に解説。
2026.04.18
日本のWebサイトはAEO対応できているか？2026年実態レポート
国内・海外の調査データをもとに、日本のWebサイトのAEO（AI検索最適化）対応状況を分析。FAQスキーマ実装率・E-E-A-T対応・構造化データの普及状況を解説。
2026.04.18