FINDING
長野 彩乃 2024.02.14

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

シリーズ「Webサイト運用の道具箱」について

ロフトワークは、Webクリエイティブのプロフェッショナルとして、さまざまな企業や大学、自治体のWebサイト制作に携わっています。一方で、実は、ロフトワークにも他社と同様に「Web担当者」がいるんです。

普段、プロジェクトなどの情報発信の裏方として活動している「ロフトワークのWeb担当」がどんな仕事をしているのか、どうやってコミュニケーションを支えているのか。ロフトワークのマーケティングUnitでWeb担当者として活動している長野彩乃が、Tipsや小噺的なエピソードをご紹介します。

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

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

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

ヒートマップ解析ツール「Microsoft Clarity」から発見した課題

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テストから発見した課題

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

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

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

「JOIN」→「申し込む」

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

JOIN
以前のボタンテキストは「申し込む」
申し込む
現在のボタンテキストは「申し込む」

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

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

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

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

今後の検討事項

目下、これからの改修項目として気になっているのは、「メインビジュアルの大きさ」です。

現在スマートフォンで見たときに、MVは正方形ででているため、最初にアクセスしたときに、本文までの距離が少しあります。その距離が短くなり、本文が早い段階で目に入ると、自然に文章を読み始めて、読了率が高くなるのではないか?と考えています。

一方で、別の視点では、最初に文章が目に入ることで、最初にアクセスした際の情報量が多くなりすぎてしまい、離脱してしまうかもしれません。これもまた、どちらかすぐに判断できないため、今後のABテストで検証したいなと思っています。

まとめ

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

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

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

UI・UX改善のPOINTS

  • UIとUXの改善をしていくための解析ツールを使うことで、定量データからより具体的な課題を発見できる
  • 具体的な改善案に対してどのパターンが適切なのかを判断できないときは、ABテストがおすすめ
  • UI・UX改善の多くは、すぐに結果がでない。気長にまちながらも、どうしたらより早く結果を出せるのか、新しいツールを試したり周囲と連携しながら常に考えていく必要がある

Webサイト担当者と話しませんか?
Loftwork.comのサイト運営に関わるメンバーに、Webサイト運用に関して一緒にお話しませんか?
「社内に他にWeb担がいなくて、相談相手がいない…」という方、一緒にどうやったら解決できそうかのアイディア出しや相談を受け付けています。

※営業、競業の方、ツールを変わりに設定してほしい等のご相談はお断りする場合があります。ご了承ください。

Webサイト担当者相談へ申し込む

シリーズ:Webサイト運用の道具箱

Keywords

Next Contents

多元な世界を実現したいなら、僕らはみんな自律的になる必要がある