|
| エキスパンドバナーのサンプル。 Adobe Flash 8 Professionalを使用してサンプルを作成しています。 |
エキスパンドバナーとは？
主にFlashで制作されるインタラクティブバナーは今やWeb広告の花形と言っていい地位を占めています。新商品やサービスの広告を全国的、場合によっては全世界に広く認知させることが可能であるだけでなく。テレビCMや雑誌・新聞などに比べて媒体費用・制作費用が低く、効果が高いものと企業が認知し始めたからです。しかし、広告バナーだらけのホームページは見辛いし敬遠されます。結果、バナースペースは小さいサイズとなり、制作者は本来のFlashの表現力を発揮し辛い環境に追い込まれていると言っても良いでしょう。そこで「バナーにマウスオンしたらスペースが広がれば良いじゃない？」と言う立体的な発想から開発されたのがエキスパンドバナーです。
エキスパンドバナーなら、「マウスオン」というユーザの気軽な操作により展開されるので、従来のクリックしないと何も起こらないバナーに比べて敷居は低くなります。また、例えリンク先のサイトにアクセスしなかったとしても大きなスペースで視覚的な効果の高い広告表現を行うことが可能なので、数字に表れない商品の認知の向上に一役買ってくれるものです。
エキスパンドバナーの仕組み
エキスパンドバナーが実現出来る背景にはFlashの背景を透明にする事が可能な技術的なメリットがあります。Flashは背景色を透過させるアルファチャンネルを含むことが出来ます。と言っても、Flashではパブリッシュ設定で「HTML」の項目から「ウィンドウモード：透明表示」を指定するだけです。また、HTML上はWebサイトの上にスタイルシートを利用してレイヤー配置するだけです。以下のソースを参照してください。
<div style="position:absolute;top:100px;left:100px;">1行目から「<div>」タグで囲いスタイルシートを適用しています。ここではブラウザの左上から100pxずつの位置としました。また、この属性を適用することでレイヤー表示されます。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="300" id="comp" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="comp.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="comp.swf" wmode="transparent" quality="high" width="400" height="300" name="comp" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></div>
2行目からはいつも通りのオブジェクトタグです。
3行目に注目してください。「<param name="wmode" value="transparent" />」とembed内の「wmode="transparent"」の2箇所が通常と違う点です。「transparent」属性を付加すると、Flashの背景とされている部分が何も表示されない透明になります。これにより、ページの上にFlashを表示したり、隠したりを行っています。
Flashのパブリッシュ設定の「ウィンドウモード」は通常「不透明表示」に設定しておくのが良いです。というのも一部ブラウザで再生速度が若干遅延するという現象があるためです。厳格な再生時間に規制がある場合、この点に注意してみてください。
エキスパンドバナーは効果の高い。Web広告の一つです。皆さんも現場でぜひ提案してみてください！
