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

2009年2月3日(火)
山田 宏道

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)

1975年生まれ。千葉大学工学部卒業。ゲームプログラマーを経て、2004年よりフリーランスになり、必要に応じてさまざまなプログラム言語をつまみ食い。ActionScript 3.0になってからFlashに未来を感じ、Web関連を中心に仕事を承り中。 http://d.hatena.ne.jp/octech/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています