HTML5・広告を制作できる無料の「Google Web Design」ベータ版を使ってみた

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

HTML5・広告を制作できる無料の「Google Web Design」ベータ版を使ってみた

ほっほっ

10月1日、GoogleからHTML5ページ・広告の無料で使えるデザインツール「Web Designer」ベータ版がリリースされました。

Google Web Designとは

Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。
デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
Google Web Designer では、広告クリエイティブを作成する際に、コンポーネント ライブラリから画像ギャラリー、動画、広告ネットワーク ツールなどを追加できます。

コード ビューでは、構文の強調表示機能やコードのオートコンプリート機能を使用して簡単にコードを記述でき、エラーの少ない CSS、JavaScript、XML ファイルをすばやく作成できます。

公式サイトヘルプより

要は直感的に使えるGoogle Web Design(GWD)なら動的なHTML5広告やウェブコンテンツを簡単に作れますってことです。

デモや動画を見てると私も試したくなったのでアニメーションHTML5ページと360°ギャラリーを作ってみました。

※インストールは公式サイトより
Google Web Designer

実際に使ってみた(アニメーション編)

新規ファイル作成

起動後Ctrl + Nで新規作成
img01

広告作成ツールと謳っている通り広告制作がメインに来てます。

今回はアニメーションをつくりたいので
空のファイル>HTMLを選択。

アニメーションモードが”クイック”と”詳細”があります。
ここではデフォルトのクイックを選択してみました。

img03

インターフェイスはこんな感じ

img02
フラッシュ制作ソフトに近いイメージ。

クイックモードのタイムライン

img05
「+」でシーンを追加できます。
要らないシーンをアクティブにしてごみ箱クリックでシーンを削除できます。
フレームとフレームの間にキーフレームのオプションがあります。

オプションは2つ。
・時間 (0.01 s~1000 s)
・イージングタイプの変更(加速と減速)

イージングタイプの詳細

img06

クイックモードの使い方が何となくわかったところで詳細モードに変更してみました。

img07

詳細をクリック!!

img08

もう二度と後戻りはできないようです。

タイムライン詳細モードはこんな感じ

img09
見慣れた感じのインターフェイスが出てきました。

【詳細モードにして気づいたこと】
クイックモードで作成するとオブジェクトを一つ動かす度に毎回全てのオブジェクトに指示が入ります。
途中でオブジェクトを追加するとすべてのシーンを修正しないといけない場合がほとんどです。
複雑なアニメーションであればあるほど最初からクイックモードの方が扱いやすいです。
GWDで生成されるファイルは重たいので本当に簡単なアニメーションを作成するだけの用途には向いてません。

広告やアニメーションはコード編集が可能です。
コードの確認しながら変更を加えることができます。

img14

そして作業を進め完成したアニメがこちら

ペーパーヤバズ!

ミニ劇場がかんたんにできました。

次ですが、社内で共有しているカメラフォルダからいい素材を見つけてしまったので
360°ギャラリーも試してみました。

実際に使ってみた(360°ギャラリー編)

コンポーネントから360°ギャラリーを作業エリアにドラッグ

img10

画像を読み込みます。

img11

画像ファイルをドラッグするとファイルが読み込まれます。(複数選択可能)
ここでファイルの順番の変更もできます。

img13

ファイルの読み込みが完了したらOK。

img12

以上です。

完成したギャラリーがこちら(画像スワイプで動作します。)
※画像読み込みに多少時間が掛かります。

360° Gallery

非常に簡単に360°ギャラリーかできました。

使ってみた感想

なかなかの機能はそろってますがかゆいところに手が届くかと言えばそこまでではない。
ただ、アニメーション広告の制作には最適だと思います。

今回はHTML5と360°ギャラリーを制作しましたが、カルーセルギャラリー、iFrameコンポーネント、地図コンポーネント、タップ領域コンポーネント、動画コンポーネント、YouTubeコンポーネントなどが利用できるので使い方によってはすごく便利なツールになると思います。

また、より詳しい使い方のチュートリアルムービーがGoogle Web DesignerアカウントでYouTubeに公開されています。
Google Web Designer – YouTube

以上「Google Web Designer」ベータ版を使ってみた!でした。

さきボー
デザイナーの寺本です。通称:さきボー/イエロー
美しいもの・かわいいものが大好きです。心が奪われます。
完璧な美しさの中に秘めた魅力的な欠点があればもっと心が奪われます。
そんな”人の心を灯せるデザイナー”を目指してます。
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.