Google Web Designerの使い方！無料でテンプレートからバナー作成も簡単！

皆さんは「Google Web Designer」というサービスを聞いたこと、または使ったことはありますか？私たちの生活に欠かすことのできない程普及しているGoogleが提供するサービスの一つに、無料でデザインができてしまう「Google Web Designer」というサイトがあります。

Google Web Designerとは、HTML5の広告をはじめとする様々なWebコンテンツをデザイン、そして作成できる無料のアプリです。デザインするのに加え、デザインした作品にアニメーションを加え、より質の高い作品に仕上げることもできます。コンテンツの作成が完了したら、HTML5、CSS3、そしてJavaScriptといった形式で出力することができます。

まずはしめに、Google Web Designerの設定方法をご紹介していきます。

Google Web Designerを使用するには、Google Web Designerのサイトからダウンロードする必要があります。「Google Web Designer」とサイト検索し、サイトを開きましょう。

Google Web Designerのサイトを開くと、ダウンロードページが表示されます。早速ダウンロードすると、Google Web Designerに関する利用規約が表示されます。同意をクリックすると、Google Web Designerのダウンロードが開始されます。

ダウンロードが完了すると、下の図のような画面が表示されます。このがめんが表示されれば、Google Web Designerのダウンロードは完了です。

Google Web Designerをダウンロードした後は、早速Google Web Designerを起動し使ってみましょう。ここからは、Google Web Designerの使い方をご紹介していきます。

Google Web Designerを起動し、新しいファイルを作成してみましょう。新しいファイルを作成するためには、下の図の赤枠で囲まれている「新しいファイルを作成」をクリックします。

新しいファイルを作成する場合、まずは作成するファイルの「ファイル名」をつけましょう。

ファイルに名前を付けることで、下の図の画面に移ります。このページでデザインを作成していきます。

バナーの名前や保存先のファイル、バナーのサイズなどを、作成前に設定します。設定できる広告の種類は以下の通りです。

1. DoubleClick
2. AdMob
3. AdWords
4. Google 以外の 広告

「アニメーションモード」で作成する場合は、「クイック」と「詳細」の2つから選択することができます。「クイック」とは、アニメーションのシーンごとに作成することができる機能で、「詳細」は、画像の素材ごとにアニメーションを作成することができる機能です。

デザインの経験があり、それなりにデザインの機能を使いこなせる自信がある場合は、より高度で細かいデザインのバナーを作成できる「詳細」を選択することをおすすめしますが、慣れていない場合は「クイックモード」で作成しましょう。この記事でも「クイックモード」を使った作成方法をご紹介します。

クイックモードで作成する場合は、ファイルの作成時点で、上の図の赤枠の個所を「クイック」に設定しましょう。

デザインに慣れていない場合は、是非「無料テンプレート」を使ってバナーを作成してみましょう。Google Web Designerは、デザインやコーディングといった專門知識を持っていなくても無料で簡単にアニメーションつきのバナーを作成することができます。また、Googleの広告サービスを利用する場合は、バナーのサイズがテンプレート化されているため、簡単にバナーを作成できます。

簡単にバナー作成を作成するには、Google Web Designerアプリ内に備えられている「無料のバナーテンプレート」を使用し、Google Web Designerのバナー作成等に使いましょう。テンプレートを使うことで、洗練されたおしゃれなデザインを一から考える必要なく、おしゃれなバナーを作ることができます。

様々なテンプレートを選択することができます。皆さんが作成したい広告やバナーに合ったテンプレートデザインを選びましょう。

Google Web Designerでバナーを作成するには、ツールを選択しましょう。Google Web Designerには様々なツールがあります。

なんと、Google Web Designerには、デザインに使うことができるツールが10種類以上備わっています。

基本ツールと言われるデザインツールデザインツールは、Google Web Designer画面の左側に設定されています。代表的な基本ツールは、以下のようなラインナップです。

1. 選択ツール
2. 3Dオブジェクト回転ツール
3. 3Dオブジェクト変換ツール
4. タグツール
5. ペンツール
6. テキストツール
7. 3Dステージ回転ツール
8. 手のひらツール
9. 虫眼鏡ツール
10. モーションパスツール

これらの基本ツールを使うことで、画像の向きを変える、絵を描く、画像を塗りつぶすといった作業が可能です。それぞれのツールの使い方は、実際にバナー等を作成する段階で操作し、身につけることが上達の秘訣です。

プレビューにて問題がなければ、画面右上の「パブリッシュ」でいよいよ出力です。出力先フォルダを指定したら「パブリッシュ」で出力することができます。出力する際には「zipを作成」という個所にチェックを入れておくことで、出力先フォルダに必要なファイルの入ったzipファイルが作成されます。出力したバナーや広告のソースを含むファイルは、指定されたフォルダに出力されます。

Google Web Designerでアニメーションバナーを作成する方法をご紹介していきます。誰でも簡単にアニメーションバナーを作れる点がGoogle Web Designerの魅力の一つです。Google Web Designerのツールや使い方を理解し、早速挑戦してみましょう。

まずは、アニメーションバナーで使用したい画像を、ドラッグ＆ドロップで Google Web Designerに貼り付けます。基本ツールの「3Dオブジェクト回転ツール」を選択すると、縦軸（赤）、横軸（緑）、回転軸（青）の方向に使用したい画像を動かすことができます。

アニメーションバナーで使用したい画像の準備ができれば、次はGoogle Web Designerのツールを駆使してバナーを制作していきましょう。

使用したい画像の配置が完了したら、次にテキストを入力してみましょう。基本ツールバーから「テキストツール」を選択し、 ツールオプションバーでフォントやサイズ、そしてカラーなどを調整していきます。画像とテキストのそれぞれに点線の枠があり、ここを調整し、移動、拡大、縮小が可能です。

画像が準備できれば、「タイムライン」の下のスペースに画像を追加していきましょう。複製した画像の要素を編集すると、自動でアニメーション化します。

ループの設定とは、アニメーションを繰り返し再生されるように設定することです。アニメーションをループさせるには、「詳細モード」を使用します。各アニメーションを別々にループさせることや、複数のアニメーションをループさせることができます。

今回は、簡単な「1つの要素のアニメーションをループ」させる設定をご紹介していきます。1つの要素のアニメーションをループさせたい場合は、以下の手順に従って設定してください。

1. タイムライン上でループさせたいアニメーションレイヤーにある「アニメーションの繰り返しを設定」をクリックします。
2. ポップアップで、次のいずれかを選択します。　　　　　　　　　　　　　　　
3. 「無制限」アニメーションが無限にループ。　　　　　　　　　　　　
4. 「～回」アニメーションが指定された回数分ループ。　　　　　　　
5. 「なし」アニメーションはループしません。

バナーが完成したら、完成品をHTML5、CSS3、またはJavaScriptで出力することが可能です。仕上がりを確認したい場合は、「プレビュー」を確認できます。バナーが完成したら、「ファイル」をクリックし、用途に応じたファイル形式で保存しましょう。

無料でバナーなどのデザインができてしまうGoogle Web Designerというサービスの設定と簡単な使い方をご紹介してきました。使い始めは慣れない部分があるかもしれませんが、何度も使って慣れることで、大変便利なサイトです。是非使い方をマスターし、デザインの仕事の幅を広げていきましょう。