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

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


目次[非表示]

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


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

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


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

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

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

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

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

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

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

テーマは公式でも100種類前後、非公式のものも合わせると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の無料テーマは全8種類で、どのテーマもシンプルかつわかりやすい構成になっています。有料のテーマに比べて機能は少ないものの、複数の商品を一気に見せられる点や、動画を表示させられる点など、それぞれのテーマに特徴があります。

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


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

simple:汎用性が高くどんな業種にもマッチ。複数商品を扱うEC向け。
・サイドバーメニュー
・商品ズーム
・アニメーション
・商品レコメンド

Boundless:商品画像を大きく見せることができる。
・商品画像の最適化
・スライドショーのフェードエフェクト
・追尾ナビゲーション
・シングルプロダクトギャラリー

Venture:バナー表示やメニューを2列にできる機能を搭載。複数商品を扱うEC向け。
・大規模カタログの作成
・マルチコラムメニュー
・スライドショー
・プロモーションバナー

Debut:デフォルトのテーマ。シンプルだがカスタマイズしやすい。
・スライドショー
・予測検索
・お客様の声
・プロモーションバナー

Supply:商品数が多いECサイト向け。
・大規模カタログ作成
・サイドバーにCollectionを表示
・スライドショー
・コレクション特集

Narrative:高級感が高く、動画の埋め込みが可能。
・小規模カタログ作成
・ヒーロービデオ
・視認性の高いデザイン
・固定ナビゲーション

Brooklyn:ファッション系サイトに人気。
・モダンなアパレルサイトの構築
・ヘッダーのスライドショー
・動的な商品紹介
・スライドアウトカート

Minimal:カスタマイズしやすく初心者向け。検索機能の質が高い。
・スライドショー
・商品ズーム
・ホームページビデオ
・プロダクトフィルター

無料テーマは複数選択して試してみることもできます。また、Shopifyには様々なサードパーティアプリがあり、アプリをダウンロードすることで後からカスタマイズ可能です。まずは直感で自分のコンセプトとマッチするテーマを選んでみてください。


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エンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

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

Shopifyアプリ解説・紹介記事

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

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

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

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

関連記事


【無料】セミナー動画視聴


EC関連サービス


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

お気軽に
お問い合わせください

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

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
shopify
ロジスティクスサービス

【週間ランキング】Shopify人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

 記事検索

 記事カテゴリー

 【無料】募集中セミナー

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

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

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

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
shopify構築・制作・運用