Google Web Designerでアニメーション作ってみた
この記事は actindi Advent Calendar 2017 の12月17日の記事です
こんにちは。おでかけ情報サイト「いこーよ」、「いこレポ」デザイナーの後藤です。
突然ですが、デザイナー・コーダーの皆さんに質問です！
CSS3でのアニメーション実装は得意ですか？？
私は不得意ですorz
アニメーションを作ろうと思っても、いちいちググッていい感じのサイト見つけて実装して・・と時間がかかってしまいます^^;
思い描いたアニメーションをぱぱっと作りたい！
そんな願いを叶えてくれるソフトを発見しました。
※以下GWD略
私のためにあるのではと錯覚してしまいそうなネーミング。
作ったアニメーションをHTML/CSSに書き出してくれる優れものです。
操作はFlashに似ているので、Flash経験者はすぐに使いこなせるのではないでしょうか。
広告制作を目的としたソフトですが、広告以外にも使えるのではと思い、実験でいこーよのタイアップ案件で試してみました。
結果・・・めっちゃええやん。
- デザイン提出＞先方確認＞コーディング・アニメーションの実装＞先方確認
というフローでしたが、
GWDを使うことでデザイン提出の時点でアニメーションも見せれるので、先方もイメージしやすく、打ち合い回数が減った（のではないか） - アニメーションの実装が楽になり作業工数が減った
- 画像ソフトをいじる感覚で作れるので、デザインの幅が広がった
今のところメリットしかありませんね。
では早速つくってみましょう
クリスマスシーズンということで、いこレポヘッダー部分をクリスマス仕様にしてみましょう。
デザインはこちら。背景の雪を降らしたいと思います。
ファイル形式はベクターデータのSVGファイルがいいので、Illustratorで制作しました。
はい。かわいいですね〜。
アニメーションはこんな感じにします
- 雪は２パーツに分け、それぞれ動きをつける
- 雪のパーツを上から右下に移動する
- リピートにする
デザインを分解し、パーツ化します
SVGで書き出しました。最近のイラレって書き出すの楽になりましたね〜
GWDを起動します
「ファイル」＞「新規作成」を開きます。
広告「バナー」が正なのか不明ですが、「HTML」を選択するより操作しやすかったので今回は「バナー」にします。
スマホのヘッダー部分にアニメーションを実装するので、幅を750px(375*2)、「レスポンシブレイアウト」にチェックを入れ、「OK」を選択します。
これらの調整はご自由に設定してみてください。
※作成後、ワークスペースの幅や高さを変更したい場合は、右パネル「プロパティ」の「位置とサイズ」から変更できます。
ファイルを読み込んで位置を調整します
「ファイル」＞「アセットを読み込む」からパーツを読み込み、位置やサイズを調整します。
位置・サイズ調整はワークスペース上以外にも、右パネル「プロパティ」の「位置とサイズ」からでも数値で調整することは可能です。
パーツを読み込むと、「タイムライン」パネル上にパーツごとにレイヤーが作られます。
雪に動きを加えます
■ふわっと表示させる
Snow_01を選択し、0.2sに右クリックし「キーフレームを挿入」を選択します。
0sを選択し、「プロパティ」パネルの「塗りつぶし」の数値を「1（透過0%）」から「0（透過100%）」に変更します。
※0.2sで挿入したキーフレームは「1」のままです。
■右下に移動させる
ゆっくり移動したいので、8.5sにキーフレームを挿入します。
挿入した8.5sのキーフレームを選択した状態で、ワークフレーム上の雪画像を右下に移動させます。移動ラインが表示されるのでイメージしやすいですね。
今回は一定速度の動きが良かったのでデフォルトのLinerのままにしていますが、他にも様々な動きを選択できます。
キーフレーム間を右クリックすると、以下のイージングが選べます。
・Linear（デフォルト値） 一定の速度で変化
・Ease 中速で始まりだんだん速度を落ちる
・Ease-out 高速で始まりだんだん速度を落ちる
・Ease-in 低速で始まり高速で終わる
・Ease-in-out 最初と最後は低速、中盤は高速
・Step-end イージング中は開始位置にとどまり、直接終了位置にジャンプ
・Step-start すぐに終了位置にジャンプ
上記以外にもカスタムでイージング調整することも可能です。
■リピートさせる
レイヤ名の隣にあるアイコンをクリックすると、「アニメーションのループ」画面が出るので、「無制限」を選択します。
Snow_02も01同様に設定します。タイムラインを少しずらしてみました。
動きを確認してみましょう
いこレポ（スマホ表示）で見ることができます。 ※12月25日まで
うん。雪っぽいですね。
右上に「プレビュー」をクリックすると、ブラウザ上で確認することができます。
[補足] プレビュー共有機能は今のところないので、GyazoGIFを使う
プレビュー共有ができないので、私はGyazoGIF(動画スクリーンショットソフト)を利用して共有していました。
無料版では８秒しか録画できないので、泣く泣く有料版にアップグレードしました涙
Google様、ぜひプレビュー共有機能をお願いします・・！
実装しましょう
右上にある「コードを表示」をクリックすると、ワークスペース上にコードが表示されます。
いこレポのヘッダーに実装したいので、全部コピペするのではなく、画像部分と画像にあてられたクラス名のスタイルだけもっていきます。
■html
■css
gwd-img-XXのクラスのみ必要
※クラス名がわかりづらいので、名前変更をおすすめします
※keyframeですが、ベンダープレフィックス（@-webkit-keyframes）を追記することをおすすめします
■画像
変更したパスに画像を置きます
調整が必要であればゴニョゴニョしてアニメーションのできあがりです！（雑）
まとめ
いかがでしたか？GWDの本来の使い方ではないですが（笑）、アニメーションの表現が広がりますし、実装工数が減るという素晴らしいソフトだと思うので是非使ってみてはいかがでしょうか。
12月25日までいこレポクリスマスver.になっています。今後もシーズンごとにヘッダーを変える予定なので、ちょくちょく遊びに来てくれると嬉しいです♪
今後もいこーよ・いこレポをよろしくお願いします！
