デモ動画作成ツール
画面収録や動画ファイルからmacOS風装飾付きのプロフェッショナルなデモ動画を作成できます。ウィンドウ装飾・ズーム演出・テロップ・タイムライン編集・アスペクト比選択をブラウザ内で完結。インストール不要、サーバーアップロードなし。
動画ファイルを選択
ドラッグ＆ドロップまたはクリック
サーバーアップロード不要・ブラウザ内で処理（最大200MB）
デモ動画作成ツールとは
プロダクトの紹介動画やデモ動画を作成する際に、画面収録をそのまま公開するとインパクトに欠けます。 このツールはmacOSウィンドウ装飾（角丸・シャドウ・ヘッダー）やズーム演出を追加し、 プロフェッショナルな見た目のデモ動画をブラウザだけで作成できます。
有料のデスクトップアプリと異なり、このツールはOS不問・完全無料・インストール不要です。 動画の変換が必要な場合は動画フォーマット変換ツールもご利用ください。
主な機能
- 画面収録 — ブラウザの画面共有APIで直接録画できます
- 動画インポート — MP4・WebMファイルをドラッグ&ドロップで読み込み
- macOS風装飾 — 背景色・角丸・シャドウ・ウィンドウヘッダー（赤黄緑ドット）
- アスペクト比プリセット — 16:9（YouTube / X）・9:16（Shorts / リール）・1:1（Instagram）・4:5から選択
- 動画配置の9点グリッド — アスペクト比変更時に上下左右・中央・角の配置をワンクリックで指定（Shorts向けに上寄せでテロップスペース確保など）
- タイムライン編集 — 不要な部分をカット、クリップを分割
- 早送り設定 — クリップごとに1x・2x・5xの再生速度を設定
- ズーム演出（3フェーズ） — ズームイン→保持→ズームアウトの3段階で滑らかに動作。各フェーズの秒数を個別調整可能。クリップ選択で直下にズーム設定が展開
- クリップ別テロップ — クリップごとにテロップを設定。位置（上部/下部）・サイズ・色・背景透過をカスタマイズ
- キーボードショートカット — Space（再生/停止）・S（分割）・Ctrl+Z（Undo）・タイムラインドラッグで効率的に編集
- 3段階の品質選択 — 軽量（4 Mbps）・中画質（8 Mbps）・高画質（12 Mbps）
- MP4エクスポート — H.264コーデック（解像度に応じてLevel自動選択）でX（Twitter）投稿に直接対応（Chrome / Edge / Safari）
- WebMエクスポート — VP9コーデック。GitHub READMEやブログ埋め込みに最適
使い方
- 「画面を録画する」ボタンで録画するか、動画ファイルをドラッグ&ドロップで読み込みます
- タイムラインで不要な部分を分割・削除し、早送りしたい部分の速度を変更します
- スタイル設定で背景色・角丸・シャドウ・macOSヘッダーを調整。アスペクト比を選択し、9点グリッドで動画の配置を指定します
- クリップを選択すると直下にズーム・テロップの設定が展開されます。キャンバスクリックでズーム中心を指定し、イン・保持・アウトの秒数と倍率を調整します
- 出力形式（MP4 / WebM）と品質を選択して「エクスポート」を押すと、装飾付き動画が生成されます
活用シーン
- X（Twitter）でのプロダクト紹介 — 30秒〜1分の短尺デモ動画でフォロワーにインパクトを与えられます。SNS別の最適な画像サイズも合わせて確認すると効果的です
- GitHubリポジトリのREADME — GIF代わりに軽量なWebM動画を埋め込み、プロジェクトの使い方を視覚的に説明できます。GIFからWebMへの変換でファイルサイズを大幅に削減できます
- ブログ記事・ドキュメント — 操作手順を動画で示すことで、テキストだけでは伝わりにくい操作フローを直感的に伝えられます
- プレゼン資料 — スライドに埋め込む用のデモ動画を、専門ソフトなしでサクッと作成できます
- ポートフォリオ — 無料デザインツールと組み合わせて、制作物のデモ動画をプロフェッショナルに見せられます
有料デスクトップアプリとの違い
macOS専用の有料デスクトップアプリと比較して、このツールはブラウザベースのため Windows・Linux・Chromebookでも利用でき、インストールやサブスクリプション契約は不要です。
| 比較項目 | 有料デスクトップアプリ | このツール |
|---|---|---|
| 対応OS | macOSのみが多い | 全OS（ブラウザベース） |
| 料金 | 有料（サブスクリプション） | 完全無料 |
| インストール | 必要 | 不要 |
| macOS風装飾 | 自動 | カスタマイズ可能 |
| ズーム演出 | 自動追従 | 手動設定（3フェーズ: イン→保持→アウト） |
| アスペクト比 | 固定 | 5種類（auto・16:9・9:16・1:1・4:5）+ 動画配置グリッド |
| テロップ | 高度なテキスト編集 | クリップ別テロップ（位置・色・透過設定） |
| 出力形式 | MP4・GIF等 | MP4（H.264）・WebM（VP9） |
| プライバシー | ローカル処理 | ブラウザ内完結・サーバー送信なし |
短尺（30秒〜1分程度）のSNS投稿向けデモ動画に特化しており、 個人開発者がX（Twitter）に投稿するプロダクト紹介動画の作成に最適です。
テロップ機能
動画にテロップ（字幕・キャプション）を2段階で設定できます。
- グローバルテロップ — 出力設定パネルで設定。動画全体に表示されるテロップです。プロダクト名やURLなど、常時表示したいテキストに最適
- クリップ別テロップ — クリップを選択すると直下に入力欄が表示されます。特定のクリップだけに表示するテロップで、操作手順の説明に活用できます。設定するとグローバルテロップより優先されます
いずれも表示位置（上部/下部）・フォントサイズ・文字色・背景色・背景の透過率をカスタマイズでき、動画に合わせた最適な見た目に調整できます。
対応フォーマット
入力はMP4とWebM形式に対応しています。画面収録機能ではブラウザの画面共有API（getDisplayMedia）を使用するため、 デスクトップ画面・特定のウィンドウ・ブラウザタブを選択して録画できます。
出力はMP4形式（H.264コーデック）とWebM形式（VP9コーデック）に対応しています。 MP4はX（Twitter）・YouTube・各種SNSへの直接投稿に最適です。 WebMはGitHub READMEやブログ埋め込みに適しています。 GIFへの変換が必要な場合は動画フォーマット変換ツールを使用してください。
MP4出力はWebCodecs API（H.264ハードウェアエンコード）を使用するため、Chrome・Edge・Safariで利用可能です。 Firefoxでは現在WebCodecs APIが未対応のため、WebM形式での出力となります。
画面収録の権限設定
「画面を録画する」機能を使用するには、ブラウザに画面収録の権限を許可する必要があります。 初回使用時にOSのダイアログが表示されるので、以下の手順で設定してください。
macOS の場合
- 「画面を録画する」ボタンをクリックすると、macOSが画面収録の権限を求めるダイアログを表示します
- 「システム設定を開く」をクリックし、プライバシーとセキュリティ > 画面収録とシステムオーディオでお使いのブラウザ（Chrome / Firefox / Safari等）をONにします
- ブラウザの再起動を求められた場合は再起動してください
- 「システムプライベートウインドウピッカーをバイパス」のダイアログが表示された場合は「許可」を選択してください（ブラウザ独自のタブ選択UIが使えるようになります）
Windows の場合
Windows 10/11ではブラウザの画面共有APIに対して特別なOS設定は不要です。 「画面を録画する」をクリックすると、ブラウザが直接画面共有ダイアログを表示します。 共有するウィンドウ・画面・タブを選択して「共有」をクリックするだけで録画が始まります。
ただし、組織のポリシーで画面共有が無効化されている場合や、ブラウザの設定でサイトの権限がブロックされている場合は録画できません。 その場合はブラウザのアドレスバー横の鍵アイコンから「サイトの設定」を確認してください。
Linux の場合
X11環境では追加設定なしで動作します。Wayland環境では、ブラウザがPipeWire経由で画面共有を行うため、 PipeWireとxdg-desktop-portalがインストールされている必要があります。
※ 画面収録の権限設定は一度行えば、次回以降はダイアログなしで録画を開始できます。 既存の動画ファイルをインポートする場合は権限設定は不要です。
エクスポート品質
エクスポート時に3段階の品質レベルを選択できます。ソース動画の解像度を維持したまま、 Canvas APIで装飾を描画し、選択した形式でエンコードします。
- 軽量（4 Mbps） — ファイルサイズ重視。SNS投稿やチャット共有に最適
- 中画質（8 Mbps） — バランス型。ブログ埋め込みやドキュメントに推奨
- 高画質（12 Mbps） — 画質重視。プレゼンや高解像度ディスプレイ向け
動画のアスペクト比はアスペクト比計算ツールで事前に確認しておくと、 SNSプラットフォームごとの最適なサイズを把握できます。
技術仕様
- Canvas APIで装飾（角丸・シャドウ・ズーム・テロップ）をリアルタイム描画
- MP4出力: WebCodecs API（VideoEncoder）+ mp4-muxer でH.264エンコード・MP4コンテナ生成。解像度に応じてH.264 Level 3.1/4.0/5.1を自動選択
- WebM出力: MediaRecorder APIでCanvasの出力をキャプチャ + FFmpeg WASMでCFR（固定フレームレート）後処理
- FFmpeg WebAssembly（LGPL）でカット・早送り・結合の前処理を実行
- ズームアニメーション: ズームインにeaseOutCubic（素早く開始）、ズームアウトにeaseInOutCubic（滑らかに戻る）を使用。3フェーズ（イン→保持→アウト）で秒数を個別調整可能
- アスペクト比変更時のレターボックス配置を9点グリッド（hFactor/vFactor）で計算
- すべてブラウザ内で処理され、サーバーへのデータ送信は一切ありません
このツールは FFmpeg (LGPL v2.1+) を使用しています。詳細は オープンソースライセンス をご覧ください。
使い方（動画）
最近の改善
ズームUI改善: 選択クリップ直下にインライン展開（スクロール不要に）
ズーム演出を3フェーズ化（ズームイン→保持→ズームアウト）、各秒数を個別調整可能に
アスペクト比変更時の動画配置を9点グリッドで指定可能に
アスペクト比変更時のMP4エクスポートエラーを修正（H.264レベル動的選択）
MP4エクスポート対応（H.264、WebCodecs API使用。X/SNS投稿に最適）
エクスポートUX改善（フローティング進捗通知・フォーマット推奨バッジ・推定ファイルサイズ表示）
Undo機能（Ctrl+Z / ⌘Z）を追加
キーボードショートカット（Space=再生/停止、S=分割）を追加
キャンバスクリックでズーム中心位置を設定可能に
関連記事
よくある質問
- Q. どんな動画を作成できますか？
- macOSウィンドウ装飾（角丸・シャドウ・ヘッダー）付きのプロフェッショナルなデモ動画を作成できます。画面収録や既存の動画ファイル（MP4・WebM）に背景色・ズーム演出・早送り・カット編集を追加して、SNS投稿向けの30秒〜1分程度の短尺動画に仕上げられます。
- Q. 動画はサーバーにアップロードされますか？
- いいえ、すべての処理はブラウザ内（Canvas API・MediaRecorder・FFmpeg WebAssembly）で行われます。サーバーへの動画アップロードは一切ないため、機密性の高いデモ動画も安心して作成できます。
- Q. 有料のデスクトップアプリとの違いは？
- macOS専用の有料デスクトップアプリ（サブスクリプション制）と異なり、このツールはブラウザベースでOS不問・完全無料・インストール不要です。Windows・Linux・Chromebookでも利用でき、短尺のSNS投稿向けデモ動画に特化しています。
- Q. 対応している動画形式は何ですか？
- 入力はMP4とWebM形式に対応しています。画面収録機能ではブラウザの画面共有APIで直接録画できます。出力はMP4形式（H.264コーデック、Chrome/Edge/Safari対応）とWebM形式（VP9コーデック）の2種類から選択可能です。エクスポート品質は「軽量（4 Mbps）」「中画質（8 Mbps）」「高画質（12 Mbps）」の3段階を用意しています。MP4はX（Twitter）やSNS投稿に最適で、WebMはGitHubやブログ埋め込みに適しています。
- Q. ズーム演出はどうやって追加しますか？
- クリップを選択すると直下に「ズームを追加」ボタンが表示されます。プレビューキャンバスをクリックでズーム中心を指定し、倍率（1.0x〜3.0x）を設定します。ズームイン・保持・ズームアウトの3フェーズで滑らかに動作し、各フェーズの秒数を個別に調整できます。ズームインにはeaseOutCubic（素早く開始）、ズームアウトにはeaseInOutCubic（滑らかに戻る）を使用しています。
- Q. アスペクト比を変更したときの動画の配置は調整できますか？
- はい、16:9・9:16・1:1・4:5のアスペクト比プリセットを選択すると、9点グリッドセレクター（3×3）が表示され、動画の配置を上下左右・中央・角に自由に設定できます。例えばShorts/リール向け（9:16）で横長動画を上寄せにして下にテロップスペースを確保するといった使い方ができます。
- Q. テロップ（字幕）はどうやって追加しますか？
- テロップは2種類あります。「グローバルテロップ」は出力設定パネルで設定し、動画全体に表示されます。「クリップ別テロップ」はクリップを選択すると直下に入力欄が表示され、特定のクリップだけにテロップを追加できます。クリップ別テロップを設定するとグローバルテロップより優先されます。位置（上部/下部）・サイズ・文字色・背景色・透過率をカスタマイズ可能です。
- Q. 動画の最大長さに制限はありますか？
- 技術的な制限はありませんが、ブラウザ内でFFmpeg WebAssemblyを使用して処理するため、長時間の動画はメモリ使用量が大きくなります。X（Twitter）やSNS投稿向けの30秒〜2分程度の動画に最適化されています。5分を超える動画では処理に時間がかかる場合があります。
- Q. キーボードショートカットはありますか？
- はい、Spaceキーで再生・一時停止の切り替え、Sキーで再生ヘッド位置でのクリップ分割、Ctrl+Z（Mac: ⌘Z）で操作の取り消し（Undo）が可能です。タイムライン上をドラッグしてスクラビング（シーク操作）もできます。テキスト入力フィールドにフォーカスがある場合はショートカットは無効になります。
- Q. 画面収録が動作しません。権限の設定方法は？
- macOSの場合は「システム設定 > プライバシーとセキュリティ > 画面収録とシステムオーディオ」でお使いのブラウザ（Chrome / Firefox等）をONにしてください。「システムプライベートウインドウピッカーをバイパス」のダイアログが表示された場合は「許可」を選択します。設定後はブラウザの再起動が必要な場合があります。Windowsでは特別なOS設定は不要で、ブラウザの画面共有ダイアログから直接録画できます。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。