
スタイリングでポイントに気づいてもらう!
【Shopify UI/UX】Shopifyのポイント表示を改善する方法|リピート率を高めるUI設計とは
オンラインストアの販売では、お客様と直接対面することができないため、画面を通して情報をいかに伝えるかが最も重要になります。
多くのストアでは肝心なポイント情報が埋まっており、効果を発揮していないことがあります。あなたのストアはそうなっていないといい切ることができますか?
本記事では商品ページとカートページの適したポイント表示について考えてみました。
ECサイトでポイント表示を目立たせるべき理由
ECでは画面から伝わる情報が全て
ポイント表示の前におさえるべきECデザインの重要な要素4選
02
ポイント表示の失敗例!損をしているECサイトの特徴
1. 基本的なポイント情報が見えにくい
2. ポイントの利用フォームが見えにくい
03
売上上位ストアが実践する「正しいポイント表示」3つの法則
1. ストアの世界観に馴染むデザイン
2. 価格情報の近くへの配置
3. スムーズで迷わない利用動線の設計
05
ECのポイント表示に関するよくある質問(FAQ)
ポイント情報はどこに表示するべきですか?
商品ページとカートページどちらが重要?
ポイント利用フォームはどこに置くべき?
ポイント情報はどれくらい目立つといいですか?
ECサイトでポイント表示を目立たせるべき理由
ECでは画面から伝わる情報が全て
どのような見た目の店があり、どのような人が働いていて、どのような施策やキャンペーンが実施中かなど、商品以外にもストアには様々な要素が存在し、お客様の購買意欲の促進や関係値の構築、コンバージョンの改善などに寄与します。実店舗ではスタッフからのお声がけや物理的な視認性など、アプローチ方法は多岐にわたる一方、ECストアではUIとUXがほぼ全ての要素を担う鍵となります。
最適化されたUIやUXはブランドアイデンティティの確立、コンバージョン率の向上、他社との差別化などに繋がる重要な要素です。
ポイント表示の前におさえるべきECデザインの重要な要素4選
1
ロード速度
皆様も経験したことがあると思いますが、Webページの読み込み速度が遅いと、誰しもストレスを感じるものです。ECサイトを訪れるお客様も同様で読み込み速度の遅さで本来売上に繋げられたお客様を取りこぼす恐れが生じます。
別のBaymard Instituteの調査によると、サイトの読み込み速度が3秒以上かかると、お客様の40%が離脱されるとされており、読み込み速度の改善の重要性が伝わります。
2
操作が簡単で動線が一直線ロード速度
「カートページに辿り着くまでが長い」、「欲しい商品を見つけるのが難しい」など操作性が悪いと、どうしても一定数のお客様は途中で諦めてしまうことがあります。そのため、直感的に利用できるECを目指す必要があります。
3
スマホファースト
今ではオンラインショッピングは手元からいつでも気軽にできるアクティビティになっています。経済産業省が発表している通り、2019年のECストアの売り上げでは、42.4%がスマホからの注文であることが判明しており、ECストアはスマホへの配慮がないと、売上につながるはずだったお客様を取りこぼすことになります。
4
デザインがブランドやターゲットユーザーに向けられ、洗練されている
ブランディングやイメージ戦略が重要なストアでは、ECがそのイメージなどに沿って作成されているかも非常に大事です。
ターゲットのユーザーが求めている内容をECで実現できているかを整理し、情報は多すぎず少なすぎず、カラーや大きさでわかりやすい構造を実現することが理想的です。
ポイント表示の失敗例!損をしているECサイトの特徴
前述したように、ポイントの表示はお客様にとって有益な情報でもありますが、認知していただくことによってストアのリピーターとなる可能性が生じ、結果的に継続的な収益につながるかもしれません。そのため、ポイントの情報は明確にある程度目立たせることを意識しましょう。以下、ポイントの表示で失敗している例をご紹介します。
基本的なポイント情報が見えにくい
商品ごとに獲得できるポイント情報の文字の色が薄く見えにくかったり他のテキストと同じ色で視認性が低かったり、価格に近い箇所に表示がないなど、お客様が次回の購入に利用できるポイントについての情報が不足していると効果が薄くなりやすいです。
また、お客様が保有しているポイント数やそもそものポイント情報が不足していると認知されにくく、ポイントプログラムの最大効果を発揮しにくくなります。
ポイントの利用フォームが見えにくい
お客様にとって「ポイントを持っているのに、利用できない」といったことがあると不満につながりやすいです。そのため、ポイント利用の部分はストアとしても何度も試し、誰でも直感的にわかる内容に仕上げることが推奨されています。
また、easyPointsウィジェットなどをご利用されている場合はページ内に「ポイントの利用方法」に関する説明ページなどを設置することで、失敗につながりにくくなります。
逆に、ポイントのポップアップを表示させたり、積極的にポイントに関するプロモーションをすることで、ポイント認知度は上がりやすく、リピート率の向上(成功)にもつながりやすいです。
売上上位ストアが実践する「正しいポイント表示」3つの法則

1. ストアの世界観に馴染むデザイン
ポイント情報だけあえて目立たせるといった方法もありますが、基本的にはストアに馴染ませる方が本来の効果を発揮しやすいです。ポイント情報表示の色、ボタンや字体のデザインなどもストアで利用されているものか、よく馴染むものを活用しましょう。
獲得ポイントの表記のみ、ストアの中でもある程度目立つ色を使用し、お客様にとって有益な情報であることを伝えます。
2. 価格情報の近くへの配置
一般的には価格情報の近くにポイントの情報を設置します。お客様にとって重要な要素である価格の近くに設置することでポイントの認知をしていただけるためです。
3. スムーズで迷わない利用動線の設計
ポイントを利用するためのフォームをカートページの目の届かないところに設置していませんか?ポイントの利用フォームはわかりやすい位置に設置し、お客様がスムーズにポイントを利用できるようにしましょう。
また、ポイントに関連する説明ページをご用意している場合、それらがアクセスしやすい位置に設置されることで、ポイントのことを認知してもらいやすくなり、ポイントの利用率も向上しやすいです。
弊社調査では、easyPointsを利用中の売り上げ上位5つのストアは上記3点を必ず行っていることが判明しています。
easyPointsのカスタムセットアップ
easyPointsのカスタムセットアップはベーシックプラン以上を利用しているストアに向けて実装しているポイントの表示方法の一つです。カスタムセットアップはShopifyのテーマに直接コードでポイント関連の情報(ポイント表記・ポイント利用フォームなど)を反映し、シームレスにテーマに溶け込むのが特徴的です。
一部特殊なカスタマイズにも対応しており、完成後の見た目であるモックアップの提供やテーマアップデートに伴う修正も実施しています。

デモストアでカスタムセットアップ後のストアを実際にご確認いただくことができます。以下よりご確認いただけます。
ECのポイント表示に関するよくある質問(FAQ)
ポイント情報はどこに表示するべきですか?
商品ページやカートでの利用フォーム、アカウントページにはポイント情報を加えることを強く推奨しており、可能であればポイントについての説明ページの追加も検討するべきです。
商品ページとカートページどちらが重要?
どちらも非常に重要ですが、第一印象は商品ページになりやすいため、商品ページでしっかりポイントの認知をしていただくのがおすすめです。
ポイント利用フォームはどこに置くべき?
カート内の最も見られる「合計金額」付近に設置することで、利用しやすくなります。また、サイドカートなどでもカスタムセットアップを通して適した位置に利用フォームを設置することができます。
ポイント情報はどれくらい目立つといいですか?
ポイントの情報はブランドのイメージを崩さない程度で目立たせることによって、認知されやすく、成果につながりやすいです。
まとめ:Shopifyのポイント表示を改善してリピート購入につなげる
ECのUIとUXはお客様の第一印象にもつながる重要な要素で、表示方法を工夫することで、コンバージョンにつながることもあり、ストアの成果に繋げることもできます。
実店舗と同じように、ECでもお客様の体験がそのまま売り上げにつながることもあるため、ロード時間や操作性、見た目を意識する必要があります。
また、重要なポイントなどの情報も正しく表示することで、ポイント情報の認知にも繋がり、リピート率の向上につながる可能性が高まります。
客観的な視点からECストアを見つめ直し、適した表示方法を目指しましょう。






Baymard Institute の記事によると、大規模なECストアでもチェックアウトのUXを改善することでコンバージョン率が35.26%向上するとされています。