Pocket

Webサイトの背景に動画が入るデザインを制作したのですが(関連記事)、ひとつ大きな問題がありました。それは「ファイルサイズが大きすぎて読み込みが遅くなる問題」です。

適切な制作方法や平均ファイルサイズを説明しているサイトがなかったので、今回は実際に制作した際に行なったことをまとめました。

普通に制作するとファイルサイズは20MB強になる

Adobe premiereでサイズ1280x720px、30秒程度の動画を作ると20MBを超えてしまいます。Webの素材としてはファイルサイズが大きすぎて、このままでは使えません。

平均サイズ(目標)を調べる

ここで同じように動画を背景に配置しているサイトの動画ファイルサイズを調べました。
ざっと調べると以下のような結果に。

DeNA 採用サイト 8.4MB(36秒/1600x900px)
HONDA 中途採用サイト 5.4MB(29秒/1280x720px)
Yahoo! Japan 採用サイト 5.4MB(34秒/1280x720px)
デンソーブランドサイト 2.5MB(12秒/960x540px)

いずれのサイトもばらつきはありますが動画の荒さも気にならずファイルサイズは小さく抑えられています。この結果を元に目標ファイルサイズは「5MB」にしました。

実際に行なったこと

その1
Adobe premiereの設定を見直す

以下のサイトを参考にし、いくつかの設定を試しました。
動画を軽くしよう!|月虹製作 製作日誌
■主に調整するのは以下の項目

  • プリセット
  • 基本ビデオ設定
  • ビットレート設定(ここを調整すると画質、ファイルサイズともにかなり変わる)
[設定1]
プリセット ソースの一致-中速ビットレート
基本ビデオ設定 幅:1280 横:auto(成り行き)
ターゲットビットレート
最大ビットレート
結果ファイルサイズ 8MB/30s
画質 △:少し荒さが気になる
[設定2]
プリセット ソースの一致-中速ビットレート
基本ビデオ設定 幅:1280 横:auto(成り行き)
ターゲットビットレート
最大ビットレート
結果ファイルサイズ 14MB/30s
画質 ◯:ノイズはあるがほとんど気にならない
[設定3]
プリセット Youtube480p SD
基本ビデオ設定 プリセットのまま
ターゲットビットレート
最大ビットレート
結果ファイルサイズ 12.7MB/30s
画質 ×:荒さが気になる

その2
動画圧縮サイトで圧縮

まだまだファイルサイズが大きいので1の設定で書き出した動画を以下の動画圧縮サイトで圧縮しました。

online video converter

他にも何種類か試しましたがこのサイトが使い勝手が良かったです。(見た目がすごく怪しく、たまによくわからないページが別Winで開きますが害はないと思われます…が、使用の際は自己責任でお願いします)

結果は以下の通り

設定1 4MB前後
設定2 3MB前後
設定3 1.7MB

見事ファイルサイズを目標の5MB以下にすることができました。

その3
スマホ用にGIFも制作

スマホではOSのバージョンによっては動画が自動再生されないため、今回はスマホ用のGIFアニメも作りました。

作業の流れ

1.Adobe premiereでスマホ用動画を作る(5、6秒)
GIFアニメは動画と同じ秒数だととんでもなく大容量になるので、PC版より秒数を減らして制作しました。
また左右は見切れることを想定して対象物がど真ん中になるよう再編集しました。

2.変換ソフトで動画をGIFに変換する
1で作った動画をPicGifLiteというmacアプリでGIFアニメに変換。
PicGifLite

3.圧縮サイトでファイル圧縮する
圧縮は以下のサイトで行いました。

compress image

その4
画像が荒く見えないようにする工夫

画像を圧縮するとやはり荒さが目立ってきます。そんな時はCSSで動画の上に半透明のテクスチャなどを乗せると荒さが幾分か軽減されます。

まとめ

以上が今回Adobe Premiereで作った動画ファイルを軽くする時に行ったことです。手順がわかっていれば後は作業なのでササッとできそうですね。ご参考いただけると幸いです。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。