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

私たちの生活になくてはならない存在になっているGoogleには、なんと無料でデザインができてしまうGoogle Web Designerというサイトがあります。Google Web Designerの使い方や設定方法をご紹介していきます。

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

目次

  1. 1Google Web Designerとは
  2. 無料で簡単に広告やバナーを作成できるツール
  3. 2Google Web Designerの設定方法
  4. Google Web Designerをサイトからダウンロード
  5. 3Google Web Designerの使い方
  6. 新しいファイルを作成
  7. 無料テンプレートを使おう
  8. ツールを選択
  9. 完成後はHTML5/CSS3/JavaScriptで出力可能
  10. 4Google Web Designerでアニメーションバナー作成
  11. 利用したい画像を選択
  12. ツールを利用してバナーを制作
  13. ループの設定
  14. 完成後はHTML5/CSS3/JavaScriptで出力可能
  15. 5初心者でもGoogle Web Designerで気軽にバナー広告制作
  16. Googleの記事が気になった方にはこちらもおすすめ!

Google Web Designerとは

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をサイトからダウンロード

ダウンロードが完了すると、下の図のような画面が表示されます。このがめんが表示されれば、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には様々なツールがあります。

ツールの数は10種類以上

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

ツールの数は10種類以上

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

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

デザインツール

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

完成後はHTML5/CSS3/JavaScriptで出力可能

出力

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

Google Web Designerでアニメーションバナー作成

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で出力可能

出力

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

初心者でもGoogle Web Designerで気軽にバナー広告制作

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

Googleの記事が気になった方にはこちらもおすすめ!

ThumbGoogle サイトとは?無料のテンプレートで作成できる作り方は?
Googleサイトとは無料でポータルサイトを作れるツールです。無料テンプレートでポータルサイ...
ThumbGoogleのPublic DNSとは?無料公開サーバーのメリットデメリットを解説!
Google Public DNSとは無料公開DNSサーバーです。Google Public...
ThumbGoogle XML Sitemapsの使い方!サイトマップ作成・設定する方法を解説!
WordPressのプラグインであるGoogle XML Sitemapsの使い方を紹介して...
ThumbGoogleでのホームページ作成方法!GoogleサイトでのWebサイトの作り方は?
オシャレなホームページを作りたいと思っても、専門知識が無いと作り方も難しく感じてしまいます。...
ThumbGoogleのOCR(光学式文字認識)でPDFや画像をテキストに文字起こしする方法!
PDFや画像中の文字はOCRを使えば、効率的にテキストに文字起こしが可能です。OCRソフトは...

関連するまとめ

Original
この記事のライター
tiamomare