静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ネット広告 > HTML5広告でクリック率が3.1倍にUP!

ネット広告 HTML5広告でクリック率が3.1倍にUP!

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。

第2回目の記事「AMPでモバイル表示速度が驚異の3倍に!」はご覧頂けたでしょうか。

第3回は、営業部の平野と一緒に子会社「株式会社正明堂」にて、
冬のみかんシーズンに配信した「HTML5広告」についてご紹介したいと思います。

HTML5広告とは?

HTML5広告とは、HTML5+CSS3+JavaScriptなど最新技術を組み合わせた、次世代のテクノロジー系WEB広告のことです。

2017年1月にGoogle AdWordsがFlash広告を完全に廃止したため、近年、HTML5広告で作成されたアニメーションやカルーセルバナーが目立つようになってきました。

HTML5広告のメリット

PC、タブレット、スマートフォンあらゆるデバイスでインタラクティブな広告を配信できます。
また静止画に比べ、クリエイティブの表現方法が広がるため、アイデアや技術次第でパフォーマンスの向上が期待できます。

・リッチアニメーション
・スライド
・3カラムマルチリンク
・カウントダウン
・360度 など

HTML5広告の実装

HTML5広告を実装する場合、大きく分けて2通りの方法があります。

1つは、Googleが提供している「Google Web Designer」というウェブアプリケーションを利用する方法です。

Google Web Designerhttps://www.google.co.jp/webdesigner/

Google Web Designer は、視覚的なコーディング インターフェースを使用して HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できる、高度なウェブ アプリケーションです。デザインビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトやイベントをアニメーション化できます。コンテンツの作成が完了したら、人間が解読 可能な HTML5、CSS3、JavaScript を出力できます。 (引用元:Google Web Designer とは)

2つ目は「スタンダードHTML5」と呼び、HTML5+CSS3+JavaScriptなど高度なプログラミング知識で、コーディングしていく方法があります。

今回は、自由度が高い「スタンダードHTML5」を採用しました。

※バナーをクリックすると外部リンクで動作を確認できます。

HTML5広告の入稿規定

配信媒体 GDN
ファイル形式 .zip

ZIP ファイルには、次のファイル形式を含めることができます。
.CSS
.JS
.HTML
.GIF
.PNG
.JPG
.JPEG

ファイルサイズ 150KB以下
広告サイズ 320×50: モバイル ビッグバナー
480×32: モバイルバナー(横)
320×100: モバイルバナー(大)
468×60: バナー
728×90: ビッグバナー
300×250: インライン レクタングル
320×480: スマートフォン向けインタースティシャル(縦)
480×320: スマートフォン向けインタースティシャル(横)
768×1024: タブレット向けインタースティシャル(縦)
1024×768: タブレット向けインタースティシャル(横)

HTML5広告の検証結果

クリック率

・静止画:0.17%
・HTML5広告:0.53%

複数商品を掲載したスライドバナーでは、静止画に比べクリック率が約3.1倍向上いたしました。

まとめ

今回正明堂では、HTML5広告のスライドバナーを実装したことにより、
クリック率が静止画に比べ、なんと約3.1倍アップと予想をはるかに上回る結果となりました。

目を引くアニメーションや訴求できる情報量の増加がクリック率の向上に繋がったのではと思います。

HTML5広告は、プログラムを自由にカスタマイズできるため、

・API連携
・GPS活用
・Googleマップ連動
・検索フォーム設置 など

今後はさらに表現方法が広がってくると思います。

エンドユーザーにマッチングさせたオリジナルのHTML5広告を、ぜひ検討してみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top