ウェブサイトの視線追跡と行動追跡

Labvanced Web Bridgeは、実際のウェブサイトをLabvanced環境に持ち込み、参加者がどのように視線を向け、クリックし、ナビゲートするかを制御された設定で研究できます。視線はLabvancedのウェブカメラ視線追跡を使用して追跡されており、ピアレビュー済みの研究（Kaduk et al., 2024）に対してEyeLink 1000で検証されており、クリック、ホバー、スクロールも同じ実際のページからキャプチャされます。

Labvanced Web Bridgeを使用した実際のウェブサイトテスト

ほとんどの研究プラットフォームは、参加者に自ら構築された刺激を表示することしかできず、画像、動画、フォーム、カスタムページを表示することができます。Web Bridgeはその制限を打破します：実際の製品ページ、ニュースサイト、またはウェブアプリを研究に持ち込むことができます。無料のChrome拡張機能を使用します。

制御されたUXと行動研究のほとんどに利益があるため、実際のものへの反応を見ることが、再現されたものよりも重要です。

Web BridgeはLabvancedの完全な実験プラットフォームの一部であり、同じ研究で参加者が見るページのバージョンをランダム化し、Labvancedの他の測定とウェブサイト追跡を組み合わせ、すべてを一貫した形式でエクスポートできます。

実際のウェブサイト、モックアップではない

参加者は、研究の中で実際のウェブサイトとリアルタイムで対話します。追跡されるのは、ユーザーが実際に見る本物のページです。

すべてが一箇所に

視線、クリック、ホバー、およびスクロールはすべて、非常に同じ追跡要素でキャプチャされるため、追加の作業なしで信号が整列します。

画面位置ではなく要素を追跡

物を一度マークします。追跡はスクロールやリサイズ、クリック後にのみ表示されるポップアップやメニューを通じて正しく追い続けます。

通常、2つのブラウザ制限がありますが、Web Bridgeは両方を回避します。

ウェブサイトは埋め込みをブロックします。 多くのサイトは、X-Frame-OptionsまたはContent-Security-Policyのセキュリティヘッダーを設定し、別のページ内で表示されるのを防ぎます。Web Bridgeはその制限を解除しますが、Labvancedが開いているブラウザタブのみで、他のタブには影響せず、タブが閉じたりLabvancedを離れたりするとその変更は消えます。

ブラウザは埋め込まれたページを隔離します。 サイトが埋め込まれても、通常、内部でのマウス活動は周囲のページに届きません。Web Bridgeの拡張機能は、埋め込まれたページ内からクリック、ホバー、動きを直接読み取り、それを研究にリアルタイムでリレー送信します。

研究におけるWeb Bridgeの使用

使用するには、研究者が研究にWebsite Frameを追加し、実際のURLを指し示します。そこから、追跡するものをマークするのは、シンプルなクリックと選択のアクションです：製品の写真、見出し、またはボタンをクリックすると、Labvancedはその正確な要素をロックします。Labvancedはページを継続的に監視し、スクロール、クリック後にのみ表示される要素（ポップアップやドロップダウンなど）、さらにはアニメーションや自動でリサイズまたは移動する要素についても追跡が自動的に調整されます。追跡されるエリアは単純な矩形であり、何も自動的には追跡されません：研究者は、研究が実行される前に正確に重要なものを選択します。

Labvancedエディタ内の実際のウェブサイトでWebsite AOIの選択を選択および調整する画像

Labvanced環境を使用して、実際のウェブサイトのAOIを選択し、調整する様子。

プロパティ	仕様
ブラウザ	Google Chrome
基盤	Labvancedのピアレビュー済みウェブカメラ視線追跡（Kaduk et al., 2024）およびマウス追跡
追跡する内容	選択した要素の視線、クリック、ホバー、スクロール
プライバシー	Labvancedが埋め込むウェブサイト内でのみ実行されます。パスワードや支払いフィールドのテキストは決して読み取られません

拡張機能のインストール

Web Bridgeは無料のChrome拡張機能です。あなたと参加者は両方ともインストールする必要があります。インストールは1分もかからず、Labvancedが参加者を自動的に案内します。

研究を構築する際の参考として、ウェブサイトAOIの選択と調整で完全なAOIアンカーコントロールをご覧ください。クリック、ホバー、動きイベントを構築するには、ウェブサイトAOIでのマウス行動の追跡をご覧ください。

研究の利用ケース

視線ヒートマップが靴の写真、製品名、価格、カラースウォッチ、カートに入れるボタンの上に表示されたモックのランニングシューズ製品ページ

Eコマース

実際の製品ページを埋め込みます。人々が本当に見る写真、クリックされるボタン、カートに何かを追加する前にどれだけスクロールしたかを確認できます。

記事の見出しとその隣の山のリード写真に焦点を当てた視線ヒートマップを持ったモックニュースページ

ニュース & メディア

ライブニュース記事を埋め込みます。どの見出しが最初に注目されるか、そして記事が長くなるにつれて注意がどのように変化するかを調べます。

ソリューションのドロップダウンが開いているモックウェブサイトナビゲーションバーと、ソリューションメニューから価格設定までの動きを追った点線のパス

ナビゲーションテスト

実際のメニューやマルチページフローを埋め込みます。人々が本当に探しているものを見つけられるか、そしてどこでためらうかを確認します。

異なる見出しと今すぐ購入ボタンの色を持つAとBとラベル付けされた2つのモックベッドのランディングページ、それぞれクリックした訪問者の割合（42％と67％）とプログレスバー付

A/Bテスト

同じページの2つのバージョンを埋め込み、Labvancedの組み込みの対照方法で参加者をそれぞれにランダムに割り当て、結果を直接比較します。

ライオンはどの動物ですかと尋ねるモック子供向け教育クイズページ。ライオンのイラストと3つの回答カード（ライオン、象、シマウマ）があり、視線ヒートマップはライオンのイラストとライオンの回答カードに最も強くなっています。

発達心理学

実際の子供向け教育ウェブサイトを埋め込み、若い参加者がどのようにそれをナビゲートするかを追跡します。これはデジタルリテラシーや注意がオンラインでどのように発達するかの研究に役立ちます。

見出し「偏った世界でニュースを信頼できるか」というモックニュース記事ページ、建物の外にいる人々の写真、見出し、写真、著者による視線ヒートマップ

メディア & 政治心理学

実際のニュース記事を埋め込み、人々の目が著者名や出典に達することがあるかを追跡します。その後、彼らがそれを信頼するかどうかを決定します。

For marketing research specifically, see Website Eye Tracking for Marketing Research: five studies you can run, from checkout fees and pop-ups to banner ads, product pages, and A/B tests.

データ収集

本物のウェブサイトを埋め込むことで、通常のブラウジングが研究データに変わります。Web Bridgeを使うことで、次のことが分かります：

訪問者が最初にどこを見ているか、そしてどのくらいの時間
一度も見られない、または完全にスキップされる要素
誰かがクリックする前に、注意がページのどの部分からどの部分に移動するか
人々がクリックしたものが最初に見たものに一致するか、または注意と行動が異なる方向に引っ張られるか
人々がどのくらいの時間、ある領域に留まるか、それは彼らが注意深く読んでいるか、または何かを探しているかを意味する可能性があります

ページ上の任意のものを選択できます。例えば、商品写真、見出し、またはボタンです。これが記録されたデータです：

あなたが得るもの	それがあなたに示すこと
視線	人々が実際に見る場所、そしてどのくらいの時間
要素の位置	追跡しているものの正確な位置とサイズ、ページがスクロールするにつれてライブ更新
クリック	人々がクリックしたもの、そして正確にどこで
ホバー	クリックしなくても注意を引くもの
マウスの動き	カーソルがページ上をどのように移動するか
スクロール	人々が行動を起こす前にどのくらいスクロールするか

すべての結果は、分析のためにCSV、XLSX、またはTSVにクリーンにエクスポートされます。

このデータを扱う

このデータを基にした研究を設計するために、事前に知っておくべき行動がいくつかあります。

座標空間はインタラクションタイプによって異なります。 クリック、マウスダウン、マウスアップ、マウスムーブイベントは、ページの相対座標を報告します。これは、埋め込まれたページのフルスクロール可能エリア全体にわたる位置であり、すでにスクロールされた部分も含まれます。ホバーと離脱イベントは代わりに要素相対座標を報告します。これは、追跡された要素内の位置です。インターフェースでは両方が同じ座標ラベルを使用するため、研究が必要とするインタラクションタイプを事前に決定してください。一つのエクスポートされた列で二つを組み合わせると、警告なしに二つの異なる座標システムが混ざります。追跡された要素で記録された視線データは、クリックと同じページ相対空間を使用するため、同じ要素からの視線データとクリックデータは、変換なしで直接整列します。

スクロールだけでなく、継続的に更新を追跡する。 追跡される要素の位置とサイズは、すべてのフレームで再測定され、これによりアニメーション、CSSトランジション、動的にサイズが変更される要素を正しく追跡できるようになります。スクロールや再配置だけではありません。

追跡された要素内のスクロール可能な領域は独自の座標空間を持つ。 チャットパネルやスクロール可能な製品リストなど、追跡された要素が独自の内部スクロールを持つ場合、それをスクロール可能なコンテナとしてマークすることで、その領域の独自のスクロール位置とコンテンツサイズを、ページ全体のスクロールとは別に公開します。これにより、ネストされたスクロールが外部ページと混同されることはありません。

マウスイベントは三つのターゲティングモードを提供します。 マウスイベントは、特定の追跡要素のために発火する場合、任意の追跡要素のために発火する場合、または追跡要素かどうかに関係なく埋め込まれたページのどこでも発火する場合があります。これは、事前にすべての要素にマークを付けなくても、広範なインタラクションパターンをキャプチャするのに便利です。

検証と比較

Web Bridgeは、Labvancedのコア測定エンジンの二つを組み合わせています。視線データは、Labvancedのウェブカメラ目の追跡から得られ、専門の目のトラッカー（EyeLink 1000）に対して、査読された研究でテストされています：全体の精度は1.4°で、精度は1.1°であり、画面の中心では1.3°の精度と0.9°の精度に改善されています（Kaduk et al., 2024）。

クリック、ホバー、カーソルデータは、Labvancedのマウストラッキングから得られ、視線データと同じ追跡要素に記録されます。

他のアプローチとの比較

リアルなウェブサイトをテストする他の方法は、必要なものとそれに対して記録できるものが異なります。

質問	他のアプローチ	Web Bridge
ウェブサイトに変更が必要ですか？	リアルアイは、ウェブカメラ目のトラッキングサービスであり、そのためにはJavaScript SDKがサイトに必要であり、すべての追跡要素には`data-re-aoi-name`属性が必要です。Microsoft Clarityは、ヒートマップおよびセッション記録ツールで、サイトにトラッキングコードのインストールが必要です。	いいえ。テストしたいウェブサイトのURLを貼り付け、Labvancedエディタでクリックして要素にマークを付けるだけです。
埋め込まれたページ内での動きを記録できますか？	Labvancedの`I-Frame`オブジェクトのように他のウェブサイトを単に埋め込むだけでは、その周囲のページからは読まれず、内部でのクリックやスクロールはキャプチャされません。Microsoft Clarityも、サードパーティのiframesをキャプチャできません。	はい。拡張機能は、埋め込まれたページの内部からのクリック、ホバー、マウスの動き、スクロールを読み取ります。
スクロールやページ変更に追従できますか？	リアルアイの埋め込まれたウェブサイトテストは、サイトのスクリーンショットを分析し、水平スクロールをサポートしていません。	はい。マークされた要素は、スクロール、サイズ変更、アニメーション、およびページが開いた後に読み込まれるコンテンツを通じて追跡されます。
データは実際の参加者から得られますか？	Attention Insightのような予測ツールは、実際の参加者を記録するのではなく、AIモデルで注意を推定します。	はい。実際の参加者が見たりクリックしたりした場所を記録します。
特別なハードウェアが必要ですか？	Pupil Labs、目のトラッカー製造者は、Neon目のトラッカーが必要なWeb AOIツールを提供しています。	いいえ。参加者のウェブカメラを使用します。

最終レビュー日: 2026-09-25。

AI予測のヒートマップが実際の参加者を記録することと比較して、何を伝えられるかについては、AIはあなたがどこを見ているかを予測できます。しかし、あなたが何をするかはまだわかりません。を参照してください。

制限事項

Web BridgeはGoogle Chromeでのみ実行され、研究者とすべての参加者は無料の拡張機能をインストールする必要があります。研究でWebsite Frameを使用するにはUltimateライセンスが必要です。埋め込むことができないサイトもあります：amazon.comとebay.comはボット保護のためにエディタでブロックされていますし、埋め込みを検出する他のサイトは機能しない可能性があります。Web Bridgeは、研究者がマークした要素を追跡し、ページ上のすべてではありません。

よくある質問

Web Bridgeは他のウェブサイトの人々を追跡しますか？

いいえ。追跡はLabvanced自身が埋め込んだウェブサイトの内部でのみ開始されます。他のページでは、拡張機能はすぐに終了し、そのページから何も読みません。埋め込みが許可されるときに、ブラウザタブがlabvanced.comにあるかどうかを確認するだけです。

参加者は何かをインストールする必要がありますか？

はい、研究者が使用するのと同じ無料の拡張機能が必要です。参加者がまだ持っていない場合、プロンプトが研究が始まる前にインストールする手順を案内し、通常は1分以内で済みます。

ページが変更されてもトラッキングはどう続けられますか？

各追跡要素は、固定された画面位置ではなく、ページの実際の部分にロックされています。Labvancedはページを継続的に監視しているため、参加者がスクロールしたり、ポップアップや展開するメニューのように新しいコンテンツが表示されたり、要素が自動でサイズ変更やアニメーションした場合、トラッキングは自動的にそれに従います。

自動的に何を追跡するかを検出しますか？

いいえ、それは意図的です。研究者はエディタ内で直接クリックすることで、写真、見出し、ボタンなど、追跡すべきものを正確にマークします。手動でのステップなしに何も推測されたり追跡されたりすることはありません。

視線追跡なしでクリックとマウスの動きを追跡できますか？

はい。マウストラッキング（クリック、ホバー、動き）は、視線追跡とは独立して機能します。これらのいずれか、または両方を同じ追跡要素で記録できます。

このデータはLabvancedの通常の目のトラッキングと同じくらい正確ですか？

はい。同じエンジンであり、EyeLink 1000に対して1.4°の全体的な精度と画面の中心で1.3°の精度が検証されています（Kaduk et al., 2024）。ここでの違いは、基盤の精度ではなく、実際の外部ウェブサイトでそれを使用する点です。