• Skip to primary navigation
  • Skip to main content

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

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

  • いしこん 3.0
  • 無料ウェビナー
  • もう1本読む?
    • 【初心者でもわかる】失敗しないセールスファネル完全攻略ガイド:リード獲得から高額商品販売まで、売上を最大化する自動化戦略
    • 個人事業主のためのAIツール活用術|ChatGPTから始めるビジネスの自動化・効率化マスターガイド
    • ネット広告代理店を個人で開業!Facebook広告運用のスキルを身につけて成功する方法|ツールの設定、数値分析、営業、業務効率化まで
    • 【保存版】コンテンツマーケティングのネタ切れを防ぐ!ネタの見つけ方と戦略のコツ
    • 上級者をペルソナに設定し優良顧客だけを集める方法
    • Eメールマーケティングの基礎知識|開封率と成約率の向上、セグメンテーションまで
    • 30代フリーランスが家族と一緒にオランダに移住した体験を話します
    • Webマーケティングのやり方マスター講座|ブランディング戦略、SNS発信、スケジュール管理を解説
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • スクール
  • Show Search
Hide Search
現在の場所:ホーム / ScreenFlow / GIFアニメーションで魅力的なHTMLメルマガのヘッダーを作る方法

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

Last updated on 2018年2月4日 By 石崎 力也

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

今回お届けするノウハウはこちら

  • #01_BAMBOO SLATESを使う
  • #02_ポイントは動かしたい部分を別レイヤーで保存すること
  • #03_作りたいGIFアニメーションはこんな感じ
  • #04_タイトルをレイヤー保存する(テンプレート部分)
  • #05_二本の線をレイヤー保存する(テンプレート部分)
  • #06_BAMBOO SLATESからパソコンにデータを送信する
  • #07_After Effectsに直接PNGファイルを読み込む
  • #08_After Effectsで位置の変更と縮小する方法
  • #09_After Effectsのパペットピンツールで線にピンを打つ
  • #10_After Effectsのパペットピンツールでループの動きを作る方法
  • #11_After EffectsでMOVとして書き出す
  • #12_After Effectsでプリコンポーズしてテンプレート化する
  • #13_BAMBOO SLATESで可変部分を書きPCに送信する 
  • #14_After Effectsに可変部分を追加して再度MOVで書き出す
  • #15_ScreenFlowにMOVファイルを読み込む方法
  • #16_ScreenFlowでキャンバスサイズ(書類設定)を変更する方法
  • #17_ScreenFlowでGIFアニメーションを書き出す時の最適な設定

#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にチェックマークを入れて、書き出します。よし、これで完成。

https://www.youtube.com/playlist?list=PLo66hGLPU3VZxUHf5Cd5xyyVCD56ujrEm

カテゴリScreenFlow 関連タグ:after effects, GIFアニメーション, ScreenFlow, Wacom bomboo slates, パペットツール, 作り方

About 石崎 力也

石川県金沢市出身。モントリオール在住。専門スキル:競艇、コピーライティング、DRM、アニメーション。このサイトの運営責任者です。2013年3月に六本木と西麻布で会社を設立し、同年11月までに全てのメディア・広告事業を軌道に乗せる。現在は、家族と一緒に、3か月に1度、住む国を変えながら生活をしています。

「デジタルマーケティング完全ガイド」を無料プレゼント0円でダウンロード

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

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki