アニメーションバナーを作成するときの注意点

公開日:  最終更新日:2009/10/14

WEBデザイナーを目指しての就職活動中には、作品としてバナーを作成することも多いと思います。
その中でも特に、アニメーションバナーを作るときの注意点についてお話しておきます。

アニメーションバナーを作るときには、静止バナーも一緒に作る

アニメーションにはたくさん情報が盛り込めますが、デザインをする上では、限られたスペースの中で情報を整理することも必要です。
両方見せることで、様々な形に対応できることをアピールしましょう。

形(長方形と正方形など)やサイズの違うバナーを何種類か制作すると、より実務に近くなります。
バナーのサイズは国際基準で決まっており、よく使われるのは、「468×60」「234×60」「120×60」「125×125」などです。

時間内で理解できるかチェックする

例えば、このサイトで3コマのアニメーションバナーを作るとすると、

1コマ目「WEBデザイナーになるには?」
2コマ目「転職・就活方法教えます」
3コマ目「いますぐClick!」

といったように、コマごとに違う文字を入れるのが一般的です。
その際、デザインをする側は当然、次に何が表示されるか知っているわけです。

事前に内容がわかっているものを読むのと、はじめて見るものを読むのでは、スピードが違います。
特に、単語ではなく文章の場合は、一目で読み取るのは難しいです。
音読できるまでの時間ではスローすぎますが、早口で読むくらいの時間を心掛けましょう。

重要な情報は固定で表示

アニメーションが全部切り替わるまでじーっとバナーを眺めてくれるユーザーなんて、ほとんどいないと思ってください。
クリック先の会社名やページの内容など、一番伝えたい情報は常に固定で表示させておきましょう。
何のバナーかはっきりさせておくことで、逆に表現の自由度も高まります。

Yahoo!のトップページ右上のバナーを見ていると、ほとんどの企業がバナーの片隅にロゴを入れていることがわかります。
このスペースは、表示させるための広告費が高いことでも有名ですので、一瞬たりとも「どこの広告?」と思わせることは、もったいないのですね。

関連記事-こちらもどうぞ
PAGE TOP ↑