← 機能一覧に戻る
Pro

サイトスタック

サイトスタックはウェブサイトをスキャンし、使用している技術スタックを丸ごと特定します。フロントエンドフレームワーク(React、Vue、Angular、Svelte)、メタフレームワーク(Next.js、Nuxt、SvelteKit)、CMSプラットフォーム(WordPress、Shopify)、アナリティクスツール(Google Analytics、Hotjar)、CDN(Cloudflare、Vercel)など多数を検出。検出された技術はすべてカテゴリ別パネルに名称・バージョン・アイコン付きで表示されます。

あるウェブサイトがどのような技術で作られているかを知ることは、競合分析、学習、採用判断、営業のリサーチなど、さまざまな場面で価値があります。BuiltWith や Wappalyzer といったサービスもこれを提供していますが、別のサイトを訪れたり専用の拡張機能をインストールしたりする必要があります。Site Stack は DevSuite Pro に直接組み込まれており、任意のページで有効化するだけで、使用技術の内訳を即座に確認できます。

このツールは複数のシグナルを分析することで動作します。JavaScript のグローバル変数(React.__SECRET、__NEXT_DATA__、__NUXT__ など)、HTML のメタタグや属性(generator、ng-version など)、HTTP ヘッダー(X-Powered-By、Server)、スクリプトやスタイルシートの URL(cdn.shopify.com、googletagmanager.com など)、そして DOM 構造のパターンです。結果はフロントエンドフレームワーク、メタフレームワーク、CMS/プラットフォーム、アナリティクス&トラッキング、CDN&ホスティング、UI ライブラリ、ビルドツールといったカテゴリに整理されて表示されます。

最初は空またはスケルトンの HTML を返し、クライアント側でハイドレーションを行うシングルページアプリケーションについては、サーバーの生レスポンスだけを確認するのではなく、ページが落ち着いた後に再スキャンする仕組みになっています。これにより、フレームワークがマウントされる前に検出処理が走ってしまい、React や Vue のサイトが「技術不明」と誤って判定される、よくある偽陰性を避けられます。検出された各技術には、いくつの独立したシグナルによって裏付けられたかに基づく信頼度が表示されるため、どの結果が確実で、どの結果を自分でもう一度確認すべきかを一目で判断できます。

ライブプレビュー
example.com
検出されたテクノロジー
フロントエンドフレームワーク
R
React
N
Next.js
v14.1
分析 & トラッキング
GA
Google アナリティクス 4
H
Hotjar
CDN & ホスティング
CF
Cloudflare
Vercel
主な機能

フロントエンドフレームワーク検出

React、Vue、Angular、Svelte、Preact、Solid、Alpine.js、jQuery、その他のフロントエンドライブラリを識別します。利用可能な場合は正確なバージョン番号を表示します(例:React 18.2.0、Vue 3.4.21)。縮小化された本番ビルドでも検出できます。

CMS・ECプラットフォーム

WordPress(テーマとプラグインを含む)、Shopify、Wix、Squarespace、Webflow、Ghost、Drupal、Magento、WooCommerce、その他のプラットフォームを検出します。ブランディングが削除されている場合でもプラットフォームを識別します。

アナリティクス・マーケティングツール

Google Analytics(GA4およびUA)、Google Tag Manager、Meta Pixel、Hotjar、Mixpanel、Segment、Amplitude、Intercom、Crispチャット、その他のトラッキング・マーケティングツールをページ上で検出します。

CDN・ホスティング・インフラ

Cloudflare、Vercel、Netlify、AWS CloudFront、Fastly、GitHub Pages、Firebase Hosting、その他のCDN・ホスティングプロバイダーをHTTPヘッダー・DNS解決・リソースURLから識別します。

UIライブラリ・ビルドツール

Tailwind CSS、Bootstrap、Material UI、Chakra UI、Styled Components、Webpack、Vite、Parcel、その他のUI・ビルドツールをCSSクラスパターン・スクリプト構造・アセット命名規則から検出します。

バージョン付きカテゴリ別結果

検出された技術はすべて、技術名・アイコン・バージョン番号・信頼度レベル付きのラベル付きカテゴリに整理されます。任意の結果をクリックすると、検出をトリガーしたシグナルを確認できます。

主な活用例

競合技術分析

競合他社のウェブサイトを訪問し、技術スタックを特定します。ReactとVueのどちらを使用しているか?どのアナリティクスツールを利用しているか?アセット配信にどのCDNを使っているか?これらの洞察を自社の技術判断に活用できます。

営業見込み客の発掘と資格確認

WordPressプラグインを販売していますか?見込み客のサイトがWordPressで動いているか、アプローチ前に確認しましょう。Shopifyインテグレーションを提供していますか?プラットフォームを検証しましょう。サイトスタックで即座にリード資格確認データを取得できます。

技術パターンの学習

気に入ったウェブサイトを訪問し、どの技術が動いているかを確認します。StripeがNext.jsを使い、LinearがReactを使っていること、または高速なサイトがCloudflareとViteを組み合わせていることを発見できます。うまく機能する技術の組み合わせを学べます。

自社技術公開状況の監査

自社の本番サイトでサイトスタックを実行し、外部から見える情報を確認します。削除したはずのツールのスクリプトタグが残っていませんか?本来露出すべきでないフレームワークのバージョンが表示されていませんか?

面接・リサーチの準備

企業の就職面接を控えていますか?その企業がウェブサイトで使用している技術を確認することで、関連する経験をアピールし、技術スタックについて的確な質問ができます。

使い方
1

サイトスタックを有効化する

DevSuite Proのフローティングドックを開き、サイトスタックアイコンをクリックします。ツールがページのDOM・スクリプト・ヘッダー・meta タグを技術シグネチャとしてスキャンします。

2

カテゴリ別結果を確認する

検出された技術がカテゴリ別に表示されます:フロントエンド、CMS、アナリティクス、CDN、UIライブラリ、ビルドツール。各エントリには技術名・アイコン・バージョンが表示されます。

3

検出の詳細を確認する

検出された技術をクリックすると、検出をトリガーしたシグナル(グローバル変数・meta タグ・スクリプトURL・DOMパターン)を確認できます。

4

信頼度レベルを確認する

各検出には信頼度インジケーターが表示されます。複数のマッチするシグナルは信頼度を高めます。シングルシグナルの検出は「probable(可能性あり)」としてフラグが立てられます。

5

サイト間で比較する

異なるウェブサイトを閲覧し、それぞれでサイトスタックを実行して、競合他社・クライアント・参考サイト間の技術選択を比較します。

試してみませんか?

DevSuite Pro を無料でインストールして、ブラウザで 64 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加