それからデザイン スタッフブログ

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

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

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

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

平均サイズ（目標）を調べる

ここで同じように動画を背景に配置しているサイトの動画ファイルサイズを調べました。

ざっと調べると以下のような結果に。

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

実際に行なったこと

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

以下のサイトを参考にし、いくつかの設定を試しました。

■主に調整するのは以下の項目

• プリセット
• 基本ビデオ設定
• ビットレート設定（ここを調整すると画質、ファイルサイズともにかなり変わる）

[設定1]

[設定2]

[設定3]

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

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

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

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

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

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

作業の流れ

1.Adobe premiereでスマホ用動画を作る（5、6秒）

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

2.変換ソフトで動画をGIFに変換する

1で作った動画をPicGifLiteというmacアプリでGIFアニメに変換。

3.圧縮サイトでファイル圧縮する

圧縮は以下のサイトで行いました。

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

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

まとめ

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