【Shopifyアプリ調査】商品レビューアプリの最適解見つけた件

## はじめに
お久しぶりです！
Shopifyマスターのよしのりです。

最近のShopifyのストアにレビューアプリを導入する機会があり、その際に商品レビューアプリの最適解を見つけたので皆さんに共有しようと思います。
最後まで読んでいただけると幸いです！

## この記事の内容
- 商品レビューアプリとは
- レビューアプリの紹介
- 最適解は...？　→ （結論：らくらく商品レビュー｜リテリア Review）
- らくらく商品レビュー｜リテリア Reviewの導入方法
- らくらく商品レビュー｜リテリア Reviewでできること
- 終わりに

## 商品レビューアプリとは
商品レビューを活用している代表的なECサイトとしてAmazon.comが挙げられます。
誰しも、Amazon.comで商品を買う際は一度はレビューを参考にすると思います。
私も、何か商品を買うときにはレビューを見まくります。
レビュー調べ過ぎて、気づけば1時間くらい時間が経っていることもザラにあるくらいです...。

商品レビューアプリとは、この商品レビュー機能をShopifyに追加するためのアプリです。
商品レビュー機能をストアに追加することにより、商品に対して顧客が抱く疑問を解消できたり、商品の信頼性を向上させることができ、結果的に売上の向上につながる可能性があります。
ストアの管理に余裕のある方や、売上をさらに伸ばしたいと考えている方は商品レビュー機能をShopifyストアに追加することを推奨します！

## レビューアプリの紹介
Shopify app store に公開されているレビューアプリをいくつかご紹介しようと思います。
（個人的によく見かけるアプリをピックアップいたしました。）

### Product Reviews
こちらのアプリは、Shopifyが公式で出しているアプリになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/f7dd5412-3826-0ef1-36b6-5f354114ae34.png)

**メリット**
- 無料で機能を使用できる
- 公式が出しているという安心感

**デメリット**
- 管理画面の言語は英語にのみ対応
- レビューの管理が難しい（商品別管理などが少々難しい印象）
- 入力フォームがイマイチ...（エンジニアの方がいれば、cssなどでカスタマイズ可能かな）

顧客側の入力フォームは以下の画像の通りです。
入力フォームのスタイルの拡張性は、スターの色、スターのサイズ、レビューがない時に表示される文言の変更などになります。
以下の画像は全て英語で表示されていますが、管理画面側の設定で対応する文言を日本語に変更することで日本語化することは可能なようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/e6140829-869b-9d6b-f882-fae5d3fa1b21.png)

### Product Reviews + UGC with Q/A
HulkApps.comというアプリ会社が出されているアプリになります。
こちらのアプリ会社は、他にもさまざまなアプリを出されているため、HulkApps.comの他のアプリをご使用されている場合にはこちらのアプリがおすすめです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/ba5b5860-e351-fcb5-4e46-5292731acf77.png)

**メリット**
- 管理画面が日本語対応している
- 多彩なカスタマイズ性

**デメリット**
- 開発ストアに無料でインストールできない
- アプリ月額$9.99

## 最適解は？
私の中でのレビューアプリの最適解は、『らくらく商品レビュー｜リテリア Review』というアプリになります。
こちら、以前にComing Soonアプリの調査記事にて紹介したリテリアというアプリ制作会社が出しているアプリになります。
メリット・デメリットについて解説いたします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/c7516622-2faa-24cf-0a76-53cdd7c683bd.png)

https://apps.shopify.com/review-6?locale=ja&from=qiita

**メリット**
- スタイルのカスタマイズ性が高い
- 商品ごとにレビューを管理できる
- 管理画面が日本語対応している
- トラブルが発生した際には、日本人のエンジニアがサポートしてくれる！
- 操作が楽（ボタンワンポチでレビュー機能を即追加できました！）
- 開発ストアに無料でインストールできる（お試しインストールみたいなことが可能です）

**デメリット**
- 月額$9.99 かかります

海外製の商品レビューアプリを調べてみると、月額$9というのは平均的な価格帯ですので大きなデメリットではないかなと考えています。

## らくらく商品レビュー｜リテリア Reviewの導入方法
導入方法について解説します。
手順は以下の通りです。

1, ショッピファイのアプリストアで「らくらく商品レビュー｜リテリア Review」と検索し、赤い四角で囲まれているアプリを選択します。
![スクリーンショット 2022-05-26 14.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/1c1e3334-145e-a074-f404-02928379e711.png)

2, 『アプリを追加する』をクリックして、ストアにアプリを追加しましょう。
![スクリーンショット 2022-05-26 14.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/01a77d71-2a57-af56-71da-07e043f41ecc.png)

3, 右上の『アプリをインストール』をクリックして、アプリのインストールを行いましょう。
![スクリーンショット 2022-05-26 14.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/d01237c6-18dd-429f-9541-fd26d4365301.png)

4, 以上の操作が終了すると、アプリの管理画面のトップページに遷移します。
![スクリーンショット 2022-05-26 14.15.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/439d64b1-56c3-31a3-0f30-a1c3e1eee9c7.png)

5, アプリを導入したいテーマを選択します。
![スクリーンショット 2022-05-26 14.16.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/ec9676ee-cd39-5933-a876-440473988a9d.png)

6, 『有効化』ボタンをクリックします。
![スクリーンショット 2022-05-26 14.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/1d2b94b0-8326-7796-e8cf-cf721b2457be.png)

以上で有効化は完了しました。
簡単ですね！

テーマに反映されているか確認して見ましょう。
アプリを有効化したテーマのカスタマイズ画面を開いて、商品ページに移動してください。

以下のように、レビュー機能が追加されていれば有効化完了です。
（以下の画像では、既にレビューを書き込んでいたためレビューが表示されています。）
![スクリーンショット 2022-05-26 14.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/311d1eb2-aeab-83cb-a148-6a312d42e175.png)


## らくらく商品レビュー｜リテリア Reviewでできること
リテリアの商品レビューアプリの詳細について解説します。

以下のように商品ページに、「商品レビュー一覧機能」と「商品レビュー書き込み機能」を追加できるようです。
また、マーチャントはレビューに対して返信したり、不適切なレビューを削除することができます。
![スクリーンショット 2022-05-26 12.00.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/e2df7a68-2010-4651-f8b4-fe924db2ff17.png)

### 商品レビュー書き込み機能とは
商品に対するレビューを作成するための機能です。
以下の画像の左側にある『レビューを作成』ボタンをクリックすることで、右側にあるレビュー作成用のモーダルを開くことができます。
顧客は、このモーダルの入力欄に必要な情報を書いて、モーダル下部にある『送信』ボタンをクリックすることでレビューを書き込むことができます。

入力内容は以下の通りです。（全て必須項目なようです）

- メールアドレス
- 名前（顧客の名前）
- レビューのタイトル（タイトル）
- レビューの内容（本文）

### 商品レビュー一覧機能とは
商品に対して書き込んだレビューの一覧を表示する機能です。
レビュー一覧では、以下の内容を確認することができるようです。

- 評価の平均
- 評価件数
- レビュー

レビューは、以下の内容で構成されています。

- 評価＝星
- レビュータイトル
- 投稿者の名前
- 作成日
- レビュー内容

画像は入れられないようですが、必要最低限のレビュー要素については揃っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/4b910bbf-423d-ef8c-c09c-77d4c89a3539.png)

### スタイルの拡張性
カスタマイズ要素は以下の通りです。

### レビュー書き込み機能のスタイル拡張性
**1. 配色設定**

ボタンやスターなどの色の設定が可能です。
ストアのデザインにあった色を設定できるので、とてもありがたい機能ですね！
ボタンの色ですが、グラデーションにしたい場合には『ボタンカラー①』と『ボタンカラー②』を別の色にしましょう。
単色にしたい場合には、『ボタンカラー①』と『ボタンカラー②』を同じ色にしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/e144aece-9e17-d15d-bd2e-4ab51b0f4048.png)

**2. 文言の設定**

レビュー作成ボタン上部に表示する文言を設定できます。
レビューを促すような文言を設定しましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/291a9b77-17a4-bb98-9193-1b776006b794.png)

**3. セクション上下の余白調整**
他のセクションとの余白（距離）を調整することができるようです。
他のセクションの余白にもこだわりたいマーチャントの方には嬉しい機能だと思います！
私も、ストアのデザインにはこだわる方ですので、余白調整ができるのはとてもありがたいです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/f2a5b9b9-cab4-5e3b-b942-4cb64dd7b0c6.png)

### レビュー一覧機能のスタイル拡張性
**スターの色**
レビュー一覧に表示される星の色を変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/f2183aa3-4562-0022-339f-f220f7e94fd3.png)

**オフセット（初めの表示件数の設定）**
顧客が商品ページを訪れた時にレビュー一覧に表示されるレビューの件数です。
『もっとみる』を押すことで、全てのレビューを表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/7234822e-2e91-c048-96b4-bc35dce5294d.png)

**セクション上下の余白調整**
レビュー一覧セクションも、上下の余白を調整することが可能です。
ありがたい！

### レビューの管理方法
アプリの管理画面から、商品に対して書き込まれたレビューの管理が可能です。
レビューの管理操作には以下の二つがあります。

- レビュー返信
- レビュー削除

#### レビュー返信
レビューに対して、返信することで顧客の悩みや誤解の解消が可能です。
これは必須の機能ですね！

返信機能の使用方法について解説します。

アプリの管理画面を開いてください。
左のメニューの『レビュー管理』を選択します。
![スクリーンショット 2022-05-26 13.51.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/77a2e72d-c2d0-0a4e-1c29-35ee28fa5e8c.png)

レビュー管理画面が開いたら、レビューがついている商品の一覧が表示されます。
（レビューのついていない商品は表示されないようです。）
商品を選択しましょう。

![スクリーンショット 2022-05-26 13.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/52582f9b-43df-f024-8885-773d58176f68.png)

商品を選択すると、レビュー一覧画面が表示されます。
![スクリーンショット 2022-05-26 13.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/ad0ac0de-1a52-5591-96d0-7950584ef697.png)

『返信する』ボタンをクリックしてください。
![スクリーンショット 2022-05-26 13.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/93f3794b-cdc7-49b5-ef59-121152d602e7.png)

ボタンをクリックすると、返信モーダルが開きます。
![スクリーンショット 2022-05-26 13.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/fb8b2555-fee1-22a0-38ac-c7a9d20c66e5.png)

『返信内容』に返信の内容を記述して、モーダル左下に表示されている『返信』ボタンをクリックしてください。
![スクリーンショット 2022-05-26 13.59.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/918ff50e-1215-a287-0fd1-90e7bee15de3.png)

以上で返信完了です！
レビュー一覧画面に戻ってみると、先ほど返信したレビューの『返信ステータス』が『返信済み』になっているはずです！
![スクリーンショット 2022-05-26 14.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/708c7c25-9f4b-0467-d510-46c544aa3998.png)

#### レビュー削除
もしかしたら、他の顧客を不快にさせるようなレビューが付けられる可能性があります。
そういった場合には、レビュー削除機能を使用することでレビューを削除することができます。
ただし、一度削除したレビューは復元できませんので注意してください！

レビュー削除機能の使用方法について解説していきます！

まず、先ほどレビュー返信機能の解説の際に説明したアプリ管理画面のレビュー一覧画面に移動してください。
![スクリーンショット 2022-05-26 14.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/cf30583c-5d7b-8473-240d-17792de9dc59.png)

削除したい商品の『削除』ボタンをクリックしてください。
![スクリーンショット 2022-05-26 14.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/2a213f10-e245-279f-43b2-42e53a606201.png)

削除確認モーダルが開いたら、モーダル左下に表示されている『削除』ボタンをクリックします。
しばらくローディングが走り、削除が完了します。
![スクリーンショット 2022-05-26 14.09.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/f9e0c645-a88a-1f65-2106-5c37d259d6bc.png)

レビュー一覧画面に戻ると、レビューが削除されていることを確認できるはずです！
![スクリーンショット 2022-05-26 14.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2392019/74a56d24-421d-df10-af1a-48e2956ae755.png)


## 終わりに
最後まで読んでいただき誠にありがとうございます！
『らくらく商品レビュー｜リテリア Review』はいかがでしたか？
こちらのアプリは7日間の無料トライアルもあるみたいなので気になる方はまずは入れてみるのもいいと思います。
また開発ストアではアプリを無料で試すことができます。Shopifyパートナーとしてストア構築をしている方もぜひ試してみてください！

https://apps.shopify.com/review-6?locale=ja&from=qiita