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

HTMLとJavaScriptライブラリを用意する

　今回はバナーをシンプルなHTML上に配置しますが、今後の連載で作成するいくつかのバナータイプも同じHTMLで試せるように、図3-1のようなレイアウトをHTMLとCSSでデザインします。

　swfの配置には、SWFObject 2.1というMITライセンスで配布されているオープンソースのJavaScriptライブラリを用意します。

　まず、SWFObjectのサイト（http://code.google.com/p/swfobject/）から「swfobject_2_1.zip」をダウンロードし、図3-2で示すようなディレクトリ構造になるように配置します。次に、SWFObjectのサンプルHTMLコードを見てコーディングすると、swfを配置するHTMLコードは図3-3のようになります。Flashが書き出すHTMLコードより見やすくなっています。

　また、今回はSWFObjectを使用するためにJavaScriptを使用していますが、次回以降はより高度な表現のためにもJavaScriptを使います。そのときにコードをゼロから書くと、ブラウザ互換などを考える必要があり、説明内容の本質以外の部分が多くなってしまうため、便利なJavaScriptライブラリであるPrototype.jsを使用します。次回以降のために、今回からPrototype.jsもダウンロードしておき、図3-2のディレクトリ構造になるように配置します。ファイル名はprototype.jsとします。

　また、Prototype.jsの動作については、「JavaScriptを洗練させるPrototype.js（http://www.thinkit.co.jp/free/article/0702/15/1/）」を参照してください。

　以上で、今回作ろうとしてたバナーが完成しました。図3-2のように配置してあれば問題なく表示されるはずです（図3-4）。

さまざまなインターフェースがアイデアのヒントになる！

　今回作成したFlashファイル、ActionScriptファイル、JavaScriptファイル、それにHTMLファイルとCSSファイルをまとめたディレクトリを圧縮して本コラムと同時に公開しておきますので、詳細が分からないところは、ダウンロードして該当ファイルを見てください（816_1.zip/79.8 KB）。

　アフォーダンスという概念を念頭に置くと、さまざまな表現方法が考えられると思います。例えば、リンクボタンを立体的にして、押したくなるようなグラフィックスにすることも有効です。また、エレベーターやキーボードのキーなども参考になるでしょう。

　このようにアフォーダンスを意識して周りを見渡すと、さまざまなインターフェースがアイデアのヒントになります。OSや各種アプリケーションのインターフェースのほかに、各種機器のスイッチのような物理的なインターフェースにもヒントは隠れています。

　バナーにかぎらず、よりアクセシビリティの高いインターフェースを実現するためには、「最適なインターフェースとは何か」について常に考えておくことが大切です。そのたたき台として、本連載で解説していくバナーを元に、改善点を見つけ出し、修正するデザインを考えることも面白いでしょう。

　さて、次回は画面のスクロールと連携するバナーを作成していきます。

【参考文献】

ドナルド・A. ノーマン『誰のためのデザイン?―認知科学者のデザイン原論』新曜社（発行年：1990）

「SWFObject」（http://code.google.com/p/swfobject/）（アクセス：2009/01）

「[Think IT] JavaScriptを洗練させるPrototype.js」（http://www.thinkit.co.jp/free/article/0702/15/1/）（アクセス：2009/01）