ウェブサイトに埋め込む商品紹介バナーは、一定時間で画像表示を切り替えるためにjavascriptが用いられる事が多いですが、動画テンプレートを使ってウェブサイトに埋め込むバナーのように表示することも可能です。

今回は動画を作成できるAfter Effectsテンプレートの中から、ウェブサイト内のバナーとしても利用できるものをご紹介します。fu-nonサイト内で公開されている無料のファイルなので、すぐにダウンロードして使うことが出来ます。

商品紹介バナー動画としても使えるテンプレートのダウンロードは以下から

商品紹介バナー動画テンプレート

fu-nonで公開されているAfter Effects テンプレートの多くは、スライドショームービーを作成する事を目的としたものが大半を占めていますが、中には動きが極端に少ないこういったテンプレートも公開されています。動きがほとんどなく、一定間隔で写真が少しずつ切り替わっていきます。ウェブサイト内で時々ある、一定時間で商品紹介バナー画像が切り替わる動的な表示を「動画ファイル」としても再現は可能です。

ウェブサイト内での使い方

このテンプレートを使って動画を作成したら、任意の画面サイズで書き出しを行います。自分のウェブサイトのサイズに合わせて書き出しを行いますが、ファイルを直接ユーザーに読み込ませるのであれば、サイズが軽いファイルにすると良いかもしれません。

直接ファイルを読み込ませる以外の方法として、例えばvimeoなどの動画共有サービスを利用するとYoutubeのようにウェブサイトに埋め込んだ動画を、自動再生させることも出来ます。vimeoの自動再生を組み合わせて利用するとユーザーが再生を押す動作を行うことなく、この動画を自動再生させることも出来ます。

完成した動画をvimeoにアップロードして、生成されるiframeタグをサイト内の任意の場所に貼り付けることでサイトへ埋め込みが簡単に出来ます。javascriptなんて全く分からないけれども、商品や会社をPRする動画をサイト内に埋め込みたい、という方にはこういった動画テンプレートもご活用いただけるかと思います。

After Effects テンプレートを使うと強い点

javascriptでは画像の切り替えは簡単に出来ますが、高度に3Dや合成処理が加わる写真のアニメーションは出来ません。しかしAfter Effectsを用いて、動画ファイルとして書き出しを行うと、高度な合成処理やアニメーション処理を行う事が出来ます。

ウェブサイト内のトップページに掲載するキャッチーなPR動画としても、fu-nonのAfterEffectsテンプレートはお役立ていただけるものが多数ありますので、是非お気に入りのものを見つけてウェブサイト内でも利用していただければと思います。