HTML5を使用したディスプレイ広告–レスポンシブ広告を作成する方法

公開: 2018-08-28

この記事では、HTML5レスポンシブバナー広告がすべてのデジタル広告主にとって必須である理由を説明します。デザイナーからデジタルスペシャリスト、代理店から社内チームまで、HTML5ディスプレイ広告がデフォルトのバナー形式になりました。

特に、ますます多くのデバイスとそれに対応するプラットフォームがあるため、視聴者の行動に適応できることが重要です。バナー広告に互換性がない場合、画面サイズの変更に対応できない場合、またはモバイルで機能しない場合は、問題が発生しています。 HTML5レスポンシブディスプレイ広告は、ブランドがオンラインで繁栄するために必要な柔軟性とテクノロジーを提供します。

具体的には、HTML5はデジタルマーケターに次の機能を提供します。

多くのフォーマットとサイズにすばやくスケーリング
設計に対する究極の制御を所有
広告のバリエーションと翻訳を簡単に作成
リッチメディアバナーの大量生産
ビデオとモバイルディスプレイの成長を活用する
データフィードでバナーを動的に更新する
社内でチーム間で効果的にコラボレーションする

はい、レスポンシブディスプレイ広告を作成することは、これまで以上に重要になっています。特に、今日、美しいディスプレイ広告がモバイルで表示される可能性がこれまでになく高まっているためです。 2020年のBannerflowの調査によると、モバイルディスプレイ広告はデスクトップをわずかに上回っています。ディスプレイ広告の視聴回数のほぼ3分の2は、今日のヨーロッパのモバイルデバイスに対するものです。さらに、モバイルユーザーが毎日スマートフォンに4時間以上費やしているため、デジタル広告主は無視できないエンゲージメントです。静的、gif、およびフラッシュバナーの古い世界は、長い間終わっています–または少なくともそうあるべきです。

HTML5ディスプレイ広告を作成する必要があるのはなぜですか？

HTML5ディスプレイ広告を作成する理由がもっと必要ですか？まず第一に、私たちのゲームはすべて変換に関するものであり、競争力があります。誰もが注目を集めることに必死です–魅了することに失敗し、それはゲームオーバーです。 HTML5は、リッチメディアとさまざまな広告フォーマットを通じて比類のないデザインの機会を提供します。バナーデザインのベストプラクティスに従わない場合は、競合他社がそうすることは間違いありません。これに加えて、ディスプレイ広告は、特にプログラマティック広告の範囲内で常に成長しています。

たとえば、英国で何が起こっているかを考えてみましょう。 eMarketerのレポートによると、2020年に英国の広告主はプログラマティック広告に67.9億ポンドを費やしました。 Covid-19のパンデミックの影響にもかかわらず、プログラマティックディスプレイ広告の支出は現在、英国のデジタルディスプレイ広告の支出全体の92％を占めています。そして、この割合は2022年までに94.5％に達し、90.1億ポンドを占めると予想されています。この成長を最大限に活用するために、HTML5を介してより良い広告を作成することを優先する必要があります。

さらに、企業は現在、すべてのデジタルマーケティングで「モバイルファースト」の考え方を採用しているため、Webサイト、ランディングページ、およびバナーの応答性を確認することが最小要件です。 HTML5を使用すると、モバイル対応でレスポンシブで機能が豊富なバナーを作成できます。デスクトップ用の静的キャンペーンを設計してから各バナーを個別に拡大縮小するのではなく、HTML5で拡大縮小することができます。

広告は長い間モバイル化されており、HTML5は必要なバナーを作成する方法です。

HTML5との関係は何ですか？

HTML5が広く採用される前は、さまざまなデバイスで広告キャンペーンを実行するのは大変な作業でした。バナー広告が表示される可能性のあるすべての異なる画面のバナーを手動で作成することは、スローガンでした。 HTML5は、レスポンシブWebサイトの場合と同じように、バナー広告を作成するための最適な方法です。

HTML5 ハイパーテキストマークアップ言語の最新の更新です。これは、レスポンシブなものも含め、Webページのコンテンツとデザインを説明するために使用される標準言語です。 HTML5は、デバイス間でバナー広告を実行する柔軟性を提供するため、オンライン広告で重要です。

サイト運営者と広告主の両方に、すべてのプラットフォームに適合するバナーを通じて、適応性のある広告キャンペーンを作成する手段を提供します。フラッシュを使用すると言うのとは異なり（ああ、どれほど趣のあるものか）、これは同じ広告の何百ものバージョンを作成する必要がないことを意味します。広告バージョンの数を減らすと、エラーの可能性が減り、バナーの制作が増えます。

HTML5バナー広告内では、テキスト、画像、ビデオ、およびJavaScriptは、他のWebページと同じように調整可能です。これらは編集可能です。 HTML5バナー広告も動的に最適化されるため、広告はどこでも完璧に見えます。さらに、HTML5バナー広告はモバイルデバイスで完全に機能します。機能を失うことなく、より多くのオーディエンスにリーチするのは簡単です。

HTML5バナーを作成する方法は2つあります

基本的に、今日オンラインバナー広告を作成する方法は2つあります。

まず、バナー広告を自分で手動でコーディングして、レスポンシブにすることができます。そして、はい、これを行う方法を示すチュートリアルとテンプレートがオンラインにたくさんあります。ただし、プロセスは遅く、HTML5とCSSの適切な知識を持っている必要があることを意味します。さらに、もちろん、デザイナーのフレアも必要です！珍しい組み合わせ。

または、Bannerflowなどのクリエイティブ管理プラットフォームを使用することもできます。このプラットフォームは、クリエイティブな制作の自動化を目的とした広告クリエーターを備えています。これらは、コーディングの面倒を見るのに役立ちます。ボタンをクリックするだけですべてのバナーが応答するようになります。さらに、これから説明するように、HTML5を活用するための組み込みの方法がたくさん用意されています。これらは、すばらしいビデオバナーの開発から、データフィードを含む動的バナーまで多岐にわたります。

現実には、クリエイティブな管理プラットフォームは、キャンペーンの構築とスケーリングにかかる時間を短縮すると同時に、HTML5バナーの作成に重点を置いてデザインに重点を置いています。

HTML5レスポンシブディスプレイ広告の作成

HTML5レスポンシブバナー広告の作成は比較的簡単です。ただし、すべてのデジタルバナーと同様に、従うべきルールとベストプラクティスがあります。 HTML5ディスプレイ広告を作成するときは、検討する価値があります。

HTML5バナーサイズを確認してください

HTML5レスポンシブレイアウトを作成する場合、要素は、従来のバナー広告が従う必要があるものと同様の可変幅である必要があります。任意の高さを使用することもできますが、広告がその高さのままになるわけではありません。レスポンシブバナーを作成する際のベストプラクティスは、従来のバナーサイズと同じ高さを使用することです。これは、サイト運営者や広告ネットワークとの互換性を維持するためです。

広告ネットワークやサイト運営者が提供する特定のサイズに合わせて、HTML5バナーを常にデザイン（または変更）してください。たとえば、Googleアドマネージャーが提供するサイズのリストは次のとおりです。これらのサイズに基づいてバナー広告を作成すると、ほとんどのデバイスで、公開時に広告クリエイティブが正しく表示されるようになります。

画像、バナーデザイン、HTML5

HTML5レスポンシブバナーを作成する場合、デザインと画像の制御は比類のないものです。メッセージのフレーム、およびアニメーションは簡単に制御できます。しかし、貪欲にならないでください！ほとんどの場合、バナーは5〜15秒間だけ視聴者に表示されます。そのため、その時間を最大限に活用して、デザインの選択に集中してください。

そして、ここで物事が面白くなります！ Bannerflowなどの一部のクリエイティブ管理プラットフォームを使用する場合、HTML5バナーで使用される画像は自動的に調整および圧縮されます。これは、バナーの画像サイズと太さが広告ネットワークに合うように微調整されていることを意味します。

ただし、このような驚くべき技術をすべて使用しても、画像をピクセル単位で最大サイズ4000×4000（幅と高さ）に保つことは価値があります。さらに、4000×4000を超える超大容量のrawファイルを編集して、より良い結果を得るのが常に最善です。実際、可能な限り最小の画像を常に使用するようにすることをお勧めします。これは、バナーの重量をさらに減らすのに役立ちます。画像が小さいほど良いです（ただし、もちろん品質を低下させることはありません！）。

バナーで使用している画像の種類に最適な画像形式を選択することも価値があります。たとえば、背景には常にJPEGを使用する必要があります。一方、透明またはオブジェクトの場合は、PNGを使用します。ロゴタイプ、および描画オブジェクト（写真を除く）SVGの場合–ファイルサイズは小さいですが、展開時にシャープネスを維持するのに適しています。多くの場合、画像ファイルの種類を組み合わせると、より良い結果が得られます。

ただし、言うまでもないことがあることを忘れないでください。メイン画像に焦点が合っていることを確認するなど。一方、クリーンで単純なデザインが常に最適です。

スケーリング、バージョン管理、および翻訳

自動的に最適化するHTML5レスポンシブバナーを作成する場合でも、できるだけ多くの人にリーチするために、できるだけ多くのバージョンを作成する必要があります。バナーサイズが大きいほど良いです。メディアの種類によっては、バナーの数が多いほど、プログラマティック入札に勝つ可能性が高くなります。

明らかなベストプラクティスは、HTML5バナーの複数のバージョンのスケーリングと作成に関して、効率的かつ高速なクリエイティブ管理プラットフォームと広告クリエーターを使用することです。さらに良いことに、ディスプレイ広告の複製、翻訳、バリエーションを作成できれば、複数の市場での作業がはるかに簡単になります。

HTML5バナーのコンテンツを簡単に切り替えることもできます。さらに、キャンペーンを数秒で複製およびスケールアウトできるため、さまざまなバリアントをさまざまな日にスケジュールするのがはるかに簡単になります。簡単に言えば、HTML5レスポンシブバナーは、プログラマティックなどの自動化サービスでの使用に最適です。

リッチメディアバナー

HTML5がなければ、リッチメディアバナーはありません。応答性が高く、複数のデバイスで機能する視聴者と対話するバナーを作成することは不可能です。リッチメディア広告は、より高いレベルのエンゲージメントを促し、ブランドに適しています。サインアップフォーム、検索バーからバナー内ゲームまで、HTML5を使用すると、デジタルマーケターはさまざまな方法で視聴者を引き付けることができます。

ただし、リッチメディアバナーの使用方法には注意してください。それらの効果は、使用するバナー形式に大きく依存します。情報を追加しすぎたり、複雑にしすぎたりしないでください。相互作用は、1つまたは2つのステップを超えてはなりません。 1つのことに焦点を合わせて、視聴者がすばやく簡単にできるようにしてください。

たとえば、オンラインフォームには、必要最小限のインタラクションが含まれている必要があります。これで、バナーで始まり、ランディングページで終わります。優れたHTML5リッチメディアバナーキャンペーンの鍵は、実行が真剣で、デザインが直感的でなければならないということです。

現在、バナーに掲載されている商品の代金を直接支払うことができるなどの機能を利用できます。または、チャットボットの上のディスプレイ広告に見られるように、リッチメディアバナーを使用すると、将来のアプリケーションは無限に広がります。

ビデオおよびHTML5ディスプレイ広告

ディスプレイ広告では、動画の利用が増え続けています。ヨーロッパだけでも、オンラインビデオディスプレイは非ビデオディスプレイよりも3.5倍速くなっています。 HTML5ディスプレイ広告で動画を使用すると、より本物らしく見せて視聴者とつながることができ、それがコンバージョンに役立ちます。 HTML5を使用すると、ビデオを使用したバナーを簡単に大量生産することもできます。

HTML5バナーを使用することで、ビデオの使用方法に関して多くのオプションがあります。基本的なレベルでは、ビデオをバナーの背景として使用できます。または、より創造的には、バナーアニメーションの一部にすることができます。たとえば、召喚状（CTA）フレームで終わるトレーラー。

ビデオディスプレイ広告の作成は簡単です

ビデオを使用する際のいくつかの重要なヒントは、HTML5ビデオバナーにロゴが表示されていることを常に確認することです。メインメッセージから始めて、ビデオが繰り返されることを確認します。また、動画には最大1〜3段階を含めるようにしてください。視聴者の注意を引き、エンゲージメントを深め、常にCTAで終了します。動画は常に「サイレント」に設定し、キャプションを有効にします（必要な場合）。

HTML5は、優れたクリエイティブ管理プラットフォームと組み合わせることで、コーディングも不要になるはずです。これは、バナーのバックエンドで何もしなくても、多くのアイデアが実現できることを意味します。

さらに、人々は携帯電話でこれまで以上に多くのビデオバナーを見ています。したがって、モバイル対応のレスポンシブHTML5ビデオディスプレイ広告を用意するのは簡単です。

さらに、HTML5ビデオバナーをmp4形式でエクスポートするオプションがある場合は、これらのビデオ広告をソーシャルネットワーク全体にアップロードできます。社内チームがビデオ広告を作成し、HTML5アセットを再利用し、デジタルキャンペーンの範囲を拡大するための簡単な方法。 Bannerflowの広告作成者であるCreativeStudioを使用すると、すべてが非常に簡単になります。

モバイルHTML5レスポンシブバナー広告の作成

モバイルHTML5レスポンシブディスプレイ広告を作成するときは、最初に適切なフォーマットを使用することがすべてです。デスクトップバナーをモバイルサイズに縮小するのではなく、モバイル専用に広告をデザインします。一部のサークルでは、モバイルの人気とエンゲージメントを考えると、すべてのキャンペーンをモバイルファーストで設計することが前進の道と見なされています。

HTML5バナーの比率は、どの画面にも合うように拡大縮小されることを覚えておく価値があります。ただし、選択したモバイル形式を念頭に置いてバナーをデザインすることをお勧めします。

考慮すべきモバイルバナーデザインの1つの側面は、すべてのコピーが読み取り可能であることを確認することです。はい、これにはフォントサイズも含まれますが、メッセージも考慮しましたか？デスクトップバナーと同じメッセージを表現するには、モバイルHTML5バナーにフレームを追加する必要がある場合があります。繰り返しになりますが、使用するフォーマットによって異なりますが、1つのフレームに必要以上に絞らないようにしてください。

さらに、大量のコピーをドロップして、画像の影響に焦点を合わせます。また、画面サイズを考えると、広告は魅力的で邪魔にならないようにする必要があります。デジタル広告は何年も前にモバイルに移行しました–消費者がいる場所に行き、彼らのために素晴らしいHTML5レスポンシブバナーを作成してください。

ダイナミッククリエイティブ

HTML5がないと、魅力的な動的なデータを利用したバナー広告を作成して維持することはできません。最も基本的なバナーのみを作成するように制限すると、1つのメッセージに制限されることになります。一方、競合他社は潜在的に2000を提供できます。はい、実際には、一貫したデータフィードの更新と自動化を介して。 1つのHTML5レスポンシブバナーは、静的に1つを生成するのにかかる時間で2000のメッセージを配信できます。

前述のように、HTML5の利点は、完全な制御を提供することです。データフィードに接続されたバナーについても同じことが言えますが、さらにそうです。バナーをリアルタイムで更新するオプションがあります。

レスポンシブディスプレイ広告をパーソナライズする

たとえば、eコマースストアで最も人気のあるアイテムを表示するHTML5バナーキャンペーンを考えてみましょう。アイテムが売り切れになると、これは動的バナーに表示される商品リストに自動的に反映されます。これは、視聴者とeコマースビジネスの両方に最適です。

同じアイデアをiGaming企業が使用できます。たとえば、試合中にオッズをバナー内で動的に変更できます。 HTML5を利用したダイナミッククリエイティブで使用できるパーソナライズされたキャンペーンにはさまざまな種類があります。

さらに、製品フィードをリアルタイムで更新することをお勧めします。結局のところ、データが表示されている形式について批判的に考える必要があります。バナーで使用するデータが視聴者に理解できるようにすることが重要です。これは、日付や価格からオッズまでさまざまです。これは、市場や言語によっても異なる場合があります。たとえば、アメリカ人が日付を書く方法は、スウェーデン人が日付を書く方法とは異なります。または、英国人とスウェーデン人が賭けのオッズを理解するさまざまな方法。

最後のアドバイス：Creative Studioなどの優れた広告クリエーター、またはクリエイティブ管理プラットフォームを使用すると、データフィードを操作するときにフィルターや並べ替えオプションを簡単に設定できます。

次のステップ：これまでで最高のレスポンシブバナー広告を作成しましょう！

うまくいけば、これまでに、HTML5レスポンシブバナー広告を作成することが、デジタルディスプレイ広告のニーズに最適なオプションであることに気付いたと思います。非常に柔軟性があり、複数の画面やプラットフォームで見やすくなっているため、バナーに最適なテクノロジーは他にありません。より良い広告、より良いデザイン、より良いメトリクス–すべてが可能です。

最後に、すべての主要な広告ネットワーク（およびソーシャルネットワーク）のキャンペーンを作成する機能を提供するクリエイティブ管理プラットフォームを使用すると、社内チームの生産性を向上させる簡単な方法です。キャンペーンを手動で複製してスケールアウトするのに数日（または数週間！）かかることは、もはやオプションではありません。

複数の市場、ライブの最適化、透明性の時代において、HTML5を採用することは、マーケターが望んでいる広告パフォーマンスを達成するのに役立ちます。

Bannerflowのようなプラットフォームがすばらしい広告の作成にどのように役立つかを知りたい場合は、ご連絡ください。