[markdown]
初めまして。5月に入社したデザイナーのヤマダです。　　
ペーペーデザイナーですが、いつかわくわく動くサイトを作りたいという思いでイージングを勉強中です。　　
そんな訳で手始めに、Google Web Designerを使って何か動かしてみようと思います！　　

#Google Web Designerとは
各種グラフィックツールとタイムラインでアニメーションを作成すると、プラットフォームを問わず動く HTML5 / CSS3 / JavaScript を出力してくれるツールだそう…。引用元
つまり、コーディングが苦手な私でもcssとjavascriptでアニメーションが作れるという事！
助かります！　　
兎にも角にも、ベータ版は無料なので、とりあえず始めてみようと思います。　　
DLはここから

#Google Web Designerの使い方　　
まずは新しいファイルを作成。

　　
ここで「あ、これウェブ広告用のそれなんですね」と気づきました。　ここで設定されている寸法ですが、恐らくはGDN〔Google ディスプレイ ネットワーク〕に則っているのですね。

しかし今回はバナー作成ではないので、【その他HTML】から作ります。　　

##ツールの紹介　　

①ツール　　
絵を描いたり形を形成したりするためのツールです。　
②ステージ　　
ここに絵を描いたり形を形成したりします。　
③プロパティ　　
数値で細かく調整できます。　
④タイムライン　　
アニメの動きを制御します。　

ツールは以下のようなラインナップです。　

　　
因みに今回は特に使いませんが　　
【3Dオブジェクト回転ツール】を使うとz軸にも動かせます！　

##何か描いてみよう！
ステージにオブジェクトを配置すると、タイムラインにキーフレームが現れます。

　　
プラスボタンでキーフレームを増やせます。　　
増やした先のキーフレームでオブジェクトを動かすと、

もうこれだけで、０.５秒間かけて丸が左から右に動くアニメーションが出来ました。

##ローダーを作ってみよう！　　

このようにオブジェクトが増えると、オブジェクトごとにレイヤーが作られているため、　
タイムラインがクイックモードのままだと扱いづらいです。　　
詳細モードに切り替えましょう。　

詳細モードに切り替えると　　
右クリックで、自由にキーフレームを増やしたりイージングを変えたりできます。　　

イージングをカスタマイズするときは、イージングオプションから設定します。

また、アニメーションのループを無制限にしておくと動作確認しやすいです。　

できました！

#Google Web Designerの使い道

今回Google Web Designerを使ってみて感じたことは、
イラレやフォトショの代用として使うにはかなり無理があり、
**画像編集には不向き**という事です！
元々が広告制作用なので当然といえば当然ですね。
動きのある広告を作るのにはかなり便利なツールです。
また、Adobe AnimateCCと比べても、
機能が少ない分複雑な動きはつけづらいものの
簡略化されているので個人的にはすっきりしていて**使いやすかったです！**
皆さんも使ってみれば、Googleでもっと広告を出してね！というGoogleさんの思いがひしひしと感じられると思います。
また、Google Web Designerが書き出してくれたcssを熟読するだけでもかなりアニメーションの勉強になります。
しかも、しっかりと使いこなせば、ウェブサイトで3Dやアニメーションを使ってもっとリッチな表現をしたい！といったときにも使えそうな感じではあります！
ただ、書き出されるファイルがわりと重いので、
簡単な動きのアニメーションだったら自分で書いちゃった方がいいと思いますね！　　

[/markdown]