TAXEL

2020/07/13

コラム

オウンドメディアのUI/UXの改善ノウハウをヒートマップで分析する

オウンドメディアはコンテンツの羅列だけで本当にいいのでしょうか?オウンドメディアを運営されている方で、1セッション当たりのページビュー数(回遊)やサイトへの再訪問をKPIに置かれている方も多いと思います。その目標を達成するサイト、さらに理想を言えば毎日見てもらえるオウンドメディアとはどんなメディアでしょうか?今回はTAXELというヒートマップツールを使ったユーザー行動分析から、UI/UXの改善ポイントを探っていきます。

ヒートマップでできるサイト改善とは

▼TAXELヒートマップでわかること
①ユーザーが熟読しているエリア
②ユーザーが離脱しているエリア
③ユーザーがタップしているエリア

ヒートマップ で見れることとしては当たり前の項目です。しかし、これをどう分析して次の行動につなげるかで役割が大きく変わっていきます。上記3つから参考になりそうなユーザー行動を実際にヒートマップを見ながら考察していきましょう。

①ユーザーが熟読しているエリアを知る

WEBサイトをよく読むときはどういう行動をしている?

行動例(Fig.1)①:内容を把握しながら細かく読む記事
行動例(Fig.2)②:目的のものを探していてそこだけよく読む記事
行動例(Fig.3)③:さっさとスクロールして見てしまう記事

大きくはこの3つの行動を、ページ上部で判断しています。中でもサイトを日々運営している運営者の方は①が気になりますよね。では実際にヒートマップで①のような記事にはどんな特徴があるかを見てみましょう。

Fig1:内容を把握しながら細かく読む記事

内容を細かく把握しながら記事を読み進めるため、キレイな熟読の山が3つできる傾向(Fig.1)にあります。この形は理想的な形で、よく読んで欲しい理解を進めるコンテンツとして十分に効果が発揮できているといえます。

Fig2:目的のものを探していてそこだけよく読む記事

記事の長さによっても違いますが、熟読の山の数が1つや2つの場合が多く(Fig.2)みられます。

Fig3:さっさとスクロールして見てしまう記事

熟読の山が記事終わりにだけ出てくる傾向(Fig.3)にあります。ユーザーはさらっと記事を流し読みし、次の記事を探していると考えられます。

チェックポイント✔
☑熟読されているエリアはタイトルに合った内容か?
☑注目されているのは文字か画像か?

これらを可視化することで、ユーザーのニーズ把握につながります。

文字上に注目が集まっている
ユーザーがどんな内容を求めてこのオウンドメディアに訪れているかを把握することができます。

画像上に注目が集まっている
その画像は注目を集めるのに適しているので、SNS等で積極的に拡散する手段が適していると考えられます。

②ユーザーが離脱しているエリアはどこか?

読んでいるサイトを離脱するときには何がきっかけになっていますか?

行動例①:飽きて(記事が長い、欲しい情報がなかった)離脱する
行動例②:途中で別コンテンツへのリンクを発見して離脱する
行動例③:記事を読み終えたのでスマホを閉じる

これ以外にもありますが、ほとんどがページ上ではこのような行動をしています。ではこちらも実際にどんな特徴があるかを見てみましょう。

行動例①:飽きて(記事が長い、欲しい情報がなかった)離脱する

記事が進んでいくにつれて、じわじわとユーザーが抜け、ヒートマップが赤から青に変わっていく様子が見て取れます。

行動例②:途中で別コンテンツへのリンクを発見して離脱する


記事の途中でヒートマップが段になっており、タップエリアを合わせてみると、設置した遷移リンクで離脱しているパターンが見て取れます。この場合、目的によっては悲観することはなく、設置したコンテンツに適切にユーザーが反応している証拠にもなります。

行動例③:記事を読み終えたのでスマホを閉じる

記事終わりでヒートマップが段になっており、純粋に読まれて自然に離脱が起こっているパターンが見られます。

上記の図のように、次のコンテンツをレコメンドするような仕掛けがあっても良いかもしれません。

チェックポイント✔
☑ヒートマップが段になっており、ユーザーが離脱している位置にどんなコンテンツがあるか?
☑タップは何のコンテンツに集まっているか?
☑記事直下では何%のユーザーが残っているか?

このヒートマップを見ることで、読了率の見方が変わります。オウンドメディアの中の記事には役割があります。このようにヒートマップを見ることで、ユーザー行動を知ることができ、コンテンツの役割を分担することができます。

③ユーザーがタップしているエリアには何がある?

WEBサイトを閲覧するときに思わずタップしたくなるコンテンツはどんなコンテンツでしょう?

行動例①:ページ内に設置されているSNSや遷移URLを押したいとき
行動例②:画像を拡大したり保存したいとき
行動例③:文章内で気になった単語を検索したいとき
行動例④:ポップアップが邪魔で消したいとき

この4つが大きなポイントとなります。

行動例①:ページ内に設置されているSNSや遷移URLを押したいとき

単純に設置した遷移やコンテンツにタップが集まり、ユーザーが他の記事やコンテンツに興味を示しているのが予測されます。

行動例②:画像を拡大したり保存したいとき


画面上にタップが集中しているのが見て取れ、芸能人やアイドル、アニメなど、コンテンツ性の高い画像は、ユーザが保存を従っていることが予想されます。

行動例③:文章内で気になった単語を検索したいとき

文字の上にタップが集中しており、ユーザーが気になって文字をコピーしている場合なども考えられますが、文字にリンクが張って張ると勘違いしてタップしている可能性もあり、記事の状況を見て判断するのが良いと思われます。

行動例④:ポップアップが邪魔で消したいとき

画面の右手側に赤くpoint集中したタップがよく見られ、広告やポップアップの✕ボタンを押しに行っているユーザー行動が予想されます。このように、タップが集まっているエリアを、熟読されているエリア、離脱してしまっているエリアと一緒に見ることで、ユーザー行動をより詳細に考察することができます。

チェックポイント✔
☑どのコンテンツにタップが集まっているか?
☑タップが集まっているポイントの熟読、離脱ヒートマップは?

タップが集まっている位置を把握することで、サイト内より良い体験をしていただくことはもちろん、運営側はUI/UXの改善を実施することができます。さらに、タップが集まっているエリアや熟読されているエリアを確認することにより、ユーザーの興味関心を知ることもできます。

診断コンテンツの場合

診断コンテンツがテキストのみで構成されていた場合であれば、ユーザーはそのテキストをクリックすることで、選択肢の選択が出来ると思っている場合があります。その場合には、タップがその診断のテキスト上に集まりますが、直帰率が高い記事になってしまっている場合があります。そこで、アンケートフォームを新しく設置したり、選択した際にラジオボタンで選択したことがユーザー体験として与えられるようにしてみると、ユーザーの期待に沿ったコンテンツ作りが可能になります。

ヒートマップは使い方次第でオウンドメディアを最適化する最良のツールとなる

オウンドメディアの存在意義ってなんだろう?

最初に企画設計した時にあったはずの目的は?オウンドメディア内に格納される記事には必ず役割があります。

①最後まで読んでもらいたい世界観や企業にとって伝えたい内容が掲載されたコンテンツ
ヒートマップで離脱の段が出来ているポイントの修正や記事の長さをかんがみて読了しやすい工夫を施す必要があります。

②ダイジェスト的にいくつかのトピックを紹介する形のコンテンツ
例えばおすすめのお店を紹介している記事では、お店の紹介ごとに遷移URLが設置されていると思います。

離脱エリア、読了率、タップエリアを同時に見ることで、設置した遷移にユーザーが適切に反応しているかを見るのが良いと思われます。この基準であるはずなのに、①の視点で分析をしてしまうと、そもそもの役割が変わってしまいます。KPIを間違えず、記事の役目はどちらなのかをはっきり意識して分析していくことが大事です。

ヒートマップを使ってUI/UXを改善する方法まとめ

ヒートマップを活用することで、作ったコンテンツがユーザー行動にどう影響しているのかを可視化できます。

1.どんなコンテンツがユーザーによく読まれているのか確認
2.どこでユーザーが離脱し、それはなぜかをユーザー行動から解析
3.どこにタップが集まっているかを確認
4.設置したコンテンツにユーザーが適切に反応しているか確認

ユーザー行動を理解し、UI/UXの改善を日々行うことで、ユーザーにとってライフスタイルの一部となるオウンドメディアを目指していきましょう!

以上にまとめた事例は、ヒートマップツールを使った考察の一部になります。実際にはサイトの構成によっても結果は異なります。オウンドメディアによってKPIやコンテンツの位置づけも変わるので、あなたが運営するオウンドメディアは、ユーザーにどのような行動をもたらしているのか、実際に診断してみましょう!

一覧へ戻る

GMO AD MARKETINGが提供するサービス