
Labvanced Web Bridge — 拡張機能サポートとガイド
Web Bridgeが初めてですか? ウェブサイトフレーム視線追跡ウォークスルーに従って、タスクの流れを始めから終わりまで体験し、ここに戻って完全な参照詳細を確認してください。
助けが必要ですか? [email protected]までご連絡ください。
目次
1. Labvanced Web Bridgeとは?
Labvanced Web Bridgeは、Labvanced実験プラットフォーム(labvanced.com)を実際のウェブサイトに接続するためのGoogle Chrome用のブラウザ拡張機能です。これにより、研究者は参加者が実際の第三者のウェブサイトと対話する制御されたUX研究と行動研究を実施することができ、Labvancedは目の動き(ウェブカメラを通じて)、マウスクリック、ホバーイベント、スクロール行動を記録します。
この拡張機能がないと、ブラウザは標準的なセキュリティ制限により、ウェブサイトを研究の中に埋め込むことを防ぎます。この拡張機能は、制御されたLabvanced研究セッション内でのみこれらの制限を解除し、埋め込まれたサイト上の参加者のインタラクションを測定するために必要な行動トラッキング機能を追加します。
Labvancedエディター内では、Website Frameを使用して埋め込みが行われ、これはCanvas FrameやPage Frameの他の2つのフレームタイプとは異なり、このために特別に構築された3番目のフレームタイプです。他のフレームタイプとどのように組み合わさるかについては、ウェブサイトフレームを確認してください。

2. インストール
ステップバイステップ
研究者
- Google Chromeに移動します。
- Labvanced Web BridgeのChromeウェブストアページにアクセスします。
- **「Chromeに追加」**をクリックします。
- 確認ダイアログで、**「拡張機能を追加」**をクリックします。
- Labvanced Web BridgeのアイコンがChromeのツールバーに表示されます。

参加者
- インストールをクリックします。
- **「Chromeに追加」**をクリックします。
- 確認ダイアログで、**「拡張機能を追加」**をクリックします。
- 実験に戻り、ページを更新して研究を開始します。
拡張機能がアクティブであることの確認
研究者 インストール後、Dashboardタブに移動し、New Studyを作成します。下にスクロールして、チェックボックスをオンにしてTrack External Website:を有効にし、対象のウェブサイトのURLを入力します。拡張機能が正しくインストールされている場合、Labvancedエディターには緑のチェックマークと確認メッセージが表示されます。

参加者
実験ページを更新すると、実験が進行します。

3. 誰がインストールすべきか?
研究者
次の場合には拡張機能をインストールしてください:
- 実際のウェブサイトを刺激として含む研究を設計している場合(例:製品ページ、ニュース記事、キオスクインターフェイスのテスト)。
- Labvancedエディターで
Website Frame要素を使用している場合。 - 外部ウェブサイトを含む研究のプレビューまたはパイロットを行っている場合。
標準的なLabvanced刺激(画像、動画、テキスト、フォームなど)のみを使用する研究や、HTTPヘッダーを直接編集および制御できるウェブサイトの所有者である場合、この拡張機能は必要ありません。
研究参加者
次の場合には拡張機能をインストールしてください:
- 研究リンクを受け取り、開始前にインストールするよう指示された場合。
- 研究のオンボーディングページで拡張機能がインストールされていることを確認するよう求められた場合。
必要かどうかわからない場合は、研究リンクページが研究開始前にお知らせします。
4. 使用方法 — 研究者ガイド
4.1 研究にウェブサイトフレームを追加する
- Labvancedエディターで実験を開きます。
Trial Timelineの下で、+ Websiteフレームオプションをクリックします。- 要素タイプから**「ウェブサイトフレーム」**を選択し、次に
External Websiteオプションを選択します。拡張機能がアクティブな場合、緑の確認メッセージが表示されます。それ以外の場合は、上記のインストール手順を参照してください。 - 前のステップでタスクを作成する際に指定したウェブサイトが自動的に表示されます。
4.2 興味のある領域(AOI)の選択
興味のある領域(AOI)は、埋め込まれたウェブサイト上でトラッキングしたい特定の要素です。たとえば、製品画像、見出し、または「カートに追加」ボタンなどです。
自動検出はありません:Labvancedは埋め込まれたウェブサイトのHTMLやコンテナのマークアップを読み取って、研究に関する要素を推測することはありません。各AOIはエディター内での手動クリックおよびアンカー操作です。AOI自体はデータを記録しません。視線キャプチャにはその上に構築された明示的なEyetracking Gazeイベントが必要です。設定方法については、視線データの記録:イベントを追加を参照してください。
- エディターでウェブサイトフレームがアクティブで、ウェブサイトが対話的な形で表示されている状態で、サイドメニューから
Add Website AOIオブジェクトをクリックします。 - AOIオブジェクトが追加され、赤で表示されます。目標のAOIをクリックします。選択は緑になります。
Pick Elementがあなたが意図した正確な要素にアンカーしない場合や、既存のAOIのターゲット、サイズ、または位置を調整したい場合は、ウェブサイトAOIの選択と調整を参照して、Parent/Child/Prev/Nextのナビゲーションコントロール、サイズと位置のオフセット、Text Filter、Scrollable container、および公開前にAOIが実際にアンカーされているかどうかを確認してください。- また、
Resolutionオプションを使用して、研究がデスクトップ用かモバイル用かを示すこともできます。以下の画像ではモバイルが選択され、AOIが自動的に更新されました。
- 追加の要素についても繰り返します。
- 各AOIはAOIリストに表示されます。AOI単体ではデータを記録しません。上記の説明に従って
Eyetracking Gazeイベントを追加してキャプチャを開始します。

4.3 追跡される内容
研究セッション中の各AOIについて、Labvancedは研究者に行動データを記録するための次の可能性を提供します:
| データタイプ | 説明 |
|---|---|
| 要素の位置 | 画面上の要素の境界ボックス(x、y、幅、高さ)で、参加者がスクロールする際にリアルタイムで更新されます。 |
| 視線データ | 要素の位置にマッピングされたウェブカメラによる視線追跡(研究設定で視線追跡を有効にする必要があります) |
| クリックイベント | 参加者が要素内でクリックしたかどうか、およびその位置 |
| ホバーイベント | 参加者のマウスが要素内に入ったときと出たとき |
| マウス移動 | 参加者がページ上を移動する際のマウス座標 |
| スクロール位置 | 各時点でのページスクロールオフセット |
4.4 研究のプレビュー
公開する前に、拡張機能がインストールされている状態で常に研究をプレビューして、次のことを確認します:
- ウェブサイトがフレーム内で正しく読み込まれる。
- AOIが期待通りに機能している。
最初にタスクを保存し、その後、Task Controlsの下にあるエディターツールバーの**「プレビュー」**再生ボタンをクリックして、特定のタスクの参加者ビューのプレビューを開きます。
4.5 公開と共有
研究が準備できたら:
Launch & Participateタブに移動します。Activateボタンをクリックして、研究のデータ記録を有効にします。Online Participation / Study Publishedの下でPublish.をクリックします。Online Participation Linkをコピーして、参加者と共有します。
5. 使用方法 — 参加者ガイド
研究の前に
- 研究者からLabvanced研究の直接リンクを受け取ります。
- 拡張機能がまだインストールされていない場合、研究ページにはChromeウェブストアへの直接リンクを伴うインストールプロンプトが表示されます。
- 拡張機能をインストールし、研究リンクに戻ってページをリフレッシュします。
- 研究が拡張機能のインストールを確認したら、
Startをクリックして開始します。
研究中
- 提示されたウェブサイトを通常通りに使用して対話します:指示に従ってブラウズ、クリック、スクロールしてください。
- 拡張機能はバックグラウンドで静かに動作します。対話する必要はありません。
- 研究中に拡張機能のアイコンをクリックしないでください。必要ありません。
研究の後に
- プロンプトがある場合は、研究後の質問に回答してください。
- 研究が終了したら、もはや必要がない場合は拡張機能をアンインストールできます:
- ツールバーの拡張機能アイコンを右クリック → 「Chromeから削除」。

6. 使用例
6.1 EコマースUXリサーチ
商品リストやチェックアウトページを埋め込む。参加者が注視する商品画像、クリックする「カートに追加」ボタン、決定を下す前にどれだけスクロールするかを追跡します。

6.2 ニュース&メディアの注目研究
ニュース記事やホームページを埋め込む。最も注目を集める見出し、記事の長さによる読書パターンの変化、最初に目を引く画像を測定します。

6.3 ナビゲーションと情報アーキテクチャのテスト
ウェブサイトのナビゲーションメニューまたはマルチページフローを埋め込む。クリックとホバーの滞在時間を記録して、メニューラベルの明確さや見つけやすさを評価します。
6.4 比較研究 (A/B)
異なるウェブサイトバージョンを埋め込んだ2つの試行を作成します。Labvancedの組み込みの逆バランス機能を使用して条件間で参加者を無作為に分けます。グループ間でAOIメトリクスを比較します。
7. データとプライバシー
拡張機能はどのようなデータを収集しますか?
拡張機能は、アクティブなLabvanced研究セッション内にいるときのみ、以下の情報を収集します:
- 研究者によって選択されたページ要素のバウンディングボックス位置 (x, y, 幅, 高さ)
- マウス座標、クリック位置、ホバーイベント、マウス移動パス
- 現在のページのスクロール位置とページURL
- ホバーまたはクリックされた要素からの可視テキストスニペット(50文字に切り詰め)
パスワードフィールドや敏感なフォーム入力は決して読み取られません。 拡張機能は<input type="password">および敏感なオートコンプリート属性を持つ入力(autocomplete="password"、cc-*)を明示的に除外します。これらはすべての場合において空の値を返します。
データはどこに行きますか?
すべてのデータは、埋め込みされたlabvanced.comページにのみブラウザのpostMessage APIを介して送信されます。拡張機能は外部サーバーにデータを送信せず、ローカルに何も保存せず、Labvanced研究以外の日常のブラウジング中にデータを収集しません。
拡張機能は他のウェブサイトで私を追跡しますか?
いいえ。拡張機能のコンテンツスクリプトは、すべてのiframeに挿入されます(ターゲットウェブサイトのドメインは事前に分からないため)が、location.ancestorOriginsがlabvanced.comが祖先フレームであることを確認しない限り、すぐに退出します。Labvancedによって埋め込まれていないウェブサイトでは、リスナーはインストールされず、DOMは読み込まれず、データの流れはありません。
拡張機能はLabvanced以外の何かを変更しますか?
いいえ。拡張機能は、labvanced.comのトップレベルURLを持つブラウザタブでのみiframeの埋め込み制限(X-Frame-Options / Content-Security-Policyヘッダー)を削除します。他のすべてのタブには完全に影響を与えません。これらのルールはメモリ内にのみ保存され、タブが閉じたり、別のページに移動したりすると削除されます。
完全なプライバシーポリシー
完全なプライバシーポリシーは次のリンクでご覧いただけます: https://www.labvanced.com/extension-privacy-policy.html
8. トラブルシューティング
研究でウェブサイトが読み込まれない
考えられる原因と修正:
| 症状 | 考えられる原因 | 修正 |
|---|---|---|
| 空白の白いフレーム | 拡張機能がインストールされていないまたは無効 | chrome://extensionsで拡張機能が有効になっていることを確認してください |
| ウェブサイトがインタラクティブまたは応答しない | サイトがJSレベルでiframeの埋め込みを検出しています | 一部のサイトは埋め込むことができません。[email protected]までご連絡ください |
拡張機能のアイコンに警告が表示される、またはグレーアウトしている
- アイコンをクリックしてポップアップを開き、ステータスメッセージを読みます。
- labvanced.comのページにいるか、Labvanced研究が開いていることを確認します。
chrome://extensionsから拡張機能を無効にして再度有効にしてみてください。
要素ピッカーが要素をハイライトしない
- 拡張機能が有効で、エディタにいる(プレビューモードではない)ことを確認してください。
- 一部のウェブサイトは、要素の選択を制限するShadow DOMまたはiframe内のiframe構造を使用しています。
Parent要素をObject Propertiesパネル経由で選択してみてください。 - エディタをリフレッシュして再試行してください。
9. よくある質問
Q: 拡張機能は無料ですか? A: はい。拡張機能は無料でインストールおよび使用できます。研究をデザインするにはLabvancedアカウントが必要です。
Q: 他のブラウザ(Firefox、Safari、Edge)でも動作しますか? A: 現在、サポートされているのはGoogle Chromeのみです。Microsoft Edge(Chromiumベース)は動作するかもしれませんが、公式にサポートされているわけではありません。
Q: 研究の後に拡張機能をインストールしたままにする必要がありますか? A: いいえ。参加者は研究を完了した後すぐにアンインストールできます。拡張機能アイコンを右クリック → "Chromeから削除"。
Q: 拡張機能は私のブラウザを遅くしますか? A: 拡張機能はLabvancedセッションの外では非アクティブです。通常のブラウジングにオーバーヘッドを追加しません。
Q: 私のパスワードや銀行情報を見られますか? A: いいえ。パスワードフィールド(<input type="password">)やクレジットカード入力は明示的に除外され、すべての場合において空の値を返します。拡張機能は敏感なフォームデータを読み取ったり伝送したりすることはありません。
Q: 研究者として、参加者が訪問しているウェブサイトを追跡するためにこれを使用できますか? A: いいえ。拡張機能はlabvanced.comによって埋め込まれたiframeの内部でのみアクティブになります。他のタブで参加者が独自に訪問するウェブサイトを追跡することはできません。
Q: 私の所属機関のITポリシーにより、従業員がインストールする前に拡張機能のレビューが必要です。誰に連絡できますか? A: お問い合わせは[email protected]まで。
10. お問い合わせ&サポート
メール: [email protected]
ドキュメンテーション: https://www.labvanced.com/content/learn/ja/guide/
Discordのコミュニティフォーラム: https://discord.com/invite/SBpFJnVZah
バグレポート: 次の情報を含めてください:
- Chromeのバージョン (
chrome://settings/help) - 埋め込もうとしているウェブサイトのURL
- エラーメッセージのスクリーンショット
- 問題を再現するための手順
Labvanced Web BridgeはScicovery GmbHによって開発および維持されています。完全なプライバシーポリシーは次のリンクでご覧いただけます: https://www.labvanced.com/extension-privacy-policy.html