Shopifyで作られたサイトは数多くありますが、Shopifyはカスタマイズ手段が豊富であるためパッと見ではShopifyサイトだと分からない場合もあります。しかし他社のShopifyサイトを見て勉強することはストア構築者にとって非常に重要です。できないと諦めていたカスタマイズを実現するアプリに出会うこともありますし、表現の幅を広げるようなデザインを目の当たりにすることもあるかもしれません。
この記事ではShopifyサイトの見分け方と、そのために利用できる便利なツールをいくつか紹介します。ストア構築者様の参考になれば幸いです。
もっともシンプルな方法はソースコードを直接見ることです。Shopifyストアであれば、HTML中には沢山の「shopify」というキーワードが散りばめられており一目瞭然です。
表示しているサイトのHTMLを確認するためには、ページ中を右クリック > 検証をクリックすることで確認ができます。（Chromeの場合）
以下、ブラウザごとにソースを確認する手順を表にしてまとめておきます。
| Chrome | ページ中を右クリック > 「検証」をクリック |
| Safari | ページ中を右クリック > 「要素の詳細を表示」をクリック |
| Edge | ページ中を右クリック > 「開発者ツールで調査する」をクリック |
| Firefox | ページ中を右クリック > 「調査」をクリック |
さらにテーマを調べたい場合が、Ctrl+Fで検索モードに入り、「.theme」を調べると簡単です。Shopifyストアであれば「Shopify.theme」を含んだscriptがあり、テーマ名やバージョン情報などといった情報を取得することができます。
ツールを使って検証することもできます。殆どのツールがURLを入力すると調査をしてくれるタイプのものですが、同時にChrome拡張機能も提供している場合も多く、サイトを開いている状態であればワンクリックで調査ができたりと非常に便利に使えます。
BuiltwithはShopifyに限らず、ウェブサイト上で利用されているテクノロジーを幅広く調査することができるツールです。ウェブアプリ版ではURLを入力することで様々な情報を取得することができます。Chrome拡張機能も存在するので、気に入ったらぜひインストールをしてみください。
Store LeadsはECサイトに特化した調査ツールです。Shopifyのテーマ情報や登録商品数などを収集している他、Woocommerceなどといった他の大手ECサイト構築サービスにも対応しています。こちらもChrome拡張機能を提供しています。
ShopscanはShopifyアプリの特定に特化したサービスで、インストールされているShopifyアプリを探し出して視覚的に分かりやすい形で表示してくれることが特徴です。このサービスもChrome拡張機能を備えています。
WappalyzerはBuiltwithと同じく幅広いウェブ系テクノロジーの検知に利用できるサービスです。他のサービス同様、こちらのサービスもChrome拡張機能も備えています。
この記事ではShopifyストアの見分け方と、見分けるために利用できる便利なツールをいくつか紹介しました。他の方が構築したShopifyストアから学べることは非常に多いため、これらの方法を使ってShopifyストア構築のヒントを学んでいければその知識は強力な武器になります。ストア構築の参考になれば幸いです。
こちらのリンクから無料体験を申し込むと無料体験期間の後は1ヶ月間150円でShopifyをご利用いただけます。
