技術スタック検出
ウェブサイトの技術スタックを検出する方法
すべてのウェブサイトは、技術スタックの上に構築されています。それが何か——CMS、フレームワーク、ホスティング、分析ツール——を知ることは、競合分析、営業チーム、エンジニアのいずれにとっても有用です。
競合を調べるときも、営業先を選定するときも、どの技術スタックを採用するか決めるときも、ウェブサイトの技術スタックを検出することで、推測がデータに変わります。仕組みと、手早く行う方法を解説します。
「技術スタック」とは何を指しますか?
| レイヤー | 例 |
|---|---|
| コンテンツ管理(CMS) | WordPress、Shopify、Wix、Drupal、Squarespace |
| フロントエンドフレームワーク | React、Vue、Next.js、Angular、Svelte |
| 分析ツール | Google Analytics / GA4、Matomo、Plausible、Hotjar |
| ホスティング / CDN | Cloudflare、AWS、Netlify、Vercel、nginx |
| EC / 決済 | WooCommerce、Stripe、PayPal、Klarna |
手動で検出する:ページを調べる
ブラウザでページを開き、ソースを表示(Ctrl+U)するか、DevTools(F12)を開きます。次のような箇所を探します:
- Generator メタタグ:
<meta name="generator" content="WordPress"> - フレームワークの痕跡:
id="root"やdata-reactrootは React を、__NEXT_DATA__は Next.js を示します - レスポンスヘッダー:
X-Powered-By、Server、cf-ray(Cloudflare)、via - 既知のアセットパス:
/wp-content/(WordPress)、/cdn/shop/(Shopify)
この方法でも可能ですが、遅く、見落としも多くなりがちです。専用の検出ツールの方が速く、より網羅的です。
手早く検出する:ブラウザ拡張機能
最も手早い方法は、技術スタック検出ツールのブラウザ拡張機能です。PageTold 拡張機能(Chrome / Edge)をインストールし、任意の公開ページを開くと、ツールバーのバッジがそのサイトで検出された技術を即座に表示します。タブを移動せずに、アクセスした任意のページの技術スタックを検出できます。
技術スタック検出が重要な理由
- 競合インテリジェンス——競合が何で作られ、何を採用しているかを把握します。
- 営業と提携——あなたが連携できる技術スタックを使っているサイトを狙って営業できます。
- ベンチマーク——PageTold のベンチマークで、業界全体の技術導入状況を測定します。
- 技術的な判断——技術スタックを選ぶ前に、有力サイトがどう作られているかを学びます。
任意のサイトの技術スタックを検出
ドメインを貼り付けると、その技術スタックと AI レディネススコアが表示されます。あるいは無料のブラウザ拡張機能をインストールし、その場で検出できます。
サイトを検出