どんなシステムを使ってサイトが作られているかを知りたい
web制作に携わっている人なら、どんな技術を使ってサイトが作られているのか気になります。
「どの技術を使えばどのようなサイトを作ることができるか」を知ることはエンジニアにとって重要です。
また、ECサイトを新しく作る際に、こんなECサイトを作りたいと思った際に、そのECサイトがどのシステムを使っているかを知ることができれば便利です。
ベンチマークとなるECサイトが使っているシステムを知ることで、同じようなECサイトを作ることができます。
（実際に同じサイトを作る訳ではないですが、使用されている技術をしることは大切です。）
Wappalyzerならサイトが使用しているシステムを知ることができる
Wappalyzer（ワッパライザー）であれば、サイトがどのようなシステムや技術を使っているかを知ることができます。
WappalyzerはChromeやFirefoxなどの機能拡張・アドオンです。
Chrome、Firefoxの他、Edge、Safari、HubSpot、Pipedrive、Semrush、Pabbly、Zapier、Make、Gmail、Androidで利用可能です。
Wappalyzerを使ってサイトを調べる
お使いのブラウザにWappalyzerをインストールしてください。
特に設定は不要ですので、インストール後すぐにWappalyzerを使うことができます。
調べたいサイトをブラウザで開くだけです。
そうすると、すぐにWappalyzerが解析をはじめます。
コーポレートサイトの例
ある企業のコーポレートサイトをブラウザで開いたところ、Wappalyzerアイコンに20が表示されました。
20個の技術が特定できたようです。
Wappalyzerアイコンをクリックすると、詳細がポップアップ表示されます。
CMS、Webサーバー、プログラミング言語、データベース、JavaScriptライブラリ、アクセス解析ツール、SEOツール、リバースプロキシ、CDN、マーケティングオートメーション・ツール、フォントまで特定されています。
更に、このサイトではCMSにWordPressを利用しており、使用しているテーマやプラグインまで分かります。
まさに丸裸状態です。
ECサイトの例
次にECサイトをブラウザで開きました。
27個の技術が特定できたようです。
Wappalyzerアイコンをクリックして詳細を見ます。
このECサイトはShopifyで制作されていました。
また、WordPressと同様に使用されているShopifyのアプリも分かります。
Wappalyzerで丸裸にされた情報は、同等のECサイトを作る際に大変参考になります。
CSVで出力できる
このようにWappalyzerはサイトを丸裸にします。
使われている技術を知ることで、サイト制作の手助けになります。
また、Exportボタンをクリックすれば、使用されている技術の一覧がCSVで出力できます。
各サイトの情報をCSVで出力することで、どのサイトでどの技術が採用されているかの資料を作成することも可能です。
投稿者プロフィール
- HTMLコーディングを中心に、フロントエンド開発を担当。
UI/UXを意識した設計・実装を心がけ、使いやすくストレスのない画面づくりを得意としています。
EC-CUBEやWordPressの開発にも取り組み、ECサイト構築領域でのスキルを強化中です。
猫好き。
野良猫を見かけるとつい声をかけてしまいます（ペットロスが怖くて飼わない主義です）。
