Flashよさらば。Google Web DesignerでHTML5広告を簡単に作成

2018年1月11日

動的な広告表現は日々増えています。それらはかつて主流だったFlashではなく、今やHTML5で作成されていることがほとんどです。 本日はそんなHTML5の広告を、Google Web DesignerでFlashを使わずに作成する手順について解説します。

なおGoogle Web Designerの基本的な機能については以下の記事にて解説していますので、併せてご覧下さい。

近年のFlash排除の流れ

2016年以降、Safari、更にGoogle ChromeとAdwords両方でFlash排除、すなわちHTML5推進の動きが加速しています。

On websites that offer both Flash and HTML5 implementations of content, Safari users will now always experience the modern HTML5 implementation … Most websites that detect that Flash isn’t available, but don’t have an HTML5 fallback, display a “Flash isn’t installed” message with a link to download Flash from Adobe. If a user clicks on one of those links, Safari will inform them that the plug-in is already installed and offer to activate it just one time or every time the website is visited.

Chrome will de-emphasize Flash in favor of HTML5. … In December, Chrome 55 will make HTML5 the default experience, except for sites which only support Flash. For those, you’ll be prompted to enable Flash when you first visit the site.

Safari,Chrome共にHTML5がデフォルトとなり、Flashしか対応していないサイトの場合は、サイトを開く前にユーザーに警告が出るようになっています。 ブラウザでFlashが非推奨となるのであれば、ブラウザ上で表示する広告もサポートする必要がないということで、Google Adwordsからも以下のような告知が出ています。

AdWordsでは、2016年6月30日以降、Flashで作成されたディスプレイ広告はアップロードできなくなり、2017年1月以降、Flash形式のディスプレイ広告の掲載が停止されます。

ということで、2016年秋以降、AdwordsではFlashで作成した広告はもう出稿できない状態となっています。 ちなみに、弊社の広告システムadmageでも、Flashで作成した広告は取り扱い対象となっているものの、最近ではあまり使われていないという印象です。

とはいえやはり見栄えもしユーザーの印象にも残りやすい動的な広告は出したい。となるとHTML5広告を作成、出稿する必要が出てきます。 そこで、Google純正のHTML5広告出力ツールGoogle Web DesignerでFlashを使わずHTML5を使った広告作成にチャレンジしてみました。

Google Web DesignerでHTML5広告作成

テンプレート選択

今回はひたすら楽に作ってみる、ということで「テンプレートを使用」を選択します。

GoogleWebDesignerスタートメニュー

プレビューで雰囲気を確認しつつ、使用したいテンプレートを選択します。 今回はAdwordsで利用する予定なので、Adwordsに対応したテンプレートを選択しています。

テンプレートから新規作成

ファイルやバナーサイズを決定します。

サイズの指定

画像編集

ここから広告作成画面です。

エディタ画面

ちなみに、ここでも再生ボタンを押すことでオブジェクトの動きのプレビューが可能です。

プレビューボタン

画像をデフォルトのものから差し替えます。 基本的に、枠線が青色になっているオブジェクトが現在編集対象となっているオブジェクトのようですね。

「画像を変更する」を選択すると、使用している画像が一覧で表示されます(黄色のものは現在選択しているオブジェクトですね)。

「画像を変更する」メニュー

このとき「+」でローカルにある画像を追加できます。

「+」ボタン

テキスト編集

テキストボックスを選択した状態で、左側の「T」をクリックするとテキスト編集が可能となります。

テキスト編集

テキストオブジェクトの位置やサイズは右側のメニューで調整可能です。

テキスト編集プロパティパネル

ここではフォントの種類や太さ、文字揃えを変更できます。フォントの色を変えたい場合は16進数を直接指定することもカラーパレットから選択することも可能です。

プレビュー

完成したら、プレビューで実際にブラウザに表示するとどうなるか確認しましょう。

ブラウザプレビューアイコン

CromeやInternet Exporerなどの各ブラウザを指定して、実際のブラウザ上での表示を確認できます。

Choromeでのプレビュー

HTML5ファイルに出力

プレビューにて問題がなければ、画面右上の「パブリッシュ」でいよいよHTML5ファイルに出力です。 今回はローカルに出力させました。

パブリッシュボタン

出力先フォルダを指定したら「パブリッシュ」で出力です。この際「zipを作成」にチェックしておくと、出力先フォルダに必要なファイルの入ったzipファイルが作成されます。

出力設定ウィザード

作成した広告の画像やソースを含むファイルが指定のフォルダに出力されます(今回の例では「test」というフォルダに一式が出力されています)。前述のパブリッシュ画面で指定している場合、以下のようなzipファイルもちゃんと出力されています。

出力ファイル

Adwords出稿

このzipファイルをAdwordsのイメージ広告入稿画面からアップロードするだけです。

AdWordsでの入稿

あとは承認がおりることをお祈りするだけ。簡単ですね!

実際のGoogleWebDesignerの使いどころは…

ここまで説明しておいてなんですが、実際のところただディスプレイ広告を出稿するだけなら、入稿形式を「レスポンシブ広告」にすれば単純な手間はGoogle Web Designerを使うより遥かに小さいです。

AdWords「レスポンシブ広告」入稿画面

とはいえ、外注するほどでもないけど少し独自色のある広告を出したい、単なる画像一枚のバナーから脱却したい、という場合はうまくGoogle Web Designerを活用していきたいところですね。

広告代理店・Webメディア向け総合広告配信システムのパッケージ「admage®」

株式会社ディマージシェアは広告の配信システムを開発して10年以上のエンジニア集団。 定額・初期費用なしで導入できるパッケージ型の広告配信システム「admage®」を開発・提供しています。 フルスクラッチ開発、既存システムのリプレイスもお気軽にご相談ください!
admageへのリンク