サムネイル

Shopify で作られているサイトを見分ける方法3選を徹底解説!

目次

はじめに

急速な成長を遂げる EC 市場。その中でもサイト構築プラットフォームである Shopify はノーコードでストアを構築できることや販売手数料が安価なことから、日本国内でも多数の EC サイトで導入されています。Store Leadsによると 2023 年 8 月現在日本国内で Shopify が導入された店舗は 30,376 店舗にものぼります。あなたが普段使っているサイトも、実は Shopify を使って構築されているかもしれません。

今回は EC サイトが Shopify で作られているかどうかを見分ける方法をご紹介します。

Shopify を使って構築されているサイト

月商が 1 億円以上もある、大規模な販売サイトでも Shopify を使って構築されていたりします。

Shopify で構築されている EC サイトの例を 3 つご紹介します。

これらの記事でオークションサイトや予約サイトなど、様々な Shopify ストアを構築する方法を解説しています。
Shopify で BtoB 販売 | Shopify を活用して BtoB 販売サイトを構築する方法について解説!> 【徹底解説】Shopify アプリ BookThatApp について
Shopify ストアに会員限定販売や期間限定セールを導入する方法について徹底解説!

オリオンビール

https://shop.orionbeer.co.jp/

オリオンビールホームページ

オリオンビール:
沖縄県内では最大のシェアを誇り、本土復帰直前の最盛期には 9 割ないし 8 割以上を押さえ、現在でも 5 割を超すシェアをもつとされることから、いわば「県民ビール」として定着している。

引用:Wikipedia

NEW ERA

https://www.neweracap.jp/

NEW ERA ホームページ

NEW ERA:
1920 年にアメリカで創業したヘッドウェア・アパレルブランド。 MLB(メジャーリーグベースボール)唯一の公式選手用キャップオフィシャルサプライヤーとして、"59FIFTY"を筆頭にあらゆるプロダクトを世に送り続けている。

引用:SORA

COHINA

https://cohina.net/

COHINA ホームページ

COHINA:
「本当に欲しいと思う素敵な服を、低身長でも美しく着こなせるサイズで作ろう。」という当事者の想いから生まれた身長 150cm 前後の女性に向けたブランド。「あなたに陽が当たる服」というブランドコンセプトのもと、“小柄女性の美しさ“を追求し日々を自分らしく過ごせる服を提案している。

引用:PR TIMES

Shopify で構築されているサイトの見分け方 3 選!

Shopify はサイト構築プラットフォームなので、普段サイトを使用しているだけではそのサイトが Shopify で構築されているかどうかを見分けることはできません。しかしいくつかの方法を使えば Shopify で構築されているかどうかを見分けることができます。

会員登録メールで見分ける

Shopify で構築されているサイトで会員登録を行った場合、認証用メールが Shopify のアドレスから送信されます。

メール送信元アドレスが以下のようになっている場合、そのストアは Shopify で構築されています。

会員登録メール内のメールアドレス

しかし、ショップ側の設定でメール送信元のアドレスが別のものに変更されている場合は、ストアが Shopify で構築されていたとしても、画像のものとは別のアドレスから認証用メールが送信される場合があります。

この方法では、サイトが Shopify で構築されているかどうかを判断できない場合があります。

ブラウザーの検証機能で見分ける

ブラウザーの検証機能を使用すれば、サイトが Shopify で構築されているかどうかを見分けることができます。

  • 検証機能で見分ける手順

    Shopify で構築されているかを見分けたいサイトをブラウザーで表示します。

    サイトを表示したら、右クリックで「検証」を開きます。

    右クリックで検証を開く

    「Elements」タブを開き、「Ctrl + F」で「shopify」と検索します。

    shopify と検索

    HTML 要素や関数名に「shopify」という文字が使われていれば、そのストアは Shopify で構築されています。

Chrome 拡張機能で見分ける

1 つ目は Chrome 拡張機能を使う方法です。
ブラウザーで Chrome を使用している場合に限定されますが、Chrome の拡張機能を使えばサイトが Shopify で構築されているかどうかを見分けることができます。

Shopify を判定できる Chrome 拡張機能をご紹介します。

  • Wappalyzer

    Wappalyzer のホームページ

    Wappalyzer はウェブ構築で使用されているプラットフォームやフレームワークを検出する Chrome 拡張機能です。

    Wappalyzer で見分ける手順

    Wappalyzer のインストールページにアクセスし、「Chrome に追加」をクリックします。

    Chrome に追加をクリック

    拡張機能を追加する確認のウィンドウが表示されるので、「拡張機能を追加」をクリックします。

    拡張機能を追加をクリック

    拡張機能がインストールできたら、検証したいサイトを開きます。

    右上の Chrome 拡張機能のアイコンをクリックします。

    Chrome 拡張機能のアイコンをクリック

    「Wappalyzer - Technology profile」を選択します。

    Wappalyzer - Technology profile を選択

    表示される「テクノロジー」一覧に Shopify が表示されていれば、そのサイトは Shopify で構築されています。

    テクノロジーに Shopify が表示

  • Koala Inspector

    Koala Inspector のホームページ

    Koala Inspector はサイトが Shopify で構築されているかを判定することを主な目的として作られた Chrome 拡張機能です。

    Koala Inspector で見分ける手順

    Koala Inspector のインストールページにアクセスし、「Chrome に追加」をクリックします。

    Chrome に追加をクリック

    拡張機能を追加する確認のウィンドウが表示されるので、「拡張機能を追加」をクリックします。

    拡張機能を追加をクリック

    拡張機能がインストールできたら、検証したいサイトを開きます。

    右上の Chrome 拡張機能のアイコンをクリックします。

    Chrome 拡張機能アイコンをクリック

    「Koala Inspector - Shopify Spy & Dropship Tool」を選択します。

    Koala Inspector - Shopify Spy & Dropship Tool を選択

    「I agree to the terms and conditions」にチェックを入れて「START NOW」をクリックします。

    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 ストアを GitHub と連携する方法を解説しています。
Shopify ストアを GitHub と連携させる方法を徹底解説!

まとめ

今回はストアサイトが Shopify で作られているかを見分ける方法と、Shopify で作られているかがわからないようにフロントエンドを外部で開発する方法をご紹介しました。

EC サイトを構築する際のお役に立てれば幸いです。

おすすめ Shopify アプリ

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

シンプル会員初回送料割引|お手軽初回ログイン送料無料

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

シンプル会員送料割引|お手軽ログイン送料無料

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

シンプルVIP送料割引|お手軽VIP会員送料無料

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事