ウェブサイトの視線追跡と行動追跡
Labvanced Web Bridgeは、ウェブサイトの視線追跡および行動追跡のための無料のChrome拡張機能です。Labvancedのウェブカメラ視線追跡を使用して、参加者がどこを見て、クリックし、スクロールするかを記録し、これがピアレビュー済みの研究（Kaduk et al., 2024）に基づいてEyeLink 1000に対して検証されています。
目次
Labvanced Web Bridgeとは？
Labvanced Web Bridgeは、Labvancedを実際の外部ウェブサイトに接続する無料のChrome拡張機能です。通常、研究プラットフォームは、画像、ビデオ、フォーム、カスタムページなど、内部で構築された刺激しか参加者に表示できません。Web Bridgeはそれを変えます：研究者は、製品ページ、ニュースサイト、またはウェブアプリなどの実際のライブウェブサイトを研究に直接持ち込み、参加者がその上でどのように行動するかを測定できます。
これは、実際のものに対する反応を見ることが重要な制御されたUXおよび行動研究に特に役立ちますが、それに限定されません。
Labvanced Web Bridgeでできること
Web BridgeはLabvancedの完全な実験プラットフォームの一部であり、同じ研究で参加者が異なるページのバージョンをランダム化したり、ウェブサイト追跡をLabvancedの他の測定と組み合わせたり、すべてを一貫した形式でエクスポートしたりできます。
実際のウェブサイト、モックアップではない
参加者は実際のウェブサイトとライブで対話し、研究の中でトラッキングされるのは、ユーザーが実際に見るページです。
すべてが一か所に
視線、クリック、ホバー、スクロールがすべて同じトラッキングされた要素にキャプチャされるため、すべての信号が追加作業なしに整列されます。
画面位置ではなく要素をトラッキング
一度マークするだけで済みます。トラッキングは、スクロール、サイズ変更、さらにはクリック後にのみ表示されるポップアップやメニューを通じて正しく追従します。
Web Bridgeの違い
他の方法で実際のウェブサイトをテストする際には、サイトからの要求と記録できる内容に違いがあります。
| 質問 | 他のアプローチ | Web Bridge |
|---|---|---|
| ウェブサイトに変更が必要ですか？ | RealEyeというウェブカメラ視線追跡サービスは、サイトにJavaScript SDKとdata-re-aoi-name属性を必要とします。Microsoft Clarityというヒートマップとセッション記録ツールは、サイトにトラッキングコードをインストールする必要があります。 | いいえ。テストしたいウェブサイトのURLを貼り付け、Labvancedエディタで要素をクリックしてマークします。 |
| 埋め込まれたページ内で何が起こるかを記録できますか？ | LabvancedのI-Frameオブジェクトのような他のウェブサイトを単に埋め込んでも、その周囲のページから読み込むことができないため、内部でのクリックやスクロールはキャプチャされません。Microsoft Clarityもサードパーティのiframeをキャプチャできません。 | はい。拡張機能は、埋め込まれたページ内のクリック、ホバー、マウス移動、スクロールを読み取ります。 |
| スクロールやページ変更に追従しますか？ | RealEyeの埋め込まれたウェブサイトテストは、サイトのスクリーンショットを分析し、水平スクロールをサポートしていません。 | はい。マークされた要素は、スクロール、サイズ変更、アニメーション、およびページが開いた後に読み込まれるコンテンツを通じて追従します。 |
| データは実際の参加者から取得されますか？ | Attention Insightのような予測ツールは、実際の参加者を記録するのではなく、AIモデルで注意を推定します。 | はい。実際の参加者が見てクリックする場所を記録します。 |
| 特別なハードウェアが必要ですか？ | Pupil Labsという視線追跡器メーカーは、Neon視線追跡器が必要なWeb AOIツールを提供しています。 | いいえ。参加者のウェブカメラを使用します。 |
AIによって予測されたヒートマップが実際の参加者を記録することと比較して何を伝えられるか、何を伝えられないかについては、AIはあなたがどこを見るかを予測できます。それでもあなたが何をするかはわかりません。を参照してください。
最終レビュー日: 2026-09-25。詳細はRealEyeのナレッジベース、Microsoft Clarityのセットアップドキュメント、Attention Insightのナレッジベース、およびPupil LabsのWeb AOIドキュメントに対して確認されました。埋め込まれたページを読み取る際のブラウザ制限は、MDNの同一生成元ポリシーのドキュメントに記載されています。
Labvanced Web Bridgeでできる研究
Eコマース
実際の製品ページを埋め込む。人々が実際に見る写真、クリックされるボタン、カートにアイテムを追加する前にどこまでスクロールするかを確認できます。
ニュース & メディア
ライブのニュース記事を埋め込む。どの見出しが最初に注目されるか、記事が長くなるにつれて注目がどのように変化するかを確認します。
ナビゲーションテスト
実際のメニューや多ページフローを埋め込んでください。人々が探しているものを見つけられるか、どこで躊躇するかを確認します。
A/Bテスト
同じページの2つのバージョンを埋め込み、Labvancedの内蔵カウンターバランシングを使用して参加者をランダムに割り当て、結果を直接比較します。
発達心理学
実際の子供向け教育ウェブサイトを埋め込み、若い参加者がそれをどうナビゲートするかを追跡します。これは、デジタルリテラシーや、オンラインでの注意の発展に関する研究に役立ちます。
メディアと政治心理学
実際のニュース記事を埋め込み、参加者の目が著者名やソースに到達するかどうかを追跡します。その後、彼らがそれを信頼するかどうかを決定します。
収集したデータ
実際のウェブサイトを埋め込むことで、通常のブラウジングが研究データに変わります。Web Bridgeを使用すると、以下のことがわかります：
- 訪問者が最初にどこを見、どれくらいの時間を費やすか
- 一度も見られない要素、または完全にスキップされる要素
- 誰かがクリックする前に、注意がページのある部分から別の部分にどのように移動するか
- 人々がクリックしたものが最初に見たものと一致するかどうか、または注意と行動が異なる方向に引っ張られるかどうか
- 人々が1つの領域にどれくらいの時間滞在するか、これは彼らがじっくり読んでいるか、何かを探しているのかを意味することがあります
ページ上の任意のもの（製品の写真、見出し、ボタンなど）を選択してください。ここに記録されたデータがあります：
| あなたが得るもの | それがあなたに示すこと |
|---|---|
| 視線 | 人々が実際にどこを見ているか、どれくらいの時間 |
| 要素の位置 | トラッキングしているものの正確な場所とサイズ、ページがスクロールする際にライブで更新 |
| クリック | 人々がクリックするもの、正確な場所 |
| ホバー | クリックなしでも注意を引くもの |
| マウスの動き | カーソルがページ上を移動する様子 |
| スクロール | 人々が行動する前にどれくらいスクロールするか |
すべての結果は、クリーンにCSV、XLSX、またはTSV形式にエクスポートされ、分析の準備が整います。
精度のベンチマーク
Web Bridgeは、Labvancedの2つのコア測定エンジンを組み合わせています。視線データは、Labvancedのウェブカメラ目の追跡から得られ、専門の目のトラッカー（EyeLink 1000）に対して査読付き研究でテストされました：全体的な精度は1.4°、精度は1.1°であり、画面の中央では1.3°の精度と0.9°の精度に改善されます（Kaduk et al., 2024）。
クリック、ホバー、カーソルデータは、Labvancedのマウストラッキングから取得され、視線データと同じトラッキングされた要素に記録されます。
Labvanced Web Bridgeが実際のウェブサイトをどのように追跡するか
Web Bridgeは、ライブのサードパーティウェブサイトに対して制御された行動研究を可能にします：参加者は実際のページとインタラクションし、Labvancedは彼らの視線、クリック、ホバー、スクロールを記録します。
それを可能にするためには、2つの異なるブラウザの制限に対処する必要があります。まず、多くのウェブサイトは、X-Frame-OptionsまたはContent-Security-Policyセキュリティヘッダーを設定して、自分たちが他のページに埋め込まれるのを防いでいます。Web Bridgeは、Labvancedが開いているブラウザタブでのみその制限を解除します。他のタブには影響がなく、タブが閉じられるかLabvancedを離れると変更は解除されます。第二に、一度サイトが埋め込まれると、通常ブラウザはその埋め込まれたページ内のマウス活動が周囲のページに到達することを許可しません。これは別の制限です。Web Bridgeの拡張機能はそれにも対応し、埋め込まれたページ内で直接クリック、ホバー、動きのイベントを読み取り、リアルタイムで研究に返送します。
使用するには、研究者がWebsite Frameを研究に追加し、実際のURLを指し示します。そこから、トラッキングするものをマーキングすることは簡単なクリックと選択のアクションです：製品の写真、見出し、またはボタンをクリックすると、Labvancedはその正確な要素にロックします。Labvancedはページを継続的に監視するため、トラッキングは自動的にスクロールに調整され、クリック後にのみ表示される要素（ポップアップやドロップダウンなど）、さらにはアニメーションや自分でサイズ変更または移動する要素にも対応します。追跡された領域は単純な長方形であり、何も自動的に追跡はされません：研究者が研究が行われる前に正確に何が重要かを選択します。
| プロパティ | 仕様 |
|---|---|
| ブラウザ | Google Chrome |
| 構築基盤 | Labvancedの査読済みウェブカメラによる視線追跡（Kaduk et al., 2024）およびマウストラッキング |
| 追跡する内容 | 視線、クリック、ホバー、選択した要素上のスクロール |
| プライバシー | Labvancedが埋め込んだウェブサイト内でのみ実行されます。パスワードおよび支払いフィールドのテキストは決して読み取られません |
ウェブサイトトラッキングデータの動作
このデータを利用して研究を設計する際に、あらかじめ知っておくべきいくつかの動作があります。
インタラクションの種類によって座標空間が異なります。 クリック、マウスダウン、マウスアップ、マウスムーブのイベントはページに対する相対座標を報告します。これは、埋め込まれたページのスクロール可能な領域全体にわたる位置を示し、すでにスクロールされた部分も含まれます。ホバーや離脱のイベントは、代わりに要素に対する相対座標を報告します。これは、追跡されている要素自体内の位置を示します。両方のインターフェースで同じ座標ラベルを使用しているため、研究で必要なインタラクションの種類をあらかじめ決定してください。一つのエクスポートされた列に二つを組み合わせると、警告なしに二つの異なる座標系が混在します。追跡された要素で記録された視線データは、クリックと同様のページに対する相対空間を使用するため、同じ要素からの視線とクリックデータは直接整合します。
トラッキングは継続的に更新され、スクロール時だけではありません。 追跡された要素の位置とサイズはすべてのフレームで再測定されます。これにより、追跡はアニメーション、CSSトランジション、および動的にサイズが変わる要素を正確に追うことができ、単にスクロールや再配置だけではありません。
追跡された要素内のスクロール可能な領域は独自の座標空間を持ちます。 追跡された要素にチャットパネルやスクロール可能な製品リストのように独自の内部スクロールがある場合、それをスクロール可能なコンテナとしてマークすると、その領域の独自のスクロール位置とコンテンツサイズがページ全体のスクロールとは別に露出します。これにより、ネストされたスクロールが外部ページと混同されることはありません。
マウスイベントは三つのターゲティングモードを提供します。 マウスイベントは、特定の追跡された要素のために発火することができます。特定の要素を個別に選択することなく、任意の追跡された要素に対して、または追跡された要素であるかどうかに関わらず、埋め込まれたページ上のどこでも発火することができます。これは、事前にすべての要素をマークせずに広範なインタラクションパターンをキャプチャするのに便利です。
Labvanced Web Bridgeの設定
Web Bridgeは無料のChrome拡張機能です。あなたと参加者の両方がインストールする必要があります。所要時間は1分未満で、Labvancedは参加者が既にインストールしていない場合、自動的に手順を案内します。
研究を構築する際に詳細を参照するには、完全なAOIアンカリングコントロールのためにウェブサイトAOIの選択と調整を見てください。クリック、ホバー、動きのイベントを構築するには、ウェブサイトAOIにおけるマウスの動作追跡を見てください。
制限事項
Web BridgeはGoogle Chromeでのみ動作し、研究者とすべての参加者が無料の拡張機能をインストールする必要があります。研究にWebsite Frameを使用するには、Ultimateライセンスが必要です。一部のサイトは埋め込みできません：amazon.comとebay.comはボット保護のためにエディタ内でブロックされています。他のサイトも埋め込みを検出すると機能しない場合があります。Web Bridgeは、研究者がマークした要素を追跡し、ページ上のすべてを追跡するわけではありません。
よくある質問
Web Bridgeは他のウェブサイトの人を追跡しますか？
参加者は何かをインストールする必要がありますか？
ページが変更されても追跡はどのように動作し続けますか？
追跡する内容を自動的に検出しますか？
視線追跡なしでクリックやマウスの動きを追跡できますか？
このデータはLabvancedの通常の視線追跡と同じくらい正確ですか？
さらなる読み物
ウェブカメラ視線追跡
Web Bridgeの背後にある検証済みのエンジンと完全な精度研究。
マウストラッキング
外部サイトだけでなく、Labvanced内で構築された刺激上のカーソルの動きを追跡します。
Labvanced Web Bridge ガイド
拡張機能をインストールし、ウェブサイトを埋め込み、要素をマークし、録音を開始します。