動画を効果的に使うための制作フロー

2008年11月17日(月)
篠原 哲也

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サイトの演出やインタラクションに合わせてちょっと気の利いたことがしたいと思った時に活用できることも多いでしょう。

 今回の連載が、今後の制作活動のヒントになれば幸いです。

株式会社ピラミッドフィルムクアドラ
チーフプロデューサー。1997 PYRAMID FILMにてインタラクティブ広告制作に携わる。大手企業のプロモーション、ブランディングサイトを中心にプロデュースを担当。2002 SONYに転職。VAIOをプラットフォームとしたコンテンツサービスの企画を担当。2005 PYRAMID FILM QUADRAに戻り、ムービーを強みとしたインタラクティブ広告制作に取り組んでいる。http://www.pfq.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています