動画の仕組み

動画とは、人の目の特徴である残像効果を使い、少しずつ変化させた一連の画像のことを指します。テレビや映画・アニメーションなどで利用され音声なども組み合わせて利用します。

動画の仕組みについて学習しましょう。


スライドの学習内容

  • 1. フレーム
    • 1-1. フレームレート
    • 1-2. フレームレートが高い場合の問題点
  • 2. 動画形式

1. フレーム

動画はたくさんの画像(フレーム)と呼ばれる1枚の画像を高速で連続して表示することで作られます。

これらの画像は、1秒間に数十~数百枚の速さで切り替わることで動きを感じさせています。

例えば、次の棒人間は1枚の画像ですが、動画の1コマを構成する場合はフレームと呼ばれます。

フレームの例

動画にするためには、動きに合わせ少しずつ移動したフレームを何枚も用意する必要があります。

次の例は、6枚のフレームを使い棒人間を動かしています。

見やすくするため画像を小さくしています。

6枚のフレームの例

この6枚のフレームを1秒に1フレームずつ切り替えて表示してみるとこのようになります。

1秒間で1フレームずつ切り替えて表示した場合の例

動いているようには見えてますが、かなりゆっくりでカクカクした動きになっていますね。

同じフレームを1秒に6フレームずつ切り替えて表示してみるとこのようになります。

1秒間で6フレームずつ切り替えて表示した場合の例

「1秒間で6フレームずつ切り替えて表示した場合の例」の方が、スムーズに動いているように見えます。

上の例でもわかるように1秒間に表示するフレーム数を変化させると動画の滑らかさが変化することがわかります。

1-1. フレームレート

フレームレートは1秒あたりに表示するフレーム数を表す単位で、fps(Frame Per Second)と表現されます。
例えば、上の例の「1秒間で6フレームずつ切り替えて表示した場合の例」の場合、1秒間に6fpsになります。

fpsは数値が大きいほど滑らかに、少なければカクカクした動画になります。

私たちの身の回りには映画やテレビ、ゲームやYouTube動画などの様々な動画コンテンツがあります。これらの動画コンテンツは、それぞれで使用するフレームレートが異なります。

次の表は、代表的なフレームレートをまとめたものです。

利用用途 フレームレート
防犯カメラ、監視カメラ 3~5 fps
映画館で観る映画 24 fps
テレビ、DVD、ドライブレコーダー 30 fps
YouTube 24~60 fps
Nintendo Switch 30~60 fps
4Kテレビ、8Kテレビ 60 fps
PlayStation 5 120 fps
スポーツ用カメラ、ゲーム 120~240 fps

フレームレートが高いと、スポーツのスーパースロー再生時も滑らかな動きで見ることができます。

fpsが高いほど滑らかな動画になりますが、この値が高いことによるデメリットもあります。目的や用途によって必要なfpsは決まります。

コ ラ ム

映画館でみる映画とテレビでみる映画のfpsが違っていることに気付いている人はいますか?映画館でみる映画をテレビで放送するときは、フレームレートが異なるので、テレビ用にフレームを増やして放送しています。

このフレームを増やすことを「フレーム補完」と呼びます。2000年代にテレビでフレーム補完機能が付き始めました。テレビでは、前後のフレームから動きを推測しフレームを生成することでフレーム補完を行います。

そのため、映画館でみた映像と比べテレビでみた方が動きが滑らかに見えることがあります。

1-2. フレームレートが高い場合のデメリット

フレームレートが高いと、動画は滑らかになります。スポーツ中継やゲームでなどでカクつかず、ストレスを感じることなく視聴することができます。
しかし、フレームレートを高くした場合のデメリットもあります。

①データ容量の増大

フレームレートが高いということは1秒間に入る画像の枚数が多いということです。そのためデータ容量が大きくなります。データ容量が多くなると次の点に注意をする必要があります。

  • 保存やアップロードに時間がかかる
  • ネットワークに負荷がかかる

②再生出来ない場合がある

フレームレートが高いということは1秒間で表示する画像の枚数が多いということです。ディスプレイの性能によっては表示できない場合や自動的にフレームレートが下げられて再生される場合があります。

また、高いフレームレートが再生できるディスプレイは性能が高く価格も高い傾向にあります。

フレームレートは動画を出力する単位です。それに対し、ディスプレイなどで動画を表示する単位をリフレッシュレートと呼んでいます。
例えばリフレッシュレートが60Hzのディスプレイは1秒間に60枚の画像を表示することができます。

2. 動画形式

動画を表現する方法として、複数のGIF画像をパラパラ漫画のように連続して表示させるアニメーションGIFと、MP4形式のビデオファイルが一般的に知られています。

それぞれ、どのような特徴があるか次の表で確認します。

動画形式 特徴 利用用途
アニメーションGIF
  • 音声を入れることができない
  • 256色までしか使えない
  • 画像が表示できる環境であればどこでも利用可能である
    (再生専用のソフトウェアは不要)
  • 比較的簡易に作成できる
  • Webサイトの広告
  • スタンプ
  • 手順説明

    例:コンピュータの処理の流れ

MP4などのビデオファイル
  • 音声を入れることができる
  • フルカラーが使えるものが多い
  • 再生に専用のアプリケーションが必要
  • 圧縮率が高いのでアニメーションGIFに比べ容量が小さくなることが多い
  • YouTubeの動画
  • SNSの動画
コ ラ ム

比較的新しいアニメーション画像の種類にAPNGとWebPがあります。

どちらもアニメーションGIFと同様に簡単にアニメーションを作ることができます。

それぞれの特徴は以下の通りです。

APNG(エーピング)

  • フルカラーが使える
  • 透明度の設定ができる
  • 可逆圧縮方式
  • ファイルサイズが大きくなる

WebP(ウェッピー)

  • フルカラーが使える
  • 透明度の設定ができる
  • 可逆圧縮と非可逆圧縮の両保存形式に対応
  • APNGに比べファイルサイズは小さくできる

このページで利用しているアニメーションはすべてアニメーションGIFです。
この後にある「アクティビティ①」で棒人間アニメーションGIFを作成します。アニメーションGIF作成を行いフレームレートの違いを確認しましょう。

Well done!

次のステップに進みましょう!

次のステップに進む

← 前のステップにもどる