動画を効果的に使うための制作フロー
Webサイトへの落とし込み
次は、制作した動画素材をFlashに組み込んで、Webサイトの形を作っていきます。ポイントは下記の3つです。
1つ目は、「動画の組み込み方」です。
Webサイトの設計時に、あらかじめどういう形で組み込んでいくのかを検討しておかなくてなりません。例えば、ある程度長さのある動画の場合、1ファイルで数MBの大きな容量になってしまいます。その場合、1本でプログレッシブ再生をしながらFlashで再生をコントロールするのか、または、ちょうど良いカットごとに動画ファイルを分けてFlashでコントロールするかなど、設計時に動画をどう見せていくかによってさまざまな組み込み方から最適なものを選ぶ必要があります。
2つ目は、「動画の圧縮」です。
通常Flashで動画を扱う場合は、一般的にはFLVというファイル形式に変換して組み込んでいきます。きれいに圧縮するためには設定を細かく変えて、最適なところを選んでいくことが必要です。そのため、何回も圧縮作業を繰り返す必要もあると思いますので、作業をするPCはできるだけハイスペックなものを使用して、時間短縮をする方が良いでしょう。また、圧縮をするソフトウエアも標準以外のものをいくつかあるので、いろいろお試しすることをオススメします。
3つ目は、「ローディング」です。
動画ファイル自体は比較的大きなファイルサイズになりがちです。ということは、ユーザーに待たせることの配慮も重要になってきます。そこで、ローディング時はあまり待たせたような感覚にならない演出を入れることを検討しましょう。
例えば、ローディングの表示を始める前にロゴをスプラッシュさせたり、スタートボタンを設置して、押させるようにする等をして、時間を稼ぐ、ローディングが軽いスタートの演出になっている等、なるべく、ローディング時間が短く感じられるような工夫をすることを検討してください。
ローディング画面例は下記になります。
・ローディングがレンジのタイマーになっている「Picassol(http://www.picassol.com/)」
・ハンバーガーがなんか怒っている「Angry-Gram(http://www.angry-gram.com/)」
・ローディングでも楽しい「PIXELME(http://www.pixelme.eu/)」
新しい武器を手に入れる
いかがでしたでしょうか。紹介させていただいた通り、Webサイトで動画を扱える、また、その動画の制作から自ら行えるとなると企画の幅、表現の幅、可能性の幅も広がることでしょう。
また、Webサイトの制作を中心にされているデザイナーの方々が今後のスキルアップの武器として動画系の編集ソフトを習得することをオススメします。Flashのアニメーションだけではもの足りない場合に動画編集のエフェクトを駆使すると今までとは違うものが作れますし、選択の幅が広がると思います。
そういう意味では最近のミュージックビデオの編集でよく使われているAdobe After Effectsがオススメです。さらには、Webサイトとの相性が良いということでは、3DCGに関しても簡単なものであれば扱えるようになっていると良いのではないかと思っています。
プロダクトを本物のように見せるとなるとそこは専門家のプロにお任せしないと難しいと思いますが、Webサイトの演出やインタラクションに合わせてちょっと気の利いたことがしたいと思った時に活用できることも多いでしょう。
今回の連載が、今後の制作活動のヒントになれば幸いです。