Webサイト制作における動的な図形の簡単な作り方（Google Web Designer）

Webサイト制作における動的なパーツなどの制作時に利用できる便利なアプリケーションの一つとして、「Google Web Designer」の紹介があったので簡単にまとめておく。

「Google Web Designer」とは

以下を参照。
https://support.google.com/webdesigner/answer/3184833?hl=ja

準備

1. 「Google Web Designer」で検索して、ダウンロードする（https://www.google.com/webdesigner/）
2. ダウンロードしたexeファイル（googlewebdesigner_win.exe）をダブルクリックしてインストールする
3. インストールした「Google Web Designer」を開く（起動する）

作成例

1.「ファイル」→「新しいファイル」
2.「新しいファイルの作成」画面で下記のように入力（指定）する

• 「ディメンション」：「Custom」を選択
• 「幅」と「高さ」を適当に指定する
• 「名前」に保存したいhtml名を入力する
• 「場所」に保存先を指定する
• 「アニメーション モード」に「詳細」にする

※他はデフォルトのままでOK
※白い部分をステージと呼ぶ
3.ペンツールを選択した状態で、塗りを設定し、ステージ上に任意の図形を描く
　→すると、ステージの下にあるタイムラインにのタイムラインが表示される

4.タイムライン上の任意の場所（ここでは00:01:00の位置とする）でマウスを右クリックし、「キーフレームを挿入」する

5.「3D オブジェクト回転ツール」を選択し、ステージ上に現れた3軸の円（最初は青い円の中に赤い線と緑の線があるように見える）のいずれかの上でドラッグし、適当に回転させる
6.再度、タイムライン上の任意の場所（ここでは00:02:00の位置とする）でマウスを右クリックし、「キーフレームを挿入」する
7.再度、「3D オブジェクト回転ツール」で、ステージ上の3軸の円のいずれかの上でドラッグし、適当に回転させる
8.プレビューで見てみる
※IEを含め、ブラウザのバージョンによって動かないこともある
9.Webサイトのパーツとして使いたければ上書き保存して、このファイルにページに必要な他のパーツなどを追加して、ページ（html）を完成させる

手順4〜5（6〜7）は必要に応じて繰り返したりする。

これを使うことで、Webページ上に配置する動的な図形などを簡単に作ることができる。
※Canvasについては下記参照
http://www.html5.jp/canvas/what.html