デモ動画は 30 fps と 60 fps、どちらを選ぶべきか

本当に重要な指標は frames per second ではなく知覚される動きです。フレームとフレームの間で、コンテンツがどれだけ速く動くか。静止したウィンドウの録画は、フレーム間で何も変位しないため、60 fps でも 30 fps でも見た目は同一です。

人間の目はフレームを数えません。変位の不連続を検知しています。だからこそ、1440px の画面を 0.3 秒で横切るカーソルは 30 fps ではカクつき、60 fps では滑らかに見えるのです。1フレームあたりの移動量が 80px になるか 40px になるかの違いであり、目が動きを連続として認識できなくなるしきい値は 60px 付近にあります。

フレームレートが動画を説明するのではありません。録画したものがどれだけ速く動いていたかを説明しているのです。

30 fps で十分なとき

デモが静的なパネルの巡回で、カーソルが落ち着いて動くだけなら、30 fps で十分です。パネルはフレーム間で変化せず、カーソルの変位も知覚しきい値を超えません。見た目の損失ゼロで、ファイルサイズは半分になります。

これがカバーするのは、プロダクトのウォークスルー、設定画面の紹介、機能の解説のほとんどです。つまり、インディーの創業者や小さなチームが実際に出しているものの大半です。

60 fps がサイズに見合うとき

60 fps が効くのは、実際の動きがあるときです。ドラッグ＆ドロップ、速いスクロール、アニメーションする UI 遷移、画面を素早く横切るカーソル。そこではフレームあたりの変位がしきい値を超え、30 fps は段々に見え始めます。

代償はファイルサイズです。HEVC の 60 fps は体感の滑らかさが倍にならないままバイト数がほぼ倍になります — Weber の法則の教科書的な事例で、識別できる差は絶対的な刻みではなく基準値に比例して拡大します。

3ステップでの決め方

1. 主な動きを見る。 静的なパネルとゆっくりしたカーソルなら 30 fps。ドラッグ、速いスクロール、UI アニメーションがあるなら 60 fps を検討。
2. ファイルのコストを量る。 HEVC の 60 fps は体感の滑らかさが倍にならないままサイズを約2倍にします。ランディングページで配信するなら、重さが LCP を悪化させ、その損失が滑らかさの利得を上回ることがあります。
3. 再生環境を確認する。 適切なコンテナなしで Safari に HEVC の 60 fps を渡すと、真っ黒な画面が表示されます。ユニバーサルなウェブ配信なら、H.264 の 30 fps が依然として最も安全なデフォルトです。

Sgrin はこれをどう扱っているか

Sgrin では手動で選ぶ必要はありません。録画の動きを読み取り、書き出し時に上述のルールを適用します。