- 投稿日：2025/08/16
- 更新日：2025/12/19
oviceやZoomなどで画面共有をしているとき、見せたくない情報が見えちゃってること、ありませんか？ 例えばWebページの一部に自分のユーザ名やメールアドレスなど個人情報が表示されてたり。そんなときに活躍するのが、Chrome拡張機能「Draggable Black Rectangle（ドラッガブル・ブラック・レクタングル）」です。
この拡張機能を使えば、任意のWebページ上に不透明な黒い長方形（マスク）を自由に設置し、見せたくない箇所を一時的に隠すことができます。リサイズやドラッグ移動はもちろん、同じマスクを複製したり、不要になったら削除したりも簡単。しかも、ページを再読み込みした場合やリンク遷移しても、同じタブ内であればマスクは維持されるため、継続的なプライバシー保護が可能です。
インストール方法
Chrome ウェブストアの拡張機能のページにアクセスし、「Chrome に追加」をクリックします。
Draggable Black Rectangle - Chrome ウェブストア https://chromewebstore.google.com/detail/draggable-black-rectangle/pjcalmbgdeghknpdicbhmfnfmpmfajpi
（私、タツヲが作って公開しているChrome拡張機能です）
ツールバーへのピン留めと起動
必須ではない設定ですが、Chrome の拡張機能アイコン（パズルピースマーク）をクリックし、「Draggable Black Rectangle」のピン留め（Pin）を設定するとツールバーにアイコンが常に表示されるようになります。
使い方
■ マスクを表示する
ツールバーアイコンをクリックするかショートカットキー操作で、画面上に黒い長方形が表示されます。
ショートカットキー（初期設定）：
Windows / Linux：Ctrl + Shift + Y
macOS：⌘ + Shift + Y
※ ショートカットは chrome://extensions/shortcuts からカスタマイズ可能です。
■ マスクの操作
表示された黒い長方形には、以下の操作が可能です：
ドラッグで移動：どこでも自由に動かせます。
右下の白いハンドルでサイズ変更：小さくしたり大きくしたり自由自在。
📄 コピー：+10pxの位置に同じサイズのマスクを複製。
✖ 削除：クリックするとマスクを消去。
利用シーンの例
リモート授業や講義：回答が映ってしまうWeb教材の部分を隠す。
業務のデモ画面：顧客情報や社内情報の部分だけ隠してプレゼン。
ブログや動画制作：キャプチャ画面に映り込んだ個人情報の一時マスク。
リベ活関連だと、oviceでの画面共有の際にとても便利ですよ！
まとめ
「Draggable Black Rectangle」は、画面共有や録画時の「あとで気づいてヒヤリ」を未然に防ぐための心強い味方です。操作も直感的で、特別な設定も不要。シンプルながら非常に実用的な拡張機能なので、リモートワークやオンライン授業をする方にはぜひ導入をおすすめします。
ソースコードはgithubで公開していますので興味のある方はどうぞ。基本的にバイブコーディングで作っています。
