【初心者向け】GoogleWebDesignerでできる事と使い方

デザインするものが全てちょっとだけダサくなる、そんな方にお届けしたいのが今回の情報です。 web広告の画像・イメージ作成にはphotoshopやIllustratorを使う方が大半だと思いますが、社内で使えなかったり、そもそも使える技術がない方でもいじけるのは尚早というものです。 『Google Web Designer』というイケてるツールがあります。 イケてるツールを使えばイケてるものが作れる…かもしれません。

Google Web Designerとは?

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

というわけで、Google Web Designerとは、広告など画像を直感的にデザインをして、アニメーションなどをつけると、それをHTML5やJSなどで書き出してくれる優れものなのです。 2017年12月現在は、β版が公開されています。

Google Web Designerの使い方

まずは下記URLからDLしてきます。

Windowsの場合、exeファイルがDLできますので、それを実行しインストールしましょう。 起動してみます。 新しいファイルの作成からです。

プロジェクトのタイプを選択させられるので、今回はまず「新しいファイル」の方を選択してみます。

新しいファイル＞タイプ＞HTML と選択し、名前を適当につけて生成します。 OKを押すと、画面が出てきます。ここがデザインをする場所のようです。

「基本ツール」は左側に寄っています。

各機能はこのページに詳細があります。

せっかくなので以下で解説してみます。

選択ツール

オブジェクトをクリックすることで選択することができます。

このように、選択されていないオブジェクトは、点線で囲われています。HTMLなので、そのオブジェクトの要素（divやpなど）が表示されています。 選択ツールでそのオブジェクトをクリックするとこうなります。

選択すると点線が青くなります。直感的でわかりやすいと思います。 選択状態でドラッグすることで移動させることができます。Officeなどでもよく見かける操作なのでわかりやすいです。

3Dオブジェクト回転ツール

オブジェクトを選択すると、このような表示が出ます。

この青丸と赤縦線と緑横線それぞれが、このオブジェクトをどのように回転させるかを操る軸になります。 赤→ｘ軸、緑→y軸、青→z軸　という軸です。 オブジェクトの回転する方向をこの3軸のうちいずれかの方向に回転させることができます。

この平面の図では、青方向の回転が一番わかりやすいので、30°回転させてみました。

円形だと回転させてるかわかりづらかったですね…。中心に「30°」の表示があるので辛うじて判別できます。 これと同様、x軸回転をさせると

こうです。このへんから立体空間把握力が必要になってきます。 ここから、y軸回転させると

こうです。楽しいですね。 3Dモデリング経験のある方ならこのxyz軸のイメージがすぐにつくと思います。

3Dオブジェクト変換ツール

これはオブジェクトを、xyz軸に向かってスイスイ平行に移動させるツールです。 オブジェクト変換ツールという名前の理由がよく分からないですが、スイスイ平行移動します。

先ほど同様、緑・赤・青の矢印が出ており、この方向にそれぞれ移動させることができます。 図では正面なので、青（z軸）がわかりにくいですが、矢印の方向にスイスイ動きます。 z軸は、CSSのz-indexのイメージです。

タグツール

htmlタグを新しく追加できるツールです。 カスタマイズしたいときにはどんどん使いましょう。

ペンツール

シェイプが作れます。

上部に表示されるメニューで線の色、中の塗りつぶしの色、枠線の太さなどがカスタマイズできます。 ペンツールの横の「＋」がついているもの と、「マイナス」がついているものは、アンカーポイントの追加や削除です。

白い四角がアンカーポイントです。 「＋」でポイントを追加し、ペンツールでポイントを引っ張ると調整することも容易いです。 逆に、ポイントを削除すると、頂点の少ない図形になります。 なお、ペンツールのアイコンをドラッグすると楕円や長方形などの図形を作成するツールも表示されます。

楕円や長方形、線についても、基本は同じです。 『Illustrator』でいうところの”パス”のようなものなので、イラレ慣れしている方ならすんなり理解できます。

テキストツール

テキスト入力ができます。選択できる日本語フォントが限られているので、Googleのツールではここがちょっと惜しいところかもしれません。 Googleのwebフォントから新しいフォントを追加できるので、英字であれば結構種類を選択できると思います。

テキストに適用する要素を選択することができ、divやp、h1など色々選べます。 ただcssやhtmlが読める人以外にとっては「これが選択できて何かになるんだろうか？」という感じもあります。

塗りつぶしツール

名前そのまま、図形の中の色や線の色を変えるツールです。

「ペンツール」のようにアイコンをドラッグするとグラデーションなども設定できます。

3Dステージ回転ツール

なんというか、キャンバス自体が3Dで回転します。

これは少し使い方が難しそうです。 真ん中の球体が、xyzで回転させるもので、左下の矢印が平行移動です。基本は3D動かすツールと変わりませんね。

ちなみに、この球体の位置は、回転の中心を表しています。ですので、この球体自体を移動させて回転の中心を変えることができます。座標(0,0,0)が中心というわけではありません。

手のひらツール

編集画面(Adobe illustratorで言うところのアートボード)の”見た目”だけを動かします。オブジェクトは動きません。

虫眼鏡ツール

編集画面の”見た目”だけを拡大縮小します。

モーションパスツール

あえて最後に残しました。 このツールは直接絵を描写するツールではなく、次に説明するアニメーションを設定する際に使用します。詳細は公式ヘルプに委ねますが、ペンツールなどで作成したパスに沿ったアニメーションを設定するためのツールだと思って頂ければ問題ないです。

ざっと各ツールを触ってみました。 基本ツールなどが揃っており、これだけでもいろいろなことができそうだとわくわくしてくるかと思います。

アニメーション

編集画面の下部にある「タイムライン」で、アニメーションのコマを設定します。

この下のほうにあるパネルで、「＋」を押すことで、キャンバスが増えます。それぞれをすこしずつ動かすことで、パラパラ漫画の要領でアニメーションができます。

アニメーションの設定方法については長くなりますので、今回は割愛します。 続報が待ちきれない方は公式ヘルプでご容赦を…。

実際にwebサイト上でアニメーションを多用しすぎるとうっとおしいものですが、適度なアニメーションは情報のメリハリに効果的ですね。

書き出し

右上のアイコンのなかに「パブリッシュ」というものがあり、これでデータを書き出すことができます。

フォルダが作成され、そのフォルダのindex.htmlを実行することで、作成したものを見ることができます。

Google Web Designerの使い道

ある程度触ってみてわかったのは、画像編集ツールとは違うということです。 HTML5ですし、そもそも「広告を作るためのツール」なので当然といえば当然ですね。『Illustrator』のように使えなくはないですが、代替として使用するのは少し無理やりな感があります。

Googleさんのこのツール作成の意図を汲もうとするなら、Google広告にもっと出稿してもらうためにGoogleライクな広告を簡単に作るツールを作ろう！という感じでしょうか。広告作成には向いているツールだと思います。

ちなみに、Google Web Designerで新規ファイルを作成するときに、先ほどは “新しいファイル＞HTML” としましたが、そのものずばり「Google広告」という選択肢があります。

広告環境としてAdwordsあるいはDoubleClick、一般と選択できるので、それぞれの環境を考慮せずにアニメーション広告などが作成できると思います。どの程度AdWordsとDoubleClickで環境依存（固有の挙動）をするのか分からないのですが…。

HTMLページも作成できるので、しっかりツールを使いこなせば、アニメーションや3Dを使ったリッチなwebページを作成することももちろん可能です。 ただし当然ながらwebページのデザインにフル活用しようとするなら、ある程度htmlやcssの知識が必要です。

CSSやHTML5のお勉強としては役立つツールかと思います。 描いた絵やアニメーションのソースコードがそのまま見られるので、こういうふうになっているんだ…と中身を読んでふんふんできます。 これは存外に悪い使い方では無さそうです。