Shopifyのデザインカスタマイズ方法、コード編集で得られる7つの利点
Shopifyでストアを開設し、商品ページなどいろいろなページが表示されるようになると、デザインを変更したい箇所が出てくるのではないでしょうか。このセクションに背景色を入れたい、このボタンだけ色を変えたい、見出しに装飾を加えたいetc....
Shopifyではノーコードでストアデザインをカスタマイズできるツールも多くあります。ノーコードでのカスタマイズから、コードを直接編集する方法まで、それぞれのメリットとデメリットを解説します。テーマのコード編集スキルが必要とされるシーンも、イメージしやすくなりますよ。
Shopifyストア、3つのデザインカスタマイズ方法
ShopifyでECサイトの見た目を大きく左右するのはテーマ。それにプラスして、個々ECショップでのページ構成やデザイン変更手段も用意されています。
大きく分けると、以下3通りの方法でデザインカスタマイズが可能。
1.標準装備のテーマエディタを使う
2.ページビルダー系のアプリを使う
3.テーマのコードを編集する
それぞれの特徴、メリットとデメリットを見ていきましょう。
1.ノーコード、標準装備のテーマエディタ
Shopifyではテーマエディタ（テーマカスタマイズ画面）を使って、HTMLやCSSを書かずにページのレイアウトを作成することができます。
テーマエディタでは、プレビューを確認しながら、感覚的に操作することが可能です。パソコンやスマホなどを普段使っている方であれば、特別な勉強をせずともすぐにページのカスタマイズが出来るでしょう。
その半面、細かな調節ができず、痒いところに手が届かない場面も多いです。
例えば、Dawnの場合だと、文字の色やサイズの個別設定、2：3の割合で2カラムを入れる、などはテーマエディタで設定できません。この見出しだけ文字色を変えたい！という場合は、自分でCSSを書く必要があります。
テーマエディタのメリット
- デフォルト機能である（ショップを開設すれば使える）
- コーディング・プログラミング知識不要
- 感覚的に使用でき、学習コストはほぼゼロ
テーマエディタのデメリット
- 細かな設定ができない
- 掲載したいパーツ（セクション/ブロック）がない事がある
- テーマによって異なる部分があり、解説が少ない
2.ページビルダー系のアプリを使う
Shopifyには、ノーコードでオリジナルのページレイアウトを作成できるページビルダーアプリというものも存在しています。代表的なShopifyのページビルダーアプリとしては、PageFlyやShogun Landing Page Builderなどが挙げられるでしょう。
ページビルダーアプリについては、テーマエディタの強化版をイメージをして頂くと分かりやすいかと思います。
メリットとデメリットは以下のとおりです。
ページビルダーアプリのメリット
- それぞれの要素ごとに細かく設定が可能
- テーマエディタよりも使用可能パーツ（要素）が多い
- タブ切り替えやアニメーション表示も簡単に作れる
- テンプレートが多く用意されている
- HTML/CSSができなくてもデザインが可能
- 使い方紹介・解説記事などが結構多い
ページビルダーアプリを使用するメリットは、「テーマエディタをグレードアップさせたような機能」が使えること。一般的なWebサイト/ECサイトでよく見かけるパーツやレイアウトは用意されているので、大体のデザインは作成可能でしょう。
下図はPageFlyのページ作成画面です。
このように、横並びに配置するカラムの大きさ・割合を設定する、見出しやテキストそれぞれに個別で装飾を行う、などのことができます。イチから作成するのが大変な方向けに、テンプレートも用意されていますよ。
また、テーマによって追加可能なセクションが異なるテーマエディタとは異なり、アプリはで選択可能な要素は共通。PageFlyなどメジャーなアプリであれば、日本語で使い方を解説されている記事も多くあります。
ページビルダーアプリのデメリット
- 別途、アプリのインストールが必要
- 要素を選択→追加→詳細設定 を逐一行うのが大変
- 操作になれる必要がある
- 使いたいパーツ（要素）がない事がある
- ページの表示速度が重くなる可能性がある
- 機能や作成したページ数に応じてお金がかかる
ページビルダーのデメリットは「細かく設定できる分、手間がかかる」ことが挙げられます。ノーコードではあるのですが、設定する箇所が多いので、機能を把握して慣れるまでも多少時間はかかるでしょう。
例えば、PageFlyで白紙からページを作成する場合。
以下の公式チュートリアル動画のように、1つずつページに掲載したい要素を追加していきます。LPのような特定のページだけなら良いですが、これでECサイトの全ページ（全テンプレート）を作ろうと思うと大変です。
また、アプリで作成したページは、テーマエディタから、セクションとしてページを読み込む形になります。テーマエディタ+アプリのエディタの二段階で設定することになるので、ちょっと面倒に感じる方もいらっしゃるかもしれません。
アプリを使うので、費用面の問題もありますね。
主要ページビルダーアプリは月額プラン制です。作成可能なページ数や、使える機能に応じてお値段が上がっていく仕組み。ちなみに、PageFlyの場合は無料から使用でき、作成するページ数に応じて料金が上がります。最上位のプランは$199/月と、なかなかのお値段。
3.テーマのコードを編集する
テーマのコードを編集して、デザインをカスタマイズすることもできます。
テーマのカスタマイズ画面からアイコンをクリックし、コードの編集を選ぶと、コード編集画面が開きます（※環境構築をすれば、ローカルでもコード編集は可能）。
テーマに使われている、沢山のディレクトリ（フォルダ）とファイルが表示されます。
テーマコードを編集するメリット
- デザインの柔軟性が高い
- ECストアで使いたいセクションを自由に追加可能
- 必要項目だけをスピーディーに構築可能
テーマのコードを編集すると、好きなようにECサイトが作れます。
テーマエディタやページビルダーをつかって、ノーコードでデザインカスタマイズをする場合は、用意されているパーツを組み合わせてページを作ります。逆を言えば、パーツが用意されていないものは使えません。
コードを書く場合は、テーマエディタで挿入できるセクションから自分で作成できます。
ECショップで使いたいパーツを追加して、好きなデザインに変更していくことが出来ます。Shopifyで作られているとは思えないような、オリジナリティ溢れるECショップを作成することも可能になります。
テーマコードを編集するデメリット
- HTML,CSS,Liquid,JSONの基礎知識が必要
- 記述ミスがあると、ページが表示されなくなる
- リファレンスや解説が（特に日本語は）少ない
コード編集によるデザインカスタマイズのデメリットは「学習コストが高い」こと。それぞれのセクションをLiquidというShopifyのテンプレート言語を使って作成し、1つのページとして使うためにJSONテンプレートを作ります。
元々エンジニア系の知識がない方は、最初のうちは覚えることが多く学習が大変でしょう。
ですが、コード編集ができるようになると、かかった学習コスト以上のメリットがあります。
テーマコード編集習得で得られる、7つの利点
Webデザイナー/ECサイト構築者としての利点
利点1：デザインの制限がなくなる
ShopifyでECショップを作ると、デザインが似通ったものになりがち。
Shopifyテーマ+テーマエディタ上の設定だけで、オリジナリティのあるデザインにカスタマイズするのは難しいでしょう。ページビルダーアプリだとカスタマイズ性は上がりますが、ECショップやブランドのイメージを伝えられるところまで作り込むのは大変です。
自分でコードを編集できるようになれば、どのようなデザインのぺージも作成可能です。
イチから完全オリジナルのデザインテーマを作成することも出来ますし、既存のテーマを使って「地味すぎるシェアボタンを変更する」「商品一覧のデザインを変える」など気になるポイントだけを直すこともできます。
利点2：そのストアに必要な分だけ、パーツを作成可能
テーマのコード編集が可能になると、テーマエディタの“セクションを追加”や“ブロックを追加”で呼び出せるパーツ自体を作成できます。パンくずリストの追加、作成したメタフィールドの追加、などもテーマエディタから出来るようになりますよ。ノーコード編集時にも追加や非表示が出来ますので、クライアント（Shopifyストアオーナー）も喜んでくれるでしょう。
利点3：効率がよく、作業時間も短縮できる
JSONテンプレートでレイアウトを作っておくこともできます（後からテーマエディタで変更も可能）。すると、テーマエディタで一個一個セクションやブロックを積み上げて、ページレイアウトを作らなくても良くなります。文字サイズや配色なども、いちいちクリックして選分必要はありません。コード編集ができると、効率よく編集ができるようになり、作業にかかる時間も減ります。
利点4：チーム開発やバージョン管理も
Shopifyのテーマ開発では「コードを編集」画面だけでなく、Shopify CLIというコマンドラインツールを使っても行えます。Shopify CLIではGitHub連携が行えるので、ファイルの変更履歴管理ができるほか、チームでの共同開発にも適しています。中規模以上のShopifyショップ制作に携わる場合、ほぼマストですね。
Shopify制作のお仕事を受注する際の利点
利点5：Shopifyを使ったECサイト制作の理解が深まる
Shopifyを使ったECサイト構築やECサイトデザインのお仕事、と言っても、クライアントのご要望や予算によって行う作業は変わってきます。正直なところ、テーマのコード編集をする必要がない依頼もあります。
「できない」と「必要ないからしない」は大きく違います。
コード編集まで一通りのカスタマイズができれば、ご要望に対して最適な方法を考え、提案する力も身につきます。相談や初回ミーティングで内容や費用について説明もできますので、話と違うじゃないか、というようなトラブルも避けられます。
利点6：ストア構築者としての強みになり、報酬単価もUP
自分がクライアントで、同じくらいの価格でお仕事を頼むなら、「Shopifyの初期設定と、テーマエディタで画像やテキストを入れ替えられる」だけの人よりも、もっとスキルがある人を選びますよね。
副業やフリーランスとして、Shopifyでのストア構築やECサイト制作を請け負っている方は結構います。ですが、コードの状態でテーマをカスタマイズするところまで出来る人は多くありません。出来ることが増え、受けられるお仕事の難易度が上がるほど、ライバルは少なくなり、報酬は高くなります。
利点7：テーマ販売で稼げる可能性もある
Shopifyには公式のテーマストアがあり、テーマ開発者はオリジナルのテーマを販売することも出来ます。また、公式以外にもthemeforestなど、Shopifyのテーマを販売しているプラットフォームも存在しています。
Shopifyテーマの仕組みがわかり、コードを書けるようになれば、テーマを販売して収入を得る道も見えてきます。休暇中にも副収入が入ってきたら…嬉しいですね。
更に「テーマ開発者であり、テーマを販売している」ということは、オリジナルECサイトを作りたいクライアントからの信用にも繋がります。自称よりも、テーマ構築ができる証拠があった方が間違いなく強いですよね。この段階まで来たら“Shopify勝ち組”と言っても良いと思います。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
12月8日まで