ユーザビリティテストでは、参加者の操作画面を録画したり、別室やリモートの観察者にライブで見てもらったりします。このとき困るのが、画面に映り込む個人情報です。参加者ご本人のアカウントでECサイトやWebサービスを使ってもらうと、氏名や住所、メールアドレス、購入履歴などがあちこちに表示されます。
録画なら後から動画編集でモザイクをかける手もありますが、これが本当に大変です。Webページの操作ではしょっちゅうスクロールするので、そのたびに隠したい場所が動きます。それに合わせてモザイクの位置を追従させるという、悪夢のような手間が発生します。しかも、ライブで観察してもらう場面ではそもそも後処理ができません。テストに限らず、Webサービスの解説動画や配信、オンライン会議の画面共有でも事情は同じかなと思います。
そこで、Webページ上の好きな場所をぼかしたり塗りつぶしたりできるChrome／Edge用の拡張機能「配信マスク（On-Air Mask）」を作りました。Edgeアドオンストアではすでに公開されていて、Chromeウェブストアは現在審査中です。
売りは大きく2つです。
・後編集がいらない：ページそのものの上で隠すので、スクロールしてもマスクが文字と一緒に動きます。動画編集でモザイクを追いかける作業はもう不要です。
・リアルタイムで使える：隠れた状態の画面がそのまま映るので、ライブ配信やリモートでのテスト観察、オンライン会議の画面共有にもそのまま使えます。
■経緯：ユーザースクリプトのノウハウを、誰でも使えるツールに
実は「ブラウザ側で画面の一部を隠す」というやり方自体は、以前から使っていたものです。ユーザースクリプト（Tampermonkeyなどの拡張機能で、指定したURLで自前のJavaScriptやCSSを実行する仕組み）を使えば、個人情報が表示される部分にCSSでぼかしをかけられます。このノウハウは、ユーザースクリプトで本番のサイトに手を入れてテストする手法（USIP）とあわせて、ブログやKindle本で紹介していました。
ポチップ
ただ、この方法は隠したい場所のセレクタを開発者ツールで調べて、スクリプトを書く必要があります。正直なところ、誰にでも気軽に勧められるものではありませんでした。
配信マスクは、これを「隠したい場所をクリックして選ぶだけ」でできるようにしたものです。セレクタの候補作りやプレビュー、リロード時の映り込み対策など、手作業だと面倒だったところをツール側で引き受けています。
■どんなものか
使い方はシンプルで、ツールバーのアイコンからサイドパネルを開いて「要素を選択」を押し、ページ上で隠したい場所をクリックするだけです。すると「この1件だけ」「一覧の列全体（3件）」のような隠す範囲の候補が出るので、実際のページでプレビューしながら選んで適用します。
主な機能はこんな感じです。
- ぼかしか塗りつぶしかを選べて、強さや色もマスクごとに変えられる
- スクロール、ページ遷移、リロードをしてもマスクが外れない
- 「様」「御中」や都道府県だけを残して、名前や番地だけを隠すこともできる
- マスクごとに名前を付けて、個別にオン／オフできる
- 操作パネルはサイドパネルに出るので、ページの中には置かない
- 多言語対応UI（現時点は日本語と英語対応）
- 設定はブラウザの中に保存され、外部には一切送信しない
■ユーザーテストでの使いどころ
やはり一番使ってほしいのはテストの現場です。たとえばこんな場面を想定しています。
- 参加者ご本人のアカウントで操作してもらうテストで、氏名や住所、購入履歴を録画に残さない
- 別室やリモートの観察者（クライアントの開発チームなど）に、個人情報を見せずにライブで観察してもらう
- 録画を報告書やハイライト動画に使うときの、モザイクの後処理をなくす
テストで地味に効いてくるのが、文字の一部だけを隠す機能です。宛名を「■■ 様」、住所を「東京都■■■」のように残せば、後で録画を見返したときにも「ここに宛名が出ている」「住所を確認している」といった操作の文脈は読み取れます。分析に必要な情報は残しつつ、個人を特定できる部分だけを隠す、という使い方ができるのがポイントです。
なお、マスクを作る操作そのものも画面に映るので、準備はテストを始める前に済ませておきます。マスクはサイトごとに保存されるので、同じサイトを使うテストなら、一度用意すれば参加者が変わってもそのまま使えます。
■入手方法と注意事項
無料で、ソースコードもGitHubで公開しています（Apache-2.0ライセンス）。
・Chromeウェブストア（審査中）
ただし、映り込みを完全に防げるとは保証できません。サイトの作りによってはうまく隠れないこともありますし、タブのタイトルやアドレスバー、入力の自動補完といったブラウザ本体の表示は隠せません。ぼかしが弱いと文字の形から読めてしまうこともあるので、大事な情報は塗りつぶしがおすすめです。本番の前に、同じ画面・同じ手順で必ず試してください。
■こだわったところ
「その要素」ではなく「ルール」で隠す
画面の一部を隠す拡張機能は他にもあるのですが、クリックした要素そのものを覚えておく方式だと、サイトが画面を描き直した瞬間にマスクが外れてしまいます。最近のWebアプリは、並べ替えや無限スクロールでしょっちゅう描き直しています。
配信マスクは、クリックした要素から「宛名のクラスが付いた要素は全部ぼかす」といったCSSのルールを作ってページに置きます。ルールを当てるのはブラウザ自身なので、後から読み込まれた行にも勝手に効きます。自動生成されたような変わりやすいクラス名は候補から外していて、候補ごとに「安定」などの目安も出しています。
リロードの一瞬を見せない
配信中に一番怖いのは、ページを再読み込みしたときに、マスクが効くまでの一瞬だけ素の画面が映ってしまうことだと思います。そこで、マスクを設定したサイトでだけ、ページをいったん透明にしておき、マスクを当て終わってから表示する仕組みにしています。
文字の一部だけを隠せる
宛名を丸ごと隠すと、「ここに何が書いてあるのか」も伝わらなくなってしまいます。このため、「古田様」の「様」だけ、住所の都道府県だけを残して、それ以外を隠せるようにしました。ページのHTMLは書き換えず、ブラウザの新しめのCSSの機能で塗っているので、サイトの動作を壊しません。うまく判定できなかったときは、全体を隠す側に倒しています。
■AIと作って、ストアに出すまで
今回も、実際にコードを書いたのはAI（Claude）です。最初は「クリックした要素のidやclassを拾ってぼかすような拡張って作れる？」という相談から始めて、動くプロトタイプを作ってもらい、自分で使ってみて気になったところを伝える、というのをひたすら繰り返しました。
たとえば使い勝手の面ではこんな指摘をして直してもらいました。
- ぼかしを要素の外側まで少しはみ出させたい（ページの余白はいじらずに）
- 塗りつぶしの色を、親要素やページの背景色から選べるようにしたい
- 日本語入力の変換でEnterを押すと確定されてしまうので、Enterでの確定をやめたい
- 候補の上をマウスが通過するだけで選択が変わると誤操作しやすいので、クリックとカーソルキーだけにしたい
このあたりは、使い手としての感覚をそのまま伝えればいいので、ユーザビリティ屋としてはむしろ得意分野かなと思っています。
コード以外にも、アイコン、README、プライバシーポリシー、ストアの説明文、プロモーション画像、スクショ撮影用の架空のECサイトまで、公開に必要なものはほとんどAIと一緒に用意しました。
ストアへの申請手順もAIにかなり助けられました。いやはやスゲー時代です。
■まとめ
こういう「あったら便利だけど、自分で作るには重い」ツールが、AIに相談しながら形にできるのは、やはり大きいですね。自分のスキルだけで作っていたら、プロトタイプの段階で力尽きていたと思います。
反響を見て、Safari版も検討しようかなと思っています。不具合や要望は、GitHubのIssuesにお気軽にどうぞ。役に立ったら、投げ銭で応援してもらえると励みになります。
スマホから