hiro 
最近話題のECプラットフォーム「Shopify」を使って作られたサイトが知りたい。他社事例を研究して、自社のECサイト構築に役立てたい。
こんなことを考えている人はいませんか？
この記事を読むことで以下が分かります。
・Shopifyを使って作られた日本のサイト、海外のサイトのまとめ
・閲覧しているサイトがShopifyで作られたかを調べる方法
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、ブログを書いたりして生活しています。
最近はShopifyを使ったECサイト構築に携わっているのですが、先日こんなツイートをしました。
このツイートを掘り下げます。
Shopifyを使ったウェブサイトの事例【国内】
Shopifyを使ったウェブサイトの事例は、以下の2サイトにかなり丁寧にまとめられています。
Shopifyって、そもそもどんな感じのサイトがつくれるの？
っていうのが気になる人は、まず目を通しておくことをオススメします。各ブランドの説明やサイトの特徴も記載されており、かなり役に立ちます。
ただ、上記で紹介されている中には、「現在はShopifyを利用していないと思われるサイト」もありました。
それらを除外してカテゴリ分けしたのが以下です。
独自に発見したShopifyサイトも追加しています。
| No | カテゴリ | サイト |
| 1 | アパレル | A BATHING APE PIRATE STORE |
| 2 | アパレル | KIT |
| 3 | アパレル | FUMIKODA |
| 4 | アパレル | Sellenatela |
| 5 | アパレル | NA |
| 6 | アパレル | TAYLOR STITCH |
| 7 | アパレル | objcts io |
| 8 | アパレル | grirose |
| 9 | アパレル | Runtrip Store |
| 10 | ライフスタイル | KANAGU STORE |
| 11 | ライフスタイル | Furbo ドッグカメラ |
| 12 | ライフスタイル | Gadget Mart |
| 13 | ライフスタイル | ひとえうさぎ |
| 14 | ライフスタイル | ゴーゴーサイクリング |
| 15 | ライフスタイル | LOUVRICH |
| 16 | 食品 | ゴーゴーカレー |
| 17 | 食品 | Kindred |
| 18 | 食品 | Elmers Green |
| 19 | 食品 | Kyoto Brewing Co. |
| 20 | 食品 | ぬま田海苔 |
| 21 | 食品 | レッドブル |
Shopifyを使ったウェブサイト【海外】
Shopifyを使った海外のウェブサイトは、Awwwardsで探すことができます。
Awwwardsは世界中のデザインを表彰するサイトです。イケているデザインを多数発見できるので便利です。
Shopifyのタグで検索をかけると180件以上がHITします。
海外のECサイトはお洒落なデザインが多いですが、日本人に馴染みのないデザインや挙動がたまにあります。
デザイン面だけを重視して自社サイトに導入してしまうと、ユーザーにとって使いにくいUI・UXになる可能性があるので、注意が必要です。
180件以上あるサイトのうち、いくつかピックアップして以下にまとめています。「カテゴリ」は取り扱い商材を指します。
| No | カテゴリ | サイト |
| 1 | アート | See Make Play |
| 2 | アパレル | Cuts Clothing |
| 3 | アパレル | MITA Eyewear |
| 4 | アパレル | DUMBGOOD |
| 5 | アパレル | Perfect Number |
| 6 | アパレル | 2NDDAY |
| 7 | ガジェット | Nova Smart Home |
| 8 | ガジェット | 2NDDAY |
| 9 | ジュエリー | Karpov Paris |
| 10 | スポーツ | Robin Golf |
| 11 | スポーツ | haywoodgolf |
| 12 | ヘルスケア | Bite Toothpaste Bits |
| 13 | ライフスタイル | Boyd Blue |
| 14 | 食品 | Popbar |
| 15 | 食品 | Queen Garnet |
Shopifyを使ったウェブサイトを見分ける方法
Google Chrome の拡張機能を使うことで、Shopifyを使ったウェブサイトを簡単に見つけることができます。
手順は以下です。
それぞれを詳しく解説していきます。
「IP Address and Domain Information」をインストール
Chromeウェブストアにアクセスし「IP Address and Domain Information」をインストールします。
インストールが完了するとブラウザ右上に「IP Address and Domain Information」のアイコンが表示されます。
調べたいサイトのページに行く
次にShopifyを使っているか調べたいサイトにアクセスします。今回はサンプルとして以下のサイトにアクセスします。
ブラウザの右上にある「IP Address and Domain Information」のアイコンをクリックします。
すると、拡張機能が起動してIPアドレスやその他の情報が表示されます。この中の項目を見ることで、Shopifyを利用しているかが一発で分かります。
「Reverse DNS (PTR record)」のエリアを確認する
拡張機能を起動すると、以下のようなウィンドウが開きます。色々とタブや項目があるのですが、見るのは「Reverse DNS (PTR record)」というエリアです。
このエリアに「shops.myshopify.com」と表示されていれば、Shopifyを利用しているサイトです。
IPアドレスからも分かるのですが、こっちの方が分かりやすいかと思います。
Shopifyの理解・学習に役立つ方法まとめ
Shopifyのリファレンスは基本的には英語です。自己学習をする際には言語の壁にブチあたります。不安な思いを抱えながら自己学習で時間を浪費するより、世の中の優良な教材を活用する方が良いです。
- デイトラで学ぶ
デイトラは質の高いカリキュラムと圧倒的なコスパの良さで、開校1年で受講生7000人突破したオンラインスクールです。「Shopify EC構築コース」では、HTML/CSSの基礎からWordPressのオリジナルテーマ制作までを学ぶことができます。サポート体制も充実しており、Slackでプロのエンジニアによるアドバイスやフィードバックを受けることができます。
- 本で学ぶ
「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」がおすすめです。shopifyとは？という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
実際に読んだ私のレビューはこちらの記事をご覧ください。
2021年くらいからShopifyの日本語教材も充実してきました。
下記の2冊もおすすめです。
- 動画で学ぶ
Udemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！ 私も買いましたがShopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
実際に購入した私のレビューはこちらの記事をご覧ください。
【Udemyがセール中（2022年4月13日（水）まで！】
対象コースが ￥1,700から。
2022年4月13日（水）まで！【Udemy】セール中のShopifyの講座一覧を見る >>
まとめ
この記事のポイントをまとめます。
Shopifyを使ったウェブサイトは、この記事内の以下のエリアでまとめています。
Shopifyを使った海外のウェブサイトは、Awwwardsでも探すことができます。
また、Shopifyで制作されたウェブサイトを調べる方法は以下です。
今回の記事はここまでです。