[活用例](https://openscreenshot.app/ja/use-cases/)

# Chrome で製品デモ動画を録画する方法

ウェブカメラと音声付きでブラウザのタブを録画し、クリックごとにズームを入れ、不要な部分を削って MP4 で書き出します。すべてコンピューター上の Chrome で行います。

執筆: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

ブラウザのタブから短い製品デモを録画するには、OpenScreenShot の Chrome 拡張機能の**録画**を使います。タブ全体またはその一部を選び、マイク、タブの音声、ウェブカメラをオンにして、デモを録画します。その後、エディタがクリックごとにズームを追加し、録画の不要な部分を削れるようにし、MP4 で書き出します。Firefox 版はスクリーンショットだけに対応しており、録画機能はありません。

## デモを録画する手順

1. 通常のブラウザ タブでデモを準備します。ログインし、サンプル データを読み込み、通知を閉じます。ブラウザの内部ページは録画できません。
2. 初期設定では、ツールバーのアイコンをクリックするとスクリーンショットが撮られます。アイコンを右クリックして**ワンクリック Express モード**をオフにすると、次のクリックでポップアップが開きます。
3. ポップアップで**録画**をクリックします。ページの横に録画タブが開きます。初回は、タブをキャプチャする権限を Chrome が一度だけ求めます。
4. 必要に応じて**マイク**、**タブの音声**、**ウェブカメラ**をオンにし、ブラウザの権限の確認を許可します。
5. **タブ全体**のままにするか、ページの画像上をドラッグして一部だけを録画します。
6. **録画を開始**をクリックします。OpenScreenShot がページに切り替わります。一定のペースで、意図的にクリックしながらデモを行います。
7. `Alt+Shift+X` を押して停止するか、録画タブに戻って**停止**をクリックします。同じタブで録画エディタが開きます。
8. ズームを調整し、先頭と末尾を削って、**MP4 を書き出し**をクリックします。

録画タブには一時停止 / 再開とキャンセルのボタンもあります。録画するページには何も追加されないため、動画に操作ボタンは写りません。

## クリック位置でズームする

エディタは、カーソルでクリックしたすべての位置に滑らかな 2 倍のズームを追加します。タイムラインで各ズーム ブロックを調整または削除できます。**ズームを追加**をクリックすると、1.5 倍、2 倍、3 倍のブロックを自分で配置できます。たとえば、クリックなしで変わる数値に使えます。

クリックの波紋がクリックした場所を示します。カーソルの設定では、録画した軌跡に沿う滑らかなポインターを表示する、クリックだけを表示する、ポインターを非表示にする、のいずれかを選べます。

デモが別のサイトに移動する場合、クリックの追跡には**設定**のオプション権限**サイトをまたいで録画**が必要です。この権限がないと、ツールバーのバッジが琥珀色になり、動画の残りの部分ではズームとクリックの効果が止まります。動画の録画自体は続きます。

## ウェブカメラ、音声、タブの音声

ウェブカメラは丸いバブルとして書き出しに入ります。エディタでは、四隅のどこにでも配置でき、サイズの変更や非表示もできます。マイクとタブの音量は別々のスライダーで設定するため、製品自体の音より自分の声を大きく保てます。

先に短いテスト録画をして、音量とバブルの位置を確認してください。

## 録画の不要な部分を削り、フレームを付ける

セグメントの先頭または末尾のハンドルをドラッグすると、その部分を削れます。タイムラインでは元に戻すとやり直しが使えます。サイド パネルの **Beautify** パネルは、動画の周りに余白、角丸、影、背景を追加します。スクリーンショット エディタと同じフレームです。

## 動画を書き出す

**MP4 を書き出し**は、ズーム、音声トラック、ウェブカメラのバブル、フレームを含めて録画をレンダリングし、H.264 の映像と AAC の音声の MP4 ファイルをダウンロードします。WebM ファイルにするには、ボタンの横の選択欄で WebM を選びます。タブが非表示になるとレンダリングが一時停止するため、レンダリング中はエディタのタブを表示したままにしてください。

MP4 の上限は 4096×2304 ピクセルのため、それより大きいタブは収まるように縮小されます。MP4 の録画に対応していないブラウザでは WebM だけを書き出します。ファイル名には**設定**の**ファイル名テンプレート**が使われます。

## 制限事項と保存場所

録画機能がキャプチャするのは 1 つのブラウザ タブです。ほかのウィンドウ、ほかのアプリ、デスクトップは録画しません。ブラウザの内部ページや保護されたページは録画できません。

録画、カーソルの記録、ウェブカメラとマイクのストリームは、削除するまでデバイス上のブラウザのストレージにとどまります。**書き出し後に録画を削除**をオンにすると、ファイルの保存後に録画を削除します。書き出したファイルを共有しない限り、何もアップロードされません。

すべての操作は[録画のリファレンス](https://openscreenshot.app/ja/docs/#record)で確認できます。同じバグや機能の静止画については、[バグ報告用のスクリーンショット](https://openscreenshot.app/ja/use-cases/bug-reports/)を参照してください。

## さらに読む

[ドキュメントを読む](https://openscreenshot.app/ja/docs/)、[すべてのガイドを見る](https://openscreenshot.app/ja/blog/)、または[キャプチャについてサポートを受ける](https://openscreenshot.app/ja/support/)。

---

Canonical page: https://openscreenshot.app/ja/use-cases/product-demos/