デスクトップでモバイルアプリのデモを録画する方法

iPhoneやAndroidの画面をMacやPCにミラーリングし、Recordedで鮮明なモバイルアプリデモを撮影する設定・構図・書き出しのコツを解説します。

デスクトップでモバイルアプリのデモを録画する方法

スマートフォン本体でアプリを録画するのは簡単そうに見えますが、実際にやってみると違います。標準の録画機能は通知バナーまで拾い、バッテリー表示は刻々と変わり、ファイルは編集用のマシンではなく端末に残り、後からズームや注釈を加える手段もありません。

スマートフォンをデスクトップにミラーリングしてそこでキャプチャすれば、これらの問題が一度に解決します。安定した高解像度のソース、デスクトップの本格的な編集機能、そして最初から必要な場所に保存されるファイルが手に入ります。macOSとWindows両方での設定方法を見ていきましょう。

デスクトップでキャプチャする理由

  • 編集が快適: ズーム効果、テキストオーバーレイ、カーソル装飾はスマートフォンではなくデスクトップにあります
  • 容量を気にしない: 長時間の収録は端末の空き容量をすぐ圧迫しますが、MacやPCなら余裕があります
  • 出力がきれい: 書き出し時に解像度、フレームレート、フォーマットを自分で決められます
  • 撮り直しが容易: 端末の録画機能に触れずに一部分だけ撮り直せます
  • ライブナレーション: デモを進めながらマイク解説を同時に録音できます

端末のミラーリング

macOSでのiPhone・iPad

追加ソフトが不要で最も安定した方法です:

  1. USBケーブルで接続し、このコンピュータを信頼をタップします
  2. QuickTime Playerを開き、ファイル → 新規ムービー収録を選びます
  3. 録画ボタン横の矢印をクリックし、カメラソースとして端末を選択します
  4. QuickTimeはプレビュー状態のままにします — 録画ボタンは押しません

QuickTimeが遅延のないライブミラーウィンドウになり、Recordedがそのウィンドウをキャプチャします。

WindowsでのiPhone・iPad

WindowsにはiOSの標準ミラーリング機能がないため、AirPlayレシーバーアプリを使います。コントロールセンターの画面ミラーリングで端末を接続すれば、レシーバーのウィンドウは通常のアプリウィンドウと同じように扱えるため、そのままキャプチャできます。

macOS・WindowsでのAndroid

両プラットフォームで標準的なツールはscrcpyです。端末で開発者向けオプション → USBデバッグを有効にして接続し、scrcpyを起動します。広告もウォーターマークもない、鮮明で低遅延のミラーウィンドウが表示されます。Windowsでは対応機種ならスマートフォン連携も使えますが、フレームレートは低めです。

端末の準備

ミラーリングは作業の半分にすぎません。整理されていない端末は、完璧なキャプチャも台無しにします:

  • おやすみモードを有効化 — デモ中にメッセージが表示されないように
  • バッテリーを80%以上に — 赤いバッテリーアイコンは画面上で雑な印象を与えます
  • ステータスバーを整える: 電波は最大、Wi-Fiオン、VPNやアラームのバッジなし
  • デモ用データを使う: 現実的な名前と内容を用意し、個人情報は絶対に避けます
  • 画面の向きを固定 — 意図せず回転しないように
  • 明るさを上げる — ミラー映像が暗くくすまないように
  • 自動ロックをオフ — 撮影中に画面が消えないように

Recordedでキャプチャする

ミラーウィンドウが表示されたら、以降の手順は両プラットフォーム共通です:

  1. ウィンドウキャプチャを選び、QuickTime・AirPlayレシーバー・scrcpyのウィンドウを指定します
  2. フレームレートを60fpsに設定します — モバイルUIはアニメーションが多く、30fpsではカクついて見えます
  3. 実況しながら録るならマイクをオン、後からナレーションを入れるならオフにします
  4. アプリの音が意味を持つ場合のみシステム音声をオンにします
  5. 録画を開始し、2秒待ってから操作を始めます

ここでは範囲キャプチャよりウィンドウキャプチャが適しています。途中でミラーウィンドウを動かしてもキャプチャが追従し、画面を見失いません。

操作のコツ

タッチ操作は目に見えるカーソルとして現れないため、視聴者はどこをタップしたか分かりません。意識的に補いましょう:

  • すべての操作を普段より3割ほどゆっくり行います
  • タップ前に一拍置き、視聴者が動作位置を予測できるようにします
  • 素早くフリックせず、短く一定のドラッグでスクロールします
  • 次の手順に移る前に結果画面を2秒保持します
  • 前後に素早く行き来する操作は避けます — 追いにくくなります

編集で仕上げる

ミラーリング映像を完成度の高いデモに変えるのがデスクトップエディタです。

ズーム効果が存在しないカーソルの代わりになります。タップ直前に2倍へ寄せて少し保持すれば、操作内容がはっきり伝わります。トランジションは300〜400ms程度が目安です。

テキストオーバーレイで見えないジェスチャーを説明します。「スワイプでアーカイブ」「長押しでオプション」「引き下げて更新」のように、5語以内にまとめましょう。

背景は縦長の狭い画面を横幅いっぱいの映像に変えます。端末フレームの背後に控えめなグラデーションを敷けば、左右の余白が黒帯になりません。

トリミングでアプリ起動待ち、読み込み中のスピナー、撮影前に端末へ手を伸ばす瞬間といった無駄な時間を削ります。

書き出し設定

映像の使い道に合わせて書き出します:

  • SNS・アプリ内: 1080×1920の縦型MP4、H.264、30fps
  • サイト埋め込み: 1920×1080の横型、背景の中央に端末を配置
  • ドキュメント用GIF: 15秒以内に切り詰め、解像度を下げて書き出し
  • ストアプレビュー: 各ストアの解像度と長さの制限に従う

1本の録画を複数用途に使うなら、まず横型で書き出し、そこから縦型を切り出すのが効率的です。

よくある失敗

ミラーウィンドウではなく画面全体をキャプチャしてしまう。 端末の周囲にデスクトップの壁紙やメニューバーが写り込みます。

ミラーウィンドウを初期サイズのまま録画する。 録画前にディスプレイが許す最大サイズまで広げましょう。後から縮小はできても、存在しない画素は増やせません。

接続ケーブルが映り込む。 手元も一緒に撮る場合は、ケーブルを画面外へ逃がします。

通知許可のダイアログが本番に残る。 録画前に初回起動時のダイアログをすべて出して閉じておきます。

端末側のアニメーション設定を見落とす。 視差効果を減らす設定はデモを平板にするため、標準のアニメーションは有効なままにします。

クイックチェックリスト

  • 端末をミラーリングし、ウィンドウを実用最大サイズに調整
  • おやすみモードオン、バッテリー80%以上、自動ロックオフ
  • デモ用データを用意し、初回ダイアログは処理済み
  • ミラーウィンドウ対象のウィンドウキャプチャを60fpsで設定
  • 音声ソースを意図どおりに設定
  • 重要な操作ごとにズームとテキストオーバーレイを追加
  • 用途に合った書き出し解像度を選択

まとめ

スマートフォンをデスクトップにミラーリングすれば、モバイルデモの録画は不格好な回避策ではなく、普段の編集ワークフローの一部になります。初回の設定は数分、二度目以降は30秒ほどで済みます。

ミラーウィンドウを大きく、画面をきれいに保ち、操作をゆっくり行い、視聴者に見えないカーソルの役割はズームとオーバーレイに任せましょう。