でのじブログ

ウェブデザインの“で”の字から知っていこうとするブログです。 フィルムカメラや映画・映像についてもつらつらと書いていきます。

これだけ覚えればOK!Adobe Media Encorderの使い方 〜ウェブサイトに動画があたりまえの今だからこそ〜

一昨年くらいから、背景だったり一部分だったりに動画を使用するサイトが増えましたよね。HTML5で動画再生が対応されたことに端を発し、通信コスト・制作コストの軽減も、大きな要因のように思えます。極端に言えばスマホで撮影できてしまいますからね。

 

デザイナーの皆さん、ディレクターやクライアントから「この動画使いたいから、軽量化して!」なんて言われたことありませんか?

そんな時のために、Adobe Media Encorderの最低限これだけ覚えておけばOK!という内容をお届けしますので、参考にしていただけると幸いです。

www.adobe.com

 

【目次】

  • ファイル形式はこれ!
  • ファイル容量の目安は?
  • あとは「ビットレート」で調整するだけ

 

ファイル形式はこれ

ずばり、mp4(h.264で用意しましょう。最新バージョンであればIEchromeFirefoxなど主要ブラウザは全て対応しています(この記事は2015年11月に書いています)。

そのサイトを使用するユーザーの多くが、古いバージョンのブラウザを使っているなどでない限り、基本的にはこの形式で問題なさそうです。

※書き出し設定の「形式」でMPEG4を選んではいけないですよ。きちっとh.264という項目があるので、それを使用しましょう。

 

ファイル容量の目安は?

容量に関しては、ずばりこれ!という数値を私は知りません…。知っている方がいたら教えてほしい…。

なので私は、同じように動画が使用されているサイトのファイル容量を参考にするというやり方にしています。ユーザー層が似たようなサイトであればさらにいいですね。

あとはテスト環境で実際に確認して、あまりにも重くなる場合は調整する、という形で進めています。

 

あとは「ビットレート」で調整するだけ

ここまでくれば、後は実際にエンコードするだけです。軽量化は基本的にビットレートを下げることで調整します。

 

ビットレートに関してはこちらがわかりやすかったです!

aviutl.info

 

いかがですか?たったこれだけです!普段あまり使わないアプリケーションだったりすると、インターフェースから理解するのに苦労したりしますが、実際に使うのはほんの一部です。

 

さくっと覚えて、仕事の幅を増やしていきたいですね。

 

動画を使ったウェブサイト…まだまだ増えていくんだろうなぁ。