マウスオーバーで変化するバナーの作り方

インタラクティブなバナーで訴求力アップ！

　企業が、テレビ、ラジオ、新聞などにかける広告費が減少する一方で、インターネットにかける広告費は増加しています。また、インターネット上のサービスは広告費でまかなわれていることが多く、特にニュースサイトやポータルサイトなどではさまざまな広告があります。

　インターネット広告は、主に文字だけのテキスト広告と、バナーと呼ばれる画像やFlashを用いた広告の2種類があり、適材適所で使い分けられています。その中でも、Flashバナーの表現力には可能性があり、いろいろな仕掛けのバナーが日々生み出されています。

　読みたい記事を邪魔するようなバナーには、まゆをひそめることもありますが、意外なインタラクティブ性があるものや、見た目のインパクトがあるバナーには、やはり目がとまってしまいます。そこで本連載ではそのようなバナーの仕掛けと、実現方法について紹介していきたいと思います。

　特に本記事では、インタラクティブ性に主眼を置き、バナーを自由に設定できるサイトに掲載することを前提で解説していきます。ただし、各種ニュースサイトやポータルサイトへバナーを入稿する際には、サイトごとにswfのFlash Playerバージョンや、ActionScriptの関数に制限がありますので、注意してください。また本連載では、各種機能の実装確認を、Flash CS3とActionScript 3.0で行っています。

　それでは、実際にバナーを考えてみましょう。

バナーのアフォーダンスとは？

　バナーにマウスオーバーして何かが起きる、というインタラクティブ性は画像バナーと差別化できる有利なアクションです。サイトを見ているときに、たまたまマウスオーバーしたマウス周辺で何かが起きれば、そこに目がとまり、さらにそれがちょっと楽しい動きならば、そのバナー周辺でマウスを動かしてもらえます。結果として、そのバナーにある商品説明サイトへのリンクボタンもクリックしてもらいやすくなる、というわけです。

　そこで今回は「マウスのクリックでアクションを起こすバナー」を考えてみます。架空のビール「FLA-ALE」のバナーです。簡単にデザインしたものを図1に示します。さて、皆さんはこのバナーをクリックしたときに、その場でアクションを起こすと感じられるでしょうか？

　画像バナーの場合は、ユーザーのクリックで企業ページにジャンプすれば、問題ありません。しかし、Flashバナーでクリックに対してインタラクティブな反応が起きるバナーの場合は、「何かアクションが起きるバナーである」と思わせる必要があります。

　そのような視点から見ると、図1のバナーには、クリックしたときに即座に企業ページにジャンプせず、何か面白そうなアクションが起きそうだと思わせるデザインが必要そうです。

　認知心理学では、サイト閲覧者がそのように思えるようなバナーは「アフォーダンス（affordance）がある」と言います。このバナーにも、サイト閲覧者が「インタラクティブな何かがある！」と思わせるアフォーダンスを考える必要があるのです（アフォーダンスの詳しい内容は、最後の参考文献を参照してください）。

　それでは図1のバナーをベースに、アフォーダンスを感じさせるバナーを考えてみましょう！

　まず、常に何かが動いていてサイト閲覧者の目を引くようにしたいと思います。さらに、マウスカーソルがバナー上にあるときには、マウスカーソルの周りから泡を出す演出を加えます。これは、バナー上のマウスカーソルの滞在時間を長くすることを狙っています。

　以上の演出でただの画像バナーから、サイト内で閲覧者に訴えかけられるFlashバナーらしくなるのではないでしょうか。では、早速試してみましょう！