ホーム
技術ブログ
Webアニメーションを簡単に作成できるGoogle Web Designer

技術ブログ

2021年06月09日

[CSS][JacaScript][Webツール]
Webアニメーションを簡単に作成できるGoogle Web Designer

AdobeFlashの脆弱性、メモリの消費量を理由にスティーブ・ジョブスが切り捨てを宣言したのが2010年。それからWeb上でアニメーションを再生するツールが出たり消えたりしてきました。
結局は単純なアニメーションに収束した感もありますが、ポイントで利用することで目を惹くコンテンツを作成することが可能になります。
そんなWebアニメーションを簡単に作成できる「Google Web Designer」をご紹介したいと思います。

「Google Web Designer」とは

Google Web Designerは、インタラクティブなHTML5コンテンツを作成するためのアプリケーションで、Windows、Mac、Linux向けのプログラムが用意されています。

詳しくはこちら

Google Web Designer - Home

https://webdesigner.withgoogle.com/

今回は初回ですので、概要と簡単な使い方をご紹介したいと思います。

インストール

上のリンク上部にある、「Download Web Designer」のボタンを押すと、利用規約が表示され、「Agree and Download」でダウンロードが始まります。

あとはダウンロードしたファイルを実行すればOKです。

使い方

起動すると、「新規で作成」するか、「用意されているテンプレートを使用するか」を選択できます。
新規で作成する場合が多いかと思いますが、用意されているテンプレートをみてどんな風に作られているかを確認するのも勉強になると思います。

インターフェース

Adobe系のツールをお使いの方には馴染みのある構成ではないでしょうか。

中央に作業スペースがあり、よく使うツールの切り替えは左に、タイムラインは下に、プレビューは右上に、といった構成です。
早速簡単なアニメーションを作成してみましょう。

作成する

今回は簡単なシェイプをクリックしたら移動するパーツを作ってみましょう。

要素を作る

まずは要素を作ります。
左側の「ツールバー」から「長方形ツール」を選択します。
※初期起動状態では「ペンツール」が表示されているかもしれません。長押しすると図のように隠れているメニューが表示されますので「長方形ツール」を選択します。

メインウィンドウに長方形を描画します。
左上から右下へ、右上から左下へなど対角線に向かってドラッグ＆ドロップすればOKです。

要素は配置できましたが、要素がわかりにくいので色を変えてみます。
描画した長方形が選択されている状態（青い線が引いてある状態）で、右上の「塗りつぶし」の「単色」（黄色い丸）をクリックし、好きな色を選択します。

色が変わらない場合は、要素が選択されていない可能性があります。
下図の、要素が点線になっている状態は要素が選ばれていません。
この場合は、「ツールバー」から「選択ツール」（一番上の矢印アイコン）を選択して長方形の点線をクリックしてみてください。
点線が青い線に変われば選択されている状態です。

蛇足ですが、長方形の外枠の線の色と中の塗りつぶしの色は異なります。
外枠の色を変えたい場合は、「ツールバー」の一番下にある

このアイコンをクリックして色を指定します。
右下のドーナツ状が枠の色、左上の色が中の塗りつぶしの色になります。

アニメーションの指定

次にアニメーションを設定します。下にある「タイムライン」から「＋」をクリックして次のシーンを追加します。

今は、最初の位置と最後の位置が設定されている状態です。
設置した要素が同じ位置にありますので、最後の場所を変えてみましょう。
タイムラインで、「最後の位置」が選ばれている状態で、位置をドラッグして変更します。
中央に青い線が表示され、タイムラインの最初の位置と最後の位置で場所が変わって見えるでしょうか。

タイムラインの中の再生ボタン「▶」をクリックするとメインウィンドウ内で要素が動くのを確認できると思います。
これでアニメーションの設定が完了しました。

クリックイベントを設定する

動作は確認できたので、次に「止まっている要素をクリックしたら動く」ように変更してみましょう。

先に「何をクリックしたら」を指定する必要があるので、要素に名前を付けてしまいましょう。
タイムラインの先頭位置にあることを確認し、長方形の要素を「選択ツール」でクリックして「プロパティ」のIDに名前を付けます。
ここでは「rectangle」と付けました。

まず、初期状態で勝手に再生してしまいますので、起動したら動作を止める必要があります。
「タイムライン」の右上にある「詳細モード」への切り替えアイコンをクリックします。
いままでのクイックモードは切り替えポイントだけ表示されていましたが、詳細モードは時間軸✕レイヤーで表示され、より細かい設定ができるようになります。

幅が狭かったら右上のスケールを変更するつまみで広げてください。
現在のタイムラインが0sであることを確認して「イベントを追加」ボタンを押します。

現在タイムラインのあるところ（0s）と「イベント」との交点に▶（実際には菱形ですが、半分隠れています）が生成されました。
「イベント」は全体の設定と考えるとわかりやすいかもしれません。
この時間軸にきたときに、このイベントを起こす、という指定ができるようになります。
いま生成された▶をダブルクリックします。

アクションを「pause」、レシーバを「document.body」を設定して、OKで設定を完了します。
これで、「この時間になったら全体を停止する」という命令が完了しました。
タイムラインの再生ボタン「▶」では今まで通り動いてしまいますが、右上のプレビューで確認すると停止するのがわかると思います。

次に、要素をクリックしたらアニメーションするようにします。
今度は、イベントウィンドウからイベントを追加してみましょう。
左下にある「イベント」の左下にある「＋」をクリックします。

ここでは、「長方形要素rectangleがクリックされたらアニメーションする」という動きをしたいので、「何を」を指すターゲットは「rectangle」を選択します。
ちなみに、長方形が選択された状態でイベントを追加した場合はこの画面は表示されません。次のイベント選択画面が表示されます。

次は、「どうしたら」を指定します。マウスでクリックされたら動くようにしたいので、「マウス」の「click」を指定します。

続いてアクションを指定します。アクションは「どうなる」を指定します。ここでは再生したいので「タイムライン」の「play」を選びます。

最後にレシーバー「何が」を指定します。
「document.body」を選択してください。

「OK」を押して設定を完了します。

今設定した内容が、イベントウィンドウに追加されました。

右上の「プレビュー」から再生してみてください。
長方形の要素をクリックしたらアニメーションすれば成功です！

出力されるコード

ここまでの簡単なチュートリアルはともかく、肝心なのは出力されるコードです。
実は今回検証しようと思ったのは、別のWebアニメーションツールから出力されたものがWebサイトに組み込みにくく、他のツールはどうなんだろうかと調べたのがきっかけでした。

右上の「パブリッシュ」からローカルにファイルを書き出してみましょう。

ローカルに出力されたファイルを確認するとわずか２ファイル。

htmlファイルには直接CSSやJSの記述がありますが、分離されて処理しやすいようになっています。
HTMLのbodyに書かれていたのは、２行

<svg data-gwd-shape="rectangle" class="gwd-rect-1l49 gwd-gen-1umvgwdanimation" id="rectangle"></svg>
<div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="0.1"></div>

長方形の描画と、先頭でストップさせる指示のようです。
ちなみに、２行目のdata-event-time="0.1"は、0.1秒後に実行する、ということなので、起動後ちょっと動いて止まる感じがあると思いますが、それを止めるためにはここの値を0にすれば起動直後にまったく動かなくなります。

コードを見てみるとわかりますが、非常に組み込みやすい出力の印象です。
簡単な動きだったのが大きいと思いますが、今後もう少し複雑な動きで他のツールとの違いも試してみたいと思います。

まとめ

実はもう一つお伝えしたいのが、この記事は一切マニュアルや他のサイトの情報などを見ないで書いたという点です。
もともと私がFlashを使ったことがあるため直感的に作成できたのだと思いますが、この程度の簡単なアニメーションであればマニュアルを見なくても作成できるのは非常に大きいと思います。
この他にも「コンポーネント」機能で、簡単に複雑な機能を追加できたり、マスク機能、レスポンシブにも対応していたり、無償で提供されているツールの割にはやりたいことはなんでもできる印象です。

ちょっとこの記事を読んで気になった・・・というかたは是非一度触ってみてください。