みなさんこんにちは。
本記事よりSlash AppにてShopify関連の情報発信をしていきます、みやうちです。まだまだ日本では浸透しきっていないShopifyに関して、分かりやすく!日本語で!(ここ重要)発信したいと思いますので、ぜひShopifyにお困りの際は(困ってなくてもよりよいECの運用をしていきたい方は!)Slash-Appを覗いてみてください!
さて、Slash-Appでは、アプリの紹介をはじめ、Shopifyの基礎情報など、様々な情報を発信しています。
そんな中、ShopifyでECサイトを構築する初期段階で遭遇する壁、
それは...『テーマってどれを選んだらいいの?!』です。
その壁を壊すべく、初回の本記事では、
- Shopifyテーマとはなにか
- どのように選ぶのがよいのか
- 基本の用語と設定方法
について書いていきたいと思います!
では早速、概要から紹介していきますね!
Shopify(ショッピファイ)テーマとは?
Online Store 2.0テーマは53テーマもある!
テーマとは馴染みある表現で言い換えると、「サイトのデザインおよび機能のテンプレート」だと考えると分かりやすいです。テンプレートに画像や商品情報を加えることによって、基本的にはノーコードでサイトを構築できるのがShopifyの魅力のひとつと言えるでしょう。
Shopifyテーマは、世界中の開発パートナーが制作しており、日々リリースされています。
現在、50テーマ以上(※2021/11/5時点)が使用できるので、まずECサイトをShopifyで構築したい場合、この中からテーマを選ぶ必要があります。
テーマの中には、無料・有料、商品カテゴリに対して特化しているもの、等様々な特徴があるので、使用するテーマを吟味して選択しましょう。
テーマの選定方法
とはいえ、いきなり一覧を見てもピンとこないでしょう。(ピンときた方はすでにサイト構築の素質がありますね、素晴らしい。)
一覧サイドバーを見てわかる通り、それぞれのテーマには価格や商品数(サイトの規模)、サイトのメインとなる商品画像や情報のレイアウトなどが大きくテーマを分ける基準となります。
まずはデモサイトを見てみて、自分の理想とするUIはどんなものか?自分のブランドはどのテーマで表現できるか?を基準にどのテーマを使用するか判断していきましょう。
無料テーマと有料テーマ
先に述べたように、Shopifyテーマには無料のテーマと有料のテーマがあります。有料の場合、ストア公開時に料金が発生する買い切り形式です。
想像通りかと思いますが、有料テーマは無料テーマに比べてデザイン性や機能面でリッチな場合が多いです。
ただ、無料テーマが簡素か?と言われると、感覚的にはなりますがNOと言えます。ここも「自分の理想とするUIはどんなものか?自分のブランドはどのテーマで表現できるか?」を軸にしたとき、無料テーマで十分理想のサイトが作れるのであれば、それに越したことはありません。
テンプレートの持つ機能とアプリの関係
ここで一旦アプリの話をさせてください。
例えばあなたのサイトに”よくある質問”ページを作成し、20個の質問を記載したいととします。
Shopifyでは使用しているテーマをカスタマイズすることもできますが、 Shopifyアプリを入れることで、テーマをカスタマイズせずにフロントデザインに要素を追加することができます。
アプリについて、詳しくはこの記事をチェックしてみてください。→ 『【Shopifyの使い方講座】ツカえる!Shopifyアプリの見つけ方とインストール方法』
例えば、無料のテーマでは質問がMAX10個登録できる機能のみある、という場合でも、FAQ(よくある質問)の機能拡充ができるアプリをインストールすることで、解決できる、ということがあります。
何が言いたいかというと、求める機能をテンプレート側があらかじめ持ってる有料テンプレートを選択するか、アプリをインストールして無料テンプレ―トでも同じ機能を持たせるようにするか、2つの選択肢がある、ということです。
上記に関しても考え方の違いで、アプリが月額で支払いが発生する場合があり月の支払いは押さえたい、個別の設定がややこしい、と思う場合は最初から求める機能を持っているテンプレートを選ぶが吉でしょう。
UIのカスタマイズ性
日々ECサイトを閲覧する方であれば無意識に感じていることだと思いますが、ECサイトは商品の「見た目」「情報」、サイトの「操作性」「利便性」が良いほど良いサイトと感じると思います。
商品力、ブランド力があれば購入してもらえる!というのは間違いではありませんが、最初からユーザーがそれらに気づいている状況が常ではないはずです。ショッピングモールにて、各ブランド情報がない場合、ショーウィンドー等外観でどのお店に入るか判断するはずです。
となると、まずはサイト内で表現するブランドの「雰囲気」、商品の「詳細情報」をユーザーに届けなければいけません。
[無料テーマと有料テーマ]でも述べましたが、テーマごとに表現できるデザインが異なりますので、どのテーマだと理想の雰囲気や情報訴求ができるか?を検討しましょう。
基本の用語と設定方法
テーマ選びについて述べてきましたが、ここからは、テーマをカスタマイズしていく上でよく出てくる単語や、設定方法について紹介していきます。
普段聞き馴染みが無くても、テーマ紹介ページにはよく出てくる単語になりますので、基本を押さえて、サイト制作に臨みましょう。
セクションとブロック
ほとんどのセクションは、ヘッダー、テキスト、単一の画像、画像のコラージュ、リンクなどのブロックで構成されています。テンプレートにてセクションとブロックを使用すると、ストアのコンテンツをより自由に配置できるため、コードを編集しなくてもオンラインストアを思い通りにカスタムできます。
各セクションには、さまざまなブロックがあり、追加も自由にできます。使用可能なセクションとブロックは、テーマによって異なるため、使用可能なオプションの詳細については、テーマのドキュメントを参照してください。
参照:https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/
引用:https://pipeline.groupthought.com/
コレクション
商品をコレクションにグループ化して、ユーザーがカテゴリ別に商品を見つけやすくすることができます。
商品それぞれにタグをつけることによってコレクションページに動的に商品を表示することが出来るため、下記のように商品をカテゴライズして商品を訴求する、また訴求したい商品をカスタマイズできます。
- 男性、女性、子ども向けの服
- ランプ、クッション、ラグなどの特定の種類のアイテム
- セール品 ...等
メタフィールド
メタフィールドを使用すると、デフォルト状態では表示されていない特殊な情報を追加することが出来るため、Shopifyストアの機能と外観をカスタマイズできます。
例を挙げると、ろうそくを販売しているサイトにて、商品ページにろうそくの燃焼時間を表示したい場合、食料品サイトで商品の有効期限を表示したい場合などがあります。
下記のような商品情報をカスタマイズして、商品情報の拡充ができるのがメタフィールドです。
- 部品番号
- 色見本
- 発売日 ...等
引用:https://pipeline.groupthought.com/
Shopifyコミュニティ
テーマのことに限らずですが、Shopifyには某知恵袋のような、質問と回答ができるコミュニティが用意されています。
なにかわからないことがある場合、ここで検索して同じような質問と回答を見つけるか、質問してみると回答があるので、活用してみてください!
参考:https://community.shopify.com/c/shopify-community-japan-jp/ct-p/jp
さいごに
いかがでしたか?
今回はshopifyテーマの概要に関してお話してきました。
そもそもサイト制作に正解はなく、テーマに限らずアプリや使用する画像等...悩むポイントは制作を進めていく上で必ず出てくると思います。
本記事やコミュニティなど様々な情報が充実しているのもShopifyの魅力です。途中でくじけず前向きに、理想のサイトを作成していきましょう!
次回からはそれぞれのテーマにフォーカスして紹介をしていきます。
引き続き、お楽しみに!
Shopifyアプリの開発、承ります。
SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。