ShopifyでECサイトの見た目を大きく左右するのはテーマ。 それにプラスして、個々のECショップでのページ構成やデザイン変更手段も用意されています。
大きく分けると、以下3通りの方法でデザインカスタマイズは可能です。
1.標準装備のテーマエディタを使う 2.ページビルダー系のアプリを使う 3.テーマのコードを編集する
それぞれの特徴、メリットとデメリットを見ていきましょう。
方法1.標準のテーマ機能(テーマエディタ)
| 難易度 | デザインの自由度 | ||
|---|---|---|---|
| 向いている人 |
全ユーザー （ECサイト運営者、Shopify構築者、マーケター、Webデザイナーなど） |
||
Shopifyテーマの中からお好きなテーマを適用し、前回のレッスンで使ったテーマのカスタマイズ画面で調整する方法です。
テーマエディタのメリット
- デフォルト機能である（ショップを開設すれば使える）
- コーディング・プログラミング知識不要
- 感覚的に使用でき、学習コストはほぼゼロ
テーマのカスタマイズ画面では、プレビューを確認しながら、感覚的に操作することが可能です。パソコンやスマホなどを普段使っている方であれば、特別な勉強をせずとも、すぐにページのカスタマイズが出来るでしょう。
テーマエディタのデメリット
- 細かな設定ができない
- 掲載したいパーツ（セクション/ブロック）がない事がある
- テーマによって異なる部分があり、解説が少ない
テーマのカスタマイズ画面では、細かな調節ができず、痒いところに手が届かない場面も多いです。
例えば、Dawnの場合だと、文字の色やサイズの個別設定、2：3の割合で2カラムを入れる、などはテーマエディタで設定できません。この見出しだけ文字色を変えたい！という場合は、自分でCSSを書く必要があります。
方法2.ページビルダー系アプリ
| 難易度 | デザインの自由度 | ||
|---|---|---|---|
| 向いている人 |
全ユーザー （ECサイト運営者、Shopify構築者、マーケター、Webデザイナーなど） |
||
Shopifyには、ページビルダーアプリというものも存在しています。 ページビルダーアプリは、ノーコードでオリジナルのページレイアウトを作成できる機能。 テーマエディタの強化版をイメージをして頂くと分かりやすいかと思います。
代表的なShopifyのページビルダーアプリには、以下のようなものがあります。 * PageFly * Unstack * Shogun Landing Page Builder * GemPages Flexible Page Builder * Ecomposer
ページビルダーアプリのメリット
- それぞれの要素ごとに細かく設定が可能
- テーマエディタよりも使用可能パーツ（要素）が多い
- タブ切り替えやアニメーション表示も簡単に作れる
- テンプレートが多く用意されている
- HTML/CSSができなくてもデザインが可能
- 使い方紹介・解説記事などが結構多い
ページビルダーアプリを使用するメリットは、「Shopifyのテーマカスタマイズ画面をグレードアップさせたような機能」が使えること。一般的なWebサイト/ECサイトでよく見かけるパーツやレイアウトは用意されているので、大体のデザインは作成可能でしょう。
下図はPageFlyのページ作成画面です。
このように、横並びに配置するカラムの大きさ・割合を設定する、見出しやテキストそれぞれに個別で装飾を行う、などのことができます。イチから作成するのが大変な方向けに、テンプレートも用意されていますよ。
PageFlyなどメジャーなアプリであれば、使い方を解説の日本語記事も多くあります。
ページビルダーアプリのデメリット
- 別途、アプリのインストールが必要
- 要素を選択→追加→詳細設定 を逐一行うのが大変
- 操作になれる必要がある
- 使いたいパーツ（要素）がない事がある
- ページの表示速度が重くなる可能性がある
- 機能や作成したページ数に応じてお金がかかる
ページビルダーのデメリットは「細かく設定できる分、手間がかかる」こと。 ノーコードではあるのですが、設定する箇所が多いので、機能を把握して慣れるまでも多少時間はかかるでしょう。
例えば、PageFlyで白紙からページを作成する場合。 以下の公式チュートリアル動画のように、1つずつページに掲載したい要素を追加していきます。LPのような特定のページだけなら良いですが、これでECサイトの全ページ（全テンプレート）を作ろうと思うと大変です。
また、アプリで作成したページは、テーマエディタから読み込む形になることも。 テーマカスタマイズ画面+ベージビルダーアプリの二段階で設定することになるので、ちょっと面倒に感じる方もいらっしゃるかもしれません。
アプリには費用面の問題もあります。 主要ページビルダーアプリは月額プラン制です。作成可能なページ数や、使える機能に応じてお値段が上がっていく仕組み。ちなみに、PageFlyの場合は無料から使用でき、作成するページ数に応じて料金が上がります。最上位のプランは$199/月と、なかなかのお値段。
方法3.テーマのコード編集
| 難易度 | デザインの自由度 | ||
|---|---|---|---|
| 向いている人 | Webデザイナー、フロントエンドエンジニア | ||
テーマのコードを編集して、デザインをカスタマイズすることもできます。 テーマのカスタマイズ画面からアイコンをクリックし、コードの編集を選ぶと、コード編集画面が開きます（※環境構築をすれば、ローカルでもコード編集は可能）。
テーマに使われている、沢山のディレクトリ（フォルダ）とファイルが表示されます。
テーマコードを編集するメリット
- デザインの柔軟性が高い
- ECストアで使いたいセクションを自由に追加可能
- 必要項目だけをスピーディーに構築可能
◎デザインの柔軟性が高い
テーマエディタやページビルダーでは、用意されているパーツを組み合わせてページを作ります。 逆を言えば、パーツが用意されていないものは使えません。
自分でコードを編集できると、欲しいパーツを自作することが出来ます。
決められた枠済みの中で設定する必要がなく、欲しいパツーは作れば良いのでどのようなデザインのぺージも作成できます。
Shopifyで作られているとは思えないような、オリジナリティ溢れるECショップを作成することも可能になります。
セクションやブロックを作成することで、クライアント（ストア運営者）がカスタマイズ画面から利用も可能。 WebデザイナーとしてShopifyサイトのデザイン制作を請け負う場合は、制作物の質も、納品後の扱いやすさも段違いになります。ぜひとも、ある程度は習得しておきたい部分ですね。
◎Shopifyを使ったECサイト制作の理解が深まる
Shopifyを使ったECサイト構築やECサイトデザインのお仕事、と言っても、クライアントのご要望や予算によって行う作業は変わってきます。 正直なところ、テーマのコード編集をする必要がない依頼もあります。
ですが、「できない」と「必要ないからしない」は大きく違います。 コード編集まで一通りのカスタマイズができれば、ご要望に対して最適な方法を考え、提案する力も身につきます。相談や初回ミーティングで内容や費用について説明もできますので、話と違うじゃないか、というようなトラブルも避けられます。
◎チーム開発やバージョン管理もしやすい
Shopifyのテーマ開発は「コードを編集」画面だけでなく、Shopify CLIというコマンドラインツールを使ってローカルで行う事もできます。GitHubと連携させファイルの変更履歴管理が・ブランチを使ったチームでの共同開発などにも使えます。 中規模以上のShopifyショップ制作に携わる場合、ほぼマストですね。
テーマコードを編集するデメリット
- HTML,CSS,Liquid,JSONの基礎知識が必要
- 記述ミスがあると、ページが表示されなくなる
- リファレンスや解説が（特に日本語は）少ない
コード編集によるデザインカスタマイズのデメリットは「学習コストが高い」こと。 それぞれのセクションをLiquidというShopifyのテンプレート言語、1つのページとして使うためにJSONテンプレートを使用しています。 元々エンジニア系の知識がない方は、最初のうちは覚えることが多く学習が大変でしょう。
ですが、コード編集ができるようになると、かかった学習コスト以上のメリットがあります。 次のレッスンからは、ShopifyのテーマやLiquidなどを見ていきましょう。