MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。

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

公開日:2020年05月29日
最終更新日:2020年05月29日
オンスタ運営
Shopify
デザイン
ホーム > 全記事一覧 > paizaラーニング > Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
このエントリーをはてなブックマークに追加
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

どうも!GrowGroupの石原です!

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

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

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

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

[blogcard url="https://shopify.com/"]

手軽にサイトを開設することができ、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サイト構築について執筆します!

 

関連リンクまとめ

オフィシャルリソース

ECマーケティングブログ - ネットショップ運営のお役立ち情報を紹介
URL: https://www.shopify.jp/blog

Shopify 公式のブログです。機能アップデートから導入支援、開発に関する知見など様々な情報が配信されています。

● Shopify ヘルプセンター
URL: https://help.shopify.com/ja/

サポートの窓口。

● Shopify コミュニティ| Shopifyのネットショップフォーラム
URL: https://community.shopify.com/c/Shopify-Community-Japan/ct-p/jp

掲示版形式で質問等自由にできます。

● Shopify 公式ストア開設ガイドブックが登場! Shopifyでネットショップをはじめよう — 日本
URL: https://www.shopify.jp/blog/shopify-merchant-guidebook

ストアを開設する際のガイドブックがPDF形式でダウンロードできます。

 

マニュアル系日本語リソース

● Shopify構築マニュアル完全版|イーナレッジテクノロジー|note
URL: https://note.com/eknowledgetec/n/nea3b983c06b7

 

開発関連

Developing on Shopify
URL: https://shopify.dev/concepts/shopify-introduction

英語ですが、公式の開発用のドキュメントです。APIまわりの情報もすべて掲載されています。

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2018年12月27日
最終更新日: 2022年01月17日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2018年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
色の機能と与える印象を知って、上手に配色しよう!
デザイン
デザイン
公開日: 2017年06月21日
最終更新日: 2017年06月21日
色の機能と与える印象を知って、上手に配色しよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
デザイン
Webデザイン
公開日: 2016年12月27日
最終更新日: 2016年12月27日
【 Illustrator CC 】でWebデザインをする時に気をつけたいルール8選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイン制作で、色を選ぶのに困っていませんか?
デザイナー
デザイン
公開日: 2019年03月13日
最終更新日: 2022年01月17日
デザイン制作で、色を選ぶのに困っていませんか?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーのお仕事Q&A
デザイン
デザイナー
デザイン
公開日: 2017年11月11日
最終更新日: 2017年11月11日
デザイナーのお仕事Q&A
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
仮説の考え方と使い方
デザイン
公開日: 2021年04月05日
最終更新日: 2021年04月05日
仮説の考え方と使い方
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
アートディレクターに必見!撮影ディレクションの仕方!(静止画モデル撮影編)
デザイナー
デザイン
公開日: 2017年11月07日
最終更新日: 2017年11月07日
アートディレクターに必見!撮影ディレクションの仕方!(静止画モデル撮影編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
+ノベルティの制作で成果を上げよう!
デザイン
デザイン
公開日: 2017年11月20日
最終更新日: 2017年11月20日
+ノベルティの制作で成果を上げよう!
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。