こんにちは、個人でShopifyを使ったサイト制作をしておりますたかぼー(@taka_forward)です。
この記事では、Shopify(ショッピファイ)の勉強方法を解説していきます。
Shopifyのテーマ開発の案件を受注できた勉強方法を全て公開します！（最終更新日：2020.9.19）
<この記事を読むことのメリット>
① Shopifyについて知れる
② Shopifyのテーマ開発について必要なスキルがわかる
② Shopify案件獲得までの勉強方法・プロセスがわかる
<こんな人におすすめ>
① 最近話題のShopifyに興味がある人
② Shopifyの具体的な勉強方法を知りたい人
③ Shopify案件獲得までのプロセスを知りたい人
目次
Shopifyとは？：世界一のシェアをもつECサイト制作ツール
ECサイトが作れるCMS(Contents Management System：Webサイト内の文章や画像が自分で編集できるもの)・SaaS(Software as a Service)と言われている1つで「アマゾンキラー」と呼ばれています。
CMSというと、全世界の37%のサイトに使われているWordPressが有名ですが、同じCMSでもShopifyは
・決済時のセキュリティの認証ライセンスがあるので安心して使える
・ダッシュボードで売り上げの管理はもちろん、「カートに入れたものの購入されなかった」等の情報が一目でわかるので、マーケティング戦略を立て安く、次につなげる施策を打ちやすい
・Facebook, Instagramとの連携によって今後起こるであろうSNSからの受注拡大・ライブコマースの波に乗れる
・SEO対策機能内蔵
・多言語・多通貨に対応している
といったメリットがまだまだたくさんあります。(2020年8月現在全世界の2.6%のサイトがShopifyで作られています。)
アマゾンや楽天などのモールサイトだと似たような商品がたくさん並んでいるために、自社製品との差別化が難しい・手数料が自社サイトに比べて多くかかるために、企業や商品名で検索される企業を中心に、自社ECサイトをShopifyで制作し始める流れがあるので「Shopifyはアマゾンキラーである」とよくメディアで言われております。
Shopifyのテーマ開発／制作に必要なスキル
Shopifyでオリジナルテーマを開発→納品ができるようになるまでの必要な知識を記載します。
WordPressでのオリジナルテーマ制作と流れは一緒なので、WordPressやったことある人ならイメージしやすいと思います。
Webサイトを制作するスキル
- サイトをデザインするスキル
- html, CSS(Shopifyの公式テーマではSassを採用しています)で静的サイトを作れるコーディングスキル
- javascriptで動きを付けられるスキル
勉強方法・ロードマップは下記のサイトをご覧ください。
静的サイトをShopifyで動的サイトにするスキル
- Shopifyのローカル開発環境構築方法（こちらの記事ご覧ください）
- ファイルパスについて（こちらの記事ご覧ください）
- テンプレート言語：Liquidについての知識（こちらの記事ご覧ください）
- JASON(Javascript Object Notation)についての知識
具体的なShopifyテーマ制作の勉強方法
Shopifyで検索してもらえればわかると思うのですが、「liquidについての日本語情報が少なく、特に勉強方法についての情報は全くなかった」ので手探りで勉強を始めた僕個人のやり方になってしまうのですが、
・英語での勉強に抵抗がない人
・極力日本語で勉強したい人
の２パターンに分けて解説します。
英語での勉強に抵抗がない人向けの勉強方法
動画サイト（Youtube, Udemy, Skillshare）を活用して勉強しました。
Youtube
僕は本で学ぶより映像で勉強したかったので、YoutubeでShopifyと検索をして、出てきた動画を視聴しました。
Liquid（Shopifyのテンプレート言語）はこれで勉強しました。
Youtube学習の後にこちらを僕はやりました。
Shopify Essentials for Web Developers: From Store Setup to Custom Themes
このコースは実際のテーマのコードを読んで理解していくコースになってます。
Shopify Theme Programming: Liquid, JSON and Javascript
Liquid, JSON , Javascriptを勉強するならこちらもおすすめです。
Udemy
Build a Shopify Theme From Scratch
html, CSSデータをLiquidに書き換えてオリジナルテーマ制作するコースになってます。
なんとなくLiquidコードをみたらわかる状態になったのでUdemyでオリジナルテーマを作成することにしました。htmlファイルからオリジナルテーマを作る講座になってます。
Intro to Shopify Theme and Store Development with Liquid
こちらの講座はShopifyの初期テーマ「Debut」を使ってカスタマイズしていく方法になります。
その他参照サイト
Liquidについて勉強できるサイトです。
Liquid Cheat Sheet – Liquidでできること全てが書かれているリファレンスです。
日本語で勉強したい人向けの勉強方法
公式動画
まずはShopifyの公式がアップしてくださっている動画です。（1:06:45〜がテーマ開発の話になります。）
公式ブログ
公式フォーラム
Shopifyは「公式フォーラム」があり、ここで、Shopifyのテーマ開発に関する質問はもちろん、設定方法やアプリの使用方法などについて質問・回答を行うことができます。
日本語のみでShopifyの勉強をしていくなら、こちらの動画をチェック！
Shopifyのストア作成についての動画を作って公開してます。約1時間の動画になっておりますのでお時間ある際にチェックしてみてください。（ほぼコードを書かずにサイトを作っています！）
Shopify案件をやってわかったこと
もともとWordPressでサイト制作をしていたこともあり、「オリジナルテーマが作れないといけないのではないか」と思ってオリジナルテーマをUdemyの講座で作れるようになったのですが、お客さんの要望（金額と納期）によって既存テーマで制作することもあるので営業を始めるタイミングは人それぞれなのかな、と感じております。
今ならこうやって案件をとる
上記のことを踏まえて、「今ならこうする」ことを順番に書きたいと思います。
①Shopify パートナー（無料で登録できます。）に登録し、無料テーマ（計9種類）を触ってサイトを作ってみる
※「9種類のうちどれを選べばいいのか」という質問が出てくると思うのですが、デモサイトやフラクタさんのテーマ紹介記事をみて好きなの選べばいいと思います。
ちなみに僕はBrooklynを使ってサイトを作りました。動画で勉強したい方はこちらをご覧ください〜！
②Shopifyのディレクトリ構成とLiquidの3大要素(Object, Tag, Filter)についての知識をざっといれる。
③自分で作ったサイトのLiquidコードを読んで理解とカスタマイズをしていく。
①〜③をやりながら「案件できそう！」と思った時点で営業する。
東京フリーランスさんのShopifyコースも公開予定です
「Shopifyコースができる…！」とても楽しみにしております。
東京フリーランスさんはすでにShopifyについての動画も公開しておりますのでこちらも合わせてチェックしてみてください！
まとめ：サイトを作れるようになったら案件をとりましょう！
Shopifyでサイト制作をするようになって、毎日楽しく仕事させていただいてます。最近いつもこんな感じです↓
EC担当者として、お客様の売り上げをあげる責任を果たせるようにこれからもがんばります。
