縦型動画をHTMLで作る HyperFramesの書き出し時間を実測しました

記事内に広告が含まれています。

この記事でわかること

• 25秒の縦型動画をHTMLから書き出すのに、どのくらい時間がかかるかがわかります。
• 同じ入力から同じ出力が返るかどうかを、MD5で確かめた結果がわかります。
• 確かめきれなかったことと、うまくいかなかったことも正直に載せています。

結論：25秒の縦型動画の書き出しは約1分です

25秒の縦型動画1本の書き出しは、この環境では約1分でした。そして、本日の2回の書き出しは、まったく同じ出力になりました。

使ったのは、HTMLとCSSで組み立てた画面を動画に書き出すツール、HyperFramesです。

ブログやSNS向けの文字・図解の動画を作るために、書き出しにかかる時間と再現性を測りました。

どんな条件で測ったか

• 素材は、2026年10月28日の試作で作った、英語入試・併願カレンダーのプロモ動画です。
• 動画は25秒、1080×1920、30fps、750フレームで、音声はありません。
• 本日2026年11月4日に、同じコンポジションを同じコマンドの手順で2回書き出しました。
• 書き出しの前に、チェック（npx hyperframes check）を1回実行しました。
• 環境はCPU2コアのVMです。
• 比較用に、10月28日の試作で測った3回分の時間も並べました。
• ただし、版が少し違います。10月28日の3回は、場面の切替で出た無地フレームの修正（最終カードの出現開始を20.4秒から20.3秒へ）を入れる前の版です。本日は、修正後の版を使いました。
• そのため、時間の比較は「ほぼ同じ動画ですが、版が少し違う」前提のものです。

結果：書き出し時間は57.5〜60.7秒でした

書き出し時間をグラフにしました。

数値は次のとおりです。

本日の出力をffprobeで調べると、H.264、1080×1920、30fps、750フレーム、25.0秒、約1.7MBでした。

動画の中身はこんな画面です

書き出した動画から、場面を取り出したものです。

分かったこと3つ

1. 書き出しは約1分で、何度でも書き直せます

• 25秒の縦型動画1本の書き出しは、この環境では約1分です。
• 手作業の動画編集と違い、HTMLを直せば同じ手順で何度でも書き直せます。

2. 本日の2回は、同じ出力が返ってきました

• 本日の2回の出力は、MD5が一致しました。
• ただし、日をまたいだ修正後の版（v4）とは、MD5が一致しませんでした。
• 数字や日程のように、間違えられない文字情報を扱う動画に向く性質だと考えています。

画像の形式を実測した前回の記事は、こちらです。今回も同じように、まず測ってから結果をまとめました。

3. 書き出し前のチェックで警告を拾えます

• 本日のチェックでは、警告が3件、エラーが0件でした。
• 警告は、表示時間の短い注記など、内容に由来するものでした。
• 人では気づきにくい点を、書き出す前に知らせてくれます。

正直に書いておく、わからなかったこと

修正後の版（v4）ともMD5が一致しませんでした

• 10月28日に時間を測った3本は、版もファイルサイズも本日とは違います。
• 本日と同じ修正後の版（v4）とは、ファイルサイズが同じ1,834,125バイトです。
• しかし、MD5は一致しませんでした（v4は285c95bb…、本日はf4cd0d5d…）。
• 中身が同じかどうかは確認できていません。フレーム単位の照合は、本日は行っていません。
• 確認できたのは、本日の2回どうしが一致したことまでです。

書き出しが速くなった理由は特定できていません

• 試作時は79.2〜93.0秒でしたが、本日は57.5〜60.7秒と短くなりました。
• 条件の違いとして、試作時の測定中は、約2.2GBを使う別のプロセスが同時に動いていたことが試作の記録に残っています。
• ただし、それが時間差の原因かどうかは、切り分けていないので特定できていません。

つまずいた点：壁時計の時間が記録できませんでした

• 最初の試行スクリプトで、経過時間の計算に使ったbcコマンドがこの環境になく、壁時計の時間を記録できませんでした。
• そのため、時間の数値にはHyperFrames自身が出力する「rendered in」の値を使っています。
• 書き出しは2回とも正常終了しました（終了コードは rc=0 です）。

まとめ

• 25秒の縦型動画の書き出しは約1分で、本日の2回は同じ出力が返りました。
• 修正後の版（v4）との一致と、時間が短くなった理由は、まだわかっていません。
• わからなかったことは、今後わかった時点で追記します。