【Shopify】ECサイト構築・・テーマ自作スキル習得までの20STEP

副業のハンドメイド作家さんから、大企業まで活用しているECプラットフォーム、Shopify。
副業やフリーランスでShopify関係のお仕事を受けられるよう、Shopifyを使ったECサイト構築、ショップの雰囲気にあったテーマ制作までのステップをまとめました。

• Shopify案件が出来ると仕事が広がる?!
• ShopifyでのECサイト構築スキルを習得する
• 1.Shopifyについて知る
• 2.Shopifyパートナーになる
• 3.Shopifyのショップ機能を使いこなす
• 4.ドメイン追加・クライアントへ譲渡
• Shopifyのオリジナルテーマ開発スキルを習得する
• まずはWeb制作基礎スキル習得がオススメ
• Shopifyテーマについて知る
• Shopifyテーマカスタマイズ・開発を行う

Shopify案件が出来ると仕事が広がる?!

「Shopifyでネットショップ作って」というお仕事の需要はあります。
ですが、WordPressでのサイト構築と比較すると、初期設定が多いですし、ノーコードのテーマカスタム操作で出来ること以外のデザイン変更も難易度が高めです。難しそうという印象が強く、なかなか手が出せない方も多いのではないでしょうか。

ですが、Shopifyが出来ると受けられるお仕事が増えます。
しかも、Wordpress案件より報酬が高いことが多いです。

【ShopifyでのECサイト構築を学習する3大メリット】
・ライバルが少ない（仕事が取りやすい）
・Shopify案件は単価が高め
・Shopify ECサイトは今後も増える見込み

本格的な開発は確かに難しいですが、エンジニアとしてのスキル・経験がなくてもShopifyの案件を受けることは可能です。Shopify完全未経験から、お仕事をこなせるようになるまでに習得したいスキルを見ていきましょう。

ShopifyでのECサイト構築スキルを習得する

1.Shopifyについて知る

STEP01. Shopify基礎知識

「Shopifyを使ったECサイトを作って欲しい」というお仕事を受けるにあたり、まずShopifyがどんなサービスかを把握していないと話になりません。概要（どのくらいの料金でどんな機能が使えるのか、メリットはなにか）くらいは押さえておきましょう。

STEP02. 競合サービスも知る

クライアントには漠然と「ネットショップ作りたい」という方もいらっしゃいます。
ネットショップを立ち上げる方法は様々ですし、Shopify以外にもECプラットホームサービスはあります。クライアントのご要望にShopifyの利用が最適かの判定、他サービスよりなぜShopifyが良いのか説明出来るようになっておくと仕事を取りやすいです。

2.Shopifyパートナーになる

STEP03. パートナーアカウントの作成

大まかにShopifyのイメージが掴めたら、パートナーアカウントを作成しShopifyパートナーになりましょう。パートナーアカウントとは、Shopifyを使ってクライアントのサイト構築を行ったり、Shopifyのテーマやアプリを開発したりする人（企業）用のアカウントです。

パートナーアカウントは、以下URLから作成できます。
登録や利用に費用はかかりません。
https://www.shopify.com/jp/partners

STEP04. パートナーダッシュボードを知る

Shopifyのパートナーアカウントでログインすると、パートナーダッシュボード（Shopifyパートナー専用管理画面）が表示されます。この管理画面を使ってクライアントのショップを構築したり、動作テストに使用するデモストアを作成したり、と作業を行っていくわけです。

大まかにで良いので、どんな機能があるか把握しておきましょう。

3.Shopifyのショップ機能を使いこなす

請け負うのがテーマ制作のみの場合でも、クライアントに「これってどうするの？」と聞かれる可能性もあります。一通りの機能を把握しておくと良いでしょう。

STEP05. 開発ストアの作成

パートナーダッシュボードからは、開発ストアを作成することができます。開発ストアは、クライアントのショップ構築・動作テストに使用できるダミーのECショップのこと。実際にショップとして公開はできませんが、無料で無制限に作成が可能です。

STEP06. 商品登録・ページ作成を行う

初めてShopifyを使う方は、開発ストアにログインして色々触ってみるのがオススメ。
自分がショップオーナーになったつもりで、イチから商品登録やカテゴリー分け、ページ作成などをしてみましょう。

STEP07.その他の情報入力・テスト注文

商品だけではなく、配送料や決済方法の登録も必要ですね。
ECサイトを機能させるために必要な情報を登録し、テスト注文をして動作確認まで行う必要があります。個別送料やクーポン割引など、細々した部分まで試してみましょう。

なお、Shopify公式のストア解説ガイドもあります。
オーナーアカウント / パートナーアカウントを作っていない場合でも、メールアドレスの登録だけで入手可能。ストアを実際に動かすまで一連の流れ・設定箇所がわかりますので、ダウンロードして読んでみると良いでしょう。

https://www.shopify.com/jp/blog/shopify-merchant-guidebook

STEP08. Shopifyのアプリについて知る

Shopifyはアプリを使って機能追加をしていくことが出来ます。
公開されているShopifyアプリは3,000以上。
有償も無償もありますし、日本語非対応のものもあります。何の情報もなくアプリストアを開いて、探そうとすると困ってしまうこともあるでしょう。アプリでできること・定番のアプリなども知っていると心強いですね。

開発ストアでも無料アプリであればインストールは可能ですので、実際にメジャーなアプリを追加して使ってみましょう。

STEP09. 既存のテーマを選ぶ

Shopifyには、機能性とデザイン性に優れたテーマが多く用意されています。

Shopify構築で「公式無料テーマを使用する」というプランを用意している企業もあるように、無料テーマでも非常に優秀。現行最新版Online Store 2.0（OS 2.0）に対応している公式無料テーマも9種類あります。

有料テーマ、非公式のテーマを含めると選択肢はさらに多くなります。
テーマは後から変更も可能ですが、テーマ変更に合わせてコンテンツの調整が必要な場合もあります。クライアントの要望に答えるため、無料テーマ・有料テーマ・オリジナルテーマ制作どれが適しているか判定できると無駄な手間を省けるでしょう。

まとめ・比較記事などで、有料テーマについても情報を収集しておけると◎。

STEP10. テーマを簡単にカスタマイズする

Shopifyは“ノーコード”でECサイトの作成・カスタマイズ可能をプッシュしています。

また、オンラインストア2.0(OS 2.0)対応テーマでは、従来よりも更にデザイン編集の自由度が高くなりました。テーマエディター（カスタマイズ）から、文字を打ち込んだり、パーツを挿入してレイアウトを作っていくことができます。

Shopifyサイト構築（既存のテーマ使用）の場合も、テーマ開発を目指す場合でも、このテーマエディターの基本的な使い方は押さえておクと良いでしょう。テーマエディターから追加可能なセクションについては、下記記事で紹介されています。

STEP11.イメージ画像の選定・加工

ECサイトを作るには画像も大切。
ここで言う画像とは、商品画像だけではなく、ショップトップページで使うファーストビューなどのイメージ画像も含まれます。こういった画像は、Shopify系列の無料ストックフォトプラットフォーム“Burst”の写真も使用可能。至れり尽くせりですね。

他のストックフォトサービス、クライアントが撮影した写真を使うこともあります。

どういった画像を使うにしろ、画像加工スキルがあると強みになります。
写真の補正ができたり、写真の合成や透過・ロゴやサイト名を入れるなどが出来るだけでも、サイト全体の雰囲気はぐっと良くなります。クライアントも喜んでくれるでしょう。

4.ドメイン追加・クライアントへ譲渡

デザイン設定、商品登録やテストが終わったら納品です。
練習しにくい部分ではありますが、クライアントへショップを納品（譲渡）するために必要なことをイメージしておきましょう。

STEP12.ドメイン設定

Shopifyではドメインを購入しなくても、ショップの公開が可能です。
●●.myshopify.comのような、初期ドメインが割り振られている形ですね。

でも、せっかくのオリジナルサイト。
「独自ドメインで公開したい」「ドメインは既にあるから、ネットショップはサブドメインで」などなどクライアントによってご要望もあるでしょう。
Shopifyショップへの、ドメイン設定法を確認しておきましょう。

STEP13. ストアの所有権移転方法を知る

Shopifyストアを構築が完了したら、パートナーアカウントで作成してきたショップをクライアントにお渡しします。この工程をShopifyでは「所有権移行」と呼びます。
ショップの所有権移行は管理画面上ででき、とても簡単ですよ。

Shopifyのオリジナルテーマ開発スキルを習得する

ここまででShopifyのバートナーアカウントを使った、クライアントのECショップ構築は出来るようになりました。

ここからのステップではオリジナルテーマの開発について見てきましょう。
オリジナルテーマ開発ができるようになると、世界に一つしかない完全オリジナルデザインのショップ構築が可能になり、報酬単価もケタが変わるくらいアップします。Shopifyで有料テーマとして販売することも可能ですよ！

まずはWeb制作基礎スキル習得がオススメ

テーマエディターでのカスタマイではなく、テーマそのものを作成するにはノーコードというわけにはいきません。Webページを作成するためのHTML&CSSスキル + Shopify機能を組み込むためのプログラミング知識も必要になります。

STEP14.HTMLとCSSでWebページ作成を出来るようになる

作りたいWebサイト/ページを作るためにはHTMLとCSSがある程度使える必要があります。
Web制作初心者の方は、Shopifyテーマに着手する前に、まずはHTML+CSSでのコーディングを学習しましょう。

STEP15.プログラミングの基礎を学ぶ

プログラミングと呼んでいる人もいますが、HTMLは厳密に言うとマークアップ言語。プログラミングではありません。

hopifyのテーマ開発は、プログラミングに入ります。Javascript,PHP,Ruby…言語は何でも構いませんので、プログラミングの考え方を学習してからShopify制作に入るとスムーズに進めるでしょう。

ちなみに、Shopify開発は「WordPressのテーマ制作から入ると良い」と言う方もいらっしゃいます。これは、ページによってテンプレートファイルを分けたり、構成する部品を呼び出したりという仕組みがWordPressと似ているため。ショップであるShopifyよりは、ブログベースのWordPressのほうがシンプルで、日本語のリファレンスも多いので始めやすいのです。

SkillhubでもWordPress入門講座を無料公開中です。ミニマムにまとめた短時間で受講可能な講座です。WordPressはWordPressで需要があり、お仕事にも繋がりやすいCMS、こちらでさっと要点をつかんでから、Shopifyにトライしてみても良いですね。

とは言え、WordPressでテーマを作ったことがないとShopifyは無理という事ではありません。これからWeb制作の勉強を始める、目指しているのはECサイト（Shopify）制作者…という方は、WordPressを経由しなくても大丈夫です。

STEP16.ターミナル操作・Git基礎を学ぶ

ShopifyではOnline Store2.0(OS2.0)から、テーマ開発用に「Shopify CLI」というコマンドラインツールが提供されています。

また「Shopify CLI」ではGitHub連携も可能に。
git管理を行うためにも、ターミナルでGitを使えると便利です。

Shopifyテーマについて知る

STEP17. Shopifyテーマの構成/Liquidを知る

Shopifyのテーマは、ディレクトリ構造が決められています。
決められた7つのディレクトリ（assets、config、layout、locales、sections、snippets、templates）を作って、その中に必要なファイルを入れよ、というルールがあるわけです。

.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
　　└── customer

出典：https://shopify.dev/themes/architecture#directory-structure-and-component-types

下記の記事では、Shopifyテーマのディレクトリ構造、中に収納されているファイルで使われているLiquidというテンプレート言語について解説されています。

Liquidではオブジェクトとプロパティを使って、Shopifyに登録された情報を呼び出します。
例えば{{ shop.name }}と書くと、登録したショップ名が表示されるという仕組みです。

STEP18.JSONテンプレートについても知ろう

Shopifyでは2021年Online Store2.0アップデートにより、JSON形式のファイルも扱えるようになりました。アップデートされたShopifyテーマエディターでページカスタマイズ（セクション追加および削除）を可能にする場合は、JSON形式を取り入れなくてはいけません。

下記リンクはJSONテンプレートとテーマエディター機能についての公式リファレンスと、その日本語訳をしてくださっているページです。

Shopifyテーマカスタマイズ・開発を行う

STEP19.Shopifyテーマ開発環境を作る

Shopifyの管理画面からも、直接テーマファイルのコードは編集できます。
が、書きにくい・見にくいですよね。
本格的にテーマ開発をするならローカル開発環境を作りましょう。そうすると、普段利用しているエディタを使えますし、Gitで更新管理も可能になります。

ローカル環境構築には、Shopify開発用のツールを使用します。
利用できるのは“Shopify Theme Kit”と“Shopify CLI”の２つ。Online Store 2.0対応のShopify CLIの使用が推奨されていますので、これからインストールする場合はShopify CLIで良いでしょう。

以下の記事ではTheme KitとShopify CLIの違いから、Shopify CLIを使った開発環境構築方法までが分かりやすく紹介されています。

STEP20.Shopifyテーマを作成しよう

ローカル開発環境が準備できたら、あとは作りたいデザインに合わせてShopifyテーマを作っていきます。
Shopify公式リファレンス - Create a themeでも解説されている、Dawnをベースにしたカスタマイズ・新しいテーマ開発がおすすめです。

やりたいことに合わせて必要箇所を整えていきましょう。
Shopifyで使うLiquidのオブジェクトの確認は、まず公式リファレンスですね。

公式以外にも、Shopifyテーマのリファレンスや、サンプルコードは沢山公開されています。
下記のように販売されていたりもしますので「実装したい機能があるけれど難しい」という時は検索してみましょう。

ちなみに、Shopify 0S2.0のテーマを完全にゼロからの自作となると、Shopifyのディレクトリ/ファイル構造やプログラミングの深い理解が必要となります。