目次

Chromeで開いているページや動画を、音声付きで録画したいと思ったことはありませんか?「ブラウザの画面をそのまま録画したい」「再生中の動画だけをMP4で保存したい」「録画したのに音が入らない」など、目的によって適した方法は変わります。

ブラウザの操作を録画するならOBS StudioやClipchamp、Chromeのタブを手軽に録画するなら拡張機能が便利です。一方、Webページで再生している動画そのものを保存したい場合は、動画の検出に対応したRecordFabという選択肢もあります。

この記事では、Chromeを中心としたブラウザの画面録画方法を、実際の操作手順に沿って解説します。音声の取り込み方やMP4での保存方法、録画できないときの対処法も紹介するので、用途に合った方法を選んでみてください。

Chrome・ブラウザの画面録画方法と音声付きMP4保存の手順

録画前の注意:本記事では、録画する権限があるWebページや動画を対象に、各ツールの使い方を紹介します。第三者の動画、オンライン講義、会議などを録画する場合は、著作権やプライバシー、サービスの利用規約を確認してください。視聴できることが、そのまま録画・保存の許可を意味するわけではありません。

ブラウザ・Chromeを録画するには?まず目的に合った方法を選ぼう

ブラウザのタブ・ウィンドウ・再生中の動画を録画する方法の違い

ブラウザ録画といっても、Chromeのタブを録画するのか、マウス操作を含む画面全体を残すのか、ページ内で再生中の動画だけを保存するのかによって必要な機能は違います。

例えば、Webサイトの使い方を説明する動画なら、クリック操作やカーソルの動きまで映せる画面録画が向いています。一方、録画が許可されたオンライン動画をあとから見返すことが目的なら、毎回ブラウザの枠まで録画する必要はありません。

大きく分けると、次のように選べます。

  • 画面や操作を自由に録画したい:OBS Studio。ブラウザ、マイク、別のウィンドウなどを組み合わせて録画できます。
  • 録画した動画をそのまま編集したい:Clipchamp。ブラウザ上で録画し、不要な部分をカットしてMP4で書き出せます。
  • Chromeのタブを手軽に録画したい:Screencastifyなどの拡張機能。ブラウザのツールバーから録画を始められます。
  • Webページ内の動画を保存したい:RecordFab。対応する動画を内蔵ブラウザで検出し、MP4・MKV形式で録画できます。

また、音声付きで録画する場合は、マイクの音とブラウザで再生される音を区別することも大切です。自分の説明を入れるのか、動画の再生音だけを残すのかを決めておくと、録画後に音が入っていなかったという失敗を減らせます。

まずは、無料で細かく設定できるOBS Studioから紹介します。

OBS StudioでChromeの画面と音声を録画する方法

OBS StudioでChromeのウィンドウと再生音を録画する設定画面

OBS Studioは、Windows・Mac・Linuxに対応した無料の録画・配信ソフトです。Chromeの画面だけでなく、デスクトップ全体や別のアプリ、Webカメラなども録画できます。

特に、ブラウザの操作説明を作りたい場合や、画面とマイクの音を一緒に収録したい場合に向いています。ただし、録画するウィンドウや音声ソースを自分で設定する必要があるため、初めて使う場合は順番に確認していきましょう。

STEP 1:Chromeのウィンドウを録画対象に追加する

ここではWindows版を例に説明します。あらかじめChromeで録画したいページを開いておいてください。

  1. OBS Studioをインストールして起動します。初回起動時に自動構成ウィザードが表示された場合は、録画向けの設定を選びます。
  2. 「シーン」を作成し、「ソース」の「+」から「ウィンドウキャプチャ」を追加します。
  3. ウィンドウの一覧から、録画したいChromeのウィンドウを選択します。
  4. OBSのプレビューにChromeの画面が表示されたら、必要に応じてサイズや位置を調整します。

なお、OBSの「ブラウザ」ソースは、Webページをシーン内に表示するための機能です。すでにChromeで開いているページや、ログイン済みのブラウザ画面をそのまま録画したい場合は、「ウィンドウキャプチャ」を使うほうが分かりやすいでしょう。

STEP 2:ブラウザの再生音とマイクを設定する

Chromeで動画を再生するときの音声も残したい場合は、OBSの音声ミキサーを確認します。動画を再生した状態で音量メーターが動いていれば、音声を取り込めているか判断する手掛かりになります。

Windowsでは、OBS Studio 30.1以降でウィンドウキャプチャに音声を含める設定を利用できます。また、OBS Studio 28以降では、対応するWindows環境で「アプリケーション音声キャプチャ」を追加し、Chromeの再生音を個別に取り込めます。

一方、自分の声も録音したい場合は、マイクの入力デバイスを指定します。ブラウザの音だけが必要なら、マイクをミュートにしておきましょう。

デスクトップ音声とアプリケーション音声の両方で同じ音を収録すると、音が重なって聞こえる場合があります。不要な音声ソースを無効にし、録画する前に確認しておくことが大切です。

STEP 3:録画を開始してファイルを保存する

画面と音声の設定ができたら、次は保存先と録画形式を確認します。

  1. OBSの「設定」から「出力」を開き、録画ファイルの保存先と録画形式を選びます。
  2. 「録画開始」をクリックし、Chromeの操作や動画を録画します。
  3. 必要な部分を録画したら「録画終了」を押します。
  4. 「ファイル」→「録画を表示」から保存先を開き、動画を再生して内容を確認します。

OBS Studio 30.2以降では「Hybrid MP4」に対応しているため、録画後に別途形式を変換しなくてもMP4ファイルを保存できます。MKV形式で録画した場合も、「ファイル」→「録画の再多重化」からMP4に変更できます。

以前はMKVで録画してからMP4へ変換する方法がよく紹介されていましたが、現在は必ずしもその手順を踏む必要はありません。詳しくはOBS公式のHybrid MP4解説を確認してください。

MacでChromeを録画する場合

MacでもOBS Studioを利用できますが、映像を取り込むソースはWindowsと異なります。「macOS画面キャプチャ」を追加し、録画したいChromeのウィンドウを選択してください。

macOS 13以降とOBS Studio 30以降では、「macOS音声キャプチャ」を利用してアプリの再生音を録音できます。Mac側でOBSに画面収録の権限を許可する必要もあるため、映像や音声が取り込めない場合はシステム設定を確認しましょう。

OBSは録画範囲や音声を自由に調整できる反面、最初の設定項目は比較的多めです。ブラウザの画面を録画したあとに、不要な部分をカットしたり説明を加えたりしたい場合は、録画と編集をまとめて行えるClipchampも便利です。

Clipchampならブラウザ上で画面録画から編集までできる

ClipchampでChromeのタブを録画しMP4として書き出す手順

Microsoft Clipchampは、ブラウザから利用できる動画編集ツールです。画面録画に対応しており、録画した映像をそのまま編集タイムラインに追加して、不要な部分をカットできます。

OBSほど細かく音声ソースやシーンを設定する必要はないため、Webサイトの操作説明や短いチュートリアルを作成したい場合に向いています。

STEP 1:Clipchampで録画するタブや画面を選ぶ

Chromeのタブを録画する場合は、ChromeでClipchampを開いて操作します。

  1. Clipchampにログインし、「新しいビデオを作成」を選びます。
  2. 編集画面の「録画と作成」から画面録画を選択します。
  3. 必要に応じてマイクの使用を許可し、録画を開始します。
  4. Chromeの画面共有ダイアログで、録画したいタブ、ウィンドウ、画面全体のいずれかを選びます。

Chromeのタブ内で再生している音声も録音したい場合は、タブを選択し、音声共有を有効にしてください。マイクを許可しただけでは、ブラウザ内の動画音声が必ず録音されるわけではありません。

また、ClipchampのWindowsアプリから録画する場合は、選択できるブラウザタブに違いがあります。Chromeのタブを直接録画したいときは、ChromeでWeb版のClipchampを開く方法が分かりやすいでしょう。

STEP 2:録画を停止してMP4で書き出す

必要な操作を録画したら「共有を停止」をクリックします。録画結果を確認し、「保存して編集」を選ぶと、編集タイムラインで不要な部分をカットしたり、音量を調整したりできます。

Clipchampでは、録画した元の動画がWebM形式で保存される場合があります。編集した動画をMP4で残したい場合は、右上の「エクスポート」から画質を選んで書き出してください。

なお、個人向けClipchampの画面録画には1回30分の上限があります。短い操作説明には便利ですが、数時間にわたる講義をそのまま連続録画したい場合は、時間制限を考慮して別の方法を選びましょう。

操作画面や保存形式の詳細はMicrosoft公式のClipchamp画面録画ガイドで確認できます。

Clipchampは録画後の編集まで一度に進められる点が魅力ですが、Chromeの特定のタブだけを素早く録画したい場合は、拡張機能を利用する方法もあります。

Chrome拡張機能でブラウザのタブを手軽に録画する方法

Chromeには、ブラウザのツールバーから録画を開始できる拡張機能があります。デスクトップ向けの録画ソフトを別に起動せず、タブや画面を録画したい場合に便利です。

ここでは、Chrome拡張機能の「Screencastify」を例に紹介します。Screencastifyはブラウザのタブ、デスクトップ、Webカメラなどの録画に対応しています。

ScreencastifyでChromeのタブを録画する手順

STEP 1:ChromeにScreencastifyを追加する

screencastify.png

まず、ChromeウェブストアのScreencastifyを開き、「Chromeに追加」をクリックしてインストールします。

インストールが完了したら、Chromeの右上にある拡張機能アイコンからScreencastifyを選びます。よく利用する場合は、ツールバーに固定しておくと便利です。

STEP 2:録画するChromeのタブを選択する

screencastify-step2.png

録画したいWebページを開いた状態でScreencastifyをクリックすると、録画設定のポップアップが表示されます。

録画対象には「THIS TAB」「FULL SCREEN」「WEBCAM ONLY」が用意されています。今回の検証では「THIS TAB」を選択し、Chromeで開いている動画ページを録画しました。

マイクで自分の声も録音したい場合は「Setup Microphone Access」から設定します。マイクの音声とブラウザで再生される動画の音声は別なので、必要な音が録音できるかは事前に確認してください。

録画対象を選んだら「Record」をクリックして録画を開始します。

STEP 3:ツールバーから録画を停止する

screencastify-step3.png

録画が始まると、画面上にScreencastifyの録画ツールバーが表示されます。ここから録画の一時停止・終了や、カーソルを使った注釈などの操作ができます。

今回は「Big Buck Bunny」の再生ページを録画し、約1分12秒で停止しました。ブラウザ上の動画だけでなく、ページ内のほかの表示内容も録画対象になるため、操作説明やWebサイトの使い方を紹介する動画に向いています。

STEP 4:My Libraryで録画した動画を確認する

screencastify-step4.png

録画を終了すると、Screencastifyの「My Library」から作成した動画を確認できます。今回も約1分12秒の録画が保存され、プレビュー画面が表示されました。

なお、今回使用した無料アカウントでは、動画にScreencastifyのウォーターマークが表示されました。公式の無料プランでは、作成できる動画は基本10本まで、録画時間は1本30分までとなっています。

MP4としてパソコンに保存したい場合は、動画管理画面のエクスポート機能を利用します。ただし、利用できる書き出し回数や編集機能にはプランごとの制限があります。今回の検証ではMy Libraryへの保存とプレビューまでを確認しており、MP4のローカル書き出しは検証していません。

録画サイトとChrome拡張機能はどう違う?

オンライン録画サイトは、Webページへアクセスして画面共有を開始する方式です。一方、Chrome拡張機能はブラウザに機能を追加し、ツールバーから録画を開始します。

インストールせずに短い録画をしたいならオンラインツール、Chromeのタブを繰り返し録画するなら拡張機能が使いやすいでしょう。ただし、どちらも録画時間、音声の取り込み方、保存形式、無料プランの制限はサービスごとに異なります。

また、録画した動画がパソコンに直接保存されるのか、クラウドにアップロードされるのかも確認してください。アカウント情報や会議資料などが映る場合は、データの保存先にも注意が必要です。

ここまでの3つの方法は、いずれもブラウザのタブや画面を録画するためのものです。一方、目的が「Webページの中で再生している動画だけを残したい」という場合は、画面全体を録画する方法とは別の選択肢があります。

再生中のWeb動画を保存したいならRecordFabも選択肢

RecordFabでWeb動画を検出しMP4・MKV形式で録画する機能

OBS StudioやClipchamp、Chrome拡張機能は、ブラウザの画面や操作をそのまま録画したい場合に便利です。ただし、Webページで再生している動画だけを保存するなら、毎回ウィンドウや録画範囲を指定するのは少し手間に感じるかもしれません。

そこで選択肢になるのが、Windows向けの動画録画ソフトRecordFabです。

RecordFabは内蔵ブラウザで動画を再生すると、対応する動画を検出して録画できる仕組みです。一般的な画面録画ソフトとは異なり、ブラウザの枠やデスクトップ全体を録画対象として手動で指定する必要がありません。

例えば、録画が許可されたオンライン講座やWeb動画をパソコンに保存したい場合、ページを開いて動画を検出し、画質や録画時間を設定して保存する流れで進められます。

RecordFabでブラウザの動画を録画・MP4保存する方法【実際に検証】

RecordFabの内蔵ブラウザと動画録画機能

ここまで紹介したScreencastifyは、Chromeのタブや操作画面を録画するのに便利です。一方、目的が「Webページで再生している動画だけを保存したい」ということなら、画面全体ではなく動画を検出して録画できるソフトも選択肢になります。

PC向けのRecordFabは、内蔵ブラウザで再生中の動画を検出し、MP4・MKV形式で録画できるソフトです。

今回はScreencastifyと同じ「Big Buck Bunny」を使い、RecordFab 1.0.1.6で録画を検証しました。その結果、動画の検出から録画、MP4ファイルの保存、VLCメディアプレーヤーでの映像再生まで正常に行えました。

STEP 1:内蔵ブラウザで動画を開く

recordfab-brower-step1.1.png

RecordFabを起動し、内蔵ブラウザで「Big Buck Bunny」の動画ページを開きます。

今回はThe Indie Film Networkで公開されている動画を利用しました。動画の再生ページを開くと、画面左下に「ビデオが検出されました」と表示され、録画開始ボタンが有効になりました。

OBS Studioのように録画するウィンドウを追加したり、手動で録画範囲を設定したりする必要がないのが特徴です。

STEP 2:解像度と録画速度を設定する

recordfab-brower-step2.png

「スタート」をクリックすると、録画設定画面が表示されます。ここでは出力解像度と録画速度を選択できます。

今回の検証では「フルHD-1080P」を選択しました。また、録画速度には1倍速・1.5倍速・2倍速・3倍速・4倍速・5倍速の選択肢が表示されていました。

ただし、選択できる速度はサイトや動画によって異なります。また、1080pで録画しても、元の映像にない細部まで高画質になるわけではありません。

必要に応じて録画時間を指定し、設定が完了したら「OK」をクリックします。

STEP 3:動画を録画する

recordfab-brower-step3.1.png

録画を開始すると、画面に録画時間が表示されます。今回の検証でも録画時間が正常に進み、録画中であることを確認できました。

画面下部の「停止」をクリックすると録画を終了できます。あらかじめ録画時間を指定しておけば、設定した長さで自動的に停止させることも可能です。

なお、これは指定した日時に自動で録画を開始する予約録画とは異なります。

STEP 4:MP4ファイルをVLCで再生する

recordfab-brower-step4.png

録画が完了したら、RecordFabの「マイファイル」を開きます。録画した動画の一覧から対象のファイルを選び、保存結果を確認できます。

今回は「Big Buck Bunny」の約9分56秒の動画が、1080pのMP4ファイルとして保存されました。ファイルサイズは約437MBで、VLCメディアプレーヤーでも映像を正常に再生できました。

YouTubeなどの動画を録画する場合は?

Web動画といっても、通常の投稿動画とライブ配信では録画時間や操作のタイミングが異なります。例えばYouTubeでは、投稿済みの動画を再生する場合と、配信中のライブを録画する場合で注意点が変わります。

YouTubeの動画やライブを録画したい場合は、端末や録画ソフトごとの違いをまとめたYouTube向け録画ソフトの選び方も参考にしてください。目的に合う方法を確認してから録画を始めると、必要のない設定やソフトを増やさずに済みます。

RecordFabの無料体験で使い勝手を確認する

RecordFabには30日間の無料体験が用意されており、試用期間中に合計3本の動画を最後まで録画できます。購入前に、自分が使いたいサイトで動画を検出できるか、映像と音声が正常に保存されるかを確かめられます。

特にWeb動画の録画では、実際に保存したMP4・MKVファイルを再生できるかが重要です。対応状況は動画やサイトによって異なるため、まず無料版で確認するとよいでしょう。

RecordFabの料金や安全性、無料版と有料版の違いについては、RecordFabの無料版・料金レビューで詳しく紹介しています。

  無料ダウンロード 

  100%安全(ウィルスチェック済)

詳しくはこちら 

  無料体験

OBS・Clipchamp・Chrome拡張機能・RecordFabを比較

ここまで紹介した4つの方法には、それぞれ得意な用途があります。どれが優れているかというよりも、録画したい内容に合っているかで選ぶと分かりやすいでしょう。

比較項目OBS StudioClipchampScreencastifyRecordFab
主な用途画面・操作の録画画面録画と編集Chromeのタブ録画Web動画の録画
利用方法PC用ソフトWeb版・アプリChrome拡張機能Windows用ソフト
録画対象画面・ウィンドウなどタブ・ウィンドウ・画面タブ・デスクトップなど検出したWeb動画
音声音声ソースを細かく設定マイク・対応するタブ音声マイク・対応するタブ音声対応動画の映像と音声を録画
MP4保存対応書き出しで対応書き出しで対応対応
無料利用無料無料録画あり本数・時間制限あり30日間・完全な動画3本
録画時間ソフト自体に固定の短時間制限なし1回30分まで無料版は1本30分まで録画時間の指定が可能
こんな人向け設定を細かく調整したい録画後に編集したいChromeで手軽に録画したいWeb動画の録画操作を減らしたい

例えば、ブラウザの操作を録画して解説動画を作るならOBS StudioやClipchampが便利です。Chromeのタブを繰り返し録画する場合は、拡張機能も候補になります。

一方、再生中のWeb動画を中心に保存したいなら、動画を検出できるRecordFabが向いています。ただし、録画できるサイトや動画には違いがあるため、実際の利用環境で対応状況を確認してください。

今回紹介した以外にも、ゲーム録画、予約録画、会議録画などに向いたソフトがあります。ブラウザ以外の用途も含めて比較したい場合は、用途別に比較したおすすめ録画ソフト7選も参考になります。

ブラウザ録画をMP4で保存するには?WebM・MOVとの違い

ブラウザ録画のMP4・WebM・MOV形式の違いと保存方法

Chromeの画面を録画しても、必ずMP4ファイルが作られるわけではありません。保存形式はChromeそのものではなく、利用する録画ツールによって決まります。

OBS Studioなら対応する録画形式を選択でき、Clipchampでは録画後にMP4を書き出せます。RecordFabはMP4・MKV形式での出力に対応しています。

MP4・WebM・MOVは何が違う?

MP4はWindowsやMac、スマートフォン、動画編集ソフトなど、幅広い環境で再生しやすい形式です。WebMはブラウザを中心とした用途で使われ、MOVはMacの画面収録などでも利用されています。

いずれも動画ファイルですが、同じ拡張子でも使われている映像・音声コーデックによって再生できる環境が変わる場合があります。

そのため、録画した動画を別の端末へ移す場合は、ファイル形式だけでなく、実際に再生できるかも確認しておくと安心です。また、ファイル名の末尾を「.mp4」に変更するだけでは、動画形式を変換したことにはなりません。

ChromebookやMacの標準画面録画を使う場合

Chromebookでは、標準の画面録画機能を使ってブラウザやデスクトップを録画できます。動画は通常WebM形式で保存され、デバイス音声やマイクなど、必要な音源を選択できます。

詳しい操作はGoogle公式のChromebook画面録画ガイドで確認してください。

Macでは「Shift+Command+5」で標準の画面収録ツールを開けます。保存形式は通常MOVです。音声についてはmacOSのバージョンによって利用できる機能が異なり、macOS 27 Golden Gate以降では「システムオーディオを含める」を選んで内部音声を録音することもできます。

詳しくはApple公式のMac画面収録ガイドを参照してください。

追加のソフトを使わずに短い操作画面を録画したいなら、こうしたOS標準機能でも目的を満たせる場合があります。一方、録画後の編集や動画検出などが必要なら、用途に合わせて専用ツールを選ぶとよいでしょう。

Chrome・ブラウザの録画ができないときの対処法

ブラウザ録画で問題が起きた場合は、録画を開始できないのか、映像が黒いのか、音が入っていないのかで確認する場所が変わります。原因を絞って順番に確認していきましょう。

画面録画を開始できない場合

まず、録画ツールに画面共有や録画の権限を与えているか確認してください。Chromeのタブやウィンドウを選ぶ画面が表示された場合は、録画したい対象を正しく選択しているかを見直します。

MacではOS側の画面収録権限も必要です。また、会社や学校のパソコンでは管理者によって画面録画や拡張機能の追加が制限されている場合があります。

ブラウザや録画ツールを再起動しても改善しない場合は、録画対象を別の許可されたページに切り替えてみると、特定のページだけで問題が起きているのかを切り分けやすくなります。

Chromeの画面録画で音声が入らない場合

Chromeで再生中の動画に音声が入らない場合は、ブラウザの音量と録画ツール側の音声設定を確認しましょう。

OBS Studioでは、音声ミキサーのメーターが動いているかを確認します。ClipchampやChrome拡張機能を使う場合は、タブ音声を共有する設定が有効になっているかを見直してください。

また、マイクで自分の声を録音することと、ブラウザ内で再生される音を録音することは別です。マイクをオンにしても動画の音が入らない場合は、録画ツールの内部音声の設定を確認する必要があります。

録画した動画が真っ黒になる場合

録画したファイルが真っ黒な場合は、まず通常のブラウザ再生でも映像が表示されるか確認してください。

通常再生は正常なのに録画結果だけが黒い場合は、画面の取り込み設定や動画側の保護機能などが関係している可能性があります。ただし、黒画面になったという結果だけで原因を特定することはできません。

また、動画配信サービスによっては画面収録そのものが制限されています。別の録画ソフトに切り替えれば必ず解決するわけではないため、利用規約や録画の許可条件も確認してください。

ブラウザ録画に関するよくある質問

Chromeだけで画面録画できますか?

デスクトップ版Chromeでは、すべてのページを自由に録画して動画ファイルとして保存する一般ユーザー向けの標準録画ボタンが用意されているわけではありません。

Chromeの画面を録画したい場合は、OBS StudioやClipchampなどの録画ツール、Chrome拡張機能、OS標準の画面録画機能を利用する方法があります。追加ソフトをインストールしたくない場合は、まずOS標準機能やブラウザ上で使える録画ツールを確認するとよいでしょう。

AndroidでChromeの動画を録画すると音が入らないのはなぜ?

Androidでは、端末のスクリーンレコード機能で内部音声やマイク音声を選べる場合があります。ただし、利用できる音声設定や録音結果は、Androidのバージョン、端末、再生アプリ、コンテンツ側の制限によって異なります。

動画の音が入らない場合は、録画時の音源設定を確認し、録画が許可された動画で短く試してみましょう。保存時に音声が記録されていなかったファイルは、あとから設定を変更しても元の音を復元できません。

Chromeの録画拡張機能は安全ですか?

拡張機能の安全性は提供元や要求される権限によって異なります。インストール前にChromeウェブストアの開発元情報、更新状況、アクセス権限、プライバシーポリシーを確認してください。

特に、画面の内容やブラウザのタブにアクセスする権限が必要な録画ツールでは、個人情報や仕事の資料が映り込まないように注意が必要です。また、録画した動画がクラウドへアップロードされる場合は、保存先や共有設定も確認しましょう。

まとめ:ブラウザ録画は残したい内容に合わせて選ぼう

Chromeやブラウザの画面を録画する方法は、残したい内容によって変わります。ブラウザの操作を録画したい場合はOBS Studio、録画後に編集したい場合はClipchamp、Chromeのタブを手軽に録画したい場合は拡張機能が便利です。

一方、Webページで再生している動画を保存することが目的なら、動画の検出に対応したRecordFabも選択肢になります。録画範囲を毎回指定する手間を減らしたいWindowsユーザーは、無料体験で自分の使いたい動画に対応しているか確認してみるとよいでしょう。

また、音声付きで録画する場合は、マイクとブラウザの再生音を区別し、保存形式も利用する端末に合わせて選ぶことが大切です。著作権やサービスの利用条件を守りながら、目的に合った方法で録画してください。