Shopifyのテーマを決定する前に絶対に注意すべき3つのポイント

Shopify(ショピファイ)のテーマを決定する前に絶対に注意すべき3つのポイント


目次[非表示]

  1. 1.ShopifyのECサイトを編集できる【テーマ】
  2. 2.テーマ選定時に気をつける3つのポイント
  3. 3.Shopify テーマ(テンプレート)を探す方法
  4. 4.補足:デザイン変更はShogun Landing Page Builderを利用しよう
  5. 5.テーマ選びはストア構築の最初の一歩

shopifyに関するお問い合わせをするボタン  shopify資料のダウンロードをするボタン


今回は、Shopifyの「テーマ」について解説していきたいと思います。

テーマとは、Shopifyのストアを構築するために用いられるテンプレートのことで、HTMLやCSSの知識なしにデザインをカスタマイズすることができます。


ECサイトを構築する上で、デザインは非常に重要な要素です。Shopifyは簡単にデザイン性の高いショップが作れることで人気を博していますが、実際にどのようなテーマを利用すれば良いのでしょうか?

今回はShopifyでサイトを構築する際にどのようなテーマを選ぶべきか、その考え方を含めて3つのポイントを解説していきます。

あわせて読みたい:ECサイト構築といえばShopify(ショッピファイ)機能やメリットを紹介

ShopifyのECサイトを編集できる【テーマ】

Shopifyには、ECサイトのデザインを簡単に変更できる「テーマ(テンプレート)」が存在します。

Shopifyのテーマはどれもカスタマイズ性が高く、パズルのようにデザインを構築できるので、複雑なプログラミングなどは必要ありません。

左側のメニュー画面で画像や文言を変更して、サイトをデザインして行く。

テーマは公式でも150種類前後、非公式のものも合わせると1,000種類以上あり、様々なジャンルのサイトにあわせてリリースされています。

Shopifyが公式に提供するテーマのどれを利用しても、ほとんどの場合簡単にクオリティの高いECサイトが作れます。

だからこそ選定時の軸をしっかりと決めないと、なかなかテーマが決まらずに無駄に時間を使ってしまうことも少なくありません。

Shopifyのテーマは、運用などの部分で大きな変化を生むわけではありません。しかし、ストアのデザインはブランドのイメージを決定づける重要な要素であり、商品の購入率に大きく影響します。

最適なテーマを効率よく見つけるためには、以下に注意しましょう。

※補足※カスタマイズは、<オンラインストア→テーマ→カスタマイズ>から可能です。

テーマ選定時に気をつける3つのポイント

Shopifyテーマを選ぶ際の3つの注意点です。これらを意識することで、ECストアの立ち上げスピードは大きく変わります。

①自分たちのコンセプトと必要な機能を洗い出す(要件定義)

実際にどのような機能を利用するべきか、自社サイトのコンセプトを想定しながら考えていきましょう。

■対象ユーザー
誰に向けて商品を販売するのか。

■販売する商品
具体的にどのような商品を販売するのか。

■ストアの強み
商品数や特徴的な商品など自社の強みは何なのか。

■商品の訴求方法
様々な商品をまとめて表示するのか、一つの商品を訴求するのか。


これにより、多数の商品を取り扱うことを得意とするテーマか、商品の特徴を強く訴求するテーマにするかなどを検討することができます。

コンセプトを考えた結果、複数の商品を陳列でき検索機能などが充実しているテンプレートが必要。などの想定が立てられ、Shopifyのテンプレートを探す時間を短縮できます。


<要件定義の例>

例えば、これからShopifyでコーヒー豆を販売するサイトを作るとしましょう。

=====

■対象ユーザー
・コーヒーを定期的に飲んでいるコーヒー好き。
※昔ながらの喫茶店にあるブレンドコーヒーを求めているユーザー。

■販売する商品
・コーヒー豆と関連ツール

<必要な機能> タブの切替え機能

■ストアの強み
・現役バリスタが厳選したプロの焙煎士が作成(豆を作成する人)
・オリジナルのコーヒー豆の提供(オンライン限定)

<必要な機能> 独自LPを作成する機能(強みの強調)

■商品の訴求方法
・少数の商品を訴求(コンテンツを多めに作成)
 豆を使って実際にコーヒーを淹れている動画見せる
 スライドショーを利用して、商品やセミナーの情報を表示する など

<必要な機能> 動画、スライドショー

=====

といった具合です。コンセプトと必要な機能を整理することで、テーマの取捨選択がスムーズになります。

②テーマを正しく認識する

Shopifyでストアを構築する際によくあるトラブルが、テーマに関する認識不足です。

テーマの認識が不足していると、想像と違うストアが完成してしまいます。認識不足の例として以下があげられます。

・機能不足にあとから気づく
PC画面をメインに外観を作ってしまい、モバイル用の画像選択機能がなかったり、画像を横並びにする機能がなく、イメージ通りのデザインにならないことがあります。求めている機能をテーマが搭載しているか、事前にチェックしましょう。

モバイル向けの画像設定が無いテーマも存在します。

・カスタマイズが想定より多い
上記とは反対に、様々な機能が搭載されているものの細かな設定が多すぎるテーマが存在します。このような場合構築に時間がかかったり、デザイン修正の際に意図しない部分が変更してしまうことがあります。

カスタマイズしなければならない要素がとても多い。

・日本語に対応していない
有料のテンプレートを購入した場合、言語設定が日本語に対応していないため英語でサイトが構築されます。それぞれの英語に対応する日本語を入力し直す必要があるので、手間がかかる作業を避けたい場合は、無料テーマを利用したほうが良いでしょう。

テーマを購入した際によくあることですが、Shopifyの言語設定を日本語にしておかないと、英語でストアが構築されてしまいます。

デフォルト言語を日本語に設定しましょう。


③トップのデザインだけで決めない

ECサイトの購買率に影響をあたえるのは、トップページだけではありません。必ず商品ページやコレクションページ、ブログページのデザインにまで注意を払ってください。

トップページは良い感じに仕上がっているのに、商品ページやコレクションページに手を加えられておらず、ユーザーががっかりして離脱してしまうことも少なくありません。

Shopifyのテーマはトップページ以外のページもカスタマイズができます。

特に商品ページやコレクションページは商品購入に大きく関わるところなので、必ず事前にデモ画面にてチェックをするようにしましょう。

詳細ページのデザイン確認は必須。

Shopify テーマ(テンプレート)を探す方法

Shopifyのテーマを利用する上で、3通りの選択肢があります。

・Shopifyの公式テーマ(無料)
・Shopifyの公式テーマ(有料)
・Shopifyのテーマストア以外

各テーマにはそれぞれ一長一短の特徴があります。自分にあったテーマを選択するために各々の特徴をチェックしていきましょう。


Shopifyテーマストア(無料)

Shopify無料テーマ一覧

無料テーマは以下からダウンロード可能です。

※オンラインストア→①テーマ→②テーマストアにアクセスより取得可能です。

Shopifyの無料テーマは全12種類で、どのテーマもシンプルかつわかりやすい構成になっています。有料のテーマに比べて機能は少ないものの、複数の商品を一気に見せられる点や、動画を表示させられる点など、それぞれのテーマに特徴があります。

また、シンプルなためカスタマイズ性が高く、これらをベースにliquid(Shopifyを構築するプログラミング言語)でオリジナルテーマを作成することにも向いています。


12種の無料テーマのそれぞれの特徴は以下の通りです。

Dawn:デフォルトのテーマ。 シックでミニマルなデザインで商品がどのようなものかを大きい画像から細かく理解できるような構成。


・メガメニュー
・クイックビュー
常時表示ヘッダー

Refresh:クリーンでモダンなデザインで商品の詳細を強調できる。




・メガメニュー
・クイックビュー
常時表示ヘッダー

Sense:豊富な商品詳細レイアウトを特徴とするエネルギッシュなテーマ。



・メガメニュー
・クイックビュー
常時表示ヘッダー

Craft:豊富で説得力のある物語用に設計されたセクションとテンプレートを利用可能。



・メガメニュー
・クイックビュー
常時表示ヘッダー

Ride:洗練されたスポーツ中心のデザイン。革新的で柔軟なレイアウト。



・メガメニュー
・クイックビュー
常時表示ヘッダー

Origin:商品への好奇心を搔き立てるデザイン。詳細を載せることができるレイアウト。


・メガメニュー
・クイックビュー
常時表示ヘッダー
在庫カウンター


Studio:スタイリッシュなタイポグラフィとカラフルなアクセントで商品紹介、掲載が可能。



・メガメニュー
・クイックビュー
常時表示ヘッダー

Taste:広々としたデザインで商品の品質をアピールすることができるレイアウト。

・メガメニュー
・クイックビュー
常時表示ヘッダー

Publisher:個人スタジオや出版社にインスパイアされた斬新なテーマ。


・メガメニュー
・クイックビュー
常時表示ヘッダー

Crave:鮮やかで遊び心のあるデザイン。モバイル向けに最適化されたレイアウト。


・メガメニュー
・クイックビュー
常時表示ヘッダー

Colorblock:大型カタログに最適(商品数が多いストア)なレイアウト。

・メガメニュー
・クイックビュー
常時表示ヘッダー

Spotlight:クリーンで効率的。すぐに販売を開始できるように設計された合理的なテーマ。

・メガメニュー
・クイックビュー
常時表示ヘッダー
在庫カウンター



記載の機能として、それぞれ以下のようなものとなります。

メガメニュー:クリックまたはマウスオーバーで開くドロップダウンメニューの1種
クイックビュー:商品をクリックした際に、ポップアップで商品詳細を表示する
常時表示ヘッダー:ページを上にスクロールするとヘッダーが画面に表示される
在庫カウンター:商品の売れた数と残数を表示


無料テーマは複数選択して試してみることもできます。また、Shopifyには様々なサードパーティアプリがあり、アプリをダウンロードすることで後からカスタマイズ可能です。まずは直感で自分のコンセプトとマッチするテーマを選んでみてください。無料テーマのそれぞれの特徴についてはShopify(ショッピファイ)の無料テーマ11個の紹介の記事でもう少し詳しく説明していますので是非ご覧ください。
※Spotlightのテーマについては、掲載されておりませんのでご了承ください。


Shopifyテーマストア(有料)

https://themes.shopify.com/

Shopifyの公式テーマは180USD(約19,500円)前後となっています。

機能は多種多様で、無料テーマには無い機能も用意されています。それぞれにデモサイトがあるので試してみてください。

Shopifyアプリの機能を包括するような内容も含まれており、

・コレクション一覧にて2枚めに登録した商品画像がホバー表示
・PoPアップバナー
・商品や画像に動的な演出をする
・商品検索機能の充実

など動的な演出の少ないShopifyの無料テンプレートと比べると、デザインの豊富さが伺えます。

これらはデザインの微妙な違いですが、購入率に直結する要素である場合も多いです。Shopifyを長期で利用をするのであれば購入する価値があるといえるでしょう。

欠点として、有料テーマはデフォルト設定がしばしば英語になっていることが挙げられます。実際に日本のユーザー向けに利用するのであれば、日本語への翻訳を手動で行う必要があります。

地道に編集が必要

Shopifyテーマストア外のテーマ

公式ストア以外に、Shopifyのテーマが集まるサイトとして有名なのが、themeforest(テーマフォレスト)です。

https://themeforest.net/

このサイトはクリエーターが作成したCMSのテンプレートを販売するサイトです。Shopifyはもちろん、WordPressを始めとした様々なテンプレートが集められています。

900種類を超えるShopifyの非公式テーマを扱っており、豊富な機能を取り揃えています。例えば簡易のレビューやお気に入り機能など、Shopifyアプリでリリースされているような機能がパッケージとして販売されているのでお得です。金額も16~60USD(1,700~6,500円)前後となっており高い人気を誇っています。

ただし、上記はShopifyのテーマストア外のテーマです。Shopifyの公式な仕様変更に対応できない可能性なども考慮しておく必要があります。

海外のユーザー向けに作成されたテンプレートのため、公式テーマ同様にすべて英語になっていてページの文言を英語→日本語にする必要があります。

また、内包されている機能は便利なものの、Shopifyアプリのように細かい調整ができなかったり管理画面そのものがなかったりします。さまざまな機能を少しだけ使ってみたい方にはおすすめですが、細かな微調整を実施したいユーザーは、Shopifyのアプリを利用したほうが良いでしょう。

補足:デザイン変更はShogun Landing Page Builderを利用しよう

テーマを作成するときに重要なのは、それぞれのコンテンツにどのようなデザインを当てはめていくかということです。

その際におすすめなのが、Shogun Landing Page Builderです。

トップページはもちろん、個別の商品ページのデザイン編集やブログの構成編集ができるので、よりクオリティの高いサイトを作ることができます。

それぞれのページにあわせたテンプレートが存在します。

月々39ドルの費用はかかりますが、アプリのレビューに見られる通り、多くのユーザーが高い評価をしています。細かい微調整を行いたかったり、ブランディングを重視しているECサイトにとって必須のアプリです。

特に昨今のECサイトはストーリーづくりが非常に重要になってきており、単純な商品販売だけでなくブログやプロダクトページのコンテンツにより重きをおく必要があります。

Shogun Landing Page Builderを使えば、それぞれのページに細かなデザインの変更が可能で、サイトのクオリティをワンランク引き上げてくれるでしょう。


テーマ選びはストア構築の最初の一歩

Shopifyのテーマを導入するにあたって重要な3つのポイントを紹介しました。

①自分たちのコンセプトと必要な機能を洗い出す(要件定義)
②テーマを正しく認識する
③トップのデザインだけで決めない

テーマ選定によって、サイトの購買率は大きく変わることもあります。必ず上記ポイントを意識してテーマを選択するように心がけてください。


shopifyに関するお問い合わせをするボタン  shopify資料のダウンロードをするボタン


shopify構築サービスバナー

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスはShopify公式認定パートナーです。ShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify(ショッピファイ)ストア構築・制作、
運用代行についてお問い合わせ

Shopifyアプリ解説・紹介記事

ShopifyのECサイト制作ならトランスコスモス

トランスコスモスは、Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。

トランスコスモスのEC全領域を網羅するサービス


セミナー動画視聴


EC関連サービス

数字で見るトランスコスモスの強み

数字で見るトランスコスモスの強み
お気軽にお問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

実績豊富なトランスコスモスへぜひご相談ください
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
法人向けメタバース情報メディア
「メタバース情報局 by transcosmos」
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用