Webflow構築

Webflow Analyzeにクリックマップが登場:訪問者のクリック行動をキャンバス上で可視化

Kouki T
デザイナー

「このボタンはクリックされているか」「ナビゲーションのどの項目が使われているか」と気になったことはありませんか。Webflow Analyzeのクリックマップでは、クリックされた要素と回数をキャンバス上で確認できます。この記事では、表示方法とデータの読み方、改善に使うときの注意点を紹介します。

Webflow Analyzeの画面にナビゲーションとCTAのクリック数が表示された例
Analyze modeのキャンバスに、ナビゲーションやボタンごとのクリック数を表示した例。右側のTop eventsでも件数を確認できます。

クリックマップで確認できること

ページビューやコンバージョン数だけでは、訪問者がページ内のどの要素をクリックしたかまでは分からないことがあります。クリックマップは、ボタンやリンクなどの要素ごとのクリック回数を、ページ上の位置と合わせて確認するための機能です。

たとえば、ファーストビューの二つのボタンを比べると、クリック数に違いがあるかを把握できます。ただし、件数だけではクリック率や成果への貢献は分かりません。表示回数、集計期間、デバイス、最終的なコンバージョンも合わせて確認しましょう。

要素ごとのクリックをキャンバスで見る

対象サイトでAnalyzeを利用できる状態にし、Webflowで確認したいページを開きます。上部バーのAnalyze modeを選ぶと、クリックされた要素にデータが重なって表示されます。右側のパネルには、クリックの多いイベントも一覧表示されます。

クリックマップは、ページ上の位置をぼかして示す画像ではなく、ボタンやリンクなど特定の要素に結び付いたクリックを表示します。イベントにカーソルを合わせると対応する要素を確認でき、右側の一覧から対象へ移動することもできます。クリックの有無だけで、注目した場所や読了した範囲までは判断できません。

二つのCTAボタンにそれぞれクリック数が表示された例
二つのボタンに表示されたクリック数の例。件数を比較するときは、集計期間や表示回数も確認します。

役割ごとの活用例

まずは、目的に応じて比較する項目を決めます。たとえば問い合わせを増やしたい場合は、問い合わせボタンと関連リンクの位置、件数、デバイス別の違いを確認します。

デザイナーは、意図したボタンが使われているかを確認し、配置や見た目を見直す材料にできます。クリックが少ない場合は、表示位置や周囲の情報との関係を調べ、別の配置を試す仮説を立てます。

コンテンツ担当者は、リンクやCTAの文言ごとのクリック数を見て、表現を見直すきっかけにできます。ただし、クリックされていないことだけを理由に、本文が読まれていないとは判断できません。

マーケターは、キャンペーンの期間や流入元の変化を考慮しながら、ページ上の導線を確認できます。クリック数とコンバージョン数は別の指標です。売上や費用対効果を評価するときは、それぞれのデータを組み合わせます。

表示方法とデバイス別の確認

Analyzeを利用できるサイトで、Pagesパネルからページを選び、上部のAnalyze modeを開きます。右側のDevice typeフィルターで、全デバイスまたはデバイス別のデータを確認できます。利用条件や料金は変更される場合があるため、導入前にWebflowの現在の案内を確認してください。

データを改善につなげる

集計期間と対象デバイスをそろえて現状を確認し、変えたい箇所と理由を記録します。そのうえで、ボタンの位置や文言などを変更し、変更後のデータを同じ条件で比較します。訪問数が少ない場合は数件の変化で結論を出さず、期間を延ばして確認しましょう。

クリックマップは、何がクリックされたかを見つける手がかりです。クリック率やコンバージョンなどの指標と合わせ、改善前後の違いを確かめてください。表示速度を含むサイト全体の確認には、Webflowサイトのパフォーマンス測定と改善方法も役立ちます。

参考資料

あなたのWebサイトにブーストを。

Booostはノーコードツール「Webflow」に特化したWeb制作サービスです。
デザイン・マーケティング・翻訳の3つの最適化で、Webサイトの集客力を最大化します。

この記事を監修した人
Kouki T
デザイナー
2024年にデザイナーとしてIGNITEに入社。10代からWebデザインを独学で学びWeb・グラフィック・動画など様々な分野の制作に携わっている。 現在はWebflowの技術を活かしデザイン・SEO・運用あらゆる面でのクオリティを高めたWebサイトを構築し、クライアントの集客力アップに繋げている。