WWW Watch

Google が無料の Web コンテンツ作成ツール 「Google Web Designer」 を公開

Google が、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開したので簡単に紹介してみます。

Google Web DesignerGoogle さんが、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開しました。

Photoshop などのような、視覚インターフェースを使用して、広告などの Web コンテンツを作成し、HTML5、CSS3、JavaScript を書き出すことが可能です。コードエディタも搭載されているので、出力されたコードを直接編集して、より高度なコーディングを行うこともできるようになっています。

基本的にはインタラクティブな要素を持った 「広告」 の作成を簡単に行うためのツールで、AdMob や DoubleClick といった広告プラットフォームとの連携機能も搭載されています。

Google Web Designer

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

Google Web Designer では、広告クリエイティブを作成する際に、コンポーネント ライブラリから画像ギャラリー、動画、広告ネットワーク ツールなどを追加できます。

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

Google Web Designer とは : Google Web Designer ヘルプ から引用

Google Web Designer は無料のツールですので、ダウンロードしてインストールすればすぐに使えます。動作環境的には Windows 7 / Windows 8 / Mac OS X 10.7.x 以降とのことで、Windows XP はサポート対象外。

Google Web Designer のダウンロード

インストールはダウンロードしたファイルを実行するだけです。起動画面は下記のような感じ。まだベータ版です。

Google Web Designer の起動画面

「新しいファイルの作成」 を選んだところ。広告の作成では、バナーサイズや広告プラットフォームの選択などができます。

Google Web Designer : 新しいファイルの作成

ツールメニューなどは Photoshop などで見慣れた感じ。

Google Web Designer : ツール

試しにカルーセルギャラリーを配置してみるとこんな感じに。複数の画像をドラッグで左右にギャラリー表示することができます。

Google Web Designer : カルーセルギャラリーを配置した状態

画像の追加も、追加画面から画像をドラッグするだけと簡単。

Google Web Designer : カルーセルギャラリーへの画像追加

こんな感じで作成したコンテンツを、下部のメニューからブラウザを選択してプレビューしたり、コードビューでコードを直接編集したりして作成していくことができます。

作成したコンテンツは 「公開」 を選択すれば書き出されますが、この際、CSS に対するベンダプレフィックスの有無を選択できたり、Minify の設定もできるみたいです。

Google Web Designer : Web コンテンツの公開

さらっと触ってみただけなので、細かい機能や実際に書き出されるソースコードは確認していませんが、広告コンテンツを作成する際にはそのための機能がしっかり詰め込まれていて便利かもしれません。

日本語でのヘルプもきちんと用意されていますので、詳しい使い方などは下記を見てみるといいと思います。

YouTube では動画で Google Web Designer の概要や、各機能についても解説されています。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー