Shopifyをカスタマイズする前に必読！カスタマイズで失敗しないための3つの考え方

Shopifyをカスタマイズをする時に、「どんなテーマにすれば良いかわからない」「カッコ良い商品ページを作ったが売れるかどうか分からない」「これでいいのか自信を持てない」とお悩みではないでしょうか。

せっかくカスタマイズしても、本当に売上に繋がるのかが心配になりますよね。そこで、本記事では筆者のネットショップ店長10年の経験をもとに、Shopifyをカスタマイズする前に、まずやるべきことをご紹介します。あわせて具体的なカスタマイズ方法もお伝えしますので、ぜひ最後までお読みください。

Shopifyのカスタマイズでできること

この記事をご覧の方は、「Shopifyをカスタマイズすることで、他店舗との差別化を図りたい」、「売上を向上させるために、思わず購入したくなるようなデザインにしたい」と考えているのではないでしょうか？

BASEやSTORESなど、DtoC（Direct to Consumer）事業を始めるのに最適なカートシステムは数多くありますが、オリジナリティがあるサイトを作るには、Shopifyがおすすめです。

DtoCは消費者直接取引と訳され、自社で企画・製造した商品を直接お客様に販売をするビジネスモデルのことです。Shopifyではデザインをカスタマイズすることができるため、生産者の想いをショップ上で表現することができます。

しかし、自由度が高いが故に、構築する側の「独りよがりのサイト」になってしまう可能性があります。顧客目線にたったカスタマイズをしなければ、かえって使いにくいサイト、分かりにくいサイトになってしまうかもしれません。

そこで、Shopifyのカスタマイズを行う前にやるべきことを3つご紹介します。これを実行することで、独りよがりにならないサイトを作成し、売上向上につなげていきましょう。

Shopifyでカスタマイズをする前にやるべき3つのこと

Shopifyでカスタマイズをする際は、まず以下の3つの観点を明確するステップが欠かせません。

1. ストアコンセプトを確認する
2. 顧客層を理解する
3. 商品の打ち出し方を考える

1. ストアコンセプトを確認する

Shopifyをカスタマイズする前にやるべきことの1つ目は、「ストアコンセプトを確認する」ことです。

ストアコンセプトとは、運営しているお店がお客様に何を提供し、何を実現したいかということを示したものです。特にオープンから間もないお店では、「コンセプトは特に決めていない…」という声が聞こえてきそうです。もしそうであれば、一度、お店のスタッフと一緒に考えてみると良さそうです。

例えば、食品を扱っているお店であれば、お客様に食べてもらったときに、どんな気持ちになっていただきたいのか。サービスを提供しているお店であれば、お客様からどんな感謝の言葉をいただきたいのか。このような問いかけの中に、ストアコンセプトを構築するヒントが入っているはずです。

これらを端的な文章でまとめれば、ストアコンセプトが完成します。まずはスタッフと共通認識を持っておくようにしましょう。ストアコンセプトを実現するためにShopifyで店舗を作り、よりお客様に満足していただくためにカスタマイズを行うという順序を改めておさえておく必要があります。

2. 顧客層を理解する

お店をご利用いただいているお客様について、どこまで把握しているでしょうか？

たとえば、以下のような要素を踏まえただけでも、典型的なユーザー像であるお客様のペルソナやお客様ニーズが推測可能です。

• 年齢層は若いお客様が多いのか、それとも中高年が多いのか？
• 店舗をご覧いただく際のデバイスは、パソコンが多いのか、スマホが多いのか？
• 商品のお届け先はご自宅用が中心か。それともご贈答用が多いのか？

ネットショップはお客様に直接お会いできません。そのため、お客様のアクセス状況や購買動向を分析し、お客様のペルソナやお客様ニーズを推測する必要があります。

明確なユーザー像を把握した上で、ご利用されているお客様のためにShopifyをカスタマイズしていきましょう。お客様を理解することで、自ずとどの様な方向性でカスタマイズしていくべきかが見えてくるはずです。

3. 商品の打ち出し方を考える

店舗全体のストアコンセプトを決め、お客様像をつかむことでカスタマイズの方向性が見えてきました。最後にやるべきことは、商品の打ち出し方を考えることです。

ストアコンセプトとも紐付きますが、提供したい商品やサービスをどのようにお客様へご提案するのか。提案方法や接客方法を考えていきましょう。

もし目の前にお客様がいらっしゃるとしたら、どのように接客をしますか？
「接客なんてできません・・・」そう思う方がいるかもしれません。

接客のテクニックはもちろん大切ですが、本質的に重要なのは、お客様が利用していただくことで享受できるベネフィットを、丁寧にお伝えすることです。

ネットショップでは、実際にスタッフがお客様に接客をすることはできません。その代わりを担ってくれるのが、商品ページです。先に考えたストアコンセプトやお客様像を捉えながら商品ページを作っていき、より的確に伝えるためにカスタマイズを進めていきましょう。

Shopifyのテーマをカスタマイズする方法

Shopifyでテーマをカスタマイズをする際は、以下の手順で行います。

1. テーマを決定する
2. テーマエディタを使ってカスタマイズする
3. テーマコードを編集する

1. テーマを決定する

まずストアコンセプトを表現するにふさわしいテーマを選びます。管理画面から「オンラインストア」をクリックし、テーマライブラリーを確認しましょう。テーマ設定を終えると、店舗のトップページや商品ページの大枠が決まった状態でになります。

テーマは無料と有料のテーマから選べます。無料のテーマは大きく分けると9種類で、各々2〜4つのスタイルに分かれています。また、有料のテーマは、アパレル、おもちゃ、家電など、業種ごとにカテゴライズされています。

その中からストアコンセプトに合ったものを選ぶと良いでしょう。テーマは全部で235種類（2021年5月21日時点）と豊富です。どのテーマを選択すべきか迷った場合には、先に決めたストアコンセプトを思い出しましょう。

例えば、洗練されたイメージのお店にするのであれば、写真をメインで見せるテーマが良いかもしれません。色は黒や金色など高級感を感じさせる色合いを使うことになるでしょう。

一方で、ストアコンセプトが親しみやすいイメージであれば、商品を実際に使っている写真を多用しつつ、作り手のこだわりを伝えやすくいカラム（段組）のテーマが良いでしょう。ストアコンセプトが明確であれば判断軸が明確ですので、お店にあったテーマを選ぶことができるはずです。

2. テーマエディタを使ってカスタマイズする

テーマライブラリにあるカスタマイズをクリックすると、テーマや商品ページのカスタマイズなどができます。テーマエディタはHTMLやCSSなどのコーディングの知識がなくとも、直感的に画像登録やテキストの追加ができる設定になっているため、初心者の方でも安心して設定変更が可能です。

テキスト・商品説明文

スライドショー内のテキスト変更や商品説明文の追加が可能です。また、フッター部分には店舗名や会社概要、他ページへの内部リンクを設置することもできます。

商品画像・店舗ロゴ

画像の追加や店舗ロゴの登録もテーマエディタの画面から行います。よりカスタマイズを進めたい方は、配色やフォントスタイルをここから変更しましょう。なお、ここでも最初に行った、ストアコンセプトやお客様層を意識することが重要です。

フォント・フォントサイズ

フォントサイズは対象となるお客様にあっているか？文字の色は読みづらくなっていないか？実際にお客様へ接客をするつもりで、気を遣いながらページを作っていくことが大切です。

せっかくテーマが決まったとしても、フォントや色合いによって店舗イメージは大きく変化してしまいます。全体を常に意識しながら、細部を作り込んでいきましょう。

3. テーマコードを編集する

テーマエディタを使ってもカスタマイズしきれない場合は、実際にコードを編集すればカスタマイズ可能です。しかし、その場合はHTMLやCSSなどのコーディングの知識に加え、Shopify独自のテンプレート言語であるLiquidの習得が必要となることが多いです。

編集を行う前にバックアップを取ってからカスタマイズすると、うまくいかなくても元に戻すことができます。必ずバックアップを取りましょう。

なお、カスタマイズを行うことで他店舗と差別化を図りたいものの、ちゃんとコーディングができるのかが不安という方は、フリーランスに外注を検討するのも一考です。

Shopifyの構築・移行・運用支援サービス

Shopifyの商品ページをカスタマイズする方法

商品ページは、扱っている商品やサービスをお客様が検索し、来店されるのが商品ページです。お客様のペルソナ（典型的なユーザー像）やお客様ニーズに応え、お客様を接客できるように作り込みましょう。

Shopifyで商品ページをカスタマイズをする際は、以下の手順で行います。

1. タイトル（商品名）のカスタマイズ
2. 説明（商品説明文）のカスタマイズ
3. メディア（商品画像）のカスタマイズ
4. ページタイトル（メタタイトル）と説明（メタディスクリプション）のカスタマイズ

1. タイトル（商品名）のカスタマイズ

型番商品であればその品名、オリジナル商品であればその名称を入力していきます。注意すべき点は、お客様がどんなキーワードで入力をするかを考えることです。オリジナル商品であればあるほど、その名称を知っているお客様は少なくなるからです。

例えば、「手作り佃煮」と商品名に登録しても良いのですが、「ご飯のおとも」というキーワードを商品名に入れておくことで、お客様に見つけていただく可能性が広がります。このように、お客様がどんなキーワードで検索をするかを意識して、記載していきましょう。

2. 説明（商品説明文）のカスタマイズ

商品説明文はお客様に商品の良さを伝える部分です。ここでは商品のスペックとベネフィットを記載しましょう。

各商品には以下のような内容を記載します。

スペックとベネフィットの違いは、スペックは「商品」が主語で、ベネフィットは「お客様」が主語になることです。スペックでは商品についてお客様に知っていただきたい情報を示していきます。商品について詳しく記載があれば、問い合わせを減らす効果に加え、競合商品との違いを明確にすることもできます。

一方、スペックばかりが記載されていると、どうしてもお客様はつまらなくなってしまいます。専門用語が並ぶほど、直感的に理解しづらくなるものです。そのため、ベネフィットの記載が必要となるのです。

もし「お客様の心を動かすような、うまい文章が書けないときには、最初に考えたストアコンセプトや商品の打ち出し方を振り返ります。

お客様に何を提供したいのか、どんな気持ちになっていただきたいのか。そして、お礼の言葉で今まで頂いた言葉はどんなものだったか。これらを思い出してみましょう。スタッフや店長の声として、純粋な感想や想いを記載するのも一案です。

3. メディア（商品画像）のカスタマイズ

メディアの部分で商品画像がアップロードできます。商品説明文を読まずに、画像だけを閲覧して購入するお客様のために文字だけの画像を作り、アップロードする方法もあります。

画像の編集ソフトはIllustrator やPhotoshopが有名です。ただし、操作ができるスタッフが限られている場合、Canvaなどのデザイン作成ソフトを使えば、手軽に画像への文字入れができるはずです。

4. ページタイトル（メタタイトル）と説明（メタディスクリプション）のカスタマイズ

商品管理画面の一番下にあるのが「検索結果のプレビュー」という部分。これは、検索結果に表示される内容となります。「ページタイトル」の欄は青字の大文字で表示され、「説明」の欄が検索結果のテキストで表示される部分です。

先ほどの商品説明文でもありましたが、検索されたいキーワードを想定して設定していきましょう。検索された際にお客様が探していたものと一致していることを、瞬間的に認識していただく必要があります。そのため、想定するキーワードを散りばめていき、検索対策を行なっていきましょう。

買いやすさと信頼性を高める3つのカスタマイズ

ここからは、お客様が安心してお買い物していただくためのカスタマイズや、お店の信頼性を高めるためのカスタマイズのポイントをご紹介します。

1. 購入ボタンのカスタマイズ
2. お問い合わせページのカスタマイズ
3. 商品レビュー機能の追加

1. 購入ボタンのカスタマイズ

購入ボタンはお客様が購入する際に必ずクリックするボタンです。お客様が欲しいと思った瞬間にスムーズに購入ボタンに進めるように、表示レイアウトや色合いをカスタマイズしていきましょう。

購入ボタンのレイアウトスタイルと、購入ボタンをクリックした後のアクションは3通りから選択可能です。また、管理画面のオンラインストア上にあるプラスのアイコンをクリックすると、新しく購入ボタンを作成することができます。

2. お問い合わせページのカスタマイズ

Shopifyでお問い合わせページを作成・カスタマイズをする際は、以下の手順で行います。

1. 管理画面のオンラインストアからページをクリック
2. 「ページを追加」のアイコンをクリックしてテーマのテンプレートの「page.contact」を選択
3. ページのタイトルとして、「お問い合わせ」などと記載

4. 管理画面で「オンラインストア」→「メニュー」から、「フッターメニュー」もしくは「メインメニュー」のどちらをか選択して作成したページをストア上で表示させる
5. 「メニュー項目を追加」をクリックし、「名」の欄に「お問い合わせ」と入力
6. 「リンク欄」ではページ→お問い合わせを選択

一連の操作により、「フッターメニュー」もしくは「メインメニュー」にお問い合わせページへのテキストリンクが生成されます。

3. 商品レビュー機能の追加

お客様が商品を購入する際に、すでに購入済みのお客様によるレビューは気になるものです。お店側としても、商品を購入した後にレビュー投稿は販売促進に役立ちます。

商品レビューの追加とカスタマイズには「Opinew Product Reviews App UGC」のアプリを導入しましょう。

このアプリをインストールすることで、レビューの書き込みが可能となり、商品の信頼度を高めていくことができます。

「Opinew Product Reviews App UGC」の公式サイトで詳細を確認する

Shopifyのカスタマイズに使えるアプリ7選

ここからはShopifyのカスタマイズに欠かせないアプリを7つご紹介していきます。

1. オリジナリティあるテーマや商品ページを作れる：Shogun Landing Page Builder
2. 商品画像を拡大させる：All In One Product Zoom
3. お客様の国の現地通貨に自動変換する：BEST Currency Converter
4. 商品検索をスムーズにする：Product Filter & Search
5. 関連商品をカートに表示する：Shop The Look
6. 送料設定をより詳細にする：Shipping Rates by Parcelify
7. ラッピングなどのギフト設定が可能：One Click Upsell

1.オリジナリティあるテーマや商品ページを作れる：Shogun Landing Page Builder

Shogun Landing Page Builderは、Shopify上の商品ページやブログなどのデザインをカスタマイズできるアプリです。直感的に操作ができるので、HTMLやCSSのコーディング知識は不要です。無料、有料のテーマを問わずカスタマイズができるため、非常に汎用性が高いアプリです。10日間の無料お試し期間があります。

「Shogun Landing Page Builder」の公式サイトで詳細を確認する

2.商品画像を拡大させる：All In One Product Zoom

All In One Product Zoomは商品画像を拡大して表示させるアプリです。ズームタイプは3つの中から選択が可能です。

商品特性に応じてズームの方法を選定しましょう。なお、画像サイズはズームにしても画質が荒くならないように、500px以上の画質サイズがある写真を用意するのがおすすめです。3日間の無料お試し期間があります。

「All In One Product Zoom」の公式サイトで詳細を確認する

3.お客様の国の現地通貨に自動変換する：BEST Currency Converter

BEST Currency Converterはお客様にあった通貨表示に変換してくれるアプリです。海外のお客様へ販売をする機会が多いお店は、利用することをおすすめします。

お客様の所在地に応じて、通貨を自動で変換してくれるのが最大のメリットです。日本円から他国の通貨に換算をする手間が省けます。

フリープランとエリートプランがあります。外国からの注文があるかわからない場合や、決められた国からしか注文が来ない場合は、まずはフリープランを検討しても良いかもしれません。

「BEST Currency Converter」の公式サイトで詳細を確認する

4.商品検索をスムーズにする：Product Filter & Search

Product Filter & Searchはお客様が店舗内での商品検索をサポートするアプリです。商品検索時に絞り込みで検索することが可能となるため、家電などの型番商品を扱うお店や、アパレルや化粧品など、商品点数が多いお店はアプリの導入を検討してみるとよいでしょう。14日間の無料お試し期間があります。

「Product Filter & Search」の公式サイトで詳細を確認する

5.関連商品をカートに表示する：Shop The Look

Shop The Lookはアパレルのショップにある商品画像で、モデルが着用している服やバックなどを一回でカートに追加できるアプリです。お客様が1アイテムごとに商品ページを調べ、カートに追加していく手間が省けるため、コンバージョン率の向上が期待できます。14日間の無料お試し期間があります。

「Shop The Look」の公式サイトで詳細を確認する

6.送料設定をより詳細にする：Shipping Rates by Parcelify

Shipping Rates by Parcelifyは送料に細かい条件をつけて設定できるアプリです。Shopifyでの送料設定の画面では、都道府県や重量、お買い上げの合計金額で送料の料金設定が可能です。しかし、Shipping Rates by Parcelifyであれば、以下のようなきめ細かい設定が可能となります。なお14日間の無料お試し期間があります。

1．冷蔵、冷凍による送料の設定
2．離島や山間部など、通常配送料金に追加料金が発生する場合の設定
3．○点以上購入で送料無料にするなど、送料を使った販売促進

「Shipping Rates by Parcelify」の公式サイトで詳細を確認する

7.ラッピングなどのギフト設定が可能：One Click Upsell

One Click Upsellは、商品購入時にアップセルやクロスセルを提案するアプリです。1人あたりの買い上げ点数と単価を上げる施策として、アップセルやクロスセルは非常に有効です。14日間の無料お試し期間があります。

「One Click Upsell」の公式サイトで詳細を確認する

Shopifyのカスタマイズに強いフリーランス

Shopifyのカスタマイズをする前に、ストアコンセプトや顧客層、商品の打ち出し方を整理しましょう。これらが明確になることで、どのようにカスタマイズを進めていけば良いかが明確になります。

一方で、ストアコンセプトは明確であっても、

• 商品ページの更新が間に合わない
• カスタマイズの方法を調べるのに時間がかかる
• デザイナーやコーダーがおらず、カスタマイズできていない箇所がある

こんなお悩みがあるかもしれません。その場合は、外注を検討してみましょう。

Shopifyの構築・移行・運用支援サービス

Shopifyのカスタマイズでより喜ばれるお店を構築しよう

ランサーズには、Shopify Japanの教育プログラムを修了したShopify パートナーが200名以上（国内最大級）登録しています。さらに、個人事業主では日本に5名しかいないShopify Expertsが2名在籍しています。Shopifyのカスタマイズに強いフリーランスも多数在籍しており、技術的なサポートが可能です。

Shopifyのカスタマイズを通じて、よりお客様に喜んでいただけるお店を構築していきましょう。