Shopify で作られているサイトを見分ける方法3選を徹底解説！
目次
はじめに
急速な成長を遂げる EC 市場。その中でもサイト構築プラットフォームである Shopify はノーコードでストアを構築できることや販売手数料が安価なことから、日本国内でも多数の EC サイトで導入されています。Store Leadsによると 2023 年 8 月現在日本国内で Shopify が導入された店舗は 30,376 店舗にものぼります。あなたが普段使っているサイトも、実は Shopify を使って構築されているかもしれません。
今回は EC サイトが Shopify で作られているかどうかを見分ける方法をご紹介します。
Shopify を使って構築されているサイト
月商が 1 億円以上もある、大規模な販売サイトでも Shopify を使って構築されていたりします。
Shopify で構築されている EC サイトの例を 3 つご紹介します。
オリオンビール
オリオンビール：
沖縄県内では最大のシェアを誇り、本土復帰直前の最盛期には 9 割ないし 8 割以上を押さえ、現在でも 5 割を超すシェアをもつとされることから、いわば「県民ビール」として定着している。
引用：Wikipedia
NEW ERA
NEW ERA：
1920 年にアメリカで創業したヘッドウェア・アパレルブランド。 MLB（メジャーリーグベースボール）唯一の公式選手用キャップオフィシャルサプライヤーとして、"59FIFTY"を筆頭にあらゆるプロダクトを世に送り続けている。
引用：SORA
COHINA
COHINA：
「本当に欲しいと思う素敵な服を、低身長でも美しく着こなせるサイズで作ろう。」という当事者の想いから生まれた身長 150cm 前後の女性に向けたブランド。「あなたに陽が当たる服」というブランドコンセプトのもと、“小柄女性の美しさ“を追求し日々を自分らしく過ごせる服を提案している。
引用：PR TIMES
Shopify で構築されているサイトの見分け方 3 選！
Shopify はサイト構築プラットフォームなので、普段サイトを使用しているだけではそのサイトが Shopify で構築されているかどうかを見分けることはできません。しかしいくつかの方法を使えば Shopify で構築されているかどうかを見分けることができます。
会員登録メールで見分ける
Shopify で構築されているサイトで会員登録を行った場合、認証用メールが Shopify のアドレスから送信されます。
メール送信元アドレスが以下のようになっている場合、そのストアは Shopify で構築されています。
しかし、ショップ側の設定でメール送信元のアドレスが別のものに変更されている場合は、ストアが Shopify で構築されていたとしても、画像のものとは別のアドレスから認証用メールが送信される場合があります。
この方法では、サイトが Shopify で構築されているかどうかを判断できない場合があります。
ブラウザーの検証機能で見分ける
ブラウザーの検証機能を使用すれば、サイトが Shopify で構築されているかどうかを見分けることができます。
-
検証機能で見分ける手順
Shopify で構築されているかを見分けたいサイトをブラウザーで表示します。
サイトを表示したら、右クリックで「検証」を開きます。
「Elements」タブを開き、「Ctrl + F」で「shopify」と検索します。
HTML 要素や関数名に「shopify」という文字が使われていれば、そのストアは Shopify で構築されています。
Chrome 拡張機能で見分ける
1 つ目は Chrome 拡張機能を使う方法です。
ブラウザーで Chrome を使用している場合に限定されますが、Chrome の拡張機能を使えばサイトが Shopify で構築されているかどうかを見分けることができます。
Shopify を判定できる Chrome 拡張機能をご紹介します。
-
Wappalyzer はウェブ構築で使用されているプラットフォームやフレームワークを検出する Chrome 拡張機能です。
Wappalyzer で見分ける手順
Wappalyzer のインストールページにアクセスし、「Chrome に追加」をクリックします。
拡張機能を追加する確認のウィンドウが表示されるので、「拡張機能を追加」をクリックします。
拡張機能がインストールできたら、検証したいサイトを開きます。
右上の Chrome 拡張機能のアイコンをクリックします。
「Wappalyzer - Technology profile」を選択します。
表示される「テクノロジー」一覧に Shopify が表示されていれば、そのサイトは Shopify で構築されています。
-
Koala Inspector はサイトが Shopify で構築されているかを判定することを主な目的として作られた Chrome 拡張機能です。
Koala Inspector で見分ける手順
Koala Inspector のインストールページにアクセスし、「Chrome に追加」をクリックします。
拡張機能を追加する確認のウィンドウが表示されるので、「拡張機能を追加」をクリックします。
拡張機能がインストールできたら、検証したいサイトを開きます。
右上の Chrome 拡張機能のアイコンをクリックします。
「Koala Inspector - Shopify Spy & Dropship Tool」を選択します。
「I agree to the terms and conditions」にチェックを入れて「START NOW」をクリックします。
Shopify アイコンが表示されれば、そのサイトは Shopify で構築されています。
使用しているテーマも検出できます。
Shopify を使用していることが分からないようにストアを構築する
サイトが Shopify で構築されていることがユーザーに分からないようにする方法をご紹介します。
ヘッドレスで Shopify ストアを構築すると、Shopify が使われていることがユーザーに分からないようにストアフロントを作成できます。
ヘッドレスでストアを構築する
Shopify の「ヘッドレス」とは、フロントエンド部分を外部で作成し、決済システムやバックエンドなどの機能のみを Shopify で構築する方法です。Shopify をヘッドレスで構築することのメリットとしては、フロントエンド部分を外部で作成することにより、ショップサイト独自のデザインでサイトを構築できることです。Shopify の良さを残したまま、自由度の高いサイトを構築できます。
しかし、ヘッドレスショップを構築するにはフロントエンドの開発技術が必要であるため、サイト構築のハードルは高くなります。
実際にヘッドレスでストアを構築する方法を簡単に解説します。
ヘッドレスでストアを構築する方法
ターミナルで作業ディレクトリに移動し、以下のコマンドを実行します。
npm create @shopify/hydrogen@latest
対話形式で設定を行います。
(※以下は例)
$ npm create @shopify/hydrogen@latest
(node:171772) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
? Connect to Shopify:
✔ Use sample data from mock.shop (You can connect a Shopify account later)
? Where would you like to create your storefront?
✔ shopifyHeadless #ファイルの名前
? Select a language:
✔ TypeScript
? Select a styling library:
✔ Tailwind
? Install dependencies with npm?
✔ Yes
╭─ success ────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ shopifyHeadless is ready to build. │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Do you want to scaffold routes and core functionality?
✔ Yes, set up now
? Select a URL structure to support multiple markets:
✔ Set up later (run `h2 setup markets`)
次にcdコマンドで作成したディレクトリ（shopifyHeadless）に移動し、npm run devコマンドを実行すると、ヘッドレスで作成した疑似ストアを表示できます。
これでフロントエンド部分をコーディングによって開発できるようになりました。
開発時に「shopify」の文字を排除すれば、Shopify が使われていると分からないようなストアを構築できます。
まとめ
今回はストアサイトが Shopify で作られているかを見分ける方法と、Shopify で作られているかがわからないようにフロントエンドを外部で開発する方法をご紹介しました。
EC サイトを構築する際のお役に立てれば幸いです。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
