Shopifyで人気のデザインは？有料・無料のおすすめテーマと選び方を徹底解説

ShopifyはECサイトのプラットフォームとして人気ですが、初期設定のままでは自社のやりたいことを十分にできないこともあります。オンラインでの集客を強化していくために、状況にあわせてデザインを変更したくなることも多いのではないでしょうか。

本記事ではShopifyを利用している方向けに、デザインや各ページの具体的なカスタマイズ方法やカスタマイズ前の注意点、ECサイトの運営目的に沿ったデザインの決め方やおすすめのテーマについて解説します。ECサイト運営の参考にしてください。

Shopifyのデザインをカスタマイズする方法

Shopifyのデザインを自分好みに変更したいときに使える、カスタマイズ方法をご紹介します。

管理画面から直感的な操作でカスタマイズする

Shopifyには、管理画面から直感的な操作だけでデザインを変更する機能があります。直接プログラミングコードを編集する必要がないため、初心者にもおすすめです。

管理画面からは、以下のような要素を変更できます。

• ロゴ画像
• 背景やテキスト、ボタンなどの色
• 見出しや本文のフォント、文字サイズ
• ウィジェットの追加、削除

管理画面からデザインを変更する手順は、以下の通りです。

1. 左メニューから「オンラインストア→テーマ」を選択
2. 該当のテーマの「カスタマイズ」をクリック
3. プレビューを確認しながら要素をカスタマイズ

Shopifyのプログラミングコードを直接編集する

デザインをより詳細に変更したい場合は、プログラミングコードを直接編集することをおすすめします。

プログラムを直接編集すると、クラス名などで要素を一元管理でき、作業効率が向上します。プログラムから直接デザインを変更できれば、ゼロから好みのテーマを作成することも可能です。

ただしHTMLやCSSの知識・経験が必要なため、最初のうちは既存テーマを部分的にカスタマイズし、サイトの挙動を確認するのがよいでしょう。

Shopifyのプログラミングコードは、以下の手順で編集します。

1. 左画面から「オンラインストア→テーマ」を選択
2. 該当テーマの「アクション→コードを編集」をクリック
3. ファイルを編集したいときは、編集したいファイルのあるフォルダを選択後階層下にある対象ファイルを選択
4. 編集完了後に保存

トップページのおすすめカスタマイズ法

Shopifyのテーマのカスタマイズと同じく、トップページも管理画面のエディター画面から編集できます。Shopify の管理画面にログインし、「オンラインストア」→「テーマ」→「カスタマイズ」の順にクリックしましょう。

管理画面では、以下のトップページの要素をカスタマイズできます。

• コンテンツ（セクション）の追加、削除、並べ替え
• ロゴのサイズ、調整
• 告知バーの表示・非表示
• メニューバーの追加、削除、並べ替え
• コレクションページの編集、追加

商品ページのおすすめカスタマイズ法

商品ページは、ECサイトにおいて重要な要素のひとつです。コンバージョン率に直結するため、ユーザーの利便性を考慮しつつ、魅力的な内容にすることをおすすめします。

商品ページは管理画面にログイン後、「商品管理」で商品を選択すると出てくる編集画面から編集できます。編集画面にて、商品ページの以下の要素をカスタマイズできます。

• 商品画像のアップロード、削除
• キャッチコピーの編集
• 商品説明欄の編集
• 商品ページの詳細設定
• 商品レビュー機能の設定
• トラストバッジ（マーク）の表示
• 購入ボタンのデザイン、配置
• メタタイトル、メタディスクリプション、altタグの設定

実際に使用している画像を掲載し、商品を使うメリットを具体的に感じてもらうことが大切です。例えばファッション系のECサイトであれば、洋服を着用したモデルを利用し、購入後の満足感をイメージしてもらいます。

商品のキャッチコピーも、重要な部分のひとつです。ある程度知名度の高い商品であれば、商品名と一緒にブランド名も併記しましょう。ユーザーは商品名と一緒にブランド名も検索する傾向があります。

商品説明は商品の魅力が伝わるように、ベネフィットを感じてもらえる内容にしましょう。購入ボタンのデザインは、色や配置場所、テキストなどに考慮して決めます。いくつかパターンを作成しておき、効果の高いものを採用してください。

選択しているShopifyテーマに商品レビュー機能があれば、レビュー機能のカスタマイズも可能です。またレビュー機能のみをアプリで追加することもできます。

他ユーザーからのレビューが購入機会につながる可能性も高いため、レビューが見やすく、投稿しやすいようにカスタマイズしましょう。

トラストバッジ（マーク）とは、国際基準に基づく信頼性と安全性を第三者から認証されたECサイトを表す認証マークです。トラストバッジ表示機能のあるテーマを選択するか、アプリの追加でトラストバッジが表示できます。

トラストバッジを表示することで、競合のECサイトよりも信頼と安全の面で優位性を保てます。取得している場合はテーマ選択やアプリ追加でぜひECサイトに表示させましょう。

管理画面でSNSやブログなどの販売チャネルを追加すると、購入ボタンが追加できます。購入ボタンの配置やサイズ、フォントや色も編集可能です。

商品ページを上位表示するためには、SEO対策が必要です。SEO対策のためのメタタイトル、メタディスクリプションの編集やaltタグの設定も、管理画面からできます。

Shopifyのデザイン（テーマ）カスタマイズ前に行っておくこと

Shopifyのデザイン（テーマ）は直感的な操作により簡単にカスタマイズができるだけでなく、コードを編集すればより自由度の高いカスタマイズも可能です。ところが、カスタマイズ後に動作上で不具合が起きる可能性があります。

デザインのカスタマイズを行う前に必要な準備や確認事項について解説します。

バックアップを取る

Shopifyのデザインの編集後、追加しているアプリとの相性が悪いなどの理由で不具合が起き、動作しなくなることがあります。万が一のときも元の状態に戻せるように、デザインの編集前にはバックアップを取っておきましょう。

Shopifyのデザインのバックアップを取る手順は以下の通りです。

1. 「オンラインストア→テーマ」をクリック
2. テーマを選択して「アクション」をクリック
3. 「複製」をクリック
4. CSVファイルでバックアップが作成される

サポートレベルや方法を確認しておく

ECサイトで利用しているShopifyテーマによって、受けられるサポートのレベルや方法が異なります。カスタマイズで問題や不具合が発生したときのために、事前にサポートの方法を確認しておきましょう。

Shopifyの無料テーマは、有料プラン契約時に限りShopifyサポートから最大60分のサポートを受けられます。Shopifyの有料テーマのサポートについては、テーマのサポートドキュメントまたは開発者へ直接確認できます。

上記の方法で解決しなかった場合は、Shopify Expartに相談するのも有効です。

Shopify Expartの資格を所有するフリーランサーに相談する

画像ファイルの形式とサイズを確認しておく

Shopifyではサポートされている画像のフォーマットが決まっています。要件を満たしていない画像ファイルはECサイトの構築に使えません。作り直しになってしまうため、事前に画像フォーマットの要件を確認しておきましょう。

Shopifyでは、以下の画像ファイルがサポートされています。

Shopifyのデザインを決める3つのポイント

Shopifyのテーマは100～数千種類以上にのぼるといわれ、デザインや機能もさまざまです。そこで、Shopifyのテーマを選ぶ際のポイントを3つご紹介します。

1. 自社ブランドのコンセプトにあわせる
2. テーマに求める機能があるか確認する
3. 各ページのデザインがしっかりしているか確認する

1. 自社ブランドのコンセプトにあわせる

自社の強みや販売する商品、お客様の属性などを考慮して、どのようなデザインが自社に合っているのか考えましょう。

例えば、Shopifyでお茶ときゅうすを販売したい場合は、一つ目の商品である茶葉と、二つ目の商品であるきゅうすを切り替えるタブ機能が必要です。自社にしかない強みがある場合は、その魅力を適切にアピールできるLP作成機能なども必要になるでしょう。

Shopifyのデザインを選ぶ際は、以下の要素を参考にして自社のコンセプトを整理してみてください。

• どんな人をターゲットにするのか
• どんな商品を販売するのか
• 自社の強みは何か
• どのように商品を訴求するのか

2. テーマに求める機能があるか確認する

コンセプトが決まったら、Shopifyのテーマに自社の求める機能性があるのかを確認します。

どれだけ優れたデザインであっても、Webサイト運営に必要な機能が不足していたら意味がありません。自社ブランドのコンセプトを実現できる機能が搭載されているか確認してください。

一方で、機能性が高ければよいというわけでもありません。多機能すぎると使いこなすのに時間がかかり、目的のデザインにするまでのコストも大きくなります。仮に完成させたとしても、修正項目が多くなり運営後のメンテナンスも大変です。Shopifyの機能は必要最低限に抑えることをおすすめします。

また、最近はスマートフォンからのアクセスが多いため、モバイル端末に対応しているかも重要です。パソコン画面だけではなく、モバイル画面からみて優れたデザインを採用しましょう。

3. 各ページのデザインがしっかりしているか確認する

Shopifyのデザインを選ぶ際は、トップページだけでなく、商品ページやコレクションページ、会社概要ページなどのサブコンテンツも確認しましょう。

トップページのデザインがいくら優れていても、サブページが見づらければユーザーにストレスを与えます。ユーザビリティが下がると、Webサイトの滞在時間が低くなり、SEO的にもよくありません。離脱率も高くなるため、コンバージョン率にも悪影響がでます。

特に商品ページは、直接コンバージョンに関わる場所なので、ユーザーの利便性を考慮しつつ、商品画像などで購買意欲を向上させましょう。Shopifyを利用する際は、ユーザーがアクセスする全ページのデザインを考慮してください。

Shopifyで使えるおすすめのテーマ

Shopifyには具体的にどのようなデザインがあるのでしょうか。無料・有料、サードパーティ製のテーマについて詳しく解説します。

無料の公式テーマは種類が豊富で使いやすい

Shopifyのテーマストアには、無料で使えるデザインテンプレートが8種類公開されています。有料版と比べると機能性は劣りますが、シンプルなデザインをしており、運用後のカスタマイズもしやすいです。

Shopify専用のプログラムコードを活用すれば、自社製のオリジナルテーマも作成できます。無料ながら商品を一覧で表示したり、動画で訴求できたりするため、基本的な機能としては十分です。

以下の表で、無料公開されている公式テーマの特徴をご紹介します。

有料版は機能性が高くコンバージョンにつなげやすい

有料版は無料版と比べ機能性が高く、コンバージョンを意識した造りになっています。無料テーマにはない機能も搭載されているので、デモ動画などを見て自社にマッチしているか確認しましょう。

Shopifyの有料テーマは、日本円で2万円前後しますが、検索機能が優れていたりポップアップバナーを掲載できたりと便利な機能も多いです。デザインにも細かな違いがあるため、色々試してみてコンバージョン率のよいものを選びましょう。

最初は無料版で必要な機能やデザインを分析し、運営が軌道に乗ったら有料版に移行するのがおすすめです。ただし有料版は英語が使われていることが多く、国内向けに利用するのは困難です。国内市場で利用する際は翻訳作業が必要になるため、担当者の英語能力なども考慮しましょう。

サードパーティ製のテーマはデザインが独特

Shopifyのデザインは、公式だけでなくサードパーティ製も多くリリースされています。

公式テーマよりもコストが低く、1,500～7,000円前後で取引されることが多いです。themeforest（テーマフォレスト）というサイトでは、1,000種類近くのサードパーティ製のShopifyテーマがリリースされています。

サードパーティ製のデザインは、Shopifyの公式テーマではないため、仕様変更によって使えなくなる可能性があります。

公式テーマと見劣りしない機能性を持っているものの、公式版に比べ細かな調整ができないことも多いです。海外向けにリリースされているため、日本語に翻訳する手間もかかります。利用する際は、自社でカスタマイズできるかどうかも確認しましょう。

Shopifyのデザインで迷ったときの対処法

デザインの決め方自体は理解できても、やることが多すぎて具体的に何をすればよいのか分からないという方も多いのではないでしょうか。

そこで、Shopifyのデザインで迷ったときの対処法を解説します。

1. 専門家に依頼してアドバイスを受ける
2. アプリを活用して効率性をあげ

1. 専門家に依頼してアドバイスを受ける

Shopifyのデザインで迷ったときは、専門家に依頼するのも一つの手です。

Shopifyの開発事業者は、Shopifyについての知見が深く、運営に必要なアドバイスを行ってくれます。アフターフォローが充実しているところが多いため、初めてShopifyを利用するという方にも安心です。デザインについても、親身になって相談にのってくれます。

ただし、自社に合っていない事業者を選ぶとコストパフォーマンスが悪くなるため注意が必要です。特に高品質の国内商品を海外向けに販売したい場合は、専門家のサポートが重要になります。

Shopifyの開発会社は、Shopifyの運営実績が豊富で、ECサイト全体に精通しているところを選びましょう。

2. アプリを活用して効率性をあげる

Shopifyの関連ツールには、Shopifyのページデザインをカスタマイズしやすくしたり、商品画像にズーム機能を搭載できたりするアプリがあります。Webサイトの機能性やデザインの開発効率を上げる効果があるため、必要に応じて試してみましょう。

なかには、商品の検索機能を向上させたり、国ごとに通貨変換できたりするツールもあります。これらのアプリは有料版であることが多いですが、Webサイトの機能性を確実に上げるため、必要に応じて利用することをおすすめします。

Shopifyのデザインに強いフリーランス3名

Shopifyのデザインに迷ったときは、Shopifyのデザインに強いフリーランスに依頼するのもおすすめです。

まだまだShopifyの歴史自体が浅く、ノウハウを持った事業者が少ないため、既に実績のあるフリーランスに依頼する方がコストパフォーマンスが高いケースもあります。

会社の意向に縛られることなく、クライアントが求めるデザインを正確に再現できる点もメリットのひとつです。良質なパートナーシップを結べれば、料金や納期、アフターフォローなども柔軟に対応してくれます。

ランサーズには、Shopifyのデザインに強いフリーランスの方が多数在籍しています。ECサイトに精通している方ばかりなので、Shopifyの運営サポートを受けたいときにもおすすめです。自社コンセプトをデザインに落とし込むのが難しいという方は、ぜひご相談ください。

岸本 健勇さん｜【Shopify Experts】ECサイト構築・コンサル・納品後のサポートもご対応致します。

5-bit｜ShopifyExpertさん｜【Shopify専門】ECサイト構築・移行・運用・カスタマイズを支援します

クエビコ CUEBKOさん｜Shopify・カラーミー・Yahoo!・楽天・商品登録は経験10年！1万点以上のデータも可能

自社にあったデザインで売上を改善した企業の事例

最後に、自社コンセプトをもとにShopifyのデザインを改善した事例をご紹介します。実際にランサーズを利用したクライアント様の事例となりますので、Webサイトを改善する際の参考にしてください。

関西軽金属工業株式会社様は、以下のような課題を抱えフリーランスを活用して課題を解決しました。

Shopifyのデザインは自社のコンセプトに合ったものを選ぼう

Shopifyのデザインは、自社のコンセプトに合ったものを選びましょう。特に商品ページはコンバージョン率に直結するため、ユーザーの利便性を考慮しつつ、購入意欲を高める工夫が必要です。デザインだけにこだわるのではなく、機能性にも注目してください。

自社だけでデザインを決めるのが困難な場合は、開発事業者やアプリなども活用しましょう。ランサーズには、経験豊富なShopifyデザイナーが数多く在籍しているので、ECサイトの運営にお悩みの方はぜひご相談ください。