メインコンテンツまでスキップ

プロダクトデモ動画の作り方

プロダクトデモ動画を作るには、短い台本を書き、一定のペースで製品を録画してから編集します。無駄な時間をカットし、重要な部分にズームし、見せたくない情報を隠し、字幕を付け、配信先に合った形でエクスポートします。このガイドでは、各手順を OpenScreen で行います。OpenScreen は Windows、macOS、Linux に対応した、MIT ライセンスの無料の画面録画・編集ソフトで、録画、編集、文字起こし、エクスポートはお使いのパソコン上で実行されます。OpenScreen が作るのは動画ファイルです。動画のホスティングや、クリックして操作するウォークスルーの作成は行いません。そのどちらかが必要な場合は、OpenScreen が適さない場合を参照してください。

始める前に

  • ダウンロードページから OpenScreen をインストールします。各プラットフォームの手順はインストールにあります。
  • 動画をどこで見てもらうかを決めます。それによって形が決まります。ウェブサイトやドキュメントのページなら 16:9、縦型のフィードなら 9:16、正方形の枠なら 1:1 です。
  • 製品を準備します。デモ用のアカウントとサンプルデータを用意し、通知をオフにします。

1. ノートウィンドウで台本を書く

Windows と macOS では、HUD のノートを開くをクリックします。リッチテキストのウィンドウが開き、内容はセッション間でローカルに保存されます。ここに、1 行に 1 つの操作を書く形で台本を書きます。Linux の HUD には、ノートのボタンがありません。

ノートウィンドウは、プロンプターとしても使えます。自動スクロールを開始で、10 から 100 の速度でテキストがスクロールします。フォントサイズは 14 から 48 px まで変えられ、左右反転でテキストを反転できます。

注意

Windows では、OpenScreen は HUD とノートウィンドウをキャプチャから除外します。macOS ではそれを保証できないため、ノートウィンドウは録画しないディスプレイに置いてください。macOS と Linux では、HUD が録画する画面上にある場合は HUDを隠すを使ってください。

2. 画面またはウィンドウを録画する

  1. Windows と macOS では、ソースピッカーを開き、画面でディスプレイを、またはウィンドウで単一のウィンドウを選びます。Linux にはアプリ内のピッカーがなく、テイクのたびにシステムのポータルがソースを尋ねます。OpenScreen には範囲指定のキャプチャがないため、ウィンドウか画面を録画し、エディターでクリップをクロップします。
  2. マイクをオンにして、レベルメーターを確認します。製品が音を出す場合はシステム音声を、自分も画面に映りたい場合はウェブカメラをオンにします。
  3. カーソルモードは、既定の編集可能なカーソルのままにします。ポインターはデータとして記録されるので、あとからスタイルを変えられます。Windows ではクリックが記録されます。macOS では、クリックの記録にアクセシビリティの権限が必要です。Linux ではユーザーが input グループに属している必要があり、タッチパッドのタップによるクリックはキャプチャされません(詳細)。
  4. 録画を押します。最初に 3、2、1 のカウントダウンが入り、これはオフにできません。

OpenScreen は 60 fps を目標にキャプチャし、Windows と macOS では最大 3840×2160 です。Linux では、サイズはコンポジターが渡すものになります。録画中は、一時停止、テイクのやり直し、キャンセル、停止ができます。

ズームを意識したペースで。 これから説明する箇所にポインターを移動し、そこで止めます。手順 4 の自動ズームは、こうした静止を探します。対象は、ポインターが約 0.5 秒から 2.6 秒静止している箇所です。それより長く止まっているポインターには、ズームが付きません。

Linux での長いデモ。 Linux が書き込むのは、停止したときに初めて確定される通常の MP4 です。そのため、テイクの途中でクラッシュすると、読めないファイルが残ります。代わりに短いテイクを何本か録画してください。つなげ方は手順 5 で説明します。

HUD のすべてのコントロールについては、画面録画を参照してください。

3. ウェブカメラのレイアウトと背景を選ぶ

ウェブカメラは独立したファイルに録画されるため、配置は編集の段階で決められ、いつでも変更できます。エディターのインスペクターで、カメラレイアウトパネルを開きます。

  • ピクチャーインピクチャ縦並びデュアルフレームWebカメラなし
  • すべてのレイアウトに共通:左右反転と、カメラ映像のクロップ。
  • ピクチャーインピクチャのみ:カメラの形状(長方形、円、正方形、角丸)、10〜50% のサイズ(既定は 25%)、既定でオンのズーム時に縮小。ズーム時に縮小は、ズームの再生中にカメラを小さくして、細部を隠さないようにします。カメラはキャンバス上でドラッグして移動できます。
  • カメラ背景:オリジナル、ぼかし、切り抜き、カスタム。切り抜きは、CPU 上で動くセグメンテーションモデルを使い、グリーンバックなしで背景を取り除きます。このセクションは、お使いのパソコンでセグメンテーションのランタイムを読み込めた場合にのみ表示されます。

イントロやアウトロには、C を押してフルスクリーンカメラのセグメントを追加します。その区間では、カメラがフレーム全体を占めます。

コンポジションパネルでは、フレームのスタイルを設定します。背景のセクションには、18 種類の組み込みの壁紙、単色、グラデーション、自分の画像があり、背景のぼかしも設定できます。その下に、影、丸み、余白、モーションブラーがあります。

4. 自動ズームを追加する

タイムラインのツールバーで自動強化を開き、自動ズームを選びます。OpenScreen は記録されたカーソルの動きを読み取り、そうした静止の箇所にズーム範囲を配置します。ネットワークもモデルも使いません。何も配置されなかった場合は、その旨が表示されます。よくある原因は、録画にカーソルのデータがない、その範囲に静止がない、既存のズームがすでにその場面をカバーしている、のいずれかです。

次に、配置されたズームを確認します。ズームをクリックすると、倍率(1.25× から 5×)、フォーカスモード(自動はカーソルに追従、手動は固定した位置を保持)、任意の 3D 回転を設定できます。手動でズームを追加するには Z を、不要なズームを削除するには Ctrl/Cmd+D を押します。

ズームの配置の仕組みについて詳しくは、自動ズームを参照してください。

5. 文字起こしからカットし、無駄な時間を早送りする

まず文字起こし。 文字起こしパネルを開きます。まだ文字起こしがない場合は、今すぐ文字起こしをクリックします。文字起こしは Whisper でローカルに実行されます。初回実行時には、約 264 MB のモデルを一度だけダウンロードします。

テキストでカット。 文字起こしで単語を選び、Delete を押すと、その区間が再生とエクスポートからカットされます。無音は行内にマーカーとして表示されます。クリックするとカットされ、もう一度クリックすると元に戻ります。カットした単語にマウスを重ねても、元に戻せます。タイムラインで T を押して、トリム範囲を追加することもできます。

カットできない部分は早送り(ページの読み込みや文字入力など)。S を押して再生速度の範囲を追加し、0.25× から 5× のプリセットを選ぶか、0.1× から 100× の任意の値を入力します。音声は、速度に合わせてタイムストレッチされます。

複数のテイクをつなげる。 メディアに切り替え、まだ一覧にないテイクはメディアをインポートで追加してから、そのカードをクリップ行にドラッグします。既存のクリップの上にドロップすると、前に追加後に追加ここで分割して挿入を選べます。メディアライブラリとクリップを参照してください。

自分の LLM プロバイダーを接続していれば、自動強化 → スマートカットで、カットを AI エージェントに任せられます。これは任意の機能で、キーを追加するまではオフです(AI 編集)。元に戻す操作は、エージェントの編集を含めて直近 50 ステップまで保持されます。

6. 見せたくない情報をぼかし、注釈と音を加える

A を押して注釈を追加し、種類を選びます。

  • ぼかし:ガウスまたはモザイク、長方形または楕円。メールアドレス、API キー、顧客名などの上に配置し、それらが映るすべてのフレームに範囲を広げたら、スクラブして確認します。
  • テキスト:任意でアニメーション(フェード、上昇、ポップ、左へスライド、タイプライター、パルス)を付けられます。
  • 矢印:8 方向。線の太さと色を調整できます。
  • 画像:JPG、PNG、GIF、WebP(ロゴなど)。

音を加えるには、V を押してタイムライン上でナレーションを録音するか、M を押して音楽(mp3、wav、m4a、aac、flac、ogg、opus)を読み込みます。各トラックには、個別のゲイン、フェード、ループ、ミュートがあります。

カーソルパネルでは、手順 2 で記録したポインターのスタイルを変えられます。すべてのツールは、編集とタイムラインに一覧があります。

7. 字幕を焼き込む

文字起こしパネルで字幕をクリックし、字幕を表示をオンにします。字幕は文字起こしからリアルタイムに描画されるため、手順 5 のカットは追加の作業なしで反映されます。フォント、サイズ、太字、色、背景の下地、位置、1 行あたりの単語数(1〜12)を設定します。フレームの形を変えたあとは、プレビューで配置を確認してください。

Whisper は話されている言語を検出します。メディアステージのこの言語で再生成で、100 言語のいずれかを指定することもできます。別の言語で公開するには、15 の翻訳先のいずれかに翻訳し、エクスポートの前に表示でその言語を選びます。翻訳は自分の LLM プロバイダーを経由するため、キーが必要です。

字幕は動画に焼き込まれます。OpenScreen は .srt.vtt のファイルを書き出さないため、プレーヤーで字幕をオフにすることはできません。詳しくは、字幕と文字起こしと、字幕機能の仕組みを参照してください。

8. エクスポートする

形を選ぶ。 コンポジションパネルのフォーマットでは、16:9(既定)、9:16、1:1、4:3、4:5、16:10、10:16、またはクリップの元の形を選べます。

エクスポート。 トップバーのエクスポートをクリックします。

  • MP4:720p、1080p、Source。24、30、60 fps。H.264 または H.265。ダイアログでは、H.264 に「互換性が最も高い」と表示されます。映像のビットレートは調整できず、1080p で約 8 Mbit/s です。
  • GIF:15、20、25、30 fps。サイズは Medium、Large、Original。ループのオン/オフ。GIF はディザリングなしの 256 色なので、フラットなインターフェースを映した短いクリップに向いています。

透かしは入りません。別の形でエクスポートするには、フォーマットを変えてもう一度エクスポートします。

プロジェクトを残す。 Ctrl/Cmd+S.openscreen ファイルとして保存しておけば、製品のインターフェースが変わったときに、クリップを差し替えて再エクスポートできます。プロジェクトはメディアを埋め込まず、参照するだけです。openscreen pack を使えば、すべてをひとつの持ち運べるフォルダーにまとめられます(CLI)。詳しくはエクスポートを参照してください。

ファイルを公開する

OpenScreen は、動画のホスティング、共有リンクの作成、再生回数の集計を行いません。エクスポートしたファイルを、視聴者が見る場所にアップロードしてください。

OpenScreen が適さない場合

  • 視聴者の分析やコメント機能が付いた共有リンクが必要。 動画をホスティングする録画ツールのほうが適しています。たとえば Loom は、各録画を loom.com のリンクとして共有し、料金ページには、すべてのプランに視聴者のインサイトと動画へのコメントが記載されています(2026 年 9 月時点)。OpenScreen が適する、より限られたケースについては、Loom の代替としての OpenScreenを参照してください。
  • 視聴者がクリックして進めるインタラクティブなデモが必要。 OpenScreen がエクスポートするのは動画と GIF だけです。
  • 動画プレーヤーに、別の字幕ファイルが必要。 OpenScreen は字幕を焼き込むことしかできません。
  • スマートフォンやタブレットで録画する。 OpenScreen は、Windows、macOS 13 以降、Linux 向けのデスクトップアプリです。

出典

Loom は、その所有者の商標です。OpenScreen は Loom と提携していません。