Shopifyのテーマ開発とは？テーマの基本構造や開発手順を紹介！
Shopifyのテーマ開発についてこんな疑問をお持ちの方は多いのではないでしょうか？
・Shopifyのテーマとは何かわからない
・Shopifyのテーマの基本構造や機能をしりたい
・Shopifyのテーマ開発における手順をしりたい
上記のような疑問や不安にお応えしていきます。
今回の記事を読めばこれがわかる！
・「Shopify」のテーマとは ・「Shopify」のテーマ開発における基本構造や機能 ・「Shopifyアプリ」のテーマ開発手順
この記事を書いている私はデザイナーチームの畑島です。
目次
Shopifyのテーマとは？基本構造や機能を紹介！
Shopifyのテーマとは？
Shopifyのテーマとは、世界175か国で利用されているEC構築プラットフォーム「Shopify」のデザインテンプレートのことです。
ShopifyテーマにはECサイトのデザインや機能が組み込まれており、誰でも簡単にECサイトを構築できます。テーマはShopifyの管理画面からカスタマイズ可能です。
テーマ開発を行う事により、ECサイトのブランドイメージや商品ビジュアルに最適なテーマを選ぶことで、ユーザーの信頼も高まります。ユーザーの購買意欲をかき立てるデザインは、ECサイト内を見る時間も長くなり、商品購入数も増えることが期待できるでしょう。
わかりやすい構成のデザインや、魅力的なデザイン、機能が充実したテーマを活用することで、結果的に売上アップも見込めます。
Shopifyのテーマにおける構造と仕組み
テーマ内で以下の7つのディレクトリに分けられています。
layout / theme.liquid：テーマレイアウトの大枠
└ templates / collection.liquid：各ページのレイアウト雛形
└ sections / collection-template.liquid：テーマエディタから編集可能な共通パーツの定義
└ snipets / bgset.liquid：ページに読み込むパーツの定義（アイコン等）
├ locales：翻訳の定義と内容
├ config：テーマエディタの設定
└ assets：CSS・Javascript・画像・フォントなど
この7つのディレクトリは、それぞれに役割を担っています。Shopifyのテーマは、HTMLページのように1ファイル＝1ページではありません。
ページを構成するパーツ毎にファイルがあり、それを組み立てる枠組み的な役割のファイルもあります。沢山のファイルを読み込み、最終的に1ページとして表示させる仕組みです。
Shopifyを構築する7つのディレクトリについて
・レイアウト（Layout）
テーマのベースとなる大枠を作る部分です。
入っているファイルは、theme.liquidとpassword.liquidの2つです。
特に重要なのは、theme.liquidでページの大枠部分で、Shopifyストアのほぼすべてのページで使われています。
<head> 要素内（CSSやJSファイルの読み込みなど）の記述や、メインメニューやフッターセクションのような共通パーツを表示させるための記述があります。
・テンプレート（Templates）
各ページごとのテンプレートファイルが入っています。
トップページにはファーストビュー画像とオススメ商品、商品ページでは商品画像と説明…と、ページに合わせてレイアウトを作るための枠組みが、テンプレートディレクトリ内に入っている ○○○.json ファイルです。会社概要やよくある質問などをそれぞれ作り込みたい、LPを作りたいストアの場合は、page.about.jsonなどのようにページのテンプレートが複数必要です。このため、テンプレートファイルはテーマカスタマイズで触れる頻度が高いファイルです。
・セクション（Sections）
各ページで使用可能なセクションを作るためのLiquidファイルが入っています。セクションとはテーマエディタの左側にある、ヘッダーやフッター、リッチテキストなどが該当します。クライアントのストアに合ったセクションを作ったり、ブロックを追加したりと、テーマカスタマイズではセクションファイルも触る機会が多いです。
・スニペット（Snippets）
各ページ内で使用する細かいアイテムのLiquidファイルが入っています。例えば、facebookアイコンのSVGなどを指します。
・ロケール（Locales）
ロケールには、翻訳jsonファイルが格納されています。ページで表示される日本語は、ja.jsonで編集可能です。同じ編集は、管理画面でも可能です。
・設定（Config）
1. settings_data.json
2. settings_schema.json
の2つのファイルが格納されています。
settings_data.jsonは、テーマエディタで設定されたデータが保存されています。
settings_schema.jsonはテーマエディタから変更可能な内容を定義します。
なので、テーマエディタで変更可能な設定項目を追加したいときにコード編集します。
・アセット（Assets）
アセットは、テーマで使用するCSSやJavaScrip、画像などのファイルを格納しています。
Shopifyでは、フロント・管理・分析の3つの機能が利用できます。それぞれの機能には顧客管理やチェックアウトなど、さらに細分化された機能が含まれています。各機能の詳細は以下のとおりです。
フロント機能
フロント機能を使うと、商品ページ管理やカートチェックアウトなど、ECサイトのなかでユーザーが実際に触れる箇所の設定を行えます。以下は、利用できる機能の一覧です。
・商品ページ：商品一覧や詳細ページの設定を行える
・カートチェックアウト：ショッピングカートの導入や管理を行える
・顧客管理：ユーザーアカウントの作成や管理ができる
・ブログ：ストア内に企業ブログを設置できる
・おすすめ商品表示：レコメンドシステムを導入する
・予約販売：予約販売システムを導入する
・詳細検索：カテゴリやキーワードで検索できるシステムを追加する
管理機能
バックオフィス業務のほとんどは、Shopifyの管理機能を使って実施できます。使用できる管理機能は以下のとおりです。
・オンラインストア：テーマやSEOの設定などサイトの基礎部分を調整する
・商品管理：タイトルや説明文、画像、価格などを設定できる
・注文管理：受注情報の検索や出荷登録など受注履歴に基づいて管理できる
・販売チャネル：Amazonや各種SNSなど複数チャネルの管理を行う
・決済機能：Shopify Paymentのオン・オフ、必要な決済システムの導入
・マーケティング：メール配信やクーポンコード作成といった販売促進に関する設定
・アプリ管理：アプリのインストールや削除を行う
分析機能
分析機能を活用すると、売上や販売数量などの効果検証からストア改善へとつながります。主な機能は以下のとおりです。
・商品レポート：集客や行動、財務などジャンルごとの業績を確認できる
・ライブビュー：ストアのアクティビティをリアルタイム表示させる
・レポート出力：ExcelやGoogleスプレッドシートにデータをエクスポート
・Googleアナリティクス連携：トラフィックや流入元など不足するデータを補える
Shopifyのテーマ開発の流れ
Shopifyテーマの開発手順
Shopifyにおけるテーマ開発は「Shopify Theme kit（公式）」を使い簡単に行うことができます。ECサイトを構築する上でテーマ構築はサイトの雰囲気を決定する重要な工程です。
Shopify Theme kitのメリット
・リアルタイムで変更をプレビューできる
・Githubでソースコードを管理できる
・誤ってファイルを削除しても元に戻すことができる
・エディタの入力補助機能を利用できる
・複数環境へテーマのアップロード・ダウンロードができる
Shopify Theme kitのデメリット
・開発環境の整備が必要
Theme Kitを利用した方が多くの恩恵を受けられることが分かります。
特に「Githubでソースコードを管理」すると、チームでコードを管理できます。誰が変更したのか。どこを変更したのかが一目で分かります。
また、誤ってファイル削除した時のリカバリも容易に行えます。
Shopifyテーマを自作する手順
①テーマのダウンロード
②ThemeKitのダウンロード
③開発
①テーマのダウンロード
ここでは「Shopify Theme kit」を使用し、テーマ開発を行う大まかな手順をご紹介いたします。まずは、Themekitを使用するためにプライベートアプリを作成します。「Admin API」内の「Theme theme templates and theme assets」を「Read and Write」に設定を変更し保存を選択します。
次に、開発をするテーマをダウンロードをします。テーマを選ぶ際は、各テーマを利用し構築した事例が多数ウェブ上にありますのでぜひそちらを参考にして見てください。また、テーマファイルを保存する際は、Gitで管理することを推奨します。Gitで管理することにより複数人で開発できたり、コードの保存・管理が簡単になります。
②ThemeKitのダウンロード
次にThemeKitのダウンロードを行います。ThemeKitはShopifyの公式ページからインストールすることができます。
「$ alias theme=”/mnt/c/dev/theme.exe”」
ThemeKitのダウンロードが完了したら、次は設定ファイル（conflg.yml）の作成をします。
③開発
最後は、ローカル環境の変化を自身のストアに反映します。編集内容の確認をし、修正内容を保存させ作業は完了します。
Shopifyのテーマ開発まとめ
・「Shopifyテーマ開発」には「柔軟性があるECサイトを素早く立ち上げる」という目的がある。
・「Shopifyテーマ開発」には「 わかりやすい構成のデザインや、魅力的なデザイン、機能が充実したテーマを活用することで、結果的に売上アップを目指す 」という役割がある。
この役割と目的を果たすためには「テーマ選定」に注意して事前準備や「Shopifyの有料テーマでは、事前体験（Try theme）が可能です。公開直前まで試してみてから購入できるため、作りたいネットショップのイメージにあったテーマが購入できます。新しいテーマを導入する際は、「下書き」の状態で、写真の挙動や商品掲載の手法、配置を細かく検討してから公開」を行っていくことが重要です。
Enlytについて
株式会社Enlytはベトナムに開発拠点SupremeTechを持ち、これまで50以上の開発プロジェクトを行ってきました。ベトナムと日本のグローバルなチームで、数多くのプロジェクトを成功に導いてきました。
Enlytのオフショア開発は、アジャイル・スクラム開発を採用しています。コミュニケーションの透明化を意識してそれぞれの役割で責任の範囲を明確化しています。クライアントも含めたワンチームとして、フラットな関係で開発を進めることができます。
お客様の納得のいくまで、共に開発させていただき、アイデアを最高のかたちにサービス化いたします。
Shopifyテーマ開発についてのお悩みやご相談がございましたら、下記ボタンより気軽にお問合せください！
