ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

HTML5で作るアニメーション広告

みなさん、こんにちわ。

秋の花粉症に悩まされております、志々目(ししめ)です。

目の痒さが半端じゃないので、アイボン持参で出勤しております。

さて、今回はHTML5で作成するアニメーション広告についてご紹介したい思います。

アニメーション広告といえば、これまでも「Adobe Flash」で作成されたものがよく使われてきました。

ディスプレイ広告にアニメーションを入れた広告を出稿したいと考えておられる広告主さんには悩みの種で、インターネットを利用するデバイスの半分以上をモバイル端末が占めるようになってきており、iPhoneをはじめとする多くのモバイルデバイスやブラウザはFlash形式をサポートしていないという問題がありました。

スマホでFlashを見るためにFlashPlayerをインストールしないと見れない場面で、インストールをするユーザーは何割いるでしょうか。これは結構な手間ですので、どうしても見たい画像でない限りはスルーするユーザーが多いのではないかと推測されます。
本日ご紹介させていただくHTML5で作成したアニメーション広告は、プラットフォームが異なっても表示できる、動作がスムーズであるという点において優れているとされています。
つまり、ユーザーにとって不利益を与えることなくアニメーション広告を表示出来るということになります。

今回は早速、Google Web Designerを使用して簡単なアニメーション広告を作成してみましたので、ご紹介させていただきます。

1.Google Web Designerをダウンロード

Google Web Designerの公式サイト からダウンロード出来ます。

2.素材を用意

3.アニメーションの設定

とても分かりやすい動画がありましたので、こちらを参考にさせていただきました。

参考URL:https://sem-technology.info/google-adwords/google-web-designer-html5-ad-example

4.出来上がり

↓クリック!

まとめ
ディスプレイ広告は、まずはユーザーに興味を持ってもらい目に留まることを
考えて作る必要があります。
今回のアニメーション広告も、いかにクリックをしてもらうか工夫するという点においては、見落としてはならない興味深い広告です。
実際の運用においても積極的に取り入れたいですね。
では!