Shopify テーマ開発 101: カスタム Shopify テーマの構築方法

完璧な e コマース ストアの外観を選択する場合、Shopify ストアのオーナーは選択肢に困惑するでしょう。しかし、カスタム バイヤー エクスペリエンスを形作りたい場合や、プリセット テンプレートでは対応できないニーズがストアにある場合は、 Shopify テーマの開発が現実的な選択肢となります。

カスタム Shopify テーマを構築するにはどうすればよいでしょうか。また、その際の主な手順は何でしょうか。ここでは、必要なすべてのことに加え、Shopify ページ ビルダーを使用して Shopify テンプレートを最初から簡単に作成するためのヒントも学べます。

Shopify テーマ開発とは何ですか?

皆さんご存知のとおり、Shopify がこれほど人気が​​ある最大の理由の 1 つは、その素晴らしいテーマ ストアです。Shopifyテーマ ストアでは、速度と最大のコンバージョン率に最適化されている何千もの無料および有料のテーマにアクセスできます。

出典: Shopify

各 Shopify テーマでは、ストア所有者は業界やターゲット市場に合わせて慎重に設計されたテンプレートを受け取ります。ただし、さまざまな理由から、販売者はストアを設計する際に、プリセット テンプレートが提供する以上のものが必要だと感じる場合があります。

ここで、Shopify テーマの開発が役立ちます。

Shopify テーマの開発とは、ストア所有者がオンライン ストア用に新しい Shopify テーマをカスタマイズまたは開発することです。

Shopify テンプレートを改良したいと考えている e コマース販売者には、大きく分けて 2 つの方法があります。

• Shopifyテーマのカスタマイズ: 本当にユニークなストア体験を実現するには、ブランド アイデンティティに完全に一致するShopify カスタム デザインへの投資を検討してください。Shopify のカスタマイズ オプションを使用して、ストアのページのさまざまな要素を変更できます。コード不要のパスウェイやコーディングを必要とするその他のオプションなど、これを行う方法は多数あります。
• Shopify テーマ開発: Shopify ストアの既存のテーマで提供されているものよりもニーズが深い場合は、代わりに新しいテーマをゼロから構築することを選択できます。この方法では、オーディエンスに合わせたテーマを開発するために、より多くのコーディングを行うことになります。

しかし、最も重要なのは、Shopify がテーマ開発プロセスを深く掘り下げて、独自のエクスペリエンスを形作るためのツールを提供していることです。そして、それがほとんどの人がこのプラットフォームを気に入っている理由です。

関連: カスタム eコマース開発の 5 つのメリット

Shopify オンラインストア 2.0: カスタムテーマの新時代

Shopifyは2021年6月にオンラインストア2.0を発表しました。Shopifyによると、オンラインストア2.0は「テーマとテーマアプリの構築を容易にし、柔軟性を高め、メンテナンスを容易にする一連の機能と機能改善」です。

これは、Shopify の新しいテーマの基礎となり、そのテーマ全体に適用されるアーキテクチャであり、テーマをより動的にし、操作しやすくするものと考えることができます。

出典: Netflix | Netflix は Shopify Online Store 2.0 を使用して商品ストアを構築しました。

Store 2.0 より前は、ストアのオーナーはShopify の ThemeKit を使用して、新しいストア テンプレートをカスタマイズおよび構築していました。しかし、新しいオンライン ストアの導入により、Shopify はカスタム テーマの開発をよりやりがいのあるものにする最新のツールと機能のセットを利用できるようにしました。

Online Store 2.0 で現在利用できる主な技術的機能の概要は次のとおりです。

• テーマ アーキテクチャのアップグレード: Store 2.0 では、テーマ アーキテクチャがアップグレードされています。新しい機能により、ストア所有者は、ホームページだけでなくストアの任意のページにセクションを追加したり、これまで以上に多くのアプリとストアを統合したりすることが容易になります。

• 新しいリファレンス テーマ: ローンチの一環として、Shopify は Store 2.0 が提供する最高の機能をすべて組み込んだ新しい開発リファレンス テーマであるDawnを発表しました。これは、新しいストアのデフォルト テーマとしてDebutに代わるものであり、カスタム テーマの開発を目指す販売者にとってのベースライン テーマにもなります。
• 最新の開発者ツール: Shopify は、GitHub 統合や Theme Check など、多数の新しい開発者ツールを導入しました。また、カスタム テーマを構築するための主要な開発インターフェイスとなる Shopify CLI の更新バージョンもリリースされました。

• 新しいアクセシビリティ要件: 最後に、アクセシビリティは Shopify テーマのデザインでより大きな役割を果たすようになりました。カスタムテーマを作成する場合、テンプレートが Shopify のベストプラクティスと互換性を持つようにするために、一連のアクセシビリティ要件に従う必要があります。

クイックリード:最高の Shopify テーマ

出典: Shopify | Shopify の新しいリファレンステーマ、Dawn 。

続きを読む: Shopifyテーマの選び方

Shopify テーマをカスタマイズする理由は何ですか?

Shopify テーマは、Shopify オンライン ストアの外観と機能に影響を与えるテンプレートです。ストアの外観、雰囲気、動作はすべて、インストールしたテンプレートによって決まります。

その結果、ストアのオーナーは、オンライン ストアのあらゆる側面が可能な限り最高の購入者体験を提供するように注意を払っています。

購入者は、eコマースストアを訪れる際にすでに高い期待を抱いています。魅力的な第一印象、最大限の使いやすさ、ランディングページからチェックアウトまでのシームレスなプロセスを期待しています。

場合によっては、こうした期待は業界やユーザーの好みによって変わります。たとえば、Capterra による 2022 年オンライン ショッピング調査によると、買い物客の約 75% はチェックアウトに最大 4 分かかることを期待しているのに対し、28% は最大 2 分またはまったくかからないことを期待しています。

肝心なのは、あらゆるニッチ市場やターゲット市場が、優れた購入者体験を実現する上での期待を持っているということです。欲しいものが見つからなければ、ストア訪問者は 15 秒以内に離脱してしまいます。

Shopify テンプレートには、レストランのメニューのように見えるページを備えた Foodie テーマなど、特定の業界向けの機能が備わっていますが、ストアのカスタマイズのニーズはそれ以上になる場合があります。

出典: Shopify

カスタム Shopify ストアを選択する理由が何であれ、最終目標までの明確な道筋があることを知って喜ぶことでしょう。

カスタマイズされた Shopify テンプレートを開発するには、どのように始めればよいのでしょうか。また、それには何が必要ですか。次に、その点について説明します。

パートナーの推奨事項。当社のパートナーである BSSCommerce のShopify ウェブサイト開発サービスにご興味があるかもしれません。ぜひチェックしてみてください。彼らは 5 年以上にわたって Shopify エコシステムに携わっています。

Shopify テーマをゼロから作成するには何が必要ですか?

まず最初に、カスタム Shopify テーマの開発は困難な作業になる可能性があることに注意してください。その理由は次のとおりです。

カスタム テンプレートを構築するには、コーディング スキルと複数のコーディング言語の理解が必要です。さらに、Shopify テーマのネイティブ環境と、Shopify CLI や GitHub などのプラットフォームで使用されるツールに精通している必要があります。

その結果、プロジェクトに多くの時間とリソースを投資する必要がある可能性が高くなります。

ここでは、Shopify でカスタム テーマを開発するための基本的な要件を詳しく見ていきます。

Shopifyカスタムテーマツール

知っておくべき重要なツールが 3 つあります。1 つ目は、Shopify CLI または Shopify コマンドライン インターフェース (完全版) です。

Shopify CLI は、Shopify テーマを開発するためのコーディング環境です。開発者でない場合は、このツールが Shopify ストアの設定時に使用するドラッグ アンド ドロップ ビルダーとは大きく異なることを知っておく必要があります。

Shopify テーマに必要なコーディング言語の構文に従って、テキスト行にコマンドを記述することで CLI を利用します。

2 番目のツールは、Shopify のリファレンス テーマに基づいて開発したい開発者向けの Dawn テーマです。開発プロセスを開始するには、通常、Dawn テーマの GitHub リポジトリをデバイスに「複製」またはコピーする必要があります。

3 番目のツールは GitHub 自体です。GitHub は、開発者がコードとソース ドキュメントを確実に保存し、プロジェクトで共同作業を行い、コードの変更を追跡/制御できるコード ホスティング プラットフォームです。

Dawn テーマまたはカスタムビルドテーマのコピーを保存する GitHub リポジトリが必要です。また、GitHub リポジトリを使用して、カスタムテーマを Shopify ストアにリンクします。

詳細: Shopify ランディングページ

液体の流暢さ

Liquid は、Shopify テーマの構築に使用される主要言語です。これは、Shopify によって開発され、オープンソース プロジェクトとしてGitHub でホストされているプログラミング言語です。

出典: Shopify

Liquid を使用するにはある程度のコーディング経験が必要ですが、使用するのが最も難しいプログラミング言語ではありません。Liquid は主に埋め込みコードを含む HTML ファイルで構成されており、コーディングは比較的簡単です。

ただし、Liquid に加えて他のコーディング言語にも精通している必要があります。たとえば、開発プロセスのさまざまな時点で CSS、HTML、js、Ruby、React を使用する必要がある場合があります。

Shopifyストアを所有する

最後に、Shopify ストアにアクセスできるユーザーのみが、プラットフォーム上でテーマをカスタマイズまたは開発できます。そのため、ストアのオーナー、またはストアのスタッフ/協力者である必要があります。

まだ Shopify ストアをお持ちでない場合は、今すぐアカウントを開設して準備することをお勧めします。 このリンクに従って、3 日間のトライアルと、Shopify の最初の 3 か月間のお得なプランをご利用ください。

Shopifyテーマのデザイン方法: ステップバイステップガイド

それでは、本題に入りましょう。Shopify テーマをゼロからデザインするにはどうすればよいでしょうか? 以下に、手順を追ったガイドを示します。

1. 最終目標を定義する

これはコーディングにおける要件の考慮と呼ばれます。基本的には、テンプレートの外観、機能、購入者がテンプレートとどのようにやり取りするかを定義することを意味します。

要件は、テンプレートの最終出力を計画するのに役立つだけでなく、ワークフローを定義するのにも役立ちます。ストアに必要な機能、それらの機能が開発プロセスのどこに組み込まれるか、そしてそれらが全体とどのように結びつくかについて、より明確になります。

同様に、明確な要件があれば、最終製品を「検証および検証」する手段が得られます。こうすることで、出力があなたと顧客の両方の期待を満たすことを確信できます。

2. 調査しながらテストする

次のステップは、要件に少し経験主義を適用することです。ここでの目標は、要件が希望する効果を達成できるかどうかをテストすることです。

これは購入者が気に入るものでしょうか? これらの機能は日常使用でどのように機能するでしょうか? 同様のことを行っている別の Shopify ストアがあり、そこから学ぶことはできますか?

良いと思われるアプローチを採用している店舗を見つけたら、その Web サイトを SEO ツールに入力して統計情報をチェックし、模倣する価値があるかどうかを確認します。

Shopify のテーマ検出機能を使用すると、ユーザーが使用している Shopify テーマ（使用している場合）を特定できるため、どの機能がユーザーにとって収益を生むのかを正確に把握できます。

3. Shopify CLIをインストールする

準備ができたら、カスタム テーマの開発を始める準備は完了です。まずは、Shopify CLI をデバイスにダウンロードしてインストールします。Shopify CLI を実行するために必要な仕様は以下を参照してください。

• Windows : Windows デバイスには Node.js 14.17.0 以降がインストールされている必要があります。また、Ruby+Devkit 3.0、Git、Bundler 2.3.8 以降も必要です。
• Linux : Linux OS のユーザーには、Node.js 14.17.0 以上と Ruby 3.0 が必要です。また、Ruby 開発環境、Git、cURL、GCC、g++、Make も必要です。
• Mac : macOS の場合は、Homebrew がインストールされていることを確認してください。同様に、Node.js、Ruby、Git も必要になります。ただし、Homebrew を使用して Shopify CLI をインストールすると、これら 3 つが自動的に取得されるのは嬉しいことです。

Shopify CLI をインストールするための詳細な手順が記載されたShopify のチュートリアルはこちらです。

4. 夜明けのテーマを基に構築する

次に、Dawn テーマの GitHub リポジトリをデバイスにクローンします。このリポジトリには、テーマの機能を理解して効果的な変更を行うために必要な Dawn ソース コードやその他のリソースが含まれています。

作業を進める際には、購入者にとって重要なページに最も重点を置くことが重要です。これは「クリティカル パス」とも呼ばれ、購入者がランディング ページからチェックアウトまで移動する経路です。

すべての Web サイトはそれぞれ異なりますが、最も重要なページには通常、次のものが含まれます。

• ホームページ
• 製品ページ
• チェックアウトページ
• 私たちについて

また、Shopify には Dawn 上での構築に関する特定のガイドラインがあることにも留意してください。最終的な成果物は Dawn とは「実質的に異なる」ものでなければならず、ユーザーに付加価値を提供する必要があります。

出典: Shopify

5. GitリポジトリをShopifyと同期する

ビルドするときに、Git リポジトリを Shopify およびローカル ディレクトリと同期するようにしてください。Google Chrome を使用してテーマの変更をリアルタイムで確認できますが、Git 統合により、リポジトリにデータを自動的に保存できます。

また、開発中や完了後にオンライン ストアにライブ変更をプッシュすることも簡単になります。Git 統合を使用して、Shopify ストアからテーマ ライブラリにテーマを直接追加できるようになります。

6. テストとプレビュー

テーマを構築しながら、「Shopify theme dev」コマンドを使用して、変更をリアルタイムでプレビューできます。このコマンドは、CSS とテーマのセクションにローカルで加えた変更を自動的に再読み込みします。また、Google Chrome を使用してこれらの変更をプレビューすることもできます。

テーマへの永続的なリンクを共有したり、テーマ ライブラリにアップロードして公開する準備をしたりできます。

テストはプロセスの重要な部分であり、開始前に設定した要件を満たしていることを確認するのに役立ちます。アクセシビリティ基準を含む Shopify のテスト要件を満たしていることを確認するためのチェックを実行することも重要です。

7. Shopifyテーマストアにプッシュする

最後に、新しい Shopify テーマを公開する準備がほぼ整いました。テーマをもう一度確認して、進行中の開発アクティビティがすべて完了していることを確認します。次に、「theme push」コマンドを使用して、テーマをストアにプッシュします。

Shopifyテーマ開発

明らかに、Shopify でカスタム テーマを作成するには時間と労力がかかります。初心者の場合はさらに難しくなります。

ありがたいことに、プロセスを容易にするのに役立つリソースが数多くあります。

無料のリソースを探す

Shopify は、カスタム テーマの開発を進める際に活用できるリソースを大量に提供しています。

これらには、Shopify テーマ開発リソース センターが含まれます。このリソース センターには、Shopify テーマの構築に関するさまざまな側面に関する記事が多数掲載されています。また、Shopify 開発者プラットフォームと ShopifyDevs YouTube チャンネルも、探索できる優れたリソースです。

最後に、Shopify の Mark Dunkley が作成したLiquid チートシートを確認してください。このチートシートには、役立つヒントやショートカットが多数記載されています。

有料コースを受講する

より高価な別の選択肢は、有料コースを受講することです。チェックできる利用可能なコースには次のものがあります。

• UdemyのShopifyテーマ開発コース
• キャンプ・リキッドのリキッドとテーマ開発コース
• Skillshareの上級Shopifyテーマ開発コース

出典: キャンプ・リキッド

カスタム Shopify テーマを構築するより簡単な方法はありますか?

ここまでで、カスタム Shopify テーマの作成方法を学び、ゼロから作成する方法を知りました。しかし、もっと簡単な方法はあるのでしょうか?

Shopifyカスタムテーマの欠点

カスタム Shopify テンプレートを使用すると、プリセット テーマでは提供されないすべての機能とカスタム機能が提供されますが、この方法を選択する場合の多大なコストを無視することは困難です。

• これは時間のかかるプロセスであり、プロセスの複雑さに応じて数週間から数か月かかる場合があります。
• カスタムテーマの開発には、時間と材料費で最大6桁の費用がかかる場合があります。
• 最も重要なのは、より多くの取引を成立させ、顧客を満足させることに費やすべき時間を奪ってしまうことだ。

カスタムShopifyテーマを構築する最も簡単な方法

良いニュースは、カスタム テーマ開発の欠点を最小限に抑えながら、カスタマイズされた Shopify テーマの利点を享受できることです。

PageFly を使用すると、Liquid を学習して個々のページを自分でコーディングするストレスを回避できます。Pag​​eFly はドラッグ アンド ドロップ ページ ビルダーであり、豊富なカスタマイズ オプションを簡単に利用して、あらゆるタイプの e コマース ページを作成できます。

何らかのドラッグ アンド ドロップ ツールを使用したことがあるなら、PageFly も使いこなせるでしょう。今すぐ試して、どのように機能するかを確認してください。

さらに詳しく知りたい方は、以下をご覧ください:

• Shopifyテーマ検出器
• Shopifyテーマのカスタマイズ