Shopifyサイトの見分け方と使用テーマの調べ方を徹底解説!

Shopifyで構築されたサイトの見分け方と使用テーマの調べ方を徹底解説!

Shopifyは、世界中の多くの企業に利用されている人気のECプラットフォームです。Shopifyサイトを見分けることで、競合他社の戦略を分析したり、自社サイトの改善点を発見したりすることができます。 本記事では、参考サイトがShopifyで構築されたサイトなのかを見分ける方法や利用しているShopifyテーマの調べ方をご紹介します。

下記のブログ記事ではShopifyのメリットやデメリットなどを紹介しています。ご参考にしてください。

Shopifyサイトを見分けるメリット

参考ストアの戦略分析できる

Shopifyサイトを見分けることで、競合他社がShopifyを使用しているかどうかがわかります。競合他社のサイト構成、デザイン、機能などを分析し、自社の戦略立案に役立てることができます。

自社サイトの改善点発見できる

Shopifyを活用している他社サイトを見ることで、Shopifyの活用事例を収集できます。自社サイトと他社サイトを比較することで、自社サイトの改善点を発見できます。Shopifyの標準機能や、他社の優れた取り組みを参考にして、自社のECサイト運営に生かすことができます。

ECサイト構築の参考になる

Shopifyを使ったECサイト構築を検討している場合、他社のShopifyサイトを参考にすることで、効果的なサイト設計やデザインのアイデアを得ることができます。

下記のブログ記事ではShopifyストアの開設までの流れを紹介しています。ご参考にしてください。

Shopifyテーマ選定の参考になる

Shopifyには多数のShopifyテーマが用意されています。他社のShopifyサイトを調べることで、どのようなテーマが使われているかがわかります。自社に適したテーマ選定の参考になります。

下記のブログ記事ではおすすめのShopifyテーマを紹介しています。ご参考にしてください。

Shopifyアプリ選定の参考になる

前述の「Shopifyテーマ選定の参考になる」と同様に、Shopifyには多数のShopifyアプリが用意されています。他社のShopifyサイトを調べることで、どのような機能が存在するのか、どの機能の構築にどんなShopifyアプリが利用されているのかを調べることで、自社に適したShopifyアプリ選定の参考になります。

下記のブログ記事では「集客」や「売上拡大」、「ブログ記事拡張」など様々なおすすめアプリをジャンル別に紹介しています。ご参考にしてください。

マーケティング施策の参考になる

Shopifyサイトを見分けることで、参考サイトのマーケティング施策を知ることができます。例えば、商品の見せ方、販促方法、顧客とのコミュニケーション方法など、同じShopifyで構築しているため、参考にできる点(または、真似できる点)が多数あります。

Shopifyサイトの特徴

特定のURLパターン

Shopifyの商品ページやコレクションページ、ブログ記事などは特定のURLパターンとなっています。

商品ページの場合は「ドメイン/products/xxxx」ですし、コレクションページの場合は「ドメイン/collections/xxxx」、ブログ記事の場合は「ドメイン/blogs/xxxx」となります。

チェックアウトページが共通のUI

Shopifyのチェックアウトページはどのストアも共通のUIとなっています。

各ストアによって、ロゴや色味などの違いはありますが、全てのShopifyストアが下記添付画像のようなチェックアウトページになっています。

Shopifyのチェックアウトページ

共通のフッターリンク

Shopify ストアには "Powered by Shopify”と書かれた共通のフッターリンクがデフォルトで表示されています。 "Powered by Shopify”を非表示にしていないストアも多く、Shopifyで構築されたストアには "Powered by Shopify”が表示されている場合が多いです。

"Powered by Shopify"

下記のブログ記事では "Powered by Shopify”を非表示にする方法を紹介しています。ご参考にしてください。

Shopifyサイトを見分ける方法 6選

ソースコードを確認する

ソースコードに"Shopify"や"shopify_theme"などのキーワードがあるか確認する方法です。Shopifyで構築されている場合は、ソースコード内に"Shopify"や"shopify_theme"というキーワードが含まれている可能性が高いです。この方法は、ワードプレスなどにBuy Buttonを埋め込んだ場合もソースコード内に"Shopify"が含まれている可能性がありますのでご注意ください。

共通のフッターリンクを探す

前述の通り、Shopifyストアはデフォルトで"Powered by Shopify"などのテキストリンクが表示されます。非表示にしていないストアも多いため、フッターに"Powered by Shopify"が記載されているサイトはShopifyストアである可能性が高いです。

チェックアウトページを確認する

前述の通り、Shopifyのチェックアウトページは共通のUIとなっています。一度チェックアウトページへアクセスすることでShopifyであるか見分けます。ワードプレスなどにBuy Buttonを埋め込んだ場合もチェックアウトページはShopifyの共通のUIとなりますので、ご注意ください。

特定のURLパターンをチェックする

前述の通り、Shopifyで構築したストアは特定のURLパターンになります。商品ページやコレクションページ、ブログ記事が「ドメイン/products/xxxx」やドメイン/collections/xxxx」、「ドメイン/blogs/xxxx」などのURLパターンであるか確認し、Shopifyストアかどうかを見分けます。

Shopifyで構築せずとも同様のURLパターンでサイト実装は可能なため、確実な方法で無いことをご理解ください。

Chromeの拡張機能を使う

「Wappalyzer」や「Koala Inspector」、「Shopify Theme Detector」などの拡張機能を使って、サイトがShopifyで作られているか見分けます。参考ストアがShopifyストアか見極めるのにおすすめの拡張機能は、後述の「おすすめのChrome拡張ツール」にて紹介します。

ドメインのDNSレコードをチェックする

参考ストアのドメインのDNSレコードを調査する方法です。

DNSレコードを調べることができるWEBサービスを利用して、参考ストアのドメインを調べ、CNAMEレコードに「shop.myshopify.com」が記載されているかを確認し、Shopifyストアかどうかを見分けます。

ドメインのDNSレコードをチェックする

おすすめのChrome拡張ツール 3選

Koala Inspector

Koala Inspector|Chromeウェブストア

出典:Koala Inspector|Chromeウェブストア

Koala Inspectorは、Shopifyストアの分析に特化したChrome拡張機能です。この拡張機能を使用することで、参考ストアが使用しているShopifyテーマやインストールしているShopifyアプリなども調査できます。自社ストアの改善点を見つけたり、新しいアイデアを得たりするのに役立ちます

Koala Inspector

Wappalyzer

Wappalyzer|Chromeウェブストア

出典:Wappalyzer|Chromeウェブストア

Wappalyzerは、ウェブサイトで使用されているテクノロジーを検出するブラウザ拡張機能です。コンテンツ管理システム(CMS)、Eコマースプラットフォーム、ウェブサーバー、JavaScript フレームワーク、分析ツールなど、ウェブサイトが構築されている技術スタックを特定します。

Wappalyzerを利用することで、参考ストアがShopifyを利用しているかを調査できるのはもちろんですが、CMSや分析ツールで何を利用しているのかを調査することもできます。

Wappalyzer

BuiltWith

BuiltWith|Chromeウェブストア

出典:BuiltWith|Chromeウェブストア

BuiltWithは、Wappalyzer同様にウェブサイトで使用されているテクノロジーを検出するブラウザ拡張機能です。ウェブサイトがどのようなテクノロジーを使って構築されているかを知ることができます。

BuiltWith

利用しているShopifyテーマを調べる方法

Chromeの拡張機能で調べる

Chromeの拡張機能で調べる

前述の「おすすめのChrome拡張ツール」にて紹介した「Koala Inspector」を利用することで、参考ストアが利用しているShopifyテーマを調べることができます。

Chromeのデベロッパーツールから調べる

管理コンソールでShopifyテーマを調べる方法

Chromeのデベロッパーツールを開き、コンソールに「window.Shopify.theme.schema_name」と入力すると利用しているShopifyテーマ名を表示してくれます。また、「window.Shopify.theme.schema_version」と入力するとShopifyテーマのバージョンも表示してくれます。

WEBサービスで調べる

WEBサービスで調べる

最後にWEBサービスを利用する方法です。Chromeの拡張機能を入れずとも参考ストアの利用しているShopifyテーマを調べることができます。下記の[Shopifyテーマを調べることが出来るWebサービス]に記載のあるサイトにアクセスし、入力フォームに参考サイトのURLを入力するだけです。

Shopifyテーマを調べることが出来るWebサービス

SHOPIFY THEME DETECTOR

Shopify Theme Detector by Koala Inspector

Shopify Theme Detector by PageFly

まとめ

本記事では、Shopifyストアの分析に役立つChrome拡張機能として、「Koala Inspector」「Wappalyzer」「BuiltWith」の3つを紹介しました。これらの拡張機能を使うことで、参考ストアが使用しているShopifyテーマやアプリ、技術スタックなどを調査することができます。

また、参考ストアが利用しているShopifyテーマを調べる方法として、「Chromeのデベロッパーツールを使う方法」や「Chrome拡張機能(Koala Inspector)を使う方法」、「Webサービスを利用する方法」など3つの方法を紹介しました。

これらの方法を活用することで、自社ストアの改善点を見つけたり、新しいアイデアを得たりすることができます。

Shopifyストアの分析は、自社ストアの成長に欠かせません。本記事で紹介した方法を参考に、ぜひ積極的に参考ストアの分析を行ってみてください。

Back to blog
1 of 6
  • Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

  • Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

  • 【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    ShopifyのGraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

    ShopifyのGraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

  • Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

  • Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

  • ブログ記事 Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPRや対応例など

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

1 of 6

editing process

For beginners of e-commerce and Shopify, we create article content with the aim of conveying difficult commerce and marketing terms as “easy”, “easy to understand”, and “accurate” as possible, as well as the mechanism and know-how from store construction to sales. increase.

About posted information

The various information posted is based on Tsun Co., Ltd.'s experience and research. Although we strive to post “up-to-date” and “accurate” information as much as possible, we do not completely guarantee the content. Tsun Co., Ltd. will not be held responsible for any damages caused by this site. If there is an error in the posted information, please contact Tsun Co., Ltd.