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

Shopifyのテンプレートの特徴や選択方法について解説

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

02/06/2020

こんにちは、研究員のおかもとです。

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

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


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

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

あわせて読みたい:Shopifyとは?機能やメリット、評判や使い方までを解説


Shopifyを無料体験してみる

 

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

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

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

Shopify_カスタマイズページ

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

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

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

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

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

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

カスタマイズ_Shopifyテーマ

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

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

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

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

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

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

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

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

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


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

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

 

<要件定義の例>

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

=====

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

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

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

タブ

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

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

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

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

=====

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

 

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

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

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

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

モバイル_画像カスタマイズ

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

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

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

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

言語設定_Shopif

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

 

ストアの言語_Shopify

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

 

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

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

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

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

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

レコメンド_商品ページ

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

 

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

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

・Shopifyの公式テーマ(無料)
・Shopifyの公式テーマ(有料)
・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テーマストア(有料)

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のアプリを利用したほうが良いでしょう。

<おすすめのアプリ>
【随時更新】導入必須のShopify(ショッピファイ)アプリとその使い方を解説。

 

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

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

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

Shogun Landing Page Builder.

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

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

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

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

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

 

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

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

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

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

 

Shopifyについて詳しく知りたい方はこちら

 

 

トランスコスモス技術研究所の

アプリ開発

 

様々な機能が標準搭載されているShopify(ショッピファイ)ですが、利用ユーザー独自のカスタマイズもできます。サイトデザインだけではなく、運営効率改善のためにバックヤード側もアプリ開発をすることでカスタマイズが可能です。

トランスコスモス技術研究所は、Shopify Plus 公式パートナーです。
過去のShopify開発の知見を元に、テクノロジーを活用した業務の効率化・コストの削減・利益の最大化を目的とした研究開発およびサービスの提供を行っております。

デジタルトランスフォーメーションに関わる専属のエンジニアが多数在籍しており、それぞれが強みを持った開発のエキスパートです。

以下のようにShopifyアプリの作成も実施しております。

日本市場におけるShopifyアプリ構築や、導入・運用・マーケティングサポートを実施

 

Shopify アプリ開発

https://apps.shopify.com/partners/transcosmos

自社が得意とするテクノロジーを活用した研究開発および運用コンサルティングを一括して支援することで、流通及び販売事業における飛躍的な業務効率化及び経費削減を実現しています。

また、アプリ開発のみならず、導入後も課題解決に向けた伴走型のコンサルティング部隊を強化し、お客様のデジタルトランスフォーメーションをサポートしていきます。

 

Shopifyについて詳しく知りたい方はこちら

 


Shopify
シェア シェア
お役立ち資料バナー-1
Kisukeバナー_grey-1
Shogo Okamoto

お問合せ


「週刊EC業界ニュース」に登録しませんか?

 

週刊EC業界ニュースのメーリングリストにご登録いただくと、
トランスコスモス技術研究所(通称「トラ研」)メンバーによる国内外のEC業界の最新動向に関するブログや、特別イベントの情報等について、
定期的にお送りさせていただきます。ぜひ、ご登録ください!
logo_RGB_ver2_researchanddevelopment-3