みなさん、こんにちわ。ガッキーです。
以前、タマが誰でも簡単に作れちゃう！マンション広告バナーの作り方というバナー画像の作成方法を紹介していましたが、
今回は、別のツールを使ったバナー制作について
書いていこうと思います。
2016年6月にFlash形式のディスプレイ広告が
AdWordsでアップロードできなくなり、2017年1月以降に
Flash形式のディスプレイ広告の掲載が停止されるのは
みなさん、ご存知ですか？
Flash形式と同じく動きのある広告は、
今後HTML5広告を利用することが
推奨されているようですよ(＾▽＾)/
HTML5広告ならFlash形式のような
動きのあるバナー広告が掲載できちゃうんです！
そこで今回は、
・Flash広告のように動きのあるバナーがつくりたい
・HTML5が分からない
・気軽にHTML5広告を導入したい
という方のために、Google Web Designerを使った
HTML5広告の作成方法について紹介します。
Google Web Designerとは
HTML5広告やアニメーションを作成できるツールです。
Adobe製品で同じように作成できるツールもありますが
Google Web Designerは、Googleが無料提供しているので
PCがあれば誰でも使うことができます。
Google Web Designer は、視覚的なコーディング インターフェースを使用して HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できる高度なウェブ アプリケーションです。Google Web Designer のデザインビューでは描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトやイベントをアニメーション化できます。
Google Web Designer のコードビューでは、CSS、JavaScript、XML の各形式のファイルを作成できます。構文のハイライト表示機能やコード オートコンプリート機能を備えているので、コードを簡単に記述でき、入力ミスを防ぎます。
コンテンツの作成が完了したら、Google Web Designer のレスポンシブ レイアウト ツールを使用して、複数の画面サイズに合わせてスタイルを設定します。その後、読みやすく生成された HTML5、CSS3、JavaScript で最終的なドキュメントを公開できます。
また、Google Web Designer にはコンポーネントのライブラリもあり、ここから画像ギャラリー、動画、地図などの機能をウェブサイトや広告に追加できます。
Google Web Designer は無料でダウンロードして利用できます。
引用：https://support.google.com/webdesigner/answer/3184833?hl=ja&ref_topic=3249465
簡単にまとめると、Google Web Designerは
・無料で使える
・HTML5広告がつくれる
・難しいコードがかけなくてもアニメーションがつくれる
・最終的に、HTML5 CSS JavaScriptが書き出せる
ということですね。
インストールしてみる
Google Web Designerは簡単にダウンロードすることができます。
https://www.google.com/webdesigner/にアクセスすると
ダウンロードボタンがあるので、そこを押して
同意した後に出てくるダウンロードボタンをクリックするだけです。
サイトにアクセスしてから5秒ほどでGoogle Web Designerを
使用することができます。
マンションのバナーを作成してみる
さっそくバナーを作成していきます。
と、その前にHTML5広告を出稿するには
いくつかのルールがあるようです。
１．アニメーションの長さは30秒以内
２．最大150KB
３．ファイル数10件まで など
制作する前に一度ガイドラインに目を通しておきましょう(^_^)ﾆｺﾆｺ
Google Web Designerを新規でファイル作成する場合は
いくつかの設定が必要になります。
今回はバナーを制作するので、以下の内容で設定しました。
①種類：バナー
②名前：mansion(HTMLのファイル名)
③場所：ファイルを保存するフォルダ
④環境：AdWords
(その他には、DoubleClick、AdMob、Google以外の広告があります。)
⑤サイズ：300×250
(レスポンシブレイアウト)
⑥アニメーションモード：クイック
※アニメーションモードは「詳細」と「クイック」があります。
「詳細」は、レイヤー機能がありますが、「クイック」には付いていません。
アニメーションモードは、制作途中でもボタン１つで
簡単に切り替えることができるので、
慣れてきたら用途に合わせて切り替えると
作業効率が上がると思います。
使用する画像を配置する
新規ファイルの作成までできたところで、
さっそくバナーを制作していきます。
今回は、3つの写真がフェードして切り替わるような
バナーを制作します。
⇊バナーに使う画像は4つです。
まずは、右から3つ目までのマンションの写真のみを
パネルに配置していきます。
配置は配置はドラッグ＆ドロップＯＫです！
画像は重ねて配置します。
上の画像から順に表示されいくように一番最後の画像から重ねていきます。
動きをつけていく
ここまで出来ればいよいよ画像に動きをつけていきます。
①動くシーンを追加していく
タイムライン上（画面下）にある、「＋」ボタンをクリックします。
動きを付けるシーン分、追加していきます。
②プロパティから画像を透明にする
追加して新たにできたシーン（画像）を透明にします。
そうすることによって、下に重ねていた画像がでてきます。
③動きに変化をつけていく
ここでは、画像が動く時間と動作を設定していきます。
タイムライン上にある画像と画像の間にあるボタンをクリックすると
設定できる項目がでてくるので2カ所設定変更します。
■「linear」から「ease-out」に変更
■「0.5s」から「4s」に変更
※数値が大きくなるほど動く時間が長くなるんです。
設定後はこんな感じになりました⇊
タイムライン上にある三角のボタンをクリックすると
プレビューが出来るので、動作確認しながらやってみてください。
最後に、用意しておいたフレーム画像を
ドラッグ＆ドロップして配置させれば完成です！
HTMLとCSS、JavaScriptが分かれば「コード表示」から
もっと複雑な動きがGoogle Web Designerを使って
制作することができます。
バナーの完成
最後にファイルを保存して、HTMLを書き出します。
ここまで出来たら、ブラウザで確認してみてください。
3秒くらいで今回制作したバナーが表示されます。
今回制作したバナーはこちらです♪(*￣ー￣)ｖうふ
あとは、zipフォルダごとAdWordsの管理画面から
アップロード出来ればOKです！！
まとめ
いかがでしたか？
Google Web Designerを使えばHTMLが分からない方でも
今回制作したような簡単なアニメーションなら
HTML5広告を制作することができます。
150kb以下でないと、AdWordsでアップロードできないため、
使用する画像・動きはかなり限られてきますが
やはり動きのあるバナーは、人の目にも留まりやすいと思うので
少しずつ利用してみるといいかもしれませんね。
