いいもの選びではおしゃれな日曜雑貨から家電、コスメ、映画、漫画、美容、ファッションなど色んな物のいいものを選んでどんどん紹介していきます。
Google Web Designer とは、視覚的なコーディング インターフェースアプリです。
HTML5をベースに広告用や様々なウエブコンテンツ制作のデザインを行うことが可能になります。
主に描画ツール、テキスト、3D オブジェクトを使用し、タイムラインでオブジェクトやイベントをアニメーション化も可能です。
構文のハイライト表示機能やコード オートコンプリート機能を備えているので、コードを簡単に記述でき、入力ミスを防ぐのみも役立ちます。
簡単にまとめると、グーグル社が提供しているHTML5を使用したWEBデザインアプリですね。
Google Web Designerで出来る事
・HTML5ベースの記述
・3Dオブジェクトでの編集
・アニメーションの作成
・CSSファイル作成
・JavaScriptファイル作成
・XMLファイル作成
・バナーなど完成後簡単にGOOGLE広告へ投稿可能！
まとめるとこのアプリでWEBサイトのデザイン構築が可能という事ですね。これでバナー作成なども可能だという事です。
あとテンプレートも用意されているのでとても便利ですね。
しかもこのツールなんと！
Google Web Designer は無料でダウンロードして利用できます。
Google Web Designerを利用するにあたってのマシンスペックは下記の通りです。
| Windows 要件 | Mac 要件 | Linux 要件 | |
| オペレーティング システム | Windows 7 Windows 8 |
Mac OS X 10.7.x 以降 | Ubuntu 12.04 以降 Debian 8 以降 OpenSuSE 12.2 以降 Fedora Linux 17 |
| プロセッサ | Intel Pentium 4 以降 | Intel | Intel Pentium 3 / Athlon 64 以降 |
| メモリ | 2 GB（最小）、4 GB（推奨） | ||
| 画面解像度 | 1280 x 1024 以上 | ||
| アプリケーション ウィンドウのサイズ | 1024 x 680 以上 | ||
| インターネット接続 | 必須 | ||
御覧の通り条件としてはかなり良いですね。メモリも2 GB（最小）、4 GB（推奨）ですしWindows環境であればIntel Pentium 4 以降でOKなので、現行スペックPCであればほぼ問題ないでしょう。
Google Web Designer は下記のURLよりダウンロード可能です。
https://webdesigner.withgoogle.com/intl/ja_jp
インストールが終わるとテスクトップ上に下記のアイコンができるので、このアイコンをクリックします！
そうすると下記の画面になりますので「新しいファイルを作成」をクリックします。
次に下記の画面に移行します。
左側の青枠は主に何を作成するかを選択します。今回は「バナー」を選択しますね。
右側の赤枠ではファイル名、保存先、サイズなどを指定します。
進むと今度は下記の画面へ移行します。ここでようやくバナー作成が可能になります。
使用するところは主に赤枠、青枠、黄枠部分ですね。
赤枠はコントロール
青枠は表示などの設定等
黄枠はプレビューです。
今回はバナー作成を例として説明します。まずは文字の挿入から行いますね。
①まず左側赤枠のTをクリックします。これで文字挿入になります。
②白いオブジェクト上にマウスを左クリックすると枠が出てきます。この枠内で文字を書く事が可能になります。
上段の青枠では文字のフォント、サイズ、色などを選択することが可能です。
文字を入れるとこのようになります。
お好みのフォントやサイズ、色などを変えてみるとこの様になります。
プレビューを確認してみる。
右上赤枠のプレビューをクリックすると実際のブラウザー上で確認する事が可能です。
次に文字だけじゃ寂しいので画像を追加します。
画像自体をドラックアンドドロップで簡単に追加することが可能です。
画面上部のところで左から前に出す、後ろに下げる、前面に出す、後方に下げるとできるので文字と画像の表示バランスをこれで調整します。
この場合文字が隠れてしまうので、文字を前面に出すか画像を後方に下げるかのどちらかでOKです！
今回は説明の為シンプルにしました。上記は静止画ですが、実際はテキストや画像を移動させたりアニメーションとしても制作可能です。
google web designerには既に搭載済のテンプレートがあるんです。これで簡単に作成することが可能になります。尚且つGOOGLE広告へも円滑に投稿することが可能です。
google web designerを起動すると上記画面へ移行しますので、テンプレートを使用をクリックしてみましょう。
次の画面へ移行すると下記の通りとなります。
ざっくり言うとアプリインストール用ぺージ、バナー制作、ストリームビデオ用などが代表ですね。
今回は代表でBanner for Google Ads and AdMob（Google広告用）を選択してみましょう。
右側の赤枠を選択すると今度は左側にテンプレートのリストが表示されますので今回は青枠の一番上のテンプレートを使用します。
黄枠のレイアウトを使用をクリックします。
そうすると上記の画面へ移行します。
まず中心に表示されたのがテンプレートとなります。
①黄枠＝ロゴ
②赤枠テキスト上段、下段の2段
にそれぞれ必要な情報を入力してみましょう。
①のLOGO（画像）についてはそのままドラッグ＆ペーストで挿入可能です。
②のテキストは
左側のTをクリックするとテキストを挿入することが可能です。
テキストとロゴ（画像）を挿入するとこのようなイメージとなります！対応可能な拡張子は主にjpg,gif,pngです。
作業時間たったの20秒程度です（笑）
テンプレートで既にベースは完成しているのでとても便利なんですね。
ロゴ（画像）についてもドラッグアンドドロップを行うだけで簡単に尽かする事が可能です。
動画についてもgoogle web designer 内にドラッグアンドドロップをするだけで追加可能です。
完成プレビューを確認する方法は画面右上のプレビューをクリックします。
そうするとGOOGLE広告用のサイズに合わせたバナー自動的に設定されます。
非常に便利ですね。ここまでかかった時間は約3分ほどです。
サンプルデータ（テンプレート）を使用することにより、ダイナミック広告がデータフィードに接続されたときにどのように表示されるのかを確認する事が可能です。Google Web Designer では、ダイナミック テンプレートの使用時やデータスキーマの選択時にサンプルデータ セットが自動的に用意されますが、このデータは編集可能であり、独自のデータセットを追加することも可能です。
サンプルデータについては、[サンプルデータ] タブの [ダイナミック] パネルに表示します。
広告プレビューでサンプルデータありと無しで確認する事が可能です。
google web designerの良さは何と言っても、工数を短縮できる点ですね。
「コードを打つ手間を省けるというのが最大の魅力なんです。」今回はアニメーションについての説明を行いますね。
試してみましたが非常に簡単です。
まず下段の赤枠には囲った１こしかないです。これがコマになります。ここでは試しに3コマ作りました。まずテキストを真ん中に「良いもの選び」と書きました。
そこから黄枠の+をクリックします。そうすると2コマ目の作成に入れます。
今度が画面中心の文字を移動左下側へさせます。マウス左クリックで移動できます。そうすると画面下の赤枠でも文字が移動できたことが確認できました。
ここで3コマ目を作る為黄枠の+をクリックします。
次は3コマ目の編集です。左下側の文字を今度は右下側へ移動しました。これでひとまず完成です！
最後に右上の赤枠プレビューで確認すると実際の3コマのアニメーションを確認する事ができます。
アニメーションのパターンを変更する事も可能です。
まず①をクリックすると上記のようなタイムラインの詳細内容の画面に切り替わります。
次に②上キーフレーム間を右クリックすると、以下のイージングが選べます。
・Linear（デフォルト値） 一定の速度で変化
・Ease 中速で始まりだんだん速度を落ちる
・Ease-out 高速で始まりだんだん速度を落ちる
・Ease-in 低速で始まり高速で終わる
・Ease-in-out 最初と最後は低速、中盤は高速
・Step-end イージング中は開始位置にとどまり、直接終了位置にジャンプ
・Step-start すぐに終了位置にジャンプ
様々なアニメーションパターンを選択することが可能になります。
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語となります。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されているのです。
ハイパーテキストというとウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。
編集方法はテキストエディターやメモ帳、WEB制作ソフト（ホームページビルダー、Dreamweaver等）で可能です。初心者の方であればWEB制作ソフトで制作したほうが工数も減り効率的に制作する事が可能になるとおもいます。
HTML5では、動画や音声データをHTMLにて扱う事が可能です。 これまで動画や音声をウェブページに埋め込む際には、Flashなどのプラグインを利用するのが一般的でしたが、 HTML5では、新しく追加される<video>や<audio>を使用することで、 感覚的には<img>で画像を扱うような感じで、動画や音声をシンプルに扱えるようになります。
HTML5は、HTML4以前と比較していくつかの記述がシンプルになって分かり易いです。新たに追加された要素も数多くあります。HTML5の新機能につきましては下記の通りです。
| 要素 | 概要 |
|---|---|
| <article> | 独立した記事であることを示す |
| <aside> | 余談・補足情報であることを示す |
| <audio> | 音声を再生する |
| <canvas> | 図形などを描画する |
| <command> | 操作メニューのコマンドを指定する |
| <datalist> | 入力候補となるリストを定義 |
| <details> | 詳細情報であることを示す |
| <embed> | 外部コンテンツなどの埋め込み |
| <figcaption> | 画像や表のキャプションを示す |
| <figure> | 画像や表であることを示す |
| <footer> | フッターであることを示す |
| <header> | ヘッダーであることを示す |
| <keygen> | フォーム送信時に暗号キーを発行 |
| <mark> | 該当テキストをハイライトにする |
| <menu> | 操作メニューを作成 |
| <meter> | 測定値を示す |
| <nav> | ナビゲーションであることを示す |
| <output> | 計算結果を表示 |
| <progress> | タスクの進捗状況を示す |
| <section> | 一つのまとまりであることを示す |
| <source> | 動画や音声などのURLや種類を指定する |
| <summary> | <details>の内容を要約 |
| <time> | 日付や時刻をに示す |
| <video> | 動画を再生する |
| <rp> | ルビを括弧で囲む |
| <rt> | ルビのテキストを指定する |
| <ruby> | ルビを振る |
| <wbr> | 改行ができる場所を示す |
google web designerではシッカリとヘルプページが設けられています。
例えばアニメーションというキーワードで検索かけました。そうすると上記の様にアニメーションに関わるヘルプ記事が該当します。
クリックすると、各該当するヘルプ内容へアクセスすることが可能です。
google web designerではオブジェクトのサイズを変更することが可能です。
まず左上側の赤枠内にて【変形コントロール】にチェックを入れすぐ右横のアイコンで選択します。
赤枠内の黒点を起点としてマウス左クリックをしながら拡大縮小する事が可能です。
使った感じですが、操作に慣れるとサクサクできそうなイメージでした。
利用されたことがある方だと分かりますが、簡素版のイラストレーターにアニメーション機能が付加されたようなイメージですね。
そして無料なので非常に重宝します。
そしてこのままGOOGLE広告へリスティングが可能なので、非常に便利なアプリと言えるでしょう。
Follow me!
