Labvanced Web Bridge — 拡張機能サポート & ガイド
Web Bridge初めてですか？ ウェブサイトフレームのアイ・トラッキングウォークスルーに従って、最初から最後までのタスクフローを体験し、その後こちらで完全なリファレンス情報をご覧ください。
助けが必要ですか？ [email protected] までご連絡ください。
目次
1. Labvanced Web Bridgeとは何ですか？
Labvanced Web Bridgeは、Labvanced実験プラットフォーム（labvanced.com）をリアルなウェブサイトに接続するGoogle Chromeのブラウザ拡張機能です。研究者は、参加者がライブのサードパーティウェブサイトと対話しながら、Labvancedが目の動き（ウェブカメラを介して）、マウスクリック、ホバーイベント、およびスクロール行動を記録するコントロールされたUX研究や行動研究を実施できるようにします。
この拡張機能がないと、ブラウザは標準のセキュリティ制限により、研究調査内にウェブサイトを埋め込むことを防ぎます。この拡張機能は、制御されたLabvanced研究セッション内のみでその制限を解除し、埋め込まれたサイトでの参加者の対話を測定するために必要な行動トラッキング機能を追加します。
2. インストール
ステップバイステップ
研究者
- Google Chromeに移動します。
- Labvanced Web BridgeのChromeウェブストアページにアクセスします。
- **「Chromeに追加」**をクリックします。
- 確認ダイアログで、**「拡張機能を追加」**をクリックします。
- ChromeツールバーにLabvanced Web Bridgeアイコンが表示されます。
参加者
- インストールをクリックします。
- **「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をクリックします。選択は緑に変わります。
- AOIの選択を変更する場合は、オブジェクトプロパティパネルを使用して、選択の
Parentを指さして上に移動し、ウェブサイトのより大きな部分を選択したり、選択のChildを指さしてより具体的なコンポーネントを選択したりできます。AOIがアンカーされ（緑で表示されている）状態で、各側のxおよびy座標のピクセルを増減させることで、そのサイズオフセットや位置も調整できます。 - また、
Resolutionオプションを使用して、研究をデスクトップ用かモバイル用かを示すこともできます。以下の画像ではモバイルが選択されており、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をご覧ください。