2020年10月26日

デザイン探索

Adobe AnimaiteによるGIFアニメーション作成

アニメーション

皆さんこんにちは。
クリエイターの村本です。

今回、サイトで使用するGIFアニメーションを作成するために
「Adobe Animate」を利用しました。
これまでにもGIFアニメーション自体は作成したことはあったのですが
「Animate」の利用は初めてだったので、
今後のために手順や注意点をまとめておきたいと思います。

前提

・簡単な「イラストアニメーション」を作りたい方
・Illustrator、Photoshopは使ったことあるけどAnimaiteを使うのは初めてな方向け

作業全体の流れ

[XD]…Adobe XD
[AI]…Adobe Illustrator
[AN]…Adobe Animaite

0.Animateのヘルプから確認できる『実践チュートリアル』をみて基本を学ぶ

1.[XD]カンプのイラストを、書き出す画像ごとにAIファイルに変換
2.[AI]でイラストの調整
  ※この時、動かしたいオブジェクトと、動かさないオブジェクトをグループ分けしておく
3.[AN]でアニメーションを作成し、gif形式で画像を書き出す
  →詳細は下記参照
4.画像のファイルサイズを圧縮する
  ※アニメーションGIFは、動きが複雑になるとサイズが大きくなってしまいます。
   アニメーションGIF用のファイル圧縮サイトなどの利用がおすすめです。
5.HTMLでjpg、pngと同様に実装する

Adobe AnimaiteによるGIFアニメーション作成

1.[AN]を起動し新規作成する。
2.「ファイル>(ステージに)読み込み」をクリックして、
  作成する元画像の[AI]ファイルのデータを取り込む。
3.タイムライン上でアニメーションの設定を行う。

  ① 動かしたいオブジェクトだけを別レイヤーにしておく
  ② 動かすレイヤーの初期フレームを選択して、オブジェクトを初期状態に調整する
  ③ 調整したオブジェクトを選択して「シンボル」にする
  ④ オブジェクトを選択してアニメーションの基準点を設定する
    (これを忘れると、上手く動かないので注意)
  ⑤ 全レイヤーの終了位置を選択して「キーフレーム」を作成する
    (初期状態と同じ設定のオブジェクトがコピーされる)
    ※動きをループさせることを意識しておく
  ⑥ タイムラインの真ん中を選択して「キーフレーム」を作成する
    この時、アニメーションの動きに合わせてオブジェクトを移動させる
  ⑦ 作成したキーフレームの間を選択して「トゥイーン」を選択し、エフェクトを設定する
    ※キーフレーム間のアニメーションパターンを設定する
  ⑧必要な場合、マスク用のレイヤーを作成する
   (通常通りレイヤーを追加し、右クリックで「マスク」を選択すると
    マスク用のレイヤーになる)

4.「ファイル>書き出し>アニメーションGIFを書き出し」をクリックして画像として書き出す。
  ※画像に透過部分がある場合
   ステージの色=透過部分と判断されるようです。
   [AN]はステージの色がデフォルト#FFF(白色)になっています。
   ですので、イラスト自体に白色を使っていると、その部分まで透過で書き出されてしまいます。
   透過にしたくないときは、ステージの色を変更することで解決できます。

まとめ

まずは、Animateのヘルプから確認できる『実践チュートリアル』を試してみてください。
Adobe Illustratorの基本が使える方なら、なんとなく理解できます。
あとは、実際に使ってみてアニメーション特有のツールに慣れるだけです。

私も今回初めて使ってみましたが、2時間ほどで
チュートリアルの確認と、画像の書き出しまでできました。
アニメーションが作れると、表現の幅も広がります。
ツールを使えば思ったより簡単にできるので、興味がある方は試してみてはどうでしょうか。

筆者が書いたこちらの記事も人気です。合わせてどうぞ

#画面サイズが変わっても、画像を伸び縮みさせずに表示させる方法

#width指定が効かない?Flexboxは子要素の横幅指定がポイント

#タブレットはPC表示?スマホ表示?

#slick.jsを使う際の注意点

関連記事

Webサイトに置ける各コンテンツの役割と、なぜそれが必要なのか?

「グローバルナビゲーション」の役割・見せ方
「トップページ」の役割・見せ方_1/2
「トップページ」の役割・見せ方_2/2
「特徴/他社との違い/選ばれる理由」の役割・見せ方
「実績/お客様の声」の役割・見せ方
「サービス/商品の詳細情報(一覧)」の役割・見せ方
「よくあるご質問」の役割・見せ方
「お問合せ/予約/購入」ページの役割・見せ方
「お知らせ/ブログ」ページの役割・見せ方
「採用情報」ページ(サイト)の役割・見せ方

その他人気の記事

#松岡修造さんが海外にいると日本に寒波が襲来する

#大企業が自社サイトでWordPressを使わない3つの理由

#JavaScriptでunix時間を一般時間に変換する