今回のご質問は、実はWeb広告業界では非常に話題になっているモーション広告についてです。モーション広告はまずアメリカで非常に話題を集め、日本でもダブルクリックやバリュークリックといった大手のバナー広告会社が製作、gooといった大手ポータルサイトでゲリラ的に展開されて話題を集めました。このゲリラ的というのが曲者で、常時モーション広告が見れるサイトはほとんどありません。
●モーション広告とは
さて、モーション広告についてもう少し定義を深めると、掲載位置を固定しない非定型型フローティング広告という風に言えるでしょう。掲載位置を固定しないので、ブラウザのウィンドウ上を円盤が（例えばですが）縦横無尽に動き回ったりといったアニメーションが展開されます。中には一定のアクションの後に、定型のバナーに変化するものもあります。こうしたモーション広告で話題を集めたのがマクドナルドの広告やインテルの広告です。他の固定型バナー広告と較べてインプレッション（表示回数）に対するクリック率が圧倒的に高いといわれています。
●モーション広告のメリット・デメリット
ある調査によれば、モーション広告のクリック率は、固定バナー広告のクリック率の平均が0.1%なのに対して、高いものであれば5%もあるというところから、非常に効果が高いことが伺えますが、その一方で、ロードに時間がかかる、動きがうっとうしいなどの意見も数多く見受けられます。実際私が始めてモーション広告を見た際にも、かなりうっとうしいという印象を受けました。
●モーション広告の仕組み
モーション広告の仕組みは幾つか考えられるのですが、基本的にはJavaScriptやVBScript、DHTMLといった動的なスクリプトとアニメーションGIF、FLASHなどの動画が組み合わされて成立しています。DHTMLでレイヤーをタイムラインで移動させ、そのレイヤー上にFLASHアニメーションを動かしたりすることも可能でしょう。
例えばレイヤーを二つ用意し、イベントonLoadのタイミングでアニメーションを表示させつつ親レイヤー内のある位置から任意の位置まで子レイヤー（アニメーションが表示されている）を移動、移動が終わったらレイヤーを非表示にさせて、今まで非表示だった固定バナーを表示させるといった方法や、document.onmousedownを使ってアニメーションをクリックした時のイベントを習得してgetElemntByIdでクリックした場所へスタイルシートを移動できるようにする広告なども可能でしょう。
具体的なソースコードは示しませんが、要はレイヤーとアニメーションをうまく使ってやれば、簡単にモーション広告の作成は可能ということです。広告製作会社がどのような手法を使っているのかは今のところ定かではありませんが、JavaScriptやDHTMLをいろいろ組み合わせれば同じようなことは出来るということです。
●モーション広告作成時の注意
モーション広告で例えばDHTMLを使う場合、利用できるブラウザに制限が出てしまう場合も考えられるので、予めJavaScriptによるブラウザ判別とif文による条件分岐でそれぞれのブラウザ・OSごとの処理を記述しておくことを忘れないで下さい。
