Shopifyでレビュー機能を実装する方法を考察

はじめに

今回は、Shopify でレビュー機能を実装する方法について考察していきます。

メタフィールドを利用する方法や、App proxy を利用する方法などを駆使して、レビュー機能を実装する方法について考察していきます。

それでは、頑張っていきましょう。

Shopifyのレビュー機能の定義について

まずは、Shopify のレビュー機能の定義からです。

Shopifyのレビュー機能は、オンラインストアで商品に対する顧客のフィードバックを集め、他の顧客が商品選びの参考にできるようにするための重要なツールです。この機能を効果的に活用することで、商品の信頼性を高め、コンバージョン率を向上させることが可能です。

かなり具体的に書くと、商品詳細ページにユーザーが投稿できるレビュー投稿機能と、そのレビューを表示できるアプリになります。

Shopifyにレビュー機能を実装するメリット

まずは、Shopify にレビュー機能を導入するメリットについて解説していきます。

レビュー機能を導入するメリットが無いと、考察する意味もあまり無いですからね。

Shopifyストアにレビュー機能を導入することは、単に顧客からのフィードバックを集めるだけでなく、ビジネス全体に多大な利益をもたらします。この機能は、オンラインショッピングにおける信頼性やコンバージョン率を向上させるための強力なツールです。以下に、Shopifyにレビュー機能を導入する主なメリットを解説します。

1. 顧客の信頼性向上

レビュー機能を導入することで、潜在顧客は他の購入者からの意見や評価を参考にすることができます。これにより、商品の信頼性が高まり、購入に対する不安が軽減されます。信頼できるレビューが多いほど、顧客は安心して購入を決断できるようになります。

2. コンバージョン率の向上

商品レビューは、オンラインショッピングにおける重要な意思決定要因です。ポジティブなレビューは、商品を魅力的に見せ、購入意欲を高める効果があります。実際、レビューが掲載されている商品は、そうでない商品に比べてコンバージョン率が向上することが多いです。

3. SEO（検索エンジン最適化）の強化

ユーザー生成コンテンツであるレビューは、SEOにも良い影響を与えます。Googleなどの検索エンジンは、新鮮で関連性の高いコンテンツを好むため、定期的に更新されるレビューがSEOスコアを向上させるのに役立ちます。これにより、検索結果での順位が向上し、オーガニックトラフィックが増加します。

4. 顧客のニーズを把握

レビューは、顧客の意見やニーズを直接反映する貴重なデータです。このフィードバックを分析することで、商品の改善点や新たなニーズを発見でき、商品開発やマーケティング戦略に役立てることができます。顧客の声を反映した改善は、顧客満足度を向上させ、リピート購入を促進します。

5. ソーシャルプルーフの強化

レビューはソーシャルプルーフ（社会的証明）として機能し、他の顧客がその商品を信頼し、購入したという証拠になります。これは特に新規顧客に対して大きな影響を与え、初めての購入を促す要因となります。また、ソーシャルシェア機能と組み合わせることで、レビューをSNSで共有し、さらに多くの潜在顧客にリーチすることができます。

ここまでで、Shopify にレビュー機能を導入するメリットについて解説しました。

次に、Shopify にレビュー機能を導入するデメリットについて解説していきます。

Shopifyにレビュー機能を導入するデメリット

一応、Shopify にレビュー機能を導入するデメリットについてもまとめていきます。

Shopifyのレビュー機能は、多くのメリットをもたらす一方で、導入や運用においていくつかのデメリットも存在します。これらのデメリットを理解し、適切に対処することで、レビュー機能をより効果的に活用できるようになります。以下に、レビュー機能を導入する際に考慮すべきデメリットについて解説します。

1. ネガティブなレビューの影響

レビュー機能の最も大きなリスクは、ネガティブなレビューが公開されることです。これにより、商品やブランドに対するイメージが損なわれ、売上に悪影響を及ぼす可能性があります。特に、初めて訪れた顧客にとっては、ネガティブなレビューが購入を躊躇させる要因となり得ます。

2. フェイクレビューやスパムレビュー

レビュー機能を導入することで、フェイクレビューやスパムレビューが投稿されるリスクが増加します。これらの不正なレビューは、他の顧客を誤解させるだけでなく、ブランドの信頼性を低下させる要因となります。不正レビューを防ぐためには、適切なモデレーションやフィルタリング機能が必要ですが、これにはリソースが必要です。

3. モデレーションの負担

レビューの内容を適切に管理するためには、モデレーションが不可欠です。レビューの承認や削除、不適切な内容のフィルタリングなど、モデレーションには時間と労力がかかります。また、適切な判断が求められるため、担当者のトレーニングも必要です。これにより、運用コストが増加する可能性があります。

4. 顧客の期待値が上がるリスク

レビューが公開されることで、顧客の期待値が高まることがあります。特に高評価のレビューが多い場合、顧客はその評価に見合ったサービスや品質を期待します。しかし、実際の体験が期待に達しなかった場合、ネガティブなフィードバックが返ってくるリスクがあります。これにより、顧客満足度が低下し、リピート率に影響を与える可能性があります。

5. 技術的な問題や導入コスト

レビュー機能をストアに導入するためには、プラグインやアプリの設定、テーマへの組み込みなど、技術的な作業が必要です。また、カスタマイズや最適化を行う場合には、追加の開発コストが発生します。これに加え、レビュー機能が適切に動作しない場合、顧客に不便を与え、結果的に売上に悪影響を及ぼす可能性があります。

ここまでで、Shopify にレビュー機能を導入するメリット・デメリットについてまとめました。

それでは次に、Shopify にレビュー機能を導入する方法について考察していきます。

Shopify にレビュー機能を実装する方法

Shopify にレビュー機能を実装する方法について考察していきます。

まずは、レビュー機能を実装するためのデータをどこに保存するかを考察していきましょう。

レビューのデータを保存する方法

まずは、productの Liquid オブジェクトを確認しましょう。

https://shopify.dev/docs/api/liquid/objects/product

以下が、Liquid のproductオブジェクトです。

{
  "available": true,
  "collections": [],
  "compare_at_price": "25.00",
  "compare_at_price_max": "25.00",
  "compare_at_price_min": "25.00",
  "compare_at_price_varies": false,
  "content": "<h3>Are you low on health? Well we've got the potion just for you!</h3>\n<p>Just need a top up? Almost dead? In between? No need to worry because we have a range of sizes and strengths!</p>",
  "created_at": "2022-04-13 14:46:16 -0400",
  "description": "<h3>Are you low on health? Well we've got the potion just for you!</h3>\n<p>Just need a top up? Almost dead? In between? No need to worry because we have a range of sizes and strengths!</p>",
  "featured_image": {},
  "featured_media": {},
  "first_available_variant": {},
  "gift_card?": false,
  "handle": "health-potion",
  "has_only_default_variant": false,
  "id": 6786188247105,
  "images": [],
  "media": [],
  "metafields": {},
  "options": [
    "Size",
    "Strength"
  ],
  "options_by_name": {},
  "options_with_values": [],
  "price": "10.00",
  "price_max": "22.00",
  "price_min": "10.00",
  "price_varies": true,
  "published_at": "2022-04-13 14:53:34 -0400",
  "quantity_price_breaks_configured?": false,
  "requires_selling_plan": false,
  "selected_or_first_available_selling_plan_allocation": {},
  "selected_or_first_available_variant": {},
  "selected_selling_plan": null,
  "selected_selling_plan_allocation": null,
  "selected_variant": null,
  "selling_plan_groups": [],
  "tags": [
    "healing"
  ],
  "template_suffix": "",
  "title": "Health potion",
  "type": {},
  "url": {},
  "variants": [],
  "vendor": "Polina's Potent Potions"
}

今回は、こちらのmetafieldsを使用していきましょう。

それでは、メタフィールドのデータ構造を考えていきます。

商品に対してレビューは複数回行われるため、以下のデータ構造でデータを作成するようにします。

{
  "reviws": [
    {
      "star": number,
      "title": string,
      "content": string,
    }
  ]
}

上記の形でメタフィールドを作成すれば、Shopify のストアフロントからレビューを表示することができそうですね。

それでは、メタフィールドの設定を行っていきましょう。

設定から、カスタムデータに移動しましょう。

商品を選択して下さい。

商品のメタフィールドを定義していきましょう。

右上の定義を追加するをクリックしてください。

以下の画面が出現します。

入力項目を埋めていきましょう。

今回は、以下のような形で入力項目を埋めました。

次に、タイプを選択するをクリックしてください。

JSONを選択してください。

JSONスキーマを入力していきましょう。

{
  "reviws": []
}

ここまで入力項目を埋めたら、右下の保存をクリックしましょう。

これで、productのメタフィールドの定義は終了です。

後は、Shopify のストアフロントからレビューのデータを取得してデータを表示させれば終了です。

これで、レビューの表示部分はできました。

次に、顧客がレビューを投稿できる機能を作成していきましょう。

レビュー投稿機能の考察

それでは次に、レビュー投稿機能について考察していきます。

Shopify のストアフロントから顧客の動作に応じてproductのメタフィールドの値を書き換える櫃予が有るため、app proxiesを使用することになるかと思います。

以下の公式ドキュメントを参照していきましょう。

https://shopify.dev/docs/apps/build/online-store/display-dynamic-data

以下に、App proxy についてざっくりとまとめます。

Shopifyで動的なストアデータを表示する方法：App Proxiesの活用

ShopifyのApp Proxies機能を利用することで、外部ソースから取得したデータをストア上で表示することが可能になります。これは、特定のShopifyリンクからリクエストを受け取り、それを外部のリンクへリダイレクトすることで実現されます。この方法を活用することで、動的なデータをマーチャントのストアに表示でき、柔軟なアプリケーションの構築が可能となります。

App Proxiesの基本的な動作

App Proxiesは、Shopifyストアの特定のURLパスを介してリクエストを受け取り、そのリクエストを外部サーバーへリダイレクトします。外部サーバーは必要なデータを処理し、その結果をShopifyストアに返します。これにより、ストアの訪問者は、実際には外部データを表示しているにもかかわらず、Shopifyドメイン内での一貫したユーザー体験を維持できます。

App Proxiesのセットアップ方法

App Proxiesの設定は、アプリを公開する前に行う必要はありません。アプリを公開した後でも、App Proxiesを追加または更新することが可能です。すでにインストールされているアプリには、プロキシURLの変更が自動的に反映されるため、個別のオンラインストアでURLを更新する必要はありません。

以下は、App Proxiesを設定する手順です。

1. パートナーダッシュボードでの設定

まず、Shopifyのパートナーダッシュボードにアクセスします。以下の手順に従って、App Proxiesを設定します。

1. パートナーダッシュボードにアクセス:

   • Shopifyのパートナーダッシュボードにログインし、「アプリ」セクションに移動します。

2. アプリの選択:

   • 設定したいアプリの名前をクリックして、アプリの詳細ページに進みます。

3. 設定の選択:

   • アプリの設定ページで「Configuration（設定）」をクリックします。

4. App Proxiesセクションの設定:

   • 「App proxy（アプリプロキシ）」セクションに移動し、「Set up（設定）」ボタンをクリックします。

2. プロキシURLの設定

次に、プロキシURLを設定します。これにより、特定のURLパスで受け取ったリクエストが外部サーバーに転送されるようになります。

1. Subpath prefixの選択:

   • 「Subpath prefix（サブパスプレフィックス）」のドロップダウンリストから、適切なプレフィックスを選択します。プレフィックスは、プロキシURLが開始される場所を指定します。

2. Subpathの入力:

   • 「Subpath」フィールドに、プロキシURLの具体的なサブパスを入力します。たとえば、/apps/example-proxy のような形式になります。

3. 変更の反映

プロキシURLを設定した後、これらの変更は自動的に既存のインストール済みアプリに反映されます。これにより、各ストアで手動でURLを更新する必要はありません。

App Proxiesの利便性

ShopifyのApp Proxiesは、外部データの表示を必要とするアプリにとって非常に有用な機能です。この機能を活用することで、アプリケーションの拡張性が高まり、マーチャントに対してより柔軟でダイナミックなソリューションを提供することが可能となります。

上記で、 app proxy についてざっくりと理解できたかと思います。

上記の app proxy を利用して、下記の metafieldSet の Graphql API を実行することになりそうです。

https://shopify.dev/docs/api/admin-graphql/2024-07/mutations/metafieldsSet

以下が、metafiledSetのサンプルコードです。

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      key
      namespace
      value
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
      code
    }
  }
}

app proxy を利用することで、Shopify のストアフロントからカスタムアプリの API を動かすことが可能です。

その API の中で、上記のmetafieldSetの API を動かして、productのメタフィールドを更新すれば、Shopify のレビュー投稿機能を作成できそうですね。

ここまでで、Shopify のレビュー機能の実装方法について考察しました。

後はカスタムアプリを作成すれば、Shopify でレビュー機能を実装することは可能だと思います。

ここからは、非エンジニアの方に向けて、Shopify アプリを用いてレビュー機能を実装する方法について解説します。

Shopify アプリを用いてレビュー機能を実装する方法

それでは次に、Shopify アプリを用いてレビュー機能を実装する方法について解説していきます。

今回紹介するのは、シンプルレビュー｜お手軽口コミという Shopify のレビューアプリです。

こちらのアプリについて解説していきます。

https://apps.shopify.com/sa-009-ur-review-app?locale=ja

シンプルレビュー｜お手軽口コミの機能について

ここからは、シンプルレビュー｜お手軽口コミの機能について解説していきます。

以下の情報が参考になりました。

https://unreact.jp/shopify-apps/sa-009-ur-review-app/guide

https://unreact.jp/blog/shopify-blog-seo-review

https://unreact.jp/blog/shopify-blog-how-to-review

https://unreact.jp/blog/shopify-review-app

https://unblog.unreact.jp/blog/hpp_e9s1d7ay

https://qiita.com/eijiSaito/items/59d7873f24facd468204

Shopify にレビュー機能を導入できる非常にシンプルなアプリです。

以下が、Shopify のアプリストアになります。

https://apps.shopify.com/sa-009-ur-review-app?locale=ja

こちらのアプリは、商品詳細ページにレビュー機能を実装できるアプリです。

デザイン性に優れたレビュー機能を、Shopifyストアに導入できます。

レビューされた商品を一覧で確認できます。

また、レビューの確認や返信・悪質なレビューの削除も行えるようです。

以下のようなデータをproductのメタフィールドに格納することで、こちらの機能を実装していると思われます。

{
  reviews: [
    {
      "star": number,
      "title": string,
      "content": string,
    }
  ]
}

また、アプリブロックのスキーマを使用することで、ノーコードで見た目のカスタマイズを行えます。

見た目を細かく調整できるのは嬉しいですね。

非常にシンプルにShopifyにレビュー機能を導入できるため、非エンジニアの方でカスタムアプリや app proxy を用いてレビュー機能を実装するのが難しい場合は、選択肢の一つに入ってくるかと思います。

https://apps.shopify.com/sa-009-ur-review-app?locale=ja

最後に

ここまでで、Shopify のメタフィールドや app proxy を用いてレビュー機能を実装する方法について考察しました。また、Shopify アプリを用いてレビュー機能を実装する方法についても紹介しました。

お疲れさまでした。