Designer】HTML5でアニメーションバナーをつくろう!ツイートみなさん、こんにちわ。今回は、別のツールを使ったバナー制作について書いていこうと思います。Designerを使ったHTML5広告の作成方法について紹介します。DesignerとはHTML5広告やアニメーションを作成できるツールです。Designerは、Googleが無料提供しているのでPCがあれば誰でも使うことができます。アプリケーションです。オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトやイベントをアニメーション化できます。各形式のファイルを作成できます。オートコンプリート機能を備えているので、コードを簡単に記述でき、入力ミスを防ぎます。ツールを使用して、複数の画面サイズに合わせてスタイルを設定します。最終的なドキュメントを公開できます。コンポーネントのライブラリもあり、ここから画像ギャラリー、動画、地図などの機能をウェブサイトや広告に追加できます。無料でダウンロードして利用できます。JavaScriptが書き出せるということですね。Designerは簡単にダウンロードすることができます。https://www.google.com/webdesigner/にアクセスするとダウンロードボタンがあるので、そこを押して同意した後に出てくるダウンロードボタンをクリックするだけです。Designerを使用することができます。マンションのバナーを作成してみるさっそくバナーを作成していきます。その前にHTML5広告を出稿するにはいくつかのルールがあるようです。Designerを新規でファイル作成する場合はいくつかの設定が必要になります。今回はバナーを制作するので、以下の内容で設定しました。(その他には、DoubleClick、AdMob、Google以外の広告があります。)5サイズ:300×250(レスポンシブレイアウト)6アニメーションモード:クイック※アニメーションモードは「詳細」と「クイック」があります。「詳細」は、レイヤー機能がありますが、「クイック」には付いていません。慣れてきたら用途に合わせて切り替えると作業効率が上がると思います。使用する画像を配置する新規ファイルの作成までできたところで、さっそくバナーを制作していきます。今回は、3つの写真がフェードして切り替わるようなバナーを制作します。⇊バナーに使う画像は4つです。右から3つ目までのマンションの写真のみをパネルに配置していきます。配置は配置はドラッグ&ドロップOKです!画像は重ねて配置します。上の画像から順に表示されいくように一番最後の画像から重ねていきます。動きをつけていくここまで出来ればいよいよ画像に動きをつけていきます。1動くシーンを追加していくタイムライン上(画面下)にある、「+」ボタンをクリックします。動きを付けるシーン分、追加していきます。2プロパティから画像を透明にする追加して新たにできたシーン(画像)を透明にします。することによって、下に重ねていた画像がでてきます。3動きに変化をつけていくここでは、画像が動く時間と動作を設定していきます。タイムライン上にある画像と画像の間にあるボタンをクリックすると設定できる項目がでてくるので2カ所設定変更します。※数値が大きくなるほど動く時間が長くなるんです。設定後はこんな感じになりました⇊タイムライン上にある三角のボタンをクリックするとプレビューが出来るので、動作確認しながらやってみてください。Designerを使って制作することができます。最後にファイルを保存して、HTMLを書き出します。ここまで出来たら、ブラウザで確認してみてください。3秒くらいで今回制作したバナーが表示されます。Designerを使えばHTMLが分からない方でも今回制作したような簡単なアニメーションならHTML5広告を制作することができます。使用する画像・動きはかなり限られてきますがやはり動きのあるバナーは、人の目にも留まりやすいと思うので少しずつ利用してみるといいかもしれませんね。見かけるけど、どのぐらい正確なの?実際に歩いて調べてみた。【マンションバナー研究会】テンプレートを使って制作時間を短縮!2017.1.24ガッキーマンションで行われている植栽計画を完成予想図と現状を比較してみた2017.9.12タマ【伝聞さんぽ】「東伏見。色んなものが”ちょうどいい”。輝く!マンションポエム大賞20172018.3.19よしおグアムのマンションはコンドミニアムと言います!実際に見てきた。【リベンジ】イケメン☆エリアマーケティングin渋谷【前編】2017.7.3タマ【完全版】不動産テックサービスまとめ【カオスマップ】2017.8.31よしおマンションブランドのロゴタイプから特徴を探る!2018.1.17のん2017年に販売されたマンションクイズ2017.10.3ガッキーねぇ、知ってた?オファー機能ってすごいらしい。Reserved.4万棟(220万住戸)の大規模データベースを保有!株式会社マーキュリーを徹底解剖!会社案内ダウンロード(無料)。