【Shopifyアプリ】ランキング形式に表示できるアプリを導入してみた！

## はじめに

こんにちは！
普段Shopifyでストアを運営している影山です！

最近ストアに導入できる良さげなアプリがないかとネットサーフィンしていたところ、「らくらくランキング表示アプリ｜リテリアRanking」という日本の企業が制作したShopifyアプリを見つけたので、解説とともに皆さんに紹介したいと思います！
以下にアプリストアのリンクを掲載しておきますので、この記事を見て興味を持たれた方は調べてみてください！

https://apps.shopify.com/ranking?locale=ja&from=sogabe

このアプリは、こちらの記事で紹介されていたので発見できました。

[【Shopifyアプリ紹介】おすすめのベストセラー訴求Shopifyアプリ3選](https://qiita.com/second_wolf/items/58142f6ca105fcd7b0ad)

また、こちらの記事を参考に作成しています。

[Shopifyでベストセラーを表示するアプリを見つけたので、調査してみた](https://qiita.com/natsume-kazuhito/items/2a285e0a10edff2a4fbc)

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

## この記事の内容

この記事では、以下のことについて解説していきます。

- ランキング表示とは？
- らくらくランキング表示アプリ｜リテリアRankingとは？
- らくらくランキング表示アプリ｜リテリアRankingの機能解説
    - 管理画面

## ランキング表示とは？

まずはランキング表示と聞いてピンとこない方のためにかんたんに説明したいと思います。

ランキング表示とは、言葉の通り商品のコレクションをランキング形式で表示する機能になります。

この機能は多くのECサイトで使われていて、大手ECサイトでいうと、楽天やAmazon、Yahooショッピング等が挙げられます。これらのサイトではカテゴリごとや期間、金額、人気ランキングなど実に様々な評価基準、範囲のランキングが掲載されており売上向上・コンバージョン率向上に役立っているようです。

またランキング表示がよく使われている業界としてはアパレル系が挙げられます。ファッション系のECサイトではこういったランキング機能が使われていないことのほうが珍しいぐらいでしょう。次のメリットでも説明しますが、ある程度こういったイメージの商品がほしいという顧客にとって、多くのユーザーに買われている商品がひと目で分かるランキング表示機能は購入を後押しする大きな一因となるでしょう。

### ランキング表示のメリット

ランキング表示のメリットは以下の通りです。

- 人気の商品がひと目で分かる
- ECサイト訪問者にどういうストアなのかを伝えられる
- ユーザーの購入を後押ししてくれる

ランキング表示は名前の通り商品を商品を人気順に並べて表示できるので、ECサイトに訪問したユーザーにそのストアにはどんな商品が売っているのかであったり、どんな商品が多くのユーザーに買われているのかであったりをひと目で伝えることができます。また多くのユーザーに買われているという事実はその商品を買おうかなと悩んでいるユーザーの購入の後押しにもなるでしょう。

## らくらくランキング表示アプリ｜リテリアRankingとは？

続いては本題であるらくらくランキング表示アプリ｜リテリアRankingについての解説に移りたいと思います。[Shopifyアプリストアのアプリ説明欄](https://apps.shopify.com/ranking?locale=ja&from=sogabe)には以下のように書かれています。

> 「コレクションをランキング表示したい...」 「ランキング表示するならノーコードでデザインにもこだわりたい...」
> その悩みを解消できるのが『リテリア Ranking』です！

この説明の通り『らくらくランキング表示アプリ｜リテリアRanking』はプログラミングが全くできない人でもShopifyのストアにランキング機能を導入できる優れたアプリというわけです！
実際にどのような機能があるのか見ていきましょう！

## らくらくランキング表示アプリ｜リテリアRankingの機能解説

実際にストアにインストールしてみて、確かめた機能は以下の通りです。

- 管理画面
    - 導入したいページでらくらくランキング表示アプリ｜リテリアRankingを追加
    - 表示したいコレクションを選択
    - アプリブロックの詳細な設定を編集
- アプリの対応
    - 日本語対応
    - ストア構築にも強いエンジニアが対応

### 使い方

ここからはアプリ導入後の使い方を掲載しています。
参考にしてみてください！

#### 管理画面の操作

まずはらくらくランキング表示アプリ｜リテリアRankingで使うコレクションを作成します。
こちらの画面からコレクションページに飛び、右上のコレクションを作成するから新しいコレクションを作成します。すでに使いたいコレクションがある場合は、そちらを使っていただいても構いません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/d6e26f64-18c1-cab0-70d1-462c93567581.png)

次にコレクションの商品の並びをカスタムします。
コレクション内の商品管理から並び替えをクリックしていただくと、並び替えの種類が複数出てきます。その中でも主に使うのは「ベストセラー」と「手動」になります。
「ベストセラー」を選択すると、売上に基づいて商品が順に表示されます。
「手動」を選択すると、自分で順序を変えることができます。これは「月間ランキング」や、「おすすめランキング」など、特定の期間や特定の基準でランキングを作成したいときに使える機能となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/02ee175d-3232-6401-981f-a65153a4609f.png)

続いてカスタマイズ画面に移ります。
今回のShopifyアプリは画面左側の「セクションを追加」の一番下にあるアプリのところにあります。そこから追加することで使えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/2fd5b1d9-8c56-e8f4-9999-2a341f10b65d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/ec62bbcb-86f6-25ac-781f-a09aaf5732be.png)

アプリを追加していただいたらまずは一番上にあるコレクションを選択から表示したいコレクションを選択します。この画面からはコレクションの並びを変更することはできないので、あらかじめ並びを変えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/2f707a49-5eb5-7731-13e0-37f9c082f7fc.png)

ここからは以下の4つのパートに分けて解説していきます
- 順位アイコンの設定
- コレクションのレイアウト
- 商品カードの設定
- ブロックの余白

##### 順位アイコンの設定

**順位アイコンの種類**
アイコンは3種類あって見た目は以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/2dbbabbe-fcbe-f4e0-55ca-916cad508110.png)

**順位アイコンの色**
順位の数字と1~3位のそれぞれの色、そして4位以降の色をカラーピッカーから選ぶことができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/4385d28e-cb51-bb36-82c7-dd6f820cde1a.png)

**順位の位置**
順位の位置は「左上」「右上」「左下」「右下」の4箇所から選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/7d0ec177-c69a-8c1b-26f6-915e50249dfe.png)

##### コレクションのレイアウト

**商品の数**
1~50まで選べます。コレクションの上限以上の数字を選んだ場合はコレクションの上限の数になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/6baeb0c0-b2d5-b141-ad40-90e314577c26.png)

**商品表示の列数**
PC表示とスマホ表示でそれぞれ商品の表示列数を選ぶことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/191a137f-ef67-44bd-4e90-625138a6283f.png)

**商品間の余白**
商品間の余白を縦横それぞれ選ぶことができます。よくわからない場合はデフォルト値でも問題ないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/b5cb77b1-e2e4-f3aa-b39f-c134c54a178e.png)

**スライダー表示**
こちらのチェックボックスにチェックを入れると商品が列表示から以下のように1行で表示されるようになります。

![画面収録_2022-05-25_16_06_26_AdobeCreativeCloudExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/80cfbb10-bc51-a3de-e449-4e1f57624a72.gif)

##### 商品カードの設定

**画像の縦横比**
画像の縦横比を「16:9」「1:1」「4:5」から選べます。また「画像に合わせる」を選んだ場合は元画像の縦横比になります。写真全体を表示したい場合にはこれを選びましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/d390ab4d-6abe-774c-03ca-d894240e5678.png)

**マウスオーバー時の挙動**
「不透明度を下げる」を選ぶとちょっと白っぽくなります。「画像を拡大する」を選ぶと商品画像にズームします。「2番目の商品画像を表示する」を選ぶと商品管理で登録している2番目の画像がゆっくりと表示されます。こちらは写真を2枚以上登録されている商品でしか挙動しないので注意が必要です。

![画面収録_2022-05-25_16_17_33_AdobeCreativeCloudExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/d3dbabec-d4fd-12d6-688a-554d42020b0f.gif)

![画面収録_2022-05-25_16_19_52_AdobeCreativeCloudExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/571ac9df-845f-7e8b-ef47-c25d662be1c2.gif)

![画面収録_2022-05-25_16_22_32_AdobeCreativeCloudExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/41a2ff16-86a5-e7a5-e3e6-64e20b7ce738.gif)

**テキスト**
商品名と値段のテキストの大きさと色を変更できます。また、売り切れ時に表示するテキストを変更できるのも地味にありがたいですよね。デフォルトでは「売り切れ」となってますが、「SOLD OUT」など英語にして使うのもありでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/7ced3c5b-bc91-1952-ffde-8d57c52d69ee.png)

**余白**
アプリブロックの上下左右の余白を調整できます。サイトの見た目に合わせられるのはグッドポイントですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/3e0f30a2-9e69-8305-3254-375c1805acb4.png)

**PCでの表示**
こちらのチェックボックスにチェックを入れると、PC表示の際に余白や文字のサイズが拡大され最適化されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668034/dacfa7ea-989a-65bb-efc1-b419f8481a5c.png)

以上で機能解説終了です！
お疲れさまです！

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

https://apps.shopify.com/ranking?locale=ja&from=sogabe

また、別のアプリの調査記事も載せているので、よろしければご覧下さい。

[ShopifyアプリでLINEアイコンをストアに簡単に設置するアプリの解説してみた](https://qiita.com/kageyama_takashi/items/2f81c42ed2e8d64f7c1c)

[【Shopifyアプリ】商品ページに追従購入ボタンを設置できるアプリが結構良い](https://qiita.com/kageyama_takashi/items/40cc9c95bbdeaddc62e9)

[【Shopifyアプリ】FAQ（よくある質問）を簡単に導入できるアプリ見つけた！](https://qiita.com/kageyama_takashi/items/52242de7a0291256716b)

[Shopifyでボトムナビゲーションを挿入できるアプリを試してみた](https://qiita.com/kageyama_takashi/items/4475c1c5c83c3886edfe)


## 参考記事

[Shopifyでベストセラーを表示するアプリを見つけたので、調査してみた](https://qiita.com/natsume-kazuhito/items/2a285e0a10edff2a4fbc)

[【Shopifyアプリ紹介】おすすめのベストセラー訴求Shopifyアプリ3選](https://qiita.com/second_wolf/items/58142f6ca105fcd7b0ad)