実装・技術解説 2026.04.02 16 min read

ノーコードツールで作ったサイト、AIに読まれていますか?—SPA問題とツール別の対応状況を調べた

ノーコードツールで作ったサイトがAIクローラーに読まれているか
OBS-LOG / 2026.04.02
TABLE OF CONTENTS

「ノーコードツールで作ったサイトがAIに紹介されない」——そんな声を耳にすることが増えています。デザインのきれいなサイトが、ChatGPTやPerplexityの回答に一切登場しない。原因のひとつとして、近年注目されているのが「SPA問題」です。

ノーコードツールの多くは、JavaScriptで画面を組み立てる仕組みを採用しています。人間のブラウザはJavaScriptを実行してページを表示しますが、AIクローラーはその処理をほぼ行いません。つまり、AIからすると「何も書いていないページ」に見える可能性があるのです。

記事では、AIクローラーがJavaScriptを読めない理由から始め、Studio・Wix・Framer・Webflowという代表的な4ツールの対応状況を実際のソースをもとに整理します。最後に、自分のサイトが今どう見られているかを確かめる方法も紹介します。

この記事でわかること|📖:約8分

  • AIクローラーがJavaScriptを実行しない理由と、その影響の大きさ
  • ノーコードツール(Studio・Wix・Framer・Webflow)ごとのAI可視性の違い
  • 自分のサイトがAIに読まれているかを30秒で確かめる方法
  • ノーコードツール選びでAI引用に差がつくポイント

AIクローラーはJavaScriptを実行しない

Webサイトを訪れるとき、人間はブラウザを使います。ブラウザはページを開いた瞬間にJavaScriptというプログラムを実行し、文章・画像・メニューなどを画面に組み立てて表示します。

AIクローラーはこの処理をしません。

GPTBot(ChatGPT)・ClaudeBot(Claude)・PerplexityBot(Perplexity)——主要なAIクローラーはいずれも、サーバーから最初に返ってくる生のHTMLをそのまま受け取って終わりです。JavaScriptを動かして画面を完成させるステップには進みません。

VercelとMerjが5億件以上のGPTBotアクセスを分析した調査では、JavaScriptを実行した痕跡はゼロだったと報告されています。GPTBotはJSファイル自体をダウンロードすることはあっても、それを動かしてコンテンツを取り出すことはしていません。

Googlebotと比べると、この差は明確です。

クローラー JavaScript実行 紐づくサービス
Googlebot ✅ 実行する Google検索・Gemini
GPTBot ❌ 実行しない ChatGPT
ClaudeBot ❌ 実行しない Claude
PerplexityBot ❌ 実行しない Perplexity
主要クローラーのJavaScript実行能力比較(Vercel・Merj調査、2024年)

GooglebotはJavaScriptを実行できるため、SPAで作られたサイトも最終的にはGoogleの検索結果に載る可能性があります。しかしAIクローラーにはその仕組みがありません。結果として、GoogleのSEOでは1位を取れていても、ChatGPTやPerplexityにはサイトの内容がまったく届いていない——という状況が起こります。

「JavaScriptを切った状態で見えているもの」が、AIクローラーに見えているすべてです。確認方法はシンプルで、ChromeのデベロッパーツールでJavaScriptを無効にしてページをリロードするだけです。テキストや見出しが消えてしまうようなら、AIクローラーにも同じく何も見えていません。

詳しいクローラーの種類や仕組みはAIクローラーとは?引用されるサイト設計の基本と対策にまとめています。

ノーコードツールの多くはSPAベース——読まれにくいケースがある

ノーコードツールでサイトを作ると、見た目はきれいに仕上がります。ところがそのサイトが「どういう仕組みで動いているか」によって、AIクローラーに読まれるかどうかが大きく変わります。

SPAとは何か

SPA(シングルページアプリケーション)とは、ページを移動するたびにサーバーと通信してHTMLを丸ごと受け取るのではなく、最初に1枚の空っぽに近いHTMLだけを読み込み、その後はJavaScriptが必要なコンテンツを組み立てて表示する仕組みです。

イメージとしては、こんな感じです。

  • 従来のサイト(MPA):ページを開くたびに「完成品の料理」がサーバーから届く
  • SPA:最初に「空の皿と食材」だけが届き、ブラウザ側で料理を完成させる

人間のブラウザはJavaScriptを実行して料理を完成させられます。しかしAIクローラーはJavaScriptを実行しないため、「空の皿」を受け取ったまま帰っていきます。コンテンツが存在していても、AIには何も見えていない状態になります。

MPAとSPAの比較図。MPAはサーバーから完成したHTMLが届きAIクローラーが読めるのに対し、SPAは空のHTMLしか届かずAIクローラーには何も見えない状態になる
MPAとSPAでAIクローラーに見えるものがまったく異なる

ノーコードツールがSPAを採用する理由

SPAはページ間の移動がなめらかで、アニメーションや動的なデザインを実現しやすい特徴があります。ノーコードツールの多くが「コードなしで美しいサイトを作れる」ことを売りにしているため、表現の幅が広いSPAベースの仕組みを採用してきた経緯があります。

StudioはかつてSPAを採用しており、自社でもSEOへの影響を認めていました。WixやFramerも一部SPAの構造を持っていましたが、現在はSSR(サーバーサイドレンダリング)への対応を進めています。

SSRとMPAはどう違うのか

SSR(サーバーサイドレンダリング)とは、JavaScriptの処理をサーバー側で済ませてから、完成したHTMLをクローラーやブラウザに渡す仕組みです。AIクローラーが受け取る段階ですでにコンテンツが入っているため、JavaScriptを実行できなくても内容を読み取れます。

MPA(マルチページアプリケーション)は従来型のサイト構造で、ページごとに完成したHTMLがサーバーから返ってきます。WordPressはこの仕組みで動いており、AIクローラーとの相性は最もよい部類に入ります。

整理すると、AIクローラーへの見えやすさはこうなります。

仕組み AIクローラーへの見えやすさ 代表例
MPA(静的HTML) ✅ 最も読まれやすい Webflow・WordPress
SSR 🔺 対応していれば読まれる Wix・Framer(現行)
SPA(クライアントサイドのみ) ❌ ほぼ読まれない Studio旧基盤など
サイト構造とAIクローラーへの可視性の関係

次のセクションでは、ツールごとの現状を具体的に見ていきます。

ツール別の対応状況——Studio・Wix・Framer・Webflow

ノーコードツールによって、AIクローラーへの対応状況は大きく異なります。ツールごとに現状を整理します。

AIクローラーの種類や仕組みの基本はGooglebotとGPTBot・OAI-SearchBotの違い|AIクローラーの仕組みと許可・拒否設定にまとめています。

Studio——旧基盤はSPA、新基盤(Beta)でMPAに移行中

Studioはかつて、SPA+CSR(クライアントサイドレンダリング)を前提とした仕組みでサイトを配信していました。この構造が「SEOに弱い」と言われてきた理由であり、AIクローラーにも同じ問題が当てはまります。

2026年1月、Studio公式は新しい公開基盤(Beta)の提供を開始しました。従来のSPA+CSRから、MPA+SSR方式に切り替えることで、ページ読み込みのパフォーマンスが向上し、検索エンジンやAIによるコンテンツの理解(SEO/AEO)の面でもメリットが期待できます。 さらにMPA構成への移行により、検索エンジンはもちろん、NotebookLMをはじめとするAIツールがサイト内容を正しく読み取れるようになっています。

ただし、現時点ではBeta版です。新規プロジェクトは新基盤が適用された状態で開始されますが、既存プロジェクトは新旧基盤の切り替えが必要です。 切り替え後は旧基盤に戻せないため、注意が必要です。

Studioで作ったサイトをお持ちの方は、管理画面から新基盤への切り替え状況を確認することをおすすめします。旧基盤のままであれば、AIクローラーにはほぼ何も見えていない可能性があります。

なお、StudioサイトとGPTBotの関係については、タグページをnoindexにした実験でも興味深い結果が出ています。詳しくはタグをnoindexにしたら、GPTBotが来なくなった【AI実験室 #07】をご覧ください。

Wix——SSR対応済み、AIへの可視性は確保されている

Wixは公式ドキュメントで、SSRへの対応を明記しています。WixはSSR(サーバーサイドレンダリング)を使用して、検索エンジンがサイトをクロールし、メタタグを確認し、各ページから関連コンテンツを抽出できるようにしています。

SSRのインフラにより、クローラーがサイトのコンテンツを完全に読み取れることを保証しています。 AIクローラーの観点からも、サーバー側で完成したHTMLが返ってくるため、JavaScriptを実行しなくてもコンテンツを読み取れます。

ただし、カスタムコードや外部アプリを追加した部分については、SSRの対象外になるケースがあります。追加機能を多用している場合は、ページのソースコードを確認しておくと安心です。

Framer——SSR対応済み、クローラー向けの配慮も明示

FramerもSSRへの対応を公式が明言しています。Framerはデプロイのたびにすべてのウェブサイトをプリレンダリング(サーバーサイドレンダリング)します。プリレンダリングされたHTMLにより、GooglebotはJavaScriptを実行せずにウェブサイトを解析できます。

さらに、JavaScriptを実行しないクローラーがまだ最適化されていないページにアクセスした場合、利用可能な最新の最適化済みバージョンを提供するようになっています。 AIクローラーへの対応を意識した設計が施されています。

Webflow——静的HTML出力で最も安全

Webflowは、4ツールの中でAIクローラーとの相性が最も良い部類に入ります。Webflowは公開時にサーバー側で静的なHTMLを生成して配信する仕組みをとっており、JavaScriptに依存せずコンテンツが最初から含まれた状態でクローラーに届きます。

出力されるのはクリーンなHTMLです。AIクローラーが受け取る段階でページの内容がすでに揃っているため、SPA問題とは無縁の構造になっています。

4ツールをまとめて比較する

ノーコードツール4種のAIクローラー可視性比較。Webflowが最も安全で静的HTML出力、Wix・Framerはssr対応済み、Studioは旧基盤がSPAで読まれず新基盤Betaで改善中
ツールごとのAI可視性の違いは仕組みの違いから生まれる
ツール 仕組み AIクローラーへの可視性 注意点
Studio(旧基盤) SPA+CSR ❌ ほぼ読まれない 新基盤への手動切り替えが必要
Studio(新基盤Beta) MPA+SSR ✅ 読まれる 2026年1月〜Beta提供開始
Wix SSR対応済み ✅ 読まれる カスタムコード部分は要確認
Framer SSR(プリレンダリング) ✅ 読まれる クローラー向けの配慮も明示
Webflow 静的HTML出力 ✅ 最も安全 SPA問題とは無縁の構造
ノーコードツール別のAIクローラー可視性まとめ(2026年3月時点)

自分のサイトが読まれているか確認する方法

ここまで読んで「自分のサイトは大丈夫だろうか」と思った方もいるはずです。使っているツールがSSR対応済みでも、カスタムコードや設定次第で読まれていないケースがあります。実際に確かめる方法を3つ紹介します。

方法① ページのソースコードを確認する

最もシンプルな確認方法です。確認したいページをブラウザで開き、右クリックから「ページのソースを表示」を選びます。表示されたHTMLの中に、記事の本文・見出し・説明文などのテキストが含まれているかを確認します。

テキストが見当たらず、代わりに<div id="app"></div><script src="..."></script>のような記述しかない場合は、クライアントサイドレンダリング(CSR)で動いている可能性が高いです。AIクローラーには同じ「空っぽの状態」が届いています。

方法② JavaScriptを無効にしてページを開く

ChromeのデベロッパーツールでJavaScriptを無効にしてページをリロードする方法です。手順はこうです。

  1. 確認したいページをChromeで開く
  2. F12キー(またはCmd+Option+I)でデベロッパーツールを開く
  3. Cmd+Shift+P(WindowsはCtrl+Shift+P)でコマンドメニューを開く
  4. 「javascript」と入力し「Disable JavaScript」を選択してEnter
  5. ページをリロードする

リロード後に文章や見出しが消えてしまう場合、そのコンテンツはJavaScriptで描画されています。AIクローラーには同じく見えていません。テキストがそのまま残っていれば、AIクローラーにも読まれている状態です。

方法③ AIクローラー可視性診断ツールで確認する

方法①②はある程度の知識が必要です。「ソースコードを見てもよくわからない」という場合は、診断ツールを使うのが手軽です。

AI観測ラボが提供するAIクローラー可視性診断ツールでは、URLを入力するだけでサイトがAIクローラーに読まれているかを確認できます。ソースコードの知識がなくても、AIへの見えやすさをスコアで把握できます。

AIクローラー可視性診断ツールのスクリーンショット。URLを入力するだけでAIクローラーへの可視性を診断できる
URLを入れるだけでAIクローラーへの見えやすさを確認できる

robots.txtやmetaタグなどの基本設定が抜けていないかも同時に確認できます。設定の抜け漏れについてはAIに引用されるサイト、基本設定8項目チェックリスト【実装記事つき】も参考にしてみてください。

まとめ——ノーコードツールを選ぶなら、仕組みまで確認する

AIクローラーはJavaScriptを実行しません。どれだけデザインが美しくコンテンツが充実していても、SPAベースのサイトではAIクローラーに「空っぽのページ」として届いてしまいます。

今回調べた4ツールの現状をおさらいします。

  • Studio(旧基盤):SPA構造のためAIクローラーにほぼ読まれない。新基盤(Beta)への切り替えで改善できる
  • Wix:SSR対応済みで基本的には問題なし。カスタムコード部分は個別に確認が必要
  • Framer:SSR(プリレンダリング)対応済み。AIクローラーへの配慮も公式が明示している
  • Webflow:静的HTML出力でSPA問題とは無縁。4ツールの中で最も安全

ノーコードツールを選ぶとき、デザインの自由度や価格に目が向きがちです。しかしAI引用を狙うなら、「完成したHTMLがサーバーから届くか」という点が重要な判断軸になります。

すでにサイトを持っている方は、まず自分のサイトが今どう見えているかを確かめてみてください。AIクローラー可視性診断ツールでURLを入力するだけで確認できます。

AIに読まれる土台を作ることが、AI検索時代における最初の一歩です。

Free Diagnostic Tool

あなたのサイトは、
AIに見えていますか?

URLを入力するだけで30秒。8項目を自動診断し、優先度別の改善プランを提示します。完全無料・登録不要。