• Skip to primary navigation
  • Skip to content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
You are here: Home / Archives for after effects

after effects

GIFアニメーションで魅力的なHTMLメルマガのヘッダーを作る方法

投稿日:2018年1月23日 最終更新日:2018年2月4日 By 根本 耕輔

最近、海外のHTMLメルマガやブログでは、GIFアニメーションが流行っています。動きがあって魅力的なので、一瞬で読者の視線を釘付けにすることができるんですね。しかも、動画ファイルと比べて容量が小さいので、ブログに載せてもロードするのにそれほど時間がかからないというメリットもあります。この記事では、AdobeのAfter EffectsとScreenFlow、Wacom bamboo slatesを使って、GIFアニメーションの作り方を詳しく説明していきますね。(After Effectsは持っていた方がいいですが、ScreenFlowの代わりに別のツールを使用しても作成可能です。Wacom bomboo slatesもペンタブなどで代用できます。)

#01_BAMBOO SLATESを使う

Wacom bamboo slate

まず、Wacom bomboo slatesを使って、レイヤーごとに書いていきます。これはパソコンを使わずに、作業ができます。まあ、ペンタブを使っている人はパソコンを使う必要があるんですけどね。 

#02_ポイントは動かしたい部分を別レイヤーで保存すること

02 ポイントは動かしたい部分を別レイヤーで保存すること

ポイントは、動かしたい部分だけを別のレイヤーにするということです。なぜこうするかというと、あとでAfter Effectsのパペットツールを使うんですけど、全て同じレイヤーに書いてしまうと、動かしたい部分以外も動きが出てきてしまうからです。 

#03_作りたいGIFアニメーションはこんな感じ

UdemyIncomeReport201710s2

まずは完成したGIFアニメーションを見てください。線のところしか動いてないですよね。ここを別のレイヤーとして保存する必要があります。ちなみに、上のGIFはPhotoshopかillustlatorで書いたのか覚えていないんですけど、線の太さを調節することもできます。bomboo slatesの場合は、ソフトウェアの方で調節して行く必要があります。

#04_タイトルをレイヤー保存する(テンプレート部分)

04 タイトルをレイヤー保存する テンプレート部分

iPhoneでinkspaceというアプリを開きます。タイトルの動かない部分を書いて、レイヤー保存をします。

#05_二本の線をレイヤー保存する(テンプレート部分)

05 二本の線をレイヤー保存する テンプレート部分

次に、動く部分(二本の線)を書いて、先ほどのタイトルとは別のレイヤーとして保存します。重要なので、タイトルのレイヤーと別になっていることを確認してください。

#06_BAMBOO SLATESからパソコンにデータを送信する

06 BAMBOO SLATESからパソコンにデータを送信する

BAMBOO SLATEで書いたデータ(inkspaceに保存したレイヤー)をパソコンに送信します。横文字になっている場合は、ロテーションして、書き出すようにしてください。書き出す際は、Export as PNGを選択します。ここでJPGとかで書き出してしまうと、文字の綺麗さが統一されないので、PNGで書き出すのがポイントです。

#07_After Effectsに直接PNGファイルを読み込む

スクリーンショット 2018 01 23 18 42 42

先ほどパソコンに送信したデータをAfter Effectsに取り込んでいきます。まずは、新規コンポジション>コンポジションを作成していきます。

07 1 After Effectsに直接PNGファイルを読み込む

設定はほとんどデフォルトのままですが、背景色だけ白に変えました。

07 2 After Effectsに直接PNGファイルを読み込む

次に、プロジェクトパネルをダブルクリックして、書き出した2つのPNGファイルを取り込みます。そしたら、2つのファイルをタイムラインパネルにドラッグ&ドロップしておきます。

#08_After Effectsで位置の変更と縮小する方法

08 After Effectsで位置の変更と縮小する方法

取り込んだファイルがキャンバスに対して大きい場合は、コンポジションでダブルクリックをし、Shiftキーを押しながらマウスで大きさを調節します。

#09_After Effectsのパペットピンツールで線にピンを打つ

09 After Effectsのパペットピンツールで線にピンを打つ

実際に線に動きをつける作業をしていきます。動きを出したい方のファイルをクリックして、パペットピンツールでピンを加えていきます。細かい動きをつけたい場合は点を多く打って、そうでない場合は点を少なめにするといいですね。

#10_After Effectsのパペットピンツールでループの動きを作る方法

スクリーンショット 2018 01 23 17 18 24

タイムライン上で、ピンを加えた方のファイルをクリックします。そしたら、左上に青い文字でフレーム数を記入する欄があるのですが、そこに動かしたいフレームの数を入れます。すると、入力した分、タイムライン上の位置が右にずれているのが確認できます。

10 1 After Effectsのパペットピンツールでループの動きを作る方法

ここで、動かすファイルを選択し、パペットツールで動きを加えていきます。

10 2 After Effectsのパペットピンツールでループの動きを作る方法

動きをループさせたい場合は、ループさせるフレームのピンを全てコピーして、ループさせたいフレームにペーストします。

#11_After EffectsでMOVとして書き出す

スクリーンショット 2018 01 23 17 25 12

ピンを打っている最後のフレームで、nキーを打ちます。

スクリーンショット 2018 01 23 17 26 58

そしたら、右クリックして、コンポジションをワークにトリムを選択します。

スクリーンショット 2018 01 23 17 29 16

次に、ファイルを書き出していきます。ファイル>書き出し>レンダーキューを追加をクリックします。

スクリーンショット 2018 01 23 17 31 51

そして、レンダリングしていきます。これで、MOVファイルが書き出されました。

#12_After Effectsでプリコンポーズしてテンプレート化する

12 After Effectsでプリコンポーズしてテンプレート化する

タイムライン上で2つのファイルを選択し、右クリックでプリコンポーズを選択します。これで、テンプレートができました。今度使うときは、この書き出したファイルをタイムラインに追加して行くだけです。

#13_BAMBOO SLATESで可変部分を書きPCに送信する 

13 1 BAMBOO SLATESで可変部分を書きPCに送信する

テンプレート以外の毎回変わる部分をbomboo slatesで書いていきます。

13 2 BAMBOO SLATESで可変部分を書きPCに送信する

そして、ロテーションして、Export as PNGで、ファイルをパソコンに送信していきます。

#14_After Effectsに可変部分を追加して再度MOVで書き出す

14 1 After Effectsに可変部分を追加して再度MOVで書き出す

FinderからAfter Effectsのプロジェクトパネルにファイルを取り込んで、それをタイムラインに追加していきます。

14 2 After Effectsに可変部分を追加して再度MOVで書き出す

そして、キャンバスに合うようにファイルを調節していきます。ここまできたらAfter Effectsでの作業はおしまい。 あとは、この状態でファイルを書き出して行くだけです。

#15_ScreenFlowにMOVファイルを読み込む方法

スクリーンショット 2018 01 23 17 44 33

ScreenFlowで、新規書類を開きます。今回はプリセットを1280×720にしてみました。大きさは各自調節してください。

15 ScreenFlowにMOVファイルを読み込む方法

つぎは、#14で書き出したMOVファイルをメディアライブラリのメディアを追加から読み込んでいきます。そしたら、取り込んだファイルをドラッグ&ドロップでタイムライン上に持ってきます。

#16_ScreenFlowでキャンバスサイズ(書類設定)を変更する方法

16 1 ScreenFlowでキャンバスサイズ 書類設定 を変更する方法

ファイルがキャンバスよりも大きかったら、ビデオの拡大/縮小で調節します。このとき、まずはタイムライン上でファイルを選択しておいてくださいね。

16 2 ScreenFlowでキャンバスサイズ 書類設定 を変更する方法

 あと、キャンバスそのものを変更したい場合は、ファイル>書式設定から、幅や高さを調節します。

#17_ScreenFlowでGIFアニメーションを書き出す時の最適な設定

スクリーンショット 2018 01 23 19 10 19

ファイル>書き出しを選択します。

スクリーンショット 2018 01 23 19 12 22

この際、ScreenFlow6を使っている方はプリセットでAnimated GIFを選択します。ScreenFlow7を持っている方は、手動を選択してから、プリセットでAnimated GIFを選びます。

17 2 ScreenFlowでGIFアニメーションを書き出す時の最適な設定

もしかしたら、プリセットにAnimated GIFが無い場合があるかもしれません。そのときは、管理から追加してみてください。

スクリーンショット 2018 01 23 18 14 25

大きさは、今回は倍率70にしています。HTMLメルマガで使う場合は、推奨される大きさがあると思うので、その大きさを入力しましょう。

17 ScreenFlowでGIFアニメーションを書き出す時の最適な設定

 最後に、カスタマイズでFramerateを5に下げ、Colorsは8、Loopにチェックマークを入れて、書き出します。よし、これで完成。

年収1000万円以上の経営者限定!デジタルマーケティングのオンライントレーニングいますぐ参加する

Copyright © 2019 · Monochrome Pro On Genesis Framework · WordPress · Log in