完璧なeコマースストアの外観を選ぶとなると、Shopifyストアのオーナーは選択肢に事欠きません。しかし、カスタムのバイヤーエクスペリエンスを形成するために探している場合、またはあなたのストアは、プリセットのテンプレートだけでは満たされないニーズを持っている場合、Shopifyのテーマ開発は、実行可能なオプションになります。
Shopifyのカスタムテーマを作るにはどうしたらいいのでしょうか？Shopifyページビルダーを使用して、Shopifyテンプレートをゼロから作成する簡単な方法を見つけるのに役立つヒントに加えて、必要なすべてをここで学ぶことができます。
Shopifyテーマ開発とは？
誰もが知っているように、Shopifyがとても人気がある最大の理由の1つは、その素晴らしいテーマストアです。Shopifyのテーマストアでは、スピードと最大のコンバージョンのために最適化された何千もの無料および有料のテーマにアクセスすることができます。
ソースショッピファイ
各Shopifyテーマで、ストアオーナーは、彼らの業界とターゲット市場に合うように作成された慎重に設計されたテンプレートを受け取ります。しかし、様々な理由から、販売者は自分のストアをデザインする際に、プリセットのテンプレートが提供する以上のものが必要だと感じることがあります。
そこでShopifyのテーマ開発が登場する。
Shopifyテーマ開発とは、ストアオーナーがオンラインストア用にShopifyテーマをカスタマイズしたり、新たに開発したりすることである。
Shopifyのテンプレートを改良したいeコマース販売者には、2つのルートがあります：
- Shopifyテーマのカスタマイズ: 真にユニークな店舗体験をお望みなら、次のような投資をご検討ください。 Shopifyカスタムデザイン Shopifyのカスタマイズオプションを使って、様々な要素を変更することができます。Shopifyのカスタマイズオプションを使って、お店のページの様々な要素を変更することが可能です。コードフリーの経路や、コーディングを必要とするその他のオプションなど、様々な方法があります。
- Shopifyテーマ開発：もしあなたのニーズがShopifyストアにある既存のテーマよりもずっと深いものであれば、代わりにゼロから新しいテーマを構築することもできます。このルートでは、オーディエンスに合わせたテーマを開発するために、より多くのコーディングを行うことになります。
しかし、最も重要なことは、Shopifyはテーマ開発プロセスに深く潜り込み、あなただけのエクスペリエンスを形成するツールを提供しているということです。そしてそれこそが、このプラットフォームが多くの人に愛されている理由なのです。
Shopifyオンラインストア2.0：カスタムテーマの新時代
Shopifyは2021年6月にOnline Store 2.0を発表した。Shopifyによると、Online Store 2.0は、"テーマとテーマアプリをより簡単に構築し、より柔軟にし、より保守しやすくする一連の機能と機能改善 "である。
これは、Shopifyの新しいテーマをよりダイナミックに、より簡単に運用するための基盤となるアーキテクチャと考えることができます。
ソースNetflix｜NetflixはShopify Online Store 2.0を使って商品ストアを構築した。
Store 2.0以前は、ストアオーナーはShopifyのThemeKitを使用して新しいストアテンプレートをカスタマイズして構築していました。しかし、新しいオンラインストアの導入に伴い、Shopifyはカスタムテーマ開発をよりやりがいのあるものにする最新のツールと機能のセットを利用できるようにしました。
オンラインストア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のテンプレートをカスタマイズするには、何から始めればいいのでしょうか？それが次にお話しすることです！
パートナーのおすすめ私たちのパートナーBSSCommerceのShopifyウェブサイト開発サービスに興味があるかもしれません。彼らは5年以上Shopifyのエコシステムを利用しています。
Shopifyのテーマをゼロから作成するには何が必要ですか？
まず最初に、Shopifyのカスタムテーマを開発するのは大変な作業であることに注意する必要があります。その理由は以下の通りです。
カスタムテンプレートの構築には、コーディングスキルといくつかのコーディング言語の理解が必要です。さらに、Shopifyテーマのネイティブ環境や、Shopify CLIやGitHubなどのプラットフォーム上で使用されるツールにも精通している必要があります。
その結果、プロジェクトに多くの時間と資源を投入しなければならなくなるだろう。
Shopifyでカスタムテーマを開発するための基本的な条件を詳しく見てみましょう。
Shopifyカスタムテーマツール
3つの重要なツールがあります。1つ目は、Shopify CLI（Shopifyコマンドラインインターフェイス）です。
Shopify CLI は、Shopify テーマを開発するためのコーディング環境です。もしあなたが開発者でないなら、このツールはShopifyストアをセットアップする際に慣れ親しんだドラッグアンドドロップビルダーとは大きく異なることを知っておくべきです。
Shopifyテーマに必要なコーディング言語の構文に従って、テキスト行でコマンドを記述することでCLIを利用することになります。
2つ目のツールはDawnテーマで、Shopifyのリファレンステーマをベースに開発したい開発者のためのものです。開発プロセスを開始するには、通常DawnテーマのGitHubリポジトリをデバイスに「クローン」またはコピーする必要があります。
3つ目のツールはGitHubそのものだ。GitHubはコードホスティングプラットフォームで、開発者はコードやソースドキュメントを確実に保存し、プロジェクトで共同作業を行い、コードの変更を追跡/管理することができます。
Dawnテーマまたはカスタムビルドテーマのコピーを保存するGitHubリポジトリが必要です。また、カスタムテーマをShopifyストアにリンクするためにもGitHubリポジトリを使用します。
続きを読む Shopifyランディングページ
液体の流暢さ
LiquidはShopifyのテーマが構築される主要な言語です。Shopifyによって開発されたプログラミング言語で、オープンソースプロジェクトとしてGitHubでホストされています。
ソースショッピファイ
Liquidを使うにはある程度のコーディング経験が必要ですが、プログラミング言語の中で最も難しい言語ではありません。ほとんどがコードを埋め込んだ HTML ファイルで構成されており、コーディングは比較的簡単です。
しかし、Liquid だけでなく、他のコーディング言語にも精通している必要があります。例えば、開発プロセスの様々な場面でCSS、HTML、js、Ruby、Reactを使用する必要があるかもしれません。
Shopifyストアを所有する
最後に、Shopifyストアにアクセスできる人だけが、プラットフォーム上でテーマをカスタマイズしたり開発したりできる。つまり、あなたはストアオーナーか、ストアスタッフ/協力者である必要があります。
まだShopifyストアをお持ちでない方は、今すぐアカウントを開設するのがベストです。3日間のトライアルと、Shopifyの最初の3ヶ月のお得なキャンペーンで始めるには、このリンクをたどってください。
Shopifyテーマのデザイン方法：ステップバイステップガイド
それでは、早速本題に入りましょう。Shopifyのテーマをゼロからデザインするには？ステップバイステップのガイドをご覧ください：
1.最終目標を明確にする
これは、コーディングで要件を取ることと呼ばれる。基本的には、テンプレートがどのように見えるべきか、何をすべきか、購入者がどのようにテンプレートとやりとりするかを定義することを意味する。
要件は、テンプレートの最終的なアウトプットを計画するのに役立つだけでなく、ワークフローを定義するのにも役立ちます。あなたのストアがどのような機能を必要としているのか、それらが開発プロセスのどこで登場し、どのように全体と結びついているのかをより明確にすることができます。
同様に、明確な要件を持つことは、最終製品を「検証・確認」する手段を提供する。こうすることで、アウトプットがあなたと顧客の両方の期待に応えていることを確信できる。
2.調査によるテスト
次のステップは、要件に少し経験主義を適用することである。ここでの目標は、要件が望む効果を達成できるかどうかをテストすることです。
これは買い手が気に入るものだろうか？その機能は日々の使用でどのように機能しそうですか？似たようなことをやっている他のShopifyストアはありますか？
良さそうなアプローチを採用している店舗を見つけたら、そのウェブサイトをSEOツールに接続し、統計情報をチェックして、見習う価値があるかどうかを確認しよう。
また、ShopifyのTheme Detectorは、彼らがどの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が必要です。
- MacmacOSの場合、Homebrewがインストールされていることを確認してください。同様に、Node.js、Ruby、Gitが必要です。しかし素晴らしいことに、Homebrewを使ってShopify CLIをインストールすれば、この3つは自動的に手に入る。
Shopifyのチュートリアルでは、Shopify CLIのインストール方法を詳しく説明しています。
4.夜明けのテーマ
次に、DawnテーマのGitHubリポジトリをデバイスにクローンします。このリポジトリにはDawnのソースコードと、テーマの機能を理解し効果的な変更を行うために必要なその他のリソースがあります。
作業にあたっては、購入者にとって重要なページに最も注力することが重要です。これは「クリティカル・パス」とも呼ばれ、ランディング・ページからチェックアウトまでの購入者の移動経路のことです。
ウェブサイトはそれぞれ異なるが、最も重要なページには一般的に以下のようなものがある：
- ホームページ
- 製品ページ
- チェックアウトページ
- 会社概要
また、ShopifyにはDawnの上に構築するための具体的なガイドラインがあることを覚えておいてください。最終的なアウトプットは、Dawnとは「実質的に異なる」ものでなければなりません。
ソースショッピファイ
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 Developers Platform や ShopifyDevs YouTube チャンネルも素晴らしいリソースです。
最後に、Shopifyのマーク・ダンクリーが作成したリキッドチートシートをご覧ください。多くのヒントやショートカットが掲載されています。
有料コースを受講する
それとは異なる、より高価なオプションは、有料コースを受講することです。以下のようなコースがある：
- UdemyのShopifyテーマ開発コース
- キャンプ・リキッドのリキッド＆テーマ開発コース
- SkillshareのShopifyテーマ開発上級コース
ソースキャンプ・リキッド
Shopifyのカスタムテーマをもっと簡単に作る方法はありますか？
Shopifyのカスタムテーマを作成する方法を学び、ゼロから作成する方法を知りました。しかし、もっと簡単な方法はないでしょうか？
Shopifyカスタムテーマの欠点
Shopifyのカスタムテンプレートは、プリセットのテーマでは不可能なすべての機能とカスタム機能を提供する一方で、このルートを選択するための多大なコストを無視することは難しい。
- プロセスの複雑さにもよるが、数週間から数ヶ月かかることもある。
- カスタムテーマの開発には、時間と材料費で最大6桁の費用がかかる。
- 最も重要なことは、より多くの取引を成立させ、顧客を満足させることに費やした方がよい時間を奪ってしまうことである。
カスタムshopifyテーマを構築する最も簡単な方法
良いニュースは、カスタムテーマ開発のデメリットを最小限に抑えながら、オーダーメイドのShopifyテーマのメリットを享受することが可能だということだ。
PageFlyを使えば、Liquidの学習や各ページのコーディングのストレスから解放されます。PageFlyはドラッグアンドドロップのページビルダーで、あらゆるタイプのeコマースページを構築することができます。
ドラッグ＆ドロップツールを使ったことがある方なら、PageFlyはすぐに使いこなせるでしょう。今すぐお試しください。
もっと詳しく知りたい方は、こちらをご覧ください：
