Webサイト運用の道具箱 Vol.3
定量データから課題を発見し、UI・UXを改善するツール活用法

これまで、Vol.1では、日々の運用業務の中で優先順位が下がりがちになってしまう「健康診断としてのアクセス解析」を、Vol.2では、アクセス解析の結果を元にWebサイト改善の実行決定までを適切にコントロールしていくための「コミュニケーション術」についてご紹介しました。

Vol.3となる今回は、Webサイトの中の課題を発見し、UI・UX改善を行うためのツールと、実際にそれを使ってどのように改善をしているのか具体的な改善事例とともにご紹介します。

執筆：長野 彩乃／ロフトワーク マーケティング
編集：岩崎 諒子／Loftwork.com 編集部

Microsoft Clarityは、Webサイト上でユーザーがどのような行動をしているかを分析できる無料のヒートマップツールです。

ヒートマップでわかるユーザーの行動は、たとえばページ内でユーザーにクリックされた箇所や、マウスの動き方、スクロールした箇所・離脱した箇所などのデータを、色でわかりやすく表示してくれます。

このツールを使うことでページ内でのユーザーの行動傾向を詳しく把握することが可能です。一方で、サイト全体の行動を把握できるものではないので、Google Analyticsなどの解析ツールと組み合わせながら使う必要があります。

Loftwork.comでは、Webサイト上の課題発見のきっかけと、周りにその課題について説明するエビデンスとして、ヒートマップを使用しています。

Loftwork.comのコンバージョン（CV）の一つとしてサイト上で告知しているイベントへの参加申込みがあります。

主な流入元は、メールマガジンやSNS広告ですが、ユーザーイベント告知ページに流入したとしても、それらのセッションが申し込みに繋がらなければ、その施策に効果があったとは言えません。

ヒートマップでみたときに、赤枠で囲まれた箇所に点があります。ここは、最近までクリックできないただのアイコンだった箇所でした。

PC画面でイベントページのファーストビューを見たとき、この部分が黄色で特に目立っていることから、ユーザーが申し込み導線だと思ってクリックしていることが予想されます。

「押したはずなのに何も反応がない」と一時的にでもユーザーの気持ちを萎えさせてしてしまうのは、Webサイトの体験としてマイナスです。さらにいうと、ヒートマップを見なければ気づけなかった有効なコンバージョン導線だったのではないか、ということも言えそうです。

そこで、改修によってこのアイコンを申し込みフォームに誘導するボタンに変更しました。

Loftwork.comには、下記のような帯の形状をしたリンクデザインがあります。

このリンクでクリックできる箇所は赤枠の箇所だけでした。しかし、Microsoft Clarityで見ると、多くのユーザーがリンクとして設定されている以外の箇所をクリックしていることがわかりました。

小さなことかもしれませんが、ユーザーが「押しているはずなのに動きがない…」と感じてしまうのは、あまり良い体験とは言えません。そこで、リンク付与のエリアを帯全体に改修しました。この改修によってイベントページ全体のコンバージョン率が上がったかどうかは、また時間が経ってから検証したいと思います。

UIとUXの改善はWebサイト自体の箱を変更するだけではありません。
ヒートマップツールである、Microsoft Clarityはユーザーがどこまで見ているかも知ることができます。

イベントの企画担当者から、「イベントページはよく閲覧されているのに、うまく申し込みにつながっていないようだ」という相談を受けて、ヒートマップで当該ページを確認しました。

結果としては、2/3の人がページを最後まで見ていないことがわかりました。

ユーザーがどのあたりまで見ているのか、どこで離脱をしているのかという傾向が見えると、イベントページのなかでユーザーをより訴求するための、コンテンツやレイアウトの改善方法を検討できます。

こうしたコンテンツの改善は、Webサイト担当者だけが考える・実行するものではありません。イベントやコンテンツを企画した担当者に問題点と仮説を伝えた上で、ターゲットユーザーに対してどんなポイントで訴求できるのかを一緒に検討し、連携しながら素早く改善を実行することが大切です。

ABテストは、どちらのデザインがこのサイトにとって適切なのか判断できないときに、AパターンとBパターンをランダムにユーザーに表示させ、どちらが良い結果を出せるか検証する方法です。

今すぐに機能やレイアウトを変更する判断はできないけど仮説としてあり得る、あるいは改修するかどうかを判断するための根拠が欲しいときの検証に使用されることが多い手法です。

今回ご紹介する改善例は「Google オプティマイズ」を使用したものです。（同サービスは無料でABテストができるツールでしたが、残念ながら2023年9月に廃止されてしまいました。）

イベント詳細の右側に表示されている「申し込む」ボタン。これ実は、以前は「JOIN」という表記でした。

もともとLoftwork.comは全体的に、ナビゲーションやボタン、見出し等で英語が用いられている箇所が多いのですが、さまざまなユーザーが訪れるWebサイトでは、英語だとわかりにくい場合もあるよなぁ…ということが気になっていました。

さらに、ここはコンバージョンにおいて重要な箇所。今回は、わかりやすさを優先してみても良いのではないか？と考え、ABテストを実施しました。
（Webサイトの仕様上、受付中のイベントは必ずボタン名が「JOIN」となっていました）

結果としては「申し込む」の方がクリックされることが多いとわかり、改修によって「JOIN」から「申し込む」に変更しました。

リニューアル当初は、ナビゲーションの英語表記にこだわりがあるサイトでしたが、それではユーザーからクリックされづらい、という事実を定量データとして確認できたため、周囲からの大きな反対意見もなく、改修できました。

今回は実際にどのような改修をしているのか、少しだけご紹介しました。
Webの専門的な知識がなかったり、改善ポイントが全然見えてこないときに、ヒートマップやABテストなどのツールを使用することで実際のユーザーの行動傾向を定量的に知ることができます。さらに、そこから新しい仮説を読み解くことで、よりよいサイト改善のための工夫を検討できます。

「で、結果は出たの？」と気になるところだとは思うのですが、まだまだ地道な改善が多く、社内・社外の人たちに「大きく変わった！」とは感じてもらえていないものが多いのが実情です。

サイト改修・改善で結果を出すには一定の運用期間が必要で、時間がかかります。また、全体戦略やコンテンツの企画や内容、といったチーム・組織内の要因も大きく関わります。
しかし、私たちの工夫によって改善できる領域もまた数多くあります。新しいツールを試してみたり、周りの社員の意見を聞いたりしながら、結果が出るスピードを早めるよう日々頑張っています！