《バナー・ボタンについて》
バナーとは【Banner】と英語で書き、旗や横断幕の意味がありますが、インターネットのバナーとは帯状の広告を指し、ハイパーリンクされた広告の事です。
Web上では看板の替わりとなりますので、デザインや言葉により閲覧者の数が変わってきます。
企業やお店では効果的な看板(バナー)と充実した店舗(ホームページ)等の複数の要素のバランスが整って、売上げに結びつきます。
■バナーの種類
下の3つのバナーは「ボタン1」のサイズで横120×縦60ピクセルで作っています。伝えたい内容はどれも同じですが、表現方法が異なります。
左は静止画、右にいくほど多彩な表現が可能となります。
一般的に止まっているモノより動いている方が目がいきやすいですね。
しかしながら動いている中に一つだけ止まっているモノがあったら、逆に目立つこともあります。
静止画(GIF) | アニメ(GIF) | アニメ(Flash) |
普通は静止画より、動く広告の方が良いと考えますがはデメリットもあります。
アニメーションは複雑になればなるほどデータ容量が大きくなっていきます。
[ファイル小] 静止画GIF < 静止画JPEG < GIFアニメ(Flash) < Flash(GIFアニメ) [ファイル大]
最近はHDDの容量も大きくなりサーバーコストも下がったり、通信速度も速くなったのでストレスなく見ることが出来るようになりましたので以前よりは容量は気にされなくなりましたが、それでも軽い方が良いとされます。
GIFアニメは写真を使用したり、動きを複雑にすると比例してデータ容量も大きくなります。
ある程度の動きを付けた場合には Flash < GIFアニメ と容量が逆転します。
■バナーのファイル形式
・静止画はGIFとJPEG、PNGのファイル形式が、主にWebサイトで使われています。・JPEGは圧縮方式の一つで、素の画像よりもサイズを軽く出来ます。
・GIFはインデックス方式で、ファイル内の色や濃淡を最大でも256色に振り分けますのでサイズが非常に軽くなりますが、画像中の色を少ない色で表現しないいけないので鮮やかな写真を表現するのにはGIFは適しません。
・Flashは多くの色を使えて写真も扱えますし、複雑な表現方法も可能ですがFlashプレーヤー(プラグイン)が閲覧者のPCにインストールされていなければ見ることが出来ないので注意しなければなりません。
JPEG形式(10.2KB) | GIF形式(6.5KB) |
上の二つはファイル形式による比較です。(違いを判りやすくする為に、GIFの色数を少なくしてあります)
GIF形式は色の表現が乏しいですがファイルが軽いくなることが多いです。
インターネット上ではファイルの軽さを求められますので、バナーやボタンではGIF形式が一般的です。
ファイル形式 | 動き | ファイル容量 | 作成料金 | 注目度 | その他 |
JPEG | × | 圧縮率に応じて | 安い | △ | 多色の写真再現に |
静止GIF | × | 軽い | 安い | △ | シンプルに軽く |
GIFアニメ | ○ | コマ数に比例して増大 | コマ数により増 | ○ | 注目度アップ |
Flash | ◎ | 動きの割には少ない | 割高 | ◎ | ソースの貼付け必要 |
目的に応じて適切なファイルで作成しましょう。
■バナーの効果
良いバナーとは、良いお客様を多く連れて来るバナーだと考えます。1.多くの人に目に付く
2.興味を持たせる
3.リンク先の情報を伝える
4.データ容量が軽い
すべての条件にあてはまるバナーを作ることは難しいですので、サイト目的により条件を絞らなければいけません。
1は、最優先です。 まずは閲覧者の視界に入り一瞬でも見てもらわなければ、どんなに優れたデザインで良い言葉が書かれていても意味がありません。
2は、クリック率を優先するときは必要な条件です。 「何だろう?」「面白そう」「これだ!」など理由は何でも良いので、まずは閲覧者にクリックしてもらいます。 あまりこの条件にこだわると、リンク先のサイトがターゲットとしていない人が多くおとすれるので、コンバーション率(クリック回数に対する成果の割合)が下がります。
3は、サイト内容を正確に伝えることですが、限られたスペースと限られた時間では意外と難しくなります。 成功すればクリック数を増やせて、さらにコンバーション率も上げることができます。
4は、できれば達成したい条件ですね。 アニメーションバナーで長く複雑に作れば興味もひき、多くのことを伝えられますが、閲覧者は1つのバナーを注視して見ることは少ないので効果は意外と伸びないと考えます。
どのバナーが目につきますか? 効果があると思いますか?
※下は実際のバナーです。 クリックすると指定先へジャンプします。■Banner.PePeの作成例はこちら