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

Shopifyでサイトを構築する際に、導入すべきアプリの機能概要から、使い方までを解説。

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

01/24/2020

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

Shopify(ショッピファイ)の最も魅力的な要素の一つとして、豊富なアプリを利用したカスタマイズ性の高さがあげられます。

これらはShopifyのパートナーエコシステムと呼ばれ、多くのパートナーが競ってShopifyアプリの開発・販売をShopifyプラットフォーム上で行うことで、様々な種類のAPPサービスが誕生しました。

パートナーエコシステムはShopifyがECカートとして勢いを伸ばした要因の一つといえるでしょう。世界175ヶ国で利用され、NO.1のシェア率を誇るShopifyには3,000を超えるアプリがあり、他のECカートと比較しても圧倒的に多くの追加機能を利用することができます。

※Shopifyのアプリストアには以下のカテゴリーがあり、ジャンルごとにアプリが並んでいます。

・Finding products(商品選定)
・Places to sell(販売チャネルの拡大)
・Store design(ストアデザインのカスタマイズ)
・Marketing(マーケティング/広告)
・Sales and conversion(売上改善施策)
・Orders and shipping(注文・配送)
・Inventory management(在庫管理)
・Customer support(カスタマーサポ-ト)
・Trust and security(セキュリティ)
・Finances(財務)
・Productivity(生産性向上)
・Reporting(レポート分析)

昨今ではShopify JAPAN(ショッピファイ ジャパン)によってローカライズが進んできており、日本国内でもShopifyの認知度は高まってきています。

しかしShopifyアプリに関しては国内向けにローカライズされておらず、使い方が分からないから利用できない・・・。といった声も多く存在しています。

今回は、そんなShopifyを使い始めた方々のためにShopifyを導入する際にインストールすべきアプリとその使い方について解説します。

英語がわからない方でも感覚的に理解できるよう、主要な使い方を画像つきで解説していきますので、是非チェックしてみてください。

Shopifyの詳細を知りたい方はこちらをチェック

あわせて読みたい:Shopify(ショッピファイ)とは?機能やメリット、使い方までを解説

 

Shopifyアプリを導入する際の選定方法

おすすめのアプリを紹介する前に、まずはサイトにアプリを導入する際の選定方法について考えていきましょう。

Shopify APPストアには3,000件を超えるアプリがあります。実際に素晴らしい機能を持ったアプリは沢山ありますが、良さそうなアプリをすべてダウンロードしたことで、かえって運用がうまくいかないくなってしまった・・。といった話もよく聞きます。

ダウンロードしたアプリが多いほどその分ユーザーは管理工数が増え、加えてサイト自体も重くなるなどの影響があるためです。

だからこそ、どのようなアプリを入れるべきかを考え、厳選したアプリをダウンロードする必要があります。

できればすべてダウンロードしたいですが、何かとやることの多いストア構築当初ともなると、運用工数を増やすのはリスクが高いと言えます。

だからこそ、サイト立ち上げ時はShopifyアプリの選定軸を決めて、必要最小限のアプリをインストールすることをおすすめします。

 

顧客体験が向上するアプリかどうか

ECサイトを構築するに辺り、最も重要なのは「そのアプリを導入して、結果的にユーザーが喜んでくれるかどうか?」です。

Shopifyには便利なアプリがたくさんありますが、導入時に最も必要なのは、サイトのクオリティを高める施策ではなく、顧客が感動しサイトを見てみたい。また再来訪したいと感じさせる施策です。

ShopifyでECストアを構築し運営を軌道に乗せるためには、ユーザーに自社サイトのファンになってもらう必要があります。

だからこそ、最初に導入するアプリもユーザーの購買体験を高める手助けをするアプリであることが望まれます。

もちろんサイトの運用方針によっては、以下で紹介するアプリもサイトにマッチしない可能性がありますので、上記を前提に記事を読んでいただければ、貴社サイトはより良いものになるはずです。

 

はじめに導入すべきアプリ一覧

今回は、「ECサイト構築時」というコンセプトでアプリをアプリ選定しているので、利用料金がそこまで高くなく、使い勝手がよいアプリを中心に掲載しています。

さらに商品ラインナップがそこまで多くなく、一人ひとりのユーザーとの接触頻度を高めて購買率を上げていきたいサイト運営者(マーチャント)をイメージしています。

※すべてダウンロードして、1万円いかない程度の費用感です。

【注意】

Shopifyアプリは英語の場合が多いです。主な機能は日本語で解説していますが、細かくサイトをみたい方は、GoogleChromeの翻訳機能を利用してみてください。

GoogleChrome翻訳

GoogleChromeでページを開いた際に右クリックすると英語のページを日本語に翻訳できます。

 

このページで紹介するアプリは以下となります。

①Page Speed Booster
②Change Image On Hover Effect
③Yotpo: Product & Photo Reviews
④Klaviyo: Marketing Automation
⑤Back In Stock: Customer Alerts
⑥Instagram Feed & Slider Pro
⑦lucky orange
⑧shopping for note

それでは、説明していきましょう。

①Page Speed Booster

Page Speed Booster_Shopify

アプリDLページ:https://apps.shopify.com/page-speed-booster

想定される利用料金:無料

 

ページスピードを改善し、直帰率を低下

Page Speed Boosterは、ユーザーの次のアクションを想定して、画像などのページコンテンツを先回りして取得(DL)してくれます。

これにより不要なローディングの時間を減らし、ユーザーの離脱率を下げることが出来るアプリです。ECサイトの構築当初はあれやこれやと画像を多く入れてしまいがちで、サイト全体が重くなってしまうことが多々あります。

そんな際に、Page Speed Boosterは、画像ローディングの時間を減少させ、ストレスが少ない購買体験を提供してくれます。

 

Page Speed Boosterの設定方法/使い方

Page Speed Boosterで設定しなければならないことは特になく、アプリをDLすればすぐに適用されます。

 

Change Image On Hover Effect

Change Image On Hover Effect

アプリDLページ:https://apps.shopify.com/gs-change-image-on-hover

想定される利用料金:$4.99/month

 

商品登録した画像をホバー表示してくれる

Change Image On Hover Effectはコレクションページ等で商品にカーソルを合わせると、商品の画像を変更してくれるアプリです。

ECサイトを運営する上で商品画像の重要性は様々なシーンで語られていますが、このアプリは商品画像の表示方法で他のサイトと差別化を図ることができるツールです。

change_image_on_hover商品画像にマウスを合わせると、別の画像に切り替わります。

例えばコレクションページの一つ一つの商品にカーソルを合わせると、画像が動いているような演出をしてあげれば、ユーザーは興味を持ってすべての商品にカーソルを合わせてくれるかもしれません。

一見地味な機能に見えますが、サイトの回遊率、滞在率を高め、商品を露出する機会を増やすことが可能となります。

 

Change Image On Hover Effectの使い方

Change Image On Hover Effectの使い方はとてもシンプルです。

Shopifyアプリストアからアプリをダウンロードします。

 

アプリDLページ:https://apps.shopify.com/gs-change-image-on-hover

 

ダウンロードしたら、管理画面に遷移しますので、configure productsでchange imageのボタンを押します。change image

 

その後、表示されている画像を選択すればOKです。

change image_2

選択した画像が、2枚めの画像として表示されます。

トップページやコレクション一覧などで表示された商品画像にカーソルをあわせて、商品が変わればOKです。

 

③Yotpo: Product & Photo Reviews

Yotpo

アプリDLページ:https://apps.shopify.com/yotpo-social-reviews

想定される利用料金:
50ユーザーまで無料
機能追加+50ユーザーまで$29/month

ユーザーが商品購入をする際の決め手となる口コミ。約八割のユーザーが、商品購入する前に事前情報(口コミ)をチェックしてから商品を購入するとも言われているほど、レビューは商品購入時の重要な指標となります。

そんなレビューアプリとして、特に単一製品を扱っているECサイトにおすすめなのがYotpo: Product & Photo Reviewsです。

 

ソーシャルにも強い、多機能レビューアプリ

yotpoが他のレビューアプリと比較して秀でている大きな特徴として、

・レビューにイメージを添付できる。
└ユーザーがレビューを書く際に画像を入れることが出来ます。使用中の写真などを掲載してもらえば、購入後のイメージが湧きやすくなり、口コミがユーザーの購入意欲を高めてくれます。

・商品購入後にレビュー作成依頼のメールを送ることが出来る。
└商品購入した際のお礼メールに、レビューの作成依頼を送ることで、レビュー作成の可能性を高めてくれます。

・SNSとの連携でユーザーの興味を引きつけることが出来る。
└溜まったレビューをFacebookやツイッターなどのソーシャルメディアで拡散することができます。

ユーザーからの支援が重要な昨今のECサイト運営にて、デザイン性に優れ、拡散力も高いYotpoは、レビューツールとしてとても重宝するでしょう。

 

複数の商品を扱っている場合は注意が必要

機能面は非常に素晴らしいYotpoですが、

yotpoは、機能追加および従量での課金での支払いとなります。

月間の注文数が50件かつベーシックな機能のみ使う場合は29$/月となりますが、機能追加および注文数が増加した場合の金額は大きく跳ね上がるので、特に商品数が多いECサイト運営者は注意が必要です。

 

yotpo_料金体系

※プラン表の翻訳画像です。登録件数による従量課金となります。

 

商品が多く、Yotpoを導入するにはハードルが高いと感じる方は、Shopifyが提供するProduct Reviewsを使うべきでしょう。シンプルなレビューアプリですが、無料で使いやすいため、こちらもおすすめです。

 

Yotpo Reviewsの使い方

ここでは、yotpo Reviewsの簡単な使い方を解説していきます。

ダウンロードすると、以下のように商品ページの下部にユーザーレビューを書いてもらうスペースが表示されます。

yotpo_レビューページ

フリープランの場合、管理画面で利用するおもな機能は以下となります。

■Moderation

moderationのReview Q and Aを選択すると

yotpo Q&A Reviewの一覧が表示されます。

さらに、Push機能を利用することで、ツイッターやFacebook上で商品とReviewを表示することができます。SNSのアカウントを運用しているECサイトの運営者にとって、コンテンツ探しの手助けをしてくれるこの機能は、非常に使い勝手が良いと言えるでしょう。

 

Twitter_レビュー

 

■Collect Reviews 

商品の購入後にユーザーにサンキューメールを送りつつ、レビューを書いてもらう機能です。

例えば、購入後〇〇日後に送信などの設定をしておけば、商品が届いて実際に利用したタイミングでメールを送ることが出来、レビューを依頼できます。

レビューの収集

 

Klaviyo: Marketing Automation

Klaviyo: Marketing Automation

アプリDLページ:https://apps.shopify.com/klaviyo-email-marketing

想定される利用料金:250コンタクトまで無料

ユーザーのステータスに合わせてメール配信することで購入率をあげる

メールテンプレート_KlaviyoKlaviyoメールテンプレート画面

 

KlaviyoはShopifyの顧客情報と連動しており、カゴ落ちや購入から〇〇日以上といったセグメントを区切ってユーザーにメール通知を行うことができます。

これにより、サイトから離脱しているユーザーを引き戻すことができるため、サイトの購買率を引き上げるサポートをしてくれます。

 

Klaviyoの使い方

Klaviyoをダウンロード後、lists & segmentsをクリックしてページに遷移し、画面右上のCreate List/Segmentsボタンをクリックします。

lists & segments一覧

 

List=外部の顧客データのインポートor既存顧客データのさらなる細分化

segments=カゴ落ちや購入日から〇〇日などのセグメントごとにユーザーを分類することが出来ます。

続いて、作成したセグメントにメールを送る設定をしていきます。

左側メニューのCampaignメニューを選択すると、キャンペーンを作成できます。

Klaviyo_Campaign

 

Back In Stock: Customer Alerts

Back In Stock: Customer Alerts

Back in stock 料金体系

アプリDLページ:https://apps.shopify.com/back-in-stock

想定される利用料金:
Free (5/月まで)
$19/month

 

商品の再入荷をユーザーにメールで通知

ローンチしたてのサイトの場合、特に在庫のコントロールが難しいので商品がサイトになくなり機会損失となる可能性が高いでしょう。

そんな時Back In Stockを利用すれば、商品の再入荷をユーザーを通知できます。依然としてユーザーがあなたの商品を購入したいと考えていれば、通知を促すことで商品購入につなげることが出来るかもしれません。

 

Back In Stockの使い方

Back in stockをダウンロードすると、すぐに在庫が切れている商品の詳細ページに、タブが表示され、タブをクリックすると以下の表示が現れます。

Back in stock タブの表示

※商品購入が可能になったタイミングでメールを受信するといった内容です。日本語への設定ができます。

 

タブやフォームのデザインを変更するには、Customizeにて、それぞれ編集が可能です。

back in stock カスタマイズ

※Google Chromeの場合、右クリック「日本語に翻訳」で英語ページを日本語訳できます。

 

⑥Instagram Feed & Slider Pro

Instagram Feed & Slider Pro

Instagram Feed & Slider Pro

アプリDLページ:https://apps.shopify.com/instafeed

想定される利用料金:$3.99/month

Instagramの投稿画像をサイトに表示して商品認知を図る

SNSとの連携はサイトの認知度を高める上で重要な要素の一つです。

Instagram Feed & Slider Proは投稿画像をShopifyのページに表示させることで、サイトのコンテンツが豊富になり、ユーザーにとって見ていて楽しいサイトと感じさせる手助けをしてくれます。

 

Instagram Feed & Slider Pro

※デモサイトより。Instagramの投稿をサイトに表示してくれます。

Instagram Feed & Slider Proの使い方

アプリストアでダウンロードを完了すると、下記のページに遷移します。

 

Instagram Feed

FEED TITLE:タイトル

POST SPACING:幅

ON POST CLICK:画像をクリックした際の表示

NUMBER OF ROWS:列の数

NUMBER OF COLUMNS:表示画像の数

YOUR INSTAGRAM ACCESS TOKEN:インスタグラムのアクセストークン

→以下URLの「Generate Access Token」ボタンを押おすと、トークンが表示されます。

https://instagram.pixelunion.net/

上記を入力後、Publishを押すと連携が完了です。

 

lucky orange

lucky orange

luckyorange

アプリDLページ:https://apps.shopify.com/lucky-orange

想定される利用料金:$10/month

 

来訪したユーザーの動きを可視化して、サイトの課題を分析

lucky orangeはヒートマップツールとして、ユーザーがサイトのどの部分を重点的に見ていたのかを分析できるツールです。

よく見られているセクションとあまり見られていないセクションが明確にわかるため、サイト内の課題を調査する際に非常に重宝します。

・来訪したページ

・離脱したページ

・ページ内でのユーザーの動き

 

lucky orangeの使い方

アプリをダウンロードすると管理画面でユーザーの計測が始まります。

luckyorange_管理画面

管理画面の設定部分で日本語への設定も可能です。

主に使用する機能としては、ヒートマップとレコーディング機能があります。

 ①ヒートマップ

ヒートマップを利用したい場合は、メニューの「ヒートマップ」に遷移し、URL記入部分に調査したいページのURLを入力します。

lucky orange_heatmap

ヒートマップには3種類の設定があります。

■Clicks
クリックを可視化

■Moves
マウスの動きを可視化

■Scrolls
ユーザーがページをどこまでスクロールしているかを可視化

上記の3パターンを選択して課題を分析することができます。

image-90

②レコーディング

レコーディング機能では、

・来訪ページ

・離脱ページ

・サイト内での実際の動き

といったユーザー個別の動きを判別できます。

実際のユーザーの導線がわかるので、サイトコンテンツの設計などを考える上で非常に役立ちます。

luckyorange_レコーディング

※プレイボタンを押すと、ユーザーの実際のマウスの動きを見ることができます。

レコーディング_luckyorange

※▷を押すと動画が再生します。

 

⑧shopping for note

shopping for note

アプリDLページ:https://apps.shopify.com/shoppingfornote

想定される利用料金:無料

 

note上でShopifyの商品詳細が表示出来る

shopping for noteを利用すると、以下のようにShopifyの商品をnote上でカードタイプで表示することができます。

shoppingfornote

 

アプリをダウンロードし、商品ページのURLを貼るだけ

shopping for noteは特に設定が必要なく、アプリをダウンロードしShopifyの商品ページをnoteに貼り付けるだけでOKです。手軽に使えるので、ブログ等のコンテンツをnoteに投稿する際などに利用するユーザーが多く、商品購入率を高めてくれます。

 

アプリを導入する前に運用戦略を練ることが重要。

この他にも、レコメンド機能や広告運用系のアプリなど、あれば便利な機能はまだまだあります。時間をかけるのであればチャットアプリをダウンロードしても良いでしょう。

さらに、ShopifyのエンタープライズプランであるShopify Plusを利用すれば、Shopify Flowなどの独自のアプリを使うことも可能です。

あわせて読みたい:Shopify Plusとは?通常プランとの機能の違いを解説

しかし、重要なのはダウンロードしたアプリの機能を十分に使いこなせるかどうかです。今回紹介したアプリたちは、サイトのフロント部分ではなく見えない部分の施策に重きをおいたアプリが中心となっており、一度設定すれば都度作業をしなくてもマーケティングの手助けをしてくれます。

外観を整えることもちろん、ユーザーとの接触頻度を増やせるようなアプリを導入することで、顧客満足度が高まります。

ECサイトを構築する際に、実際にどんな運用をしていくのかを想定しユーザーの導線をしっかりとイメージしてから、アプリが本当に必要かどうか検討してみてください。

 

トランスコスモス技術研究所のアプリ開発

 

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

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

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

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

 

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

 

Shopify アプリ開発

 

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

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

相談する

 


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

お問合せ


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

 

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