[初心者向け]Clarityで拡張機能を使ってみた！

Webページ上でユーザーはどんな動きをしているのかを見るClarity、実は拡張機能がありとても便利なのをご存知ですか？今回はこの拡張機能である”Microsoft Clarity Live”についてご紹介します。

はじめに

みなさん「Clarity」というツールを使ったことがありますか？主にwebサイト上でユーザーの動向に焦点を当ててUXの問題点を見つける、Microsoftの完全無料のツールです。私は最近このツールを使いはじめそれほど使いこなせているとは言えませんが、この拡張機能「Microsoft Clarity Live」を使ってみたら予想以上に使い勝手が良かったのです。 そのため普段からClarityを操作している方はもちろん「Clarity使い始めたけどまだ使いこなせていないな、、」という方こそ、この拡張機能を使ってよりClarityの魅力に気づくことができれば良いなと思います。

「Microsoft Clarity Live」ってなに？

Microsoft Clarity Liveとは本来Clarityを開いてからでないと見られないクリック率やスクロール率などのユーザー動向を、そのままwebサイト上で見ることができる機能です。この拡張機能を使用することでwebデザインの改善やユーザーの行動の分析がより容易になります。 例えばページ全体を見てどこのクリック率が高い/低いのかを見たい時、Microsoft Clarity Liveを用いると分かりやすく色分けがなされて分かりやすいです↓ このクリック率の情報から様々なことを読み取ることができますね！

拡張機能の追加方法を簡単にご紹介

1,ご自身のアカウントにログインした上でchromeウェブストアにて*Microsoft Clarity Live*を開きます。 2,右上の「Chromeに追加」をクリックし、アクセス権限の許可画面が出てきますが「拡張機能を追加」をクリックします。 以上でMicrosoft clarity liveが使用できるようになります！ 試しに普段clarityで見ているサイトをChromeから検索してサイトを見てみましょう。すると右上にこんなアイコンが出てきます。 このアイコンは左から順に クリック位置　ページ別クリック率　レコーディング を表していて、それぞれ見ることができます。

筆者が使ってよかったと感じる2選

Clarityは拡張機能なしでもとても使いやすいですが、分析初心者の私が「拡張機能使って良かった！」と感じた場面を二つ紹介します。 1,わざわざClarityの管理画面に行かなくとも、サイトを見るだけでユーザーの行動が分かる ユーザーが普段見ているサイトと同じ画面を見ながら、且つ分かりやすいようにクリック位置がヒートマップされていたり、ページごとのクリック率も色分けされているためよりユーザーと近い目線でサイト分析を行うことができ、よりUXの問題点の発見や最適化に役立つと感じました。 2,Clarity管理画面でのマスク化に左右されない 今まではClarityのヒートマップでクリック数を見たい時にプライバシー保護の観点から「・・・」という風に文字が見れないように編集がなされていて、「あれ、ここすごくクリックされているんだけどどこのページなんだろう？」と実際のサイトとClarityの画面を交互に見比べながら「多分このページのクリックかな」という風に探していました。しかしMicrosoft Clarity Liveを使ってからはサイト上に直接ヒートマップが表示されるので、見比べる必要もなく一発でどこのページへ飛ぶのかまで追跡することが可能です。

まとめ

今回はclarityの拡張機能である「Microsoft Clarity Live」を紹介しました。Clarityと同じ操作性でありながらClarityで起こるマスク化による文字が分からない問題まで解決できる、本当に便利な拡張機能です。 またChromeで機能を拡張するときもそこまで手間がかからない為、現在Clarityを使っている方はこれを機にMicrosoft Clarity Liveを使ってみてはいかがでしょうか？きっとこの便利さに気付くと思います！