楽天スマホページでヒートマップを導入して改善

Tweet

Check

ヒートマップとは、ユーザーがどのように行動したか、可視化してくれるツールです。
以下のように、どこをクリックしたか、どのあたりをじっくり見ているか、一目瞭然です。
分かりやすいページ作りは重要ですが、特にスマートフォンではUI/UXの重要性が高いようです。
この記事では、楽天スマホページにヒートマップを導入して改善する手順について記載します。

スマホページを楽天Goldで作成する

ヒートマップツールは、楽天RMSで作成したページには導入できないので、楽天Goldでスマホ用のページを作成します。
スマホ特有のHTMLの組み方などは、楽天Goldでスマホページを作成するを御覧ください。

ヒートマップを導入する

ヒートマップツールは各種ありますが、25,000PVまでは無料で使えて操作も分かりやすいptengineがおすすめです。

なおKloutスコア（ソーシャルでの影響力を数値化したもの）が50以上の場合は、インフルエンサー特別限定プランという、ページ数に制限がなくPV数も200万PVまで無料で使えるプランが使えます。申し込む前に、Kloutで測定してみましょう。
なお弊社代表の場合は10月15日時点でKloutスコア53だったので、頻繁にソーシャルで活動していたらクリアすることが多いようです。

ヒートマップタグを設置する

ptengineでアカウント登録ができたら初期設定をして、プロファイル欄に解析したいサイトのドメインを入れます。
設定ができたら解析コードをクリックして、表示されたHTMLを作成したスマホページに入力したら完了です。

ヒートマップでの改善（1）

実際にヒートマップの結果を見てみましょう。
以下の事例だと、ファーストビューで大きな割合を占めるスライドバナーはそれほど赤くなっておらず、逆にスクロールを降りたところにある「メンズスニーカー」などの商品カテゴリバナーはよくクリックされています。
また、ファーストビューから1スクロールした人は僅か31％と、殆どの人が離脱していることがわかります。

そこで、スライダーを取り払って商品カテゴリバナーを上に持ってきてみました。
また、クリックの多いカテゴリを優先して上に置くようにしてみました。
ファーストビューからのスクロール数は34％とあまり変わってないですが、検索ボタンや商品カテゴリのクリック数が大きく増えています。
この結果、トップページからの離脱率はマイナス20％と大きく減少しました。

ヒートマップでの改善（2）

先ほどヒートマップで改善したスマホページの事例です。
看板の右側にある、「コンビニ後払い対応」という部分が、少しですがクリックされているのがわかります。
この部分は看板と一体になっているのですが、「コンビニ後払い」に興味がある人が一定数いることが伺えます。
そこで、この部分は別画像にして、ボタンとしてわかるように設定してみることにしました。

こちらは設定を始めたばかりですが、後払い利用率が向上して転換率が向上すると思われます。

まとめ

ヒートマップツールは、仮説・検証がスピーディーにできるツールです。
導入に手間はかからないので、一度設定してみるのをおすすめします。