ブラウザ画面録画の完全ガイド｜ソフトインストール不要、Webページだけで録れる
なぜブラウザ画面録画ツールが必要か
同僚に操作デモを録って見せたい——でも会社 PC でソフトをインストールできない。
Chromebook を使っている——ChromeOS ではデスクトップ録画アプリがほぼ使えない。
バグ再現動画を急いで録りたい——1回の録画のために10分かけて OBS をダウンロード・インストールするのは気が重い。
顧客の PC で作業している——どんな第三者ソフトもインストールするわけにはいかない。
こうしたシーンに共通するのは、**録画が必要だが、ソフトをインストールできない（またはしたくない）**こと。朗報は、現代ブラウザ（Chrome、Edge、Firefox、Safari）は Screen Capture API + MediaRecorder API を内蔵しており、「Web ページを開くだけで録画」が現実になっていることです。
ブラウザ録画の基盤原理
具体的なツールを紹介する前に、ブラウザ録画の技術基盤を理解しましょう。
Screen Capture API
現代ブラウザは getDisplayMedia() API を提供、ユーザー許可後に Web ページが画面を捕獲可能：
- 画面全体：全ウィンドウとデスクトップ活動を録画
- 特定ウィンドウ：指定アプリのウィンドウのみ録画
- ブラウザタブ：特定ブラウザタブのみ録画
ユーザーが共有したいコンテンツを主動的に選んで「許可」をクリックしなければならない——つまりサイトがこっそり画面を録画することはできません。
MediaRecorder API
画面を捕獲した後、ブラウザは MediaRecorder API で動画ファイルにエンコード。通常対応するフォーマット：
- WebM（VP8/VP9 エンコード）——Chrome と Firefox のデフォルト出力
- MP4（H.264 エンコード）——Safari と一部新版 Chrome 対応
ブラウザ互換性
| ブラウザ | Screen Capture | MediaRecorder | システム音声録音 | 評価 |
|---|---|---|---|---|
| Chrome 72+ | 対応 | 対応 | 対応（タブ音声） | ベスト |
| Edge 79+ | 対応 | 対応 | 対応 | Chrome と同体験 |
| Firefox 66+ | 対応 | 対応 | 非対応 | 使えるが制限あり |
| Safari 13+ | 対応 | 対応 | 非対応 | 使えるが制限あり |
Chrome または Edge 推奨、画面録画対応が最も完全で、特にシステム音声録音機能が強い。
方式1：CutFast オンライン画面録画（おすすめ）
CutFast 画面録画ツール はブラウザ API ベースのプロ録画ソリューション、ネイティブ API の上に実用機能を大量追加。
コア機能
- 複数録画モード：全画面、ウィンドウ、タブ、Webカメラ、画面 + Webカメラのピクチャーインピクチャー
- 音声録音：システム音声、マイク、両方のミックス
- リアルタイムプレビュー：録画中に Webカメラ映像と録画状態を確認
- 録画タイマー：経過時間を表示
- 録画後即編集：録画完了後すぐ CutFast エディターでカット、圧縮などの後処理
- ローカル処理：録画動画はいかなるサーバーにもアップロードされない
手順
- CutFast 画面録画 を開く
- 録画モード選択（画面 / Webカメラ / 画面 + Webカメラ）
- 音声ソース選択（システム音声 / マイク / 両方 / なし）
- 「録画開始」クリック
- ブラウザのポップアップで共有コンテンツ選択（全画面 / ウィンドウ / タブ）
- 操作開始
- 「録画停止」クリック
- 録画結果プレビュー、満足ならダウンロード、編集なら CutFast エディターへ
CutFast 録画のメリット
ブラウザネイティブ API や簡易録画サイトに比べて、CutFast のメリットは：
録画と編集のシームレス統合
録画後によくあるニーズは何か？冒頭数秒の準備画面カット、最後の「あ、録画止め忘れてた」削除、途中の操作ミス除去。他ツールでは録画ファイルをダウンロード、別の編集ツールを開く、という流れ。CutFast なら録画後そのままエディターに入り、一気通貫。
Webカメラ ピクチャーインピクチャー
画面操作と解説者の顔を同時表示したいシーン——製品デモ、オンライン授業、バグ報告説明——CutFast は画面 + Webカメラ PiP モードに対応、Webカメラ映像を画面の任意角に配置可能。
Webカメラ単体録画（自己紹介動画など）が必要なら、CutFast は専用の Webカメラ録画ツール も提供。
プライバシー保護
再度強調——CutFast の録画動画は完全にローカルブラウザ内に保存され、いかなるサーバーにもアップロードされません。機密情報を含む画面コンテンツ（コード、社内システム、顧客データなど）の録画には、この点が非常に重要。
方式2：ブラウザ拡張
新しい Web ページを開かずに録画したいなら、ブラウザ拡張が別の選択肢。
主な録画拡張
| 拡張名 | 対応ブラウザ | 無料枠 | 特徴 | 制限 |
|---|---|---|---|---|
| Loom | Chrome, Edge | 動画25本、各5分 | 録画後自動アップロード・リンク生成 | 無料版ウォーターマーク、動画は Loom サーバーへ |
| Screencastify | Chrome | 動画1本5分 | シンプル操作 | 無料版ウォーターマーク・時間制限 |
| Awesome Screenshot | Chrome, Firefox | 基本録画無料 | スクショ + 録画2in1 | 高度機能は有料 |
| Nimbus Screenshot | Chrome, Firefox | 基本機能無料 | 多機能 | UI やや複雑 |
拡張のメリット・デメリット
メリット：
- インストール後すぐ使える、別 Web ページ不要
- 一部拡張（Loom など）は自動で共有リンク生成、協業に便利
- ブラウザに統合、ワンクリック録画開始
デメリット：
- 大半の無料版はウォーターマークか時間制限あり
- 動画が拡張提供者のサーバーにアップされる（プライバシーリスク）
- 拡張インストール必要（会社 PC で禁止の可能性）
- 編集機能は限定的、別ツール必要
- 拡張アップデートで安定性問題の可能性
適用シーン
ブラウザ拡張は素早く録画して共有リンクを生成する協業シーンに最適——リモートワークで Loom で操作説明を録って同僚に送るなど。録画コンテンツを編集したい、ファイルサイズを制御したい、プライバシー気になるなら、CutFast のほうが良い選択。
方式3：OBS Studio（デスクトップ代替）
本記事はブラウザ録画が中心ですが、デスクトップ級の録画能力が必要なシーンもあります。OBS Studio は無料オープンソースのデスクトップ録画/配信ツール、機能が極めて強力。
OBS のメリット
- 完全無料オープンソース、ウォーターマーク・制限なし
- 柔軟な録画設定：解像度、フレームレート、コーデック、ビットレートなど全パラメーター精密制御
- 複数シーン/ソース：複数動画ソース、画像、テロップ重ね可能
- 配信機能：Twitch、YouTube など配信プラットフォームに録画しながら配信可能
- プラグインエコシステム：大量のコミュニティプラグインで機能拡張
OBS の制限
- ダウンロード・インストール必須（約100〜200MB）
- 学習曲線が急——UI が初心者に優しくなく、設定項目が非常に多い
- Chromebook 非対応——Windows、macOS、Linux が必要
- 会社 PC でインストール不可の可能性——管理者権限要
- 編集機能内蔵なし——録画後別の動画編集ツール必要
OBS を選ぶとき
| シーン | OBS vs ブラウザ録画 | 理由 |
|---|---|---|
| 長時間録画必要（1時間以上） | OBS | 安定性良好、リソース管理が上手 |
| 同時配信が必要 | OBS | ブラウザツールは配信非対応 |
| 複数ソース重ね（複数カメラなど） | OBS | ブラウザ API に制限 |
| 極限画質制御必要 | OBS | 任意のコーデックとパラメーター選択 |
| 短時間録画（30分以内） | ブラウザ録画 | インストール不要、即使用 |
| Chromebook や制限端末 | ブラウザ録画 | OBS インストール不可 |
| 録画後すぐ編集・共有 | CutFast | 録画後即編集、ワンストップ完結 |
3方式の比較
| 比較項目 | CutFast オンライン録画 | ブラウザ拡張（Loom 等） | OBS Studio |
|---|---|---|---|
| インストール要件 | なし | 拡張インストール | デスクトップアプリ |
| Chromebook 対応 | 対応 | 部分対応 | 非対応 |
| 録画画質 | 高（画面解像度依存） | 中〜高 | 極高（完全カスタム） |
| システム音声 | 対応（Chrome/Edge） | 部分対応 | 対応 |
| Webカメラ PiP | 対応 | 部分対応 | 対応（要設定） |
| 録画後編集 | エディター内蔵 | 限定 or なし | 別ツール要 |
| プライバシー | ローカル処理 | 通常サーバーアップロード | ローカル処理 |
| 無料枠 | 1日3回、ウォーターマークなし | 通常ウォーターマーク or 時間制限 | 完全無料 |
| 学習コスト | 低 | 低 | 高 |
| 長時間録画適正 | 中（ブラウザ制限） | 制限 | 良好 |
| 配信機能 | なし | なし | 対応 |
録画実用テクニック
どのツールを選んでも、次のコツで良い動画が録れます。
コツ1：録画前に通知オフ
録画中に LINE 通知やメール通知が出るのは気まずいトップ3。録画前に：
- Windows：「集中モード」オン
- macOS：「おやすみモード」オン
- ブラウザ：不要なタブを閉じ、Web プッシュ通知回避
- スマホ：画面ミラーリングや通知同期をオフ
コツ2：正しい録画領域を選ぶ
| 録画対象 | おすすめ選択 | 理由 |
|---|---|---|
| Web ページ操作デモ | ブラウザタブ | 対象ページのみ録画、自動トリミング、他コンテンツ混入なし |
| デスクトップソフト操作デモ | アプリウィンドウ | 対象アプリのみ録画、デスクトップ他コンテンツ回避 |
| 複数アプリの操作 | 全画面 | アプリ間切替可能 |
| 自分の解説のみ | Webカメラのみ | CutFast の Webカメラ録画 を使用 |
重要：「全画面」録画はすべてのデスクトップコンテンツをキャプチャー——通知、他ウィンドウ内容を含む。プライバシーに関わるなら「ウィンドウ」か「タブ」モード推奨。
コツ3：音声設定
音質は画質より視聴体験に影響することが多い。画質一般でも音声クリアな動画のほうが、画質良くても音声ノイジーな動画より良い。
マイク選択：
- 外部マイク（USB マイク、ヘッドセット）があるなら優先使用
- ノート PC 内蔵マイクは一般的、キーボード音やファン音を拾いやすい
- 録画前にマイクテスト、正しい入力機器が選ばれているか確認
システム音声：
- 画面で再生される音（動画、ソフト効果音）を録るならシステム音声キャプチャーをオン
- Chrome/Edge で「ブラウザタブ」録画時は自動的にそのタブの音声含む
- 「全画面」「ウィンドウ」録画時は録画ツールでシステム音声を個別オン
マイクとシステム音声の同時録音：
- CutFast はマイクとシステム音声の同時録音・同一出力ファイルへのミックスに対応
- 「ソフト操作（効果音あり）を解説しながらデモ」シーンに非常に便利
コツ4：解像度とフレームレート
解像度：
- ブラウザ録画の解像度は通常画面解像度と同じ
- 4K 画面だが最終 1080p で視聴されるなら、録画後 CutFast で解像度ダウンしてファイル縮小
- UI 操作デモは 1080p で十分鮮明（テキストが読める）
フレームレート：
- 一般的な操作デモ、チュートリアル：30fps で十分
- ゲーム録画や滑らかなアニメ要件：60fps 検討
- ブラウザ録画はデフォルト 30fps、多くのシーンで調整不要
コツ5：マルチディスプレイの注意点
複数モニター使用時：
- 「全画面」選択時、ブラウザがどの画面を録画するか選ばせる
- 1画面のみ同時録画可能（ブラウザ API 制限）
- 2画面間で操作切替が必要なら、必要な全ウィンドウを同一画面に移動推奨
- または OBS などでマルチ画面録画
コツ6：録画後の後処理
素の録画は共有前に後処理が必要なことが多い：
- 冒頭と最後のカット——「録画開始」クリック後の準備画面と「録画停止」前の締めをカット
- 操作ミスのカット——途中の誤操作や待ち時間をカット
- ファイル圧縮——素の録画は通常サイズが大きい、圧縮で共有しやすく
- 字幕追加——解説入り録画なら字幕でアクセシビリティ向上
CutFast のメリットはこれら後処理が録画完了後そのまま同ツール内で完結、別ソフトへの切替不要。
特定シーンの録画アドバイス
製品デモ / チュートリアル録画
- 録画前に操作フロー準備、シンプルなスクリプトがベター
- 「ブラウザタブ」「ウィンドウ」モード使用、無関係コンテンツ混入回避
- Webカメラ PiP で親しみやすさプラス
- 発話速度適度、キー操作はゆっくり
- 録画後 CutFast で精華カット、字幕追加
バグ再現録画
- Web アプリのバグは「ブラウザタブ」モード
- デスクトップアプリのバグは「ウィンドウ」モード
- 録画前にブラウザ開発者ツール（F12）を開き、Console エラーも一緒に録画
- シンプルに保つ——再現ステップのみ、無関係操作は録らない
- 録画後 CutFast でキーステップだけにトリミング可能
オンライン会議録画
- 参加者の録画同意を確認
- 「ウィンドウ」モードで会議アプリウィンドウを録画
- システム音声（リモート参加者の声）とマイク（自分の声）を同時オン
- 会議録画は通常長尺、録画後 CutFast のハイライト編集モードで重要議論を抽出
Chromebook ユーザーの録画
Chromebook ユーザーの選択肢は限定的——従来デスクトップ録画アプリをインストール不可。ブラウザオンライン録画がベスト、ほぼ唯一の選択肢：
- CutFast 画面録画 を使用
- Chrome ブラウザは Screen Capture API 対応がベスト
- Chromebook のストレージ容量は通常限定的、録画後はすぐ圧縮・整理を
よくある質問
Q：ブラウザ録画の画質は？
画面解像度とブラウザのエンコード設定次第。1080p 画面で録画なら、出力画質は画面ネイティブ解像度に近い。テキストは読め、UI 要素は完全、大半の用途で十分。
Q：ブラウザ録画の最長時間は？
技術上は厳格な時間制限なし、ただし：
- ブラウザメモリ：録画時間が長いほどメモリ消費大。30分以内なら安全、1時間超でメモリ問題の可能性
- ストレージ容量：録画動画はブラウザメモリに一時保存、最後にディスク保存。十分なディスク容量を確保
- 安定性：長時間録画は OBS などデスクトップツール推奨、安定性が良い
Q：システム音声が録れない
システム音声録音の対応はブラウザと OS で異なる：
- Chrome/Edge + Windows：「ブラウザタブ」録画時は自動的にタブ音声含む、「全画面」時は「システム音声を共有」チェック可能
- Chrome/Edge + macOS：macOS 本体がシステム音声キャプチャーを制限、仮想音声ドライバー必要な場合あり
- Firefox/Safari：通常システム音声キャプチャー非対応
システム音声必要だがブラウザ非対応なら：
- 再生したい内容を Chrome タブで開き、そのタブを録画
- OBS などデスクトップツールを使用
Q：録画ファイルが大きすぎる
ブラウザ録画のデフォルト出力は通常 WebM 形式、ファイルが大きめ。解決策：
Q：スマホの画面録画できる？
ブラウザ Screen Capture API は主にデスクトップ向け設計。モバイル：
- Android Chrome：部分対応だが体験はデスクトップに劣る
- iOS Safari：Web ページ録画非対応
- モバイル録画は OS 標準機能（iOS のコントロールセンター録画、Android の画面録画）推奨
Q：CutFast 画面録画と Loom の違いは？
最大の違いはプライバシーと共有モデル：
- Loom：録画後自動で Loom サーバーにアップロード、共有リンク生成、他者送信便利。チーム協業向け
- CutFast：録画後ローカル保存、サーバーアップロードなし。プライバシー重視や後処理必要なシーン向け
「録画後すぐリンク生成して同僚送信」なら Loom の体験がベター。「録画後編集してローカル保存や自社プラットフォームアップ」なら CutFast。
Q：録画はサイトに検出される？
技術上は一部 JavaScript API（Permissions API など）で画面共有状態を検出可能。ただし：
- 大半のサイトは主動検出しない
- ブラウザは録画中に明確な録画インジケーター表示（通常赤アイコン）
- 「タブ」モードの録画は他タブのサイトから見えない
まとめ
ブラウザオンライン画面録画はすでに「まあ使える」から「十分使える」段階に進化。大半の日常録画ニーズ——操作デモ、バグ再現、製品解説——ではソフトダウンロード・インストールは完全不要。
推奨ワークフロー：
- CutFast 画面録画 を開く
- 録画モードと音声設定選択
- 録画完了
- CutFast 内でそのままカット、圧縮、ダウンロード
全プロセス Web ページ開きから最終動画ファイル受取まで数分で完了。ソフトインストールなし、登録ログインなし（基本機能）、ファイルアップロードなし——これがブラウザオンライン録画の魅力です。
関連記事：オンライン動画編集完全ガイド、動画を25MBに圧縮する方法。