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

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

#01_BAMBOO SLATESを使う

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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