インストールしたくなるブラウザ拡張・プラグインのデモ録画術

ブラウザ拡張はデモが難しいものです。プロダクト全体が300ピクセルのポップアップ、16ピクセルのツールバーアイコン、そして他人が作ったページのわずかな変化のなかに収まっています。見せられるアプリウィンドウもスプラッシュ画面もダッシュボードもありません。それでも拡張のデモ動画は、興味を持った訪問者とインストールの間にある唯一の関門であることが多いのです。

幸いなことに、難しさのパターンは決まっています。拡張のデモがどこで崩れるかを知っておけば、短い録画でも驚くほど説得力のある動画になります。

拡張のデモが特殊な理由

画面録画のアドバイスはたいてい、プロダクトがウィンドウを占有している前提で語られます。拡張はそうではありません。そのため4つの点が変わります。

• UIがとても小さい：ポップアップ、バッジ、コンテキストメニューは画面のごく一部で、標準的な構図では見えません
• ホストページが舞台：何が変わったかを理解する前に、どのサイトを拡張しているのか認識できる必要があります
• 価値は「差分」：機能を見せるのではなく、良くなったページを見せるのです
• インストールも製品の一部：権限ダイアログとピン留めは新規ユーザーが最初に出会う画面であり、実際に離脱が起きる場所です

この4点を軸に録画を設計すれば、あとは普通の作業です。

まずクリーンなデモプロファイルを作る

普段使いのブラウザで拡張のデモを録らないでください。録画専用のプロファイルを作り、それだけを使います。

• ツールバーを空にする：他の拡張アイコンはすべて自分のアイコンと競合します。削除か非表示に
• 自分の拡張だけをピン留めする：空のツールバーにアイコンが1つなら見間違えようがありません
• 個人アカウントからログアウトする：アバター、名前、メールアドレスは意外に多くのフレームに写り込みます
• ブックマークとブックマークバーを整理する：あるいはデモに安全な中立的なものに差し替えます
• 新しいタブページをリセットする：既定の新規タブは閲覧履歴をサムネイルで表示しがちです
• 無関係な通知を切る：ブラウザとOSの両方で
• ズーム倍率を整える：ページズームは100%、ウィンドウサイズは書き出す縦横比に合わせます

一度設定したらプロファイルを保存しておきましょう。以降の録画がすべて同じ状態から始まり、動画がシリーズとして統一感を持ちます。

適切なキャプチャモードを選ぶ

現実的な選択肢は3つ。ブラウザのUIそのものが重要かどうかで決まります。

• ウィンドウキャプチャ：拡張デモの基本です。アイコンとバッジのあるツールバーが写り、デスクトップやDockは隠れます
• エリアキャプチャ：ポップアップとその影響範囲だけを寄せて撮るのに向きます。短いSNS用クリップには便利ですが、ツールバーが切れるためUIの居場所が伝わりません
• フルスクリーン：ブラウザ外を見せる必要があるときだけ。ネイティブのファイルダイアログ、OSの権限ダイアログ、連携する別アプリなどです

多くのデモでは、ブラウザウィンドウを16:9に近いサイズで録画し、寄りの見せ場は途中でキャプチャモードを切り替えるのではなくエディターのズームで作るのが正解です。

インストールの流れを正直に見せる

インストールを飛ばして動いている状態から始めたくなりますが、少なくとも1本は逆にしてください。新規ユーザーは権限を気にしていて、誰かがその画面を問題なく通過する様子は大きな安心になります。

• ストアページかインストールボタンから始める：実際のユーザーがたどる経路そのままに
• 権限ダイアログを隠さない：そのまま表示し、なぜ必要かを一文で説明します。「このサイトの価格を読み取るためにアクセス権が必要です」は、疑問が不安に変わる前に答えを与えます
• ピン留めの手順を見せる：インストール後に拡張を見つけられないユーザーは大勢います。10秒のピン留め実演がサポート問い合わせを大きく減らします
• 新しいプロファイルで本物の流れを再現する：すでに許可済みだとダイアログが静かに省かれ、動画が実態と違ってしまいます

機能だけの短いクリップも欲しい場合は、全体のウォークスルーを妥協させるのではなく、同じ録画から別に切り出しましょう。

小さなUIを読めるようにする

拡張デモの勝敗はここで決まります。ポップアップは自分のモニターでも小さく、スマートフォンではほぼ見えません。

• ポップアップを開くたびにズーム：開いている間ずっとポップアップを中心に拡大する編集が、拡張動画で最も効果があります
• バッジが変わる瞬間にツールバーアイコンをズーム：0から12に変わっても数字が読めなければ意味がありません
• カーソルを強調する：16ピクセルのアイコンへのクリックは、そのままでは見えません。カーソル強調とクリックエフェクトが操作位置を伝えます
• ポップアップを開いたら止める：マウスを動かす前に1秒。小さなUI上の動きは圧縮後にぼやけて見えます
• 拡大できないラベルはテキストオーバーレイで：10ピクセルの文字を凝視させるより短いキャプションのほうが親切です
• ホバーのツールチップに頼らない：小さく、遅く、録画に写らないことも多いです。ラベルは口で読み上げましょう

ビフォーアフターで構成する

拡張は既存の体験を良くするものなので、まず不便さから見せます。

1. 拡張なしのページを5〜10秒。手作業、足りない情報、面倒な手順
2. 拡張をオンにする、またはアイコンをクリックする。はっきり見える形で
3. 同じページが変わった様子を見せる。できれば同じ構図で、違いが一目でわかるように
4. 現実的な作業を1つ、最初から最後までその機能で行う
5. インストール経路と設定の場所で締める

1と3の構図を完全に揃えると多くのことが自動的に解決します。視聴者は1分前のページを思い出そうとする代わりに、2つのフレームを直接比べられるからです。

録画と書き出しの設定

• 30fpsで十分：ページ操作やポップアップUIには余裕があり、文字は鮮明でファイルは軽く保てます
• ネイティブ解像度で録画する：小さく録って拡大するのではなく、大きく録ってエディターで切り抜き・ズームします
• ブラウザウィンドウのサイズを固定する：録画中にリサイズするとページが再レイアウトされ、ズームのキーフレームが崩れます
• 拡張が音を出すならシステム音声も録音、そうでなければマイクだけで
• Web用は1080pで書き出し、いちばん良い20秒は縦向きに切ってSNS用に用意しましょう

録画前チェックリスト

[ ] デモ用ブラウザプロファイルを有効化、他の拡張は非表示
[ ] 自分の拡張だけをツールバーにピン留め
[ ] 個人アカウントからログアウト、新規タブページを整理
[ ] ホストページにデモ用データを準備
[ ] ページズーム100%、ウィンドウは書き出し比率に合わせる
[ ] インストール手順を見せる場合は権限を未許可のままにする
[ ] 通知をオフ、通知バッジをクリア
[ ] 10秒のテスト録画をスマホサイズで確認

よくある失敗

• 他の拡張が15個入ったブラウザでのデモ：どのアイコンが自分のものか誰にも分かりません
• 一度もズームしない：拡張動画が失敗する最大の原因です
• 権限ダイアログをカットする：何かを隠しているように見えます
• 実際のログイン済みアカウントを使う：後で見直さないフレームから個人情報が漏れます
• マウスを動かしながらポップアップを説明する：どちらかを先に、順番に
• ホストページの文脈を省く：どのサイトかが分かって初めて、変化に関心が向きます

まとめ

拡張のデモは2分以内に2つの仕事をこなす必要があります。インストールが安全で簡単だと示すこと、そして小さなUIを重要なものに感じさせることです。前者はクリーンなプロファイルが片付けます。後者はズーム効果、カーソル強調、そして引き締まったビフォーアフター構成が担います。ブラウザウィンドウを録画し、画面を動かさず、ポップアップごとにズームし、生まれ変わったページに語らせましょう。