Shopify (ショッピファイ)とは？サービスの概要から制作フローを知る記事をまとめました。

1shiharat

Shopify
デザイン

公開: 2020.05.29　更新: 2022.01.17

どうも！GrowGroupの石原です！

世界で最も利用されているECプラットフォーム「Shopify（ショッピファイ）」。

本日は、エンジニア視点にて概要と制作時の流れ、注意点を概要として参考リンクと合わせてまとめました。

Shopify (ショッピファイ)って？

Shopifyは、全世界175カ国、100万店舗以上のストアで利用されている世界最大のECサイトプラットフォームです。全世界での流通総額は10兆円を突破し、日本には2017年から本格進出しています。

Shopify

Start, grow, and scale your business - Shopify

https://shopify.com

Build your online or retail business on your terms. Sell anywhere. Be supported. Whether it’s Day 1 or 1000, Shopify has you covered. Start your free trial today.

手軽にサイトを開設することができ、Shopify Payment を利用することで外部の決済会社への申請をすることなくクレジットカード決済などを導入することができます。

他にもPOS機能を一緒に提供していたり、Facebook・Instagramでの販売に対応していたりなど、ECプラットフォームというかECインフラのようなサービスです。

Shopify とは？概要を知るための記事

Shopify のメリットデメリット、概要的な記事も、すでに数多くのサイトで取り上げられているため、以下に簡単に記載します (手抜きです)。

Shopify のメリット

導入コストが安い
多言語化 (越境EC) に対応
3200以上の拡張アプリが存在
開発のしやすさ・充実したAPI
多用な販売チャネル

世界で一番利用されているECプラットフォームということもあり、導入へのハードルへの低さや、
開発のしやすさは他の競合他社と比較して群を抜いています。

また、WordPressのプラグインのような「アプリ」をインストールし、要件にあった機能を拡張することもできます。

Shopify のデメリット

日本の商流に仕様が合わない箇所がある
- 都道府県・離島ごとの配送料設定
- 日本ではよくある代金引換による手数料の加算など
- 上記を解決するにはアプリが必要に。
日本語に完全対応はしていない部分がある
- Shopfiy自体の管理画面や決済画面などは対応していますが、アプリは基本海外製のものが多いため、アプリごとの管理画面などは日本語化されていないことが多いです。
サポートが限られる
- 24時間体制だが基本的にメール、コミュニティ等のみのサポート。日本のECにありがちな電話サポート等は月額20万円以上と言われるShopify Plusのみ提供しているようです。

デメリットとしては、日本発のサービスではないため、どうしても細かい文化の違いに対応できない部分があります。

また、アプリを導入する際に管理画面が英語のままの可能性があること、アプリごとに月々の費用が発生する可能性を考慮する必要があります。

概要を知るためのおすすめ記事

[参考] Shopify（ショッピファイ）とは？機能やメリット、評判や使い方までを解説【2020年最新版】
URL : https://blog.t-rnd.com/blog/shopify/manual
Shopify の概要や特徴、開設の流れなど細かく解説されています。

[参考] ブレーク必至のECプラットフォームShopifyとは？メリット・デメリットを徹底解説！
URL : https://web-kanji.com/posts/what-is-shopify
事例の紹介や、制作会社の紹介など、より実践的な内容になっています。

Shopify の仕様について知るために役立つ情報

実際に、Shopify を利用してサイトを構築する際に実際に調査した事項を【仕様面】【開発面】からまとめます。

仕様面について

何がどのように実現できるのか。仕様面については、公式のリソースを参照するのが最短距離です。

[参考] Shopify パートナープログラム

https://www.shopify.jp/partners

Shopify ではパートナープログラムというものがあり、本番環境と遜色ない機能を、なんと無制限のテストストアで利用することができます。申請も上記URLからオンラインで完結します。

仕様等確認する上で、実際に試してみるのが一番早いので、まずはパートナープログラムに申し込み、触ってみることをおすすめします。

[参考] Shopify 機能一覧 [PDF]

https://cdn.shopify.com/s/files/1/1958/6155/files/202003Shopify.pdf

Shopify がPDFでまとめている機能一覧です。各機能ごとにプラグインも紹介されていたりなど、他のリソースを参照する前にどのようなことが実現できるか知るために目を通した方が良いでしょう。

開発面について

開発については、おおまかに以下のステップで進行します。

1 開発ストアの開設

先ほどのパートナープログラムから開発用のストアを作成します。

[参考] 開発ストアを構築する · Shopify ヘルプセンター

https://help.shopify.com/ja/partners/dashboard/managing-stores/development-stores

2. 各種設定

開発ストア内の各種設定を行います。

[参考] Shopifyストアを立ち上げるためのチェックリスト

https://www.shopify.jp/blog/checklist-for-launching-shopifystore

[参考] Shopifyを使ってネットショップを開設しよう！　基本設定編

https://www.shopify.jp/blog/start-onlinestore

3. テーマの開発

Shopify では【テーマ】というショップの外観を簡単に変更できる仕組みが用意されており、有料のテーマを導入することもできれば、独自のデザインをテーマとしてコーディングすることもできます。

Shopify では【Liquid】というテンプレート言語を利用してテーマのコーディングを進行します。

[参考] Shopifyのテンプレート言語 Liquidの概要
https://www.shopify.jp/blog/partner-shopify-template-language-liquid-overview

また、ローカル環境でも開発できるように「Theme Kit」というツールが用意されています。

[参考] ローカルでShopifyテーマの開発環境をセットアップする3ステップ
https://www.shopify.jp/blog/partner-local-shopify-theme-setup-three-steps

[参考] Shopify Theme Kit
https://shopify.github.io/themekit/

テーマに対するオプションとして、独自のオプションを簡単に管理パネルに追加し、テーマ上で利用することも可能となっています。

[参考] Configuring theme settings
https://shopify.dev/docs/themes/settings

3. 機能の開発

Shopify では、APIを利用して要件に合わせたカスタマイズを行うことになります。

APIは大きく分けて、管理画面をカスタマイズするための「ADMIN API」と、サイトのフロント画面をカスタマイズするための「STORE FRONT API」が利用できます。

独自機能を追加する際は、「プライベートアプリ」をストア管理画面から作成し、APIキーを発行後、利用していく形となります。

[参考] Shopifyアプリの開発方法
https://www.shopify.jp/blog/partner-shopify-app-development

また、要件が管理に関するものなのか、外部連携等のためなのかによって、作成方法が変わります。

前者の管理画面に機能を追加する、注文時のデータ処理を調整するなどの場合は、「ADMIN API」を利用するため、アプリを開発し、開発ストアにインストールする必要があります。

後者の外部サイトで商品情報を取得する、ログイン認証をとる場合は、STORE FRONT APIを利用し、気軽に利用することができます。

4. 本番環境への移行

開発を行っている構築中のストアは、そのまま所有権をクライアントが作成したアカウントに移行することができます。

開発ストアで構築を進め、公開前にストアを移行し、独自ドメインの設定やその他設定の調整を行い公開完了といいう形になります。

[参考] クライアントに構築中ストアを移管する
https://help.shopify.com/ja/partners/dashboard/managing-stores/hand-off-development-stores

これから Shopify のサイト制作を始める際の注意点

新しいサービス…つくるの怖い….そう。エンジニアは保守的な生きもの。
Shopify を利用した制作を始める時の注意点をエンジニア視点から書き出してみます。

特に筆者はWordPressユーザーのため、その観点からの意見と受け取っていただければと思います。

1. メタフィールドについて

Shopifyでは商品、ページ、カスタマーなどの情報に対して、APIを通じてメタフィールドを追加することができます。

しかし、管理画面から自由にメタ情報の管理などはできないため、拡張用のアプリを導入する必要があります。

WordPressをすでに利用されている方は特に注意が必要です。
WordPressのカスタムフィールドとは異なり、メタフィールドの編集等は商品編集画面の中で行うことはできないため、アプリを開発するか、有料のアプリを導入するかの二択になります。

2. ユーザー登録情報のカスタマイズ

ユーザーが登録する情報の項目を追加するといった機能も、初期状態では用意されていません。

アプリを利用して拡張するか、APIを通じて独自の登録フォームやログインフォームを作成する必要があります。

基本的にカート移行の画面についてはカスタマイズができないため、既存サイトから移行する場合などは特に注意が必要です。

3. アプリ、APIでなんとかなってしまう

拡張性が高い分、どのアプリがこの要件に合うのか、どのAPIを利用すればできるのかといったShopify独自の知見が必要になります。

この辺はWordPressの同じですが、一見アプリで達成できそうな要件でも、蓋を開けると仕様が合わない可能性が高いため、自身が利用したことのないアプリを利用するよりは、APIを通じた独自開発をベースに工数等策定した方が良いと思います。

4. リニューアルは要注意

新規でオンラインショップを開始するといった場合は、特に問題はないと思いますが、すでに既存のECサイトがあり、Shopify でリプレイスするといった場合は注意が必要です。

・既存の決済代行会社をそのまま利用したい
・配送料が複雑
・配送料の無料条件が独特
・クーポンの仕様
・顧客情報の移管

まとめ

いろいろ保守的な内容になってしまいましたが、Shopifyは、他のECプラットフォームにはないカスタマイズ性の高さからヘッドレスコマースといった構築方法など、様々な活用方法ができるツールです。

これからECをはじめるビギナー層と、独自のカスタマイズを実現する必要性のあるエンタープライズ層にとっては、特に有用性の高いサービスと感じています。

まだ、Shopifyは触り初めて日が浅いのでなんとも言えませんが、中間層にとっては開発コストが高くなる可能性も高いかなとも思います。

次回は、WordPressとShopify を利用したECサイト構築について執筆します！

Shopify (ショッピファイ)とは？サービスの概要から制作フローを知る記事をまとめました。

Shopify (ショッピファイ)って？