このページの本文へ

Webディレクション最新キーワード ― 第54回

JWDA

Web制作で扱う動画フォーマットの比較

2011年09月13日 11時00分更新

高橋 仁/クロスコ

  • この記事をはてなブックマークに追加
  • 本文印刷
web-keyword

 一度に多くの情報を伝え、イメージを直感的に訴求できる動画コンテンツを、Webサイトでも扱うことが増えてきました。動画コンテンツを含むWebサイトを制作するときには、目的とコンテンツの内容に応じて、適切なフォーマットを選択することが大切です。

動画フォーマットとコーデック

 主な動画フォーマットには、Windows Media(.wmv)、Flash Video(.flv)、MPEG-4(.mp4)などがあります。デジタルビデオカメラなどで撮影した動画は、Webなどの視聴環境で扱える形式に圧縮するために、コーデックを用いてエンコード(変換)する必要があります。同じ動画フォーマットでも、コーデックが異なると再生できないので、エンコードするプログラムとターゲットとする動画プレーヤーの双方のバージョン、サポートしているコーデックを確認しておきましょう。

 動画をブラウザーで再生する場合、現在ではFlashかWindows Mediaのプラグインに対応した動画プレーヤーをページに組み込むのが一般的です。その他の形式も一部では使われていますが、トレンドによって使われなくなるものもあります。今後は、プラグインを必要とせず、HTMLタグで直接動画を埋め込んで再生・コントロールできる「HTML5」対応の動画フォーマット、MPEG-4AVC/H.264(.mp4)なども普及してくると予測されます。

 動画コンテンツの利用例

動画フォーマットの選択方法

 動画コンテンツを使うときには、Webサイトの目的とターゲットによってプレーヤーとフォーマットを使い分けます。たとえば、Windows Mediaの場合は、Macユーザーが視聴できませんし、OSを問わず広く普及しているFlash Playerであっても、企業の社内セキュリティポリシーによって視聴できないこともあります。そこで、BtoBにはWindows Mediaを、BtoCにはFlashを選ぶといった選択方法があります。

 動画データを作成するツールや環境は数多くありますが、基本的な考え方は「ファイルは軽く、高画質にエンコードする」ということです。エンコードの際は、ページ内に埋め込むときの画角、アスペクト、ビットレート、ファイルサイズをきちんと調整しましょう。

 動画データをフォーマットする際には、高画質を確保するため、なるべく非圧縮に近い元データからプレーヤーで使用するフォーマットに変換します。コーデックによって圧縮率が変わるので、目標のファイルサイズと、ターゲットのプレーヤーでサポートされていることを確認し、再生試験をしながら作成していきましょう。

著者:クロスコ

クロスコは、映像技術とコミュニケーション支援のサービスドメインを持ち、Webサイト、動画・映像などを組み合わせたクロスメディアプロモー ションを、ワンストップで実現してきました。アナログ停波後のデジタルメディアの多様化、ソーシャルメディアのコミュニケーションにも先立って対応 し、あらゆるタイプのマルチデバイス、マルチスクリーンのコンテンツの制作・開発・サービス提供を行なっています。こうした先進のノウハウにより企業の皆様にこれから必用とされる新しいコミュニケーションの形を、戦略からご提案・提供してまいります。

■関連サイト

書影

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Webディレクション標準スキル152

本体 4,280円+税、AB判392ページ(オール4色刷)
ISBN:978-4-04-868746-1

Amazon.co.jpで買う 楽天ブックスで買う

JWSDA:日本Webソリューションデザイン協会からのお知らせ

この連載が本になりました!!

書籍版は、企画・設計・制作・運用など、Webディレクション業務の大まかな流れに沿って構成。最新情報を盛り込み、書き下ろしのコラムや用語集も収録しました。ずっしり重い1030g、厚さ19.5mmで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊です。

Amazonで購入

カテゴリートップへ

この連載の記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く