クリエイターのためのWebテク講座 - 動画ファイルの作成について。

前回・前々回と、HTML5のVideoタグを使った作例を紹介しましたが、では肝心のHTML5で利用する、「H.264」「Web M」形式の動画は、どうやって用意すればいいのか？

今回はそのあたりを解説しましょう。

Adobe Media Encoderを利用する。

AdobeのCS製品のうち、Web制作向け・動画制作向けのスイート製品を交友すると、「Adobe Media Encoder」というアプリケーションが同梱されます。

Web制作を生業にされている方は、大体はAdobe製品を使っていると思いますので、Adobe Media Encoderを使うのが一番手っ取り早いでしょう。

なお、Adobe Media Encoderでは、Web M形式の動画は書き出せないので、Web M形式の動画に関しては、別のツールを使うことになります。

まずは、メニューから「Adobe Media Encoder」を起動しましょう。起動すると、このようなウインドウが立ち上がるので、上のペインに、変換したい動画をドラッグアンドドロップします。

ちなみに、元となる動画は、クライアントや素材サイトから、購入およびダウンロードしたものを利用するとします。流石に、元々の動画制作からとなると、それはWebの範疇を超えてしまいます（笑）どうしても、ご自分で動画を制作されたい方は、Flashからでも、AVI・MOV形式の動画を出力することが出来るので、試してみてもいいかもしれませんね。

さて、素材を読み込ませると、下記のようになります。

そうしたら、黄色い四角で囲んである部分をクリックします。すると、プリセットの設定ウインドウが開きます。

この画面で、動画の設定をします。左側が、動画のプレビュー画面で、右側が設定項目になります。

それでは、設定項目を細かく見てみましょう。

形式：ここではH.264を選択します。

プリセット：予め、動画の書き出し形式をプリセットすることができます。

出力名：書き出す動画のファイル名。

ビデオを書き出し・オーディオを書き出しをそれぞれチェックします。音声が必要ない場合は、オーディオを書き出しのチェックは外して構いません。

テレビ方式：NTSCにチェックを入れます。
※NTSCは、主に北米・日本で用いられる放送規格です。 PALはヨーロッパのTV規格になります。日本でWebの仕事をしている限りは、まず見かけません。

フレームの幅・高さ：動画の横縦のサイズです。任意のサイズを指定します。
※設定するサイズの目安としては・Full HDと呼ばれるサイズが、1920×1080 ・HDと呼ばれるサイズが、1280×720 ・DVDのワイドサイズが、854×640 ・DVDの通常サイズが、640×480 大画面・全画面で表示する場合は、Full HD・HDサイズを選択します。 Webページ内で表示するならば、DVD以下の任意のサイズでいいでしょう。

フレームレート：1秒間に何枚の絵を描画するかの設定です。NTSCの標準だと、29.97かHD以上だと、59.84ということもあり得ます。ここは迷ったら29.97に設定しておけばいいでしょう。

フィールドオーダー：基本は「なし（プログレッシブ）」でOKです。

ピクセル縦横比：元の動画がワイドであれば「16:9」スクエアであれば「4:3」を選択します。

プロファイル：基本的にはメインでOKです。

レベル：H.264では、多くのデバイスで利用できるように、処理の負荷や使用メモリ量を表す、レベルを設定できます。一般に、レベルが高くなるほど、設定できる解像度、フレームレート、ビットレートが上がります。 Webでは、3～4くらいが適切でしょう。

ビットレート設定：1秒間あたりのデータ量です。画質を決定付けるパラメータです。
※値の目安としては
・1920×1080で、5Mbps～10Mbps
・1280×720で、2Mbps～5Mbps
・それ以下で、0.5Mbps～2Mbpsといったところでしょうか。
もちろん、商用の映像コンテンツスのトリーミングサービスでは、もっと高めに設定されていることもあります。

ビットレーエンコーディング：エンコード方式
・CBR：固定ビットレート、動画を通して、ビットレートが一定です。
・VBR：可変ビットレート、特に画質が荒れる部分のビットレートを一時的に上げて、画質を高く保ちます。また、VBRには、1PASSと2PASSがあり、2PASSを選択すると、解析・エンコードとを2回に分けて行い、1回の処理で解析・エンコードを行う1PASSに比べ、倍の時間がかかりますが、その分画質は高くなります。

これらの設定が終了したら、オーディオタブを選択し、オーディオのビットレートを設定します。

コーデック：H.264では、オーディオにAACという形式を使います。基本はデフォルトでOKです。

出力チャンネル：ステレオとモノラルの設定です。音楽PVやCM映像など、BGMのクオリティが重視される場合はステレオ、スピーチ映像など、特にBGMにこだわりが無い場合はモノラルというのが一般的でしょうか。

周波数：44.1kHzか48kHzが一般的です。特にデバイスの縛りがなければ、デフォルトで構いません。

ビットレート：動画同様、1秒間当たりのデータです。ステレオであれば、128k～192k程度モノラルであれば、64k～96k程度が一般的です。

詳細設定：エンコードの際に、ビットレートと周波数のどちらを優先してエンコードを行うかの設定。基本はビットレート優先でOK。

種々の設定が完了したら、「OK」を押して設定画面を閉じ、画面左上の三角ボタンを押しましょう。

Web M形式の動画を作る。

さて、Adobe Media Encoderを使って、H.264形式のMP4ファイルを作成しました。次にWeb M形式の動画を作成したいのですが、現在Web M形式の動画の普及率は、お世辞にも芳しいとはいえず、それに伴いエンコーダーの数も少ないです。

無償で使えるソフトに

Free WebM Encoder 1.2

XMedia Recode 3.0.1.5

などがあります。無償のソフトはほかにもあるのですが、「Free WebM Encoder 1.2」は、簡単さにおいて、「XMedia Recode 3.0.1.5」は多機能さにおいて、他よりも抜けており、それぞれ真逆の用途でおすすめできるソフトです。

フリーソフトの利用に関して厳しい会社でお仕事をしている人方もいらっしゃると思います。そういった方は、有償のパッケージで、下記のソフトをお勧めします。

Sorenson Squeeze 8.5 Lite

Sorenson Squeezeは、Flash動画が出はじめのころから、高品質なFlashビデオ用のエンコーダーとして人気のある老舗ソフトです。また、それなりに高価なソフトということもありエンコード品質が高く、仮にフリーソフトが使える環境ではあるが、クオリティにシビアなケースでもお勧めできます。

今回は、「Free WebM Encoder 1.2」と「XMedia Recode 3.0.1.5」を解説します。なお、私の環境で動作は確認していますが、あくまで無償のソフトなので、ご利用の際は自己責任でご利用ください。

Free WebM Encoder 1.2の利用

Free WebM Encoderは、非常に単純な機能のみを備えたフリーソフトです。 H.264で作られた動画ファイルを解像度はそのままで「動画のビットレート500kBps・音声48kHz」のWeb M動画に変換するというだけのソフトです。

それでは解説します。インストールしたFree WebM Encoder 1.2を起動すると下記のような画面が開きます。

後は、「Please add the files you want to comvert」と書かれているところに、ファイルをドラッグアンドドロップして、「Convert to WebM」をクリックします。

Free WebM Encoderでは、複数ファイルのバッチエンコードに対応しています。ビットレートを500kBpsから設定を変更できないため、大画面動画には向きませんが、検証用のデータをさっと作りたいときなどに重宝します。

XMedia Recode 3.0.1.5の利用

XMedia Recodeは、Free WebM Encoderとは打って変わって、非常に高い設定機能を備えたフリーソフトです。設定機能だけでなく、H.264形式の動画の書き出しにも対応しており、Adobe Media Encoderを用意できないユーザーでも、気軽にHTML5対応の動画を作れます。

それでは解説します。インストールしたXMedia Recodeを起動すると下記のような画面が開きます。

画面のどこでもいいので、元となるファイルをドラッグアンドドロップします。

そうしたら、「形式」で「WebM」を選択します。すると、自動的に「ファイル拡張」は「webm」が選択されます。

次にリストにあるファイルを選択すると、動画の設定用のタブが表示されるので、「ビデオ」を選択し、ビットレートを指定します。単位は「メガ」ではなく「キロ」なので、5Mbpsとしたい場合は「5000」と入れましょう。ビットレートの目安は、H.264とほぼ同じで構いませんが、Web Mの方が若干画質が劣るので、30%程度高めでもいいかもしれません。

ビットレートを指定したら、「クロップ/プレビュー」を選択し、幅・高さを指定します。最低限の設定はこちらでOKです。

最後に、当該ファイルを選択し右クリックすると、右クリックメニューが出てくるので、「リストに追加」を選択します。

すると、リストタブに反映させるので、画像右上の「エンコード」ボタンをクリックします。

以上で、動画のエンコードに関しての解説を終わります。動画のエンコードといえば、今まではFlasherと呼ばれる人たちの仕事でしたが、これからHTML5時代を迎え、マークアップエンジニアも押さえておかなくてはいけない要素になってきそうですので、これを機に、是非動画形式に理解を深めて頂ければと思います。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。