HotjarでShopifyストアの商品ページを改善する5つの方法

StoreHeroでは、Shopifyストアの収益化支援をしていますが、最初に取り掛かることが多いのが、商品ページの改善です。

商品ページの改善は、収益化に貢献すること以外に、改善を通じて、どうやって売っていけば良いかが分かることが多いため、早めに取り掛かった方が良いと思っています。

商品ページを改善する際、Hotjarというツールをよく使っています。Shopify AppのLucky Orangeも似たツールですが、管理画面がサクサク動くので、Hotjarをよく使います。

今回は、Hotjarをどうやって使うと改善できるかについて、鉄板の方法を5つ紹介します。

圧倒的に使うのはレコーディング機能

HotjarにはストアのUIや使いやすさを分析するための機能がたくさんありますが、個人的に圧倒的に使うのはレコーディング機能です。

レコーディング機能とは、お客さんがストアを閲覧している画面のスクロールやマウスの動きを動画で撮影してくれる機能です。

似た機能にヒートマップがありますが、こちらは、長く閲覧されている部分に色が付きます。

ヒートマップを見なくても、レコーディングされた動画を見れば改善点が分かることが多く、Hotjarではレコーディング機能を中心に使っています。

レコーディング機能が便利

以下では、レコーディングされた動画をどのように見ているかを紹介します。

カートに行った人と行ってない人の商品ページの見方を比較

まず、商品ページをどう見た人が、納得してカートに遷移したかを確認します。

Hotjarのレコーディング機能の画面で、Visited URLでカートページでフィルターを掛けて、更にVisited URLで商品ページでもフィルターを掛けます。

Visited URLでフィルターをかける

そうすると、商品ページを閲覧した人の内、カートページに遷移した人のレコーディング動画だけが見れます。

次に、Visited URLで商品ページを閲覧した人で、かつカートページを閲覧していない人でフィルターを掛けます。

カートを閲覧していないという条件でフィルターをかける

そうすると、商品ページを閲覧した人の内、カートを閲覧していない人のレコーディング動画が見れます。

それぞれ、10個とか20個の動画を見てみると、おおよその傾向がつかめます。特に閲覧時間が長い人の動画を中心に見ると分かりやすいかと思います。

カートに行った人と、行ってない人の動画を比較することで、何をしっかり確認した人ほど購入に至りやすいのかが推測できるようになります。

見てほしいのにスルーされているコンテンツを修正

次に、商品ページ内で見てほしいのに、サラッとスルーされているコンテンツに着目します。

見てほしいのにスルーされる事が多いコンテンツを確認

商品のウリや商品写真など、購入する人がよく確認しているのに、購入しない人はスルーしているコンテンツです。

スルーされているコンテンツを見つけたら、見られやすいように、位置を変更したり、見られやすいように修正します。

優先度の高いコンテンツほど上の方に移動したり、商品画像ギャラリーの中に入れてしまったりすることもあります。

カートに遷移しない人が商品ページ以外に閲覧しているページを確認

カートに遷移しない人が、商品ページ以外に閲覧しているページにもヒントがあります。

例えば、特商法のページや配送方法のページに遷移している場合、配送や支払い方法についての説明を少し加えることで安心してくれる可能性があります。

商品ページ内で不足している情報は、Googleサーチコンソールで、対象ページへの流入キーワードを見ても、推測することができます。こちらも活用してみて下さい。

Googleサーチコンソールも使える

比較している商品同士を比較しやすくする

レコーディング動画を見ていると、色違いやタイプ違いの商品と比較している人がいることに気づくことがあります。

よく比較している商品同士で比較表を作ったりして、比較しやすくしてあげると、検討がしやすくなり、購入率が高くなります。

商品の型が違う場合は、比較表を作ることが多いですが、色の比較やコーディネートの比較などの場合は、それに適した見せ方が必要です。

ファッション、化粧品ブランドのDiorの場合、シェード比較機能によって、色を比較しやすくしています。

シェード比較ができて化粧品が選びやすい

また、スーツケースのAwayは、サイズの違いを説明するために図やアイコンをうまく活用しています。

サイズの違いが分かりやすく図とアイコンで説明されている

ずっと読んでいるテキストを図示・イラスト・画像・動画化する

レコーディング動画を見ていると、ある箇所のテキストをずっと見ていることに気づく場合があります。

そんな箇所が見つかったら、テキストを図示、イラスト、画像、動画化して、直感的に理解できるようにならないかを考えます。

例えば、マットレスのキャスパーでは、マットレスの弾力性や機能性を説明するために、動画を有効に活用しています。

マットレスの弾力性や機能性を動画で説明

まとめ

Hotjarを使ってShopifyストアの商品ページを改善する方法をまとめました。

実際に、Shopifyのコンサルティングをする場合は、もっと色々と分析をしていますが、基本は、今回、ご紹介した方法です。

冒頭でお伝えしたとおり、商品ページ改善を通じて得られた知見が、売り方を決める時に参考になったり、商品企画のヒントになったりして、重要度はかなり高いです。

ぜひ、商品ページ改善の時の参考にしてみて下さい。

Shopify×グロース支援のお問い合わせ

StoreHeroは、Shopify×グロースに必要なデータを集約したプラットフォームを活用したグロース支援を行っています。
Shopify、Shopifyアプリ、Google、Instagramなどのデータから伸びしろを可視化し、Shopify×グロースのエキスパートが改善提案&実装支援を行い着実な成長を実現しています。
StoreHeroのサービスにご興味をお持ちの方は、お気軽にお問い合わせください。








現状ない場合は空欄で結構です

上記以外に、ご予算や納期などの詳細が決まっているようでしたら、ご記入ください。