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

powered by hm solution

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

お問い合わせ
ブログTOP » web » webサービス » HTML5・広告を制作できる無料の「Google Web Design」ベータ版を使ってみた

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

img0
さきボー
ほっほっ

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」ベータ版を使ってみた!でした。

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

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.