このページの本文へ

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で購入

カテゴリートップへ

この連載の記事
ソーシャルランキング
  1. 今日発売の『スマートフォンサイトUI図鑑』ってどんな本? 294
  2. 絶対見ておきたい国内有名企業のHTMLメール事例まとめ 210
  3. Googleで「後藤健二 報道ステーション 2月2日」と検索しても情報が探せない? 技術的なバグか 180
  4. 「ネットとリアルのごちゃまぜ化」ハンズ流オムニチャネルの仕組み 172
  5. マネしたくなる海外企業の美しいHTMLメールまとめ 122
  6. 日本のスマホサイトは2年間でこんなに変わった 2888
  7. たった4行で電話が作れるAPI「Twilio」とは? 2355
  8. 残業ゼロのIT会社、理想の就労環境の作り方とは 1815
  9. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1554
  10. アドビ、日本語対応フォントをGitHubで無料配布 1173
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング