画像やFlashにキャッチやマークを動的に重ねて魅せる 「ダイナミックバナー」 機能 | Scene7徹底解剖#2

Scene7の機能を知る [2]
ダイナミックバナー

Adobe Scene7（以下「Scene7」）のダイナミックバナー機能は、ダイナミックイメージング機能で画像に文字を重ねて表示するものと似た効果を得られる。ダイナミックバナー機能を使うと、たとえば、「セール」「50%オフ」「送料無料」「3個セットでお得」といったフレーズを、バナー画像や商品画像に動的に埋め込んで表示できる。つまり、各画像に各メッセージを載せた画像を事前にすべての組み合わせに対して作成しておく必要がないのだ。

この画像に

Scene7サーバーで自動的に文字を載せて表示できる

以下のボックスに文字を入れてボタンをクリックすると、
左の画像に入力した文字を載せて表示：

動的にメッセージを載せられるということは、顧客ごとに違うメッセージを伝えるようなこともできる。もちろんフォントを指定して日本語も埋め込めるし、長いテキストは画像に収まるように縮小されるのもありがたい。

事前に画像を作っておかなくても、状況や訪問者に応じて文字を変えられる

 

ダイナミックバナーでは、素材としてFlashのデータを使える点が特徴だ。PhotoshopやFlashでダイナミックバナーテンプレートを作成し、そのFlashソース/PSDファイルをScene7にアップロードすると、Flashソース/PSDファイル上で設定したレイヤーやテキストインスタンスをScene7で操作して可変コンテンツのバナー広告を作れるのだ。

テキストの内容を変えて表示することはもちろん、書体や文字色や文字サイズを変更したり、テキストの表示位置を変えたり、特定のレイヤーを表示/非表示にしたり、また、3Dオブジェクトの回転の角度を変更したり、ActionScriptのURLを差し替えたりといったことも動的にできる。

Amazonよりも前から実現していた「画像に文字を重ねる」機能

Amazonでも、サイト上に掲載されている画像の「なか見! 検索」などの部分は、元の画像に動的に重ねて生成されているが、Scene7のほうが先に実現していたという。

URLでさまざまな処理方法を指定して画像を動的にカスタマイズして表示する仕組みだというと、詳しい人は「あ、Amazonの本の画像と同じやり方か」と思うかもしれない。そう、Amazonでも、画像のURLパラメータを変えると、違うサイズで表示したり「なか見!検索」のマークがが付いたりする仕組みになっている。

たとえば、Amazonで書籍ページに表示されている画像のURLを、

http://ec2.images-amazon.com/images/I/51boR5CcH5L._AA300_SH20_OU09_.jpg

少し変更すれば、なか見!検索のステッカーが付いて表示される。

http://ec2.images-amazon.com/images/I/51boR5CcH5L._PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_.jpg

Scene7のダイナミックバナーの機能も、それと同じようなものだ。しかし、実はScene7は1999年当時からこうした仕組みを実現しており、AmazonよりもScene7のほうが早くから取り組んでいたのだという。

こうした機能によって、バナー作成コストを大幅に削減し、それでいてさまざまな表現を自由に行えるようになるだろう。

また、アクセスしている人、サイト内のコンテキスト、状況などによって、バナー広告で訴求するメッセージを変更できれば、さらに効果をアップできる可能性がある。その際にも、いちいちバナー画像を大量に作成して管理する必要がないため、コストを削減できるだろう。