Shopifyテーマ開発完全ガイド｜構造の基礎・開発環境・トラブル対策を徹底解説

Shopify テーマを自社で作れるようになると、既製テーマでは出せないブランドらしさや買いやすい導線を自由に設計できます。この記事では ? テーマのしくみ ? 必要なツールと開発手順 ? よく起こるエラーとその直し方、の順にやさしく解説します。専門用語もかみ砕いて説明するので、コードが初めての担当者でも流れがつかめるはず。読み終えたころには、「自分たちのストアにぴったり合ったテーマを自分たちの手で育てる道筋」がハッキリ見えるでしょう。

1.買えるデザインを自社で作る意味

自前でテーマを開発する最大の価値は、「見た目が良い」だけでなく「買いやすい」導線をブランドに合わせて作り込める点にあります。既製テーマは汎用性を優先しているため、余計な要素や不足している機能が必ずと言っていいほど出てきます。結果として――

1.ブランディングがちぐはぐになる
フォントやカラーは変更できても、ヒーローバナーの動きやストーリーページの構成は制限付き。自社の世界観を100 %反映させるのは難しくなります。
2.CVR（購入率）が頭打ちになる
コンバージョンを最適化しようとしても、ボタン配置やフォーム遷移の微調整ができず、ABテストで得た知見を落とし込めません。
3.追加アプリに頼り過ぎてサイトが重たくなる
欲しい機能がテーマにない → アプリを足す → JS が増える → 表示速度が低下――という悪循環が起こりやすい。

自社開発ならこれらの制約をすべて取り払い、ブランド表現と売れるUI/UXを一体で設計できます。たとえば──

・商品ページ上部に動画と成分比較表を並べて説明 → 購入率 1.4 倍
・カート横にサブスク切替ボタンを常設 → 定期購入比率 30 % → 45 %
・JS、CSS を必要最小限にまとめてLCP（読み込み指標）を 2.7 s → 1.8 s に短縮

こうした「収益直結の改善」を即座に実装できる点が、市販テーマとの決定的な違いです。さらにコードベースが自社管理になることで――

・保守コストが下がる（不要なアプリ代や外注調整が減る）
・データとフィードバックが循環（計測 → 改善 → 計測のサイクルが早まる）
・長期的な拡張に強い（B2Bや多言語、多通貨など新要件にも柔軟に対応）

つまり「買えるデザインを自社で作る」とは、ブランドの資産と売上を同時に積み上げるための投資なのです。これを実現するために、次章では Shopify テーマの構造とコア技術を分解していきます。

2.Shopifyテーマの構造とコア技術

Shopify テーマを本格的にカスタマイズするには、まず「何がどこで動いているのか」を理解することが欠かせません。この章では、Online Store 2.0の登場で一新されたテーマ構造を入口に、Liquid テンプレートのしくみ、JSON Templates とSections/Blocks の役割、アセットの最適な置き方、そしてアプリを安全に差し込める Theme App Extension まで、開発の土台となるコア技術をまとめて確認します。

2-1. Online Store 2.0 と従来テーマの違い

項目	従来テーマ (2021-)	Online Store 2.0
レイアウト	ページタイプごとに固定	「セクションをどこでも配置」?管理画面で自由に並べ替え
テンプレート形式	.liquid 一択	.json テンプレートでレイアウトとコンテンツを分離
アプリ連携	theme.liquid と asset に直接スクリプト挿入	Theme App Extension が Sandboxed で挿入／削除可
開発ツール	Theme Kit	Shopify CLI 3.x（HMR* 対応・GitHub連携）

*HMR＝Hot Module Reload｜ファイル保存と同時にプレビューが更新される仕組み
OS 2.0 では 「コードを触らずにページを組める自由度」 と 「アプリ用コードをテーマ本体から隔離できる安全性」 が飛躍的に向上しました。

2-2. Liquid テンプレートの基礎

Liquid はHTML にロジックをまぜるテンプレート言語。

・出力タグ {{ }} で変数を表示
・制御タグ {% %} で if / for などのロジック
・フィルター | でフォーマット変換

ポイントは 「Liquid はサーバー側で一度だけレンダリングされる」 ため、重いループや複雑な if を多用するとページ生成時間が伸びること。高頻度で呼ぶ計算は JavaScript 側に逃がすのが定石です。

2-3. JSON Templates・Sections & Blocks の仕組み

JSON テンプレート（例：product.json）はレイアウトの設計図。

・sections：ID と使用するセクションファイル (sections/product-main.liquid) を対応づけ
・order：表示順
・管理画面でブロックを追加すると JSON が自動更新される

セクション = 再利用可能なレイアウト単位
ブロック = セクション内で繰り返せるミニ部品（テキスト、画像、ボタンなど）

これにより「LPだけ要素を増やす」「コレクションごとにヒーローを変える」といった要望がコード不要で実現できます。

2-4. Assets フォルダ（CSS/JS/画像）とバンドル戦略

オンラインストアは HTTP/2 が有効なので「ファイルまとめ過ぎ」は逆効果。
おすすめ構成:

1.メインCSS・JS：共通スタイル／関数を 1 つに集約
2.セクションごとの JS：section-*.js 名で個別ロード
3.{%- javascript -%} / {%- stylesheet -%} タグ で必要なページにだけ読み込む
4.画像は assets/ に置かず files へアップ → メディア CDN 圧縮が働く

こうすると初回ペイロードを減らしつつ、必要なときだけ追加スクリプトが走るためLCPとCLSが改善します。

2-5. Theme App Extensions で機能を疎結合化する方法

従来はアプリを入れると theme.liquid にスクリプトが「ベタ書き」され、削除してもゴミコードが残る問題がありました。
Theme App Extension では、

1.アプリが自動で snippets/app-block.liquid を生成
2.JSON テンプレートのブロックとして配置
3.アンインストール時に関連コードも一括削除

[メリット]
・テーマのコアコードが汚れない
・複数テーマ間でブロックを再利用できる
・セクション/ブロックと同様にドラッグ＆ドロップで配置変更

アプリ側開発者も app-block.liquid を通じてHTMLを安全に差し込むだけで済むため、テーマアップデートとの競合が減ります。

3.テーマ開発に必要な環境とツール

コードを書き始める前に、開発マシンとストアを「Shopify仕様」に整えておくと作業スピードも品質も段違いに上がります。ここでは 必須ソフト → CLI導入 → Dawnでローカル開発 → GitHub自動デプロイ → 静的解析＆パフォーマンス計測まで、実践的なセットアップ手順を一気に確認します。

3-1. 必須ソフトウェア：Node.js・Git・VS Code

ツール	推奨バージョン	役割
Node.js	LTS（v20 以上	Shopify CLI・Theme Check の実行基盤
Git	2.40 以上	ソース管理・GitHub Actions で CI/CD
VS Code	最新	Liquid／JSON／TS まで拡張で網羅

3-2. Shopify CLI 3.x のインストールと初期設定

1.ログイン
shopify login –store your-store.myshopify.com
2.開発テーマを作成
shopify theme init my-theme
3.ライブプレビュー
cd my-theme && shopify theme dev

CLI 3.x からはHot Module Reload (HMR) に対応し、保存と同時にブラウザが更新されます。

3-3. Dawn をクローンしてローカル開発を始める

Dawn は Online Store 2.0 機能を網羅した公式リファレンステーマ。自社テーマは Dawn をフォークしてカスタムするのが最も速く安全です。

3-4. GitHub 連携 & GitHub Actions で自動デプロイ

1.GitHub にリポジトリをプッシュ
2.Shopify 管理画面 ? テーマ ? 追加 ? GitHub を接続
3..github/workflows/deploy.yml で自動デプロイを定義

パブリックリポを直接ストアに紐付けるだけでも、Push → 自動プレビューが可能です。

3-5. Theme Check・Theme Inspector for Chrome で静的解析／パフォーマンス計測

ツール	使い方	主な検出・計測項目
ThemeCheck	shopify theme check	Liquid文法エラー／アクセシビリティ／パフォーマンス警告
ThemeInspector for Chrome	DevTools →?Shopify タブ	Liquid レンダー時間をフレームグラフで可視化、遅いセクション特定

TIP：CI（GitHub Actions）に shopify theme check を組み込むと、プルリクの時点で文法ミスや不要ループを自動検出できます。

4.開発フローとベストプラクティス

環境が整ったら、次は「どう作業を回すか」です。ここではソース管理から品質チェックまで、Shopify テーマ開発を安全かつ高速に進めるための実践ルールを５つにまとめました。

4-1. ブランチ戦略とストア Preview URL の使い分け

main：常にリリース可能な状態を保つ

feature/：機能単位で派生し開発 → プルリク → CI で Theme Check を実行

hotfix/：緊急修正はmainから切り、リリース後 develop へマージ

Preview URL：shopify theme publish –unpublished で開発テーマを作成し、URL を共有して社内レビュー。PRごとに自動生成するとデザイナー・マーケ担当もコードレスで確認できる。

4-2. テスト商品・テスト決済で UI/UX を検証する手順

1.ダミーSKU を CSV で一括インポート（色・サイズなど全バリエーションを網羅）

2.管理画面 → 設定 → 支払い → 「テストモード」を有効にし、4242 4242 4242 4242 で決済

3.フローを画面収録し、?表示崩れ ?エラー表示 ?翻訳漏れ をチェック

4.注文ステータスメールも確認し、Liquid変数の欠落がないか MarkdownLint で検証

4-3. 多言語・多通貨対応を前提にした i18n 設計

・localeファイル（locales/ja.json など）にUI文字列を集中管理

・テキストを直接テンプレートに書かず
{{ ‘product.sold_out’ | t }}　　の形で呼び出す

・メタフィールドで商品説明を言語別に持たせ、Markets で通貨ごとに価格を自動換算

・早い段階で 右→左（RTL）言語をダミー追加し、レイアウト崩れを検証しておくと後工程が楽

4-4. Performance Budget と Core Web Vitals 最適化

指標	目標値	改善アプローチ
LCP	≦ 2.5 s	? 画像を files CDN 経由の avif/webp へ? 上部ヒーローを で先読み
CLS	≦ 0.1	サイズ属性 (width/height) を必ず指定。スライダーには contain-intrinsic-size CSS を使用
TBT	≦ 200ms	不要アプリCSS/JS を削除し、残すライブラリは async ／ defer で遅延読込

Performance BudgetをREADMEに明示し、プルリクにLighthouse CIを通すと劣化の早期発見が可能。

4-5. 本番反映前のチェックリスト（アクセシビリティ／メタフィールド／SEO）

アクセシビリティ：theme check liquid-accessibility で alt・aria-* を自動検査

メタフィールド：未入力時のフォールバックを確認（空だと Liquid error）

SEO：title・meta description がデフォルト文言のまま残っていないか

バックアップ：shopify theme download –theme {id} でZIP保存、タグにリリース番号を付与

ロールバックテスト：前バージョンに即時戻せるか theme publish で検証

5.テーマ開発でよくあるトラブルと対処法

「動いたはずのコードが本番で壊れた」「審査で差し戻された」??Shopify テーマ開発者なら誰もが一度は遭遇するあるあるトラブルを、原因と解決策がひと目で分かるように整理しました。

5-1. Liquid エラー「undefined object」? スコープとフィルターの落とし穴

[原因]
・section → snippet に変数を渡す際に with／for を忘れた
・フィルターが戻り値を nil に変換している（例：| metafield_text）
[対処]

{% render ‘price’, product: product %}

でスコープを明示。
デバッグは {% liquid %} ブロック内に

{% if product == nil %}{% error %}product is nil{% enderror %}{% endif %}

を差し込み、原因を特定する。

5-2. 「Sections everywhere」でレイアウトが崩れる? schema 設定ミスの確認ポイント

[原因]
・max_blocks を超えてドラッグされた
・class=sectionを忘れ、CSS グリッドが想定どおり効かない

[対処]

1.sections/*.liquid で schema の max_blocks, settings を確認
2.崩れたページで Chrome DevTools → Layout → Grid を開き、想定外の div が入っていないかをチェック
3.必要なら schema を更新し、shopify theme push –nodelete で差分アップロードして復旧。

5-3. Shopify CLI で 429 エラー? API レート制限とバックオフ実装

[原因]
theme push –json をループで実行し、API 呼び出しが早すぎる

[対処]
・短時間に複数 push する際は –no-delete と –unpublished を組み合わせ、差分サイズを削減
・CI では sleep 2 を入れて指数バックオフ（CLI3.x は自動リトライ機能あり）
・頻繁なホットフィックスは Theme Kit Access で “Live Edit” せず、開発テーマ + Preview URL 方式を徹底。

5-4. Git コンフリクトによる CSS 上書き? アセット分割と PR レビューの運用術

[原因]
・巨大な main.css を複数人で同時編集
・コンフリクト解決時に旧スタイルが残る

[対処]
1.CSS を sections/collection.css などページ単位に分割

2.shopify.theme.liquid に
{{ ‘collection.css’ | asset_url | stylesheet_tag }}
を conditional で読み込み

3.PR では Stylelint + prettier-check を走らせ、自動整形後にレビュー

4.Conflict 発生箇所は VS Code “Compare Selected” で差分を可視化してからマージ。

5-5. Theme Store 審査必須要件違反? アクセシビリティとパフォーマンス基準のチェック方法

[原因]
・aria-label／alt 属性不足
・LCP が 4 秒超、CLS が 0.25 以上

[対処]
・Theme Checkのliquid-accessibility ルールを全通過するまで修正
・画像は width・height を明示、Hero には fetchpriority=high
・JSはdefer、不要なライブラリを削除しバンドルサイズ < 160 kB
・Lighthouse モバイルスコア 90 以上を目安に最適化し、再提出。

6.まとめ

Shopifyテーマを自社で開発すれば、ブランドに合わせたデザインと高い購入率を両立できます。本稿ではまず Online Store 2.0 の構造と Liquid／JSON テンプレートを押さえ、Node.js・Shopify CLI・GitHub を用いた開発環境の整備方法を紹介しました。続いて、ブランチ戦略やパフォーマンス指標を軸にした運用フローと、実際に多発する Liquid エラーや審査落ちの対処法も整理。これらを順に実践すれば、売れるデザインを安全・高速にリリースし続ける開発体制が構築できます。

自社ECの立ち上げやリニューアルをお考えなら、まずは rabo にご相談ください。Shopify構築・デザイン改善・集客施策まで、専任チームがワンストップでご提案します。

ご気軽にお問合せください。