GIFアニメーションを取り入れたメールの作成方法

この記事は How to Make Your Own Email Gifs の抄訳です。

GIFの読み方は「ジフ」派と「ギフ」派に分かれますが（この話題についてのサイトも存在します）、みんなGIFアニメーションを知っていて大好きですよね。メールでもGIFアニメーションを使ったものがどんどん増えてきています。お菓子メーカーがバレンタインデーに送るメールから、製品をアピールするためのデモ用のメールまで、GIFアニメーションを使うことで視覚的にインパクトのあるキャンペーンメールを送信することができます。

GIFアニメーションがふんだんに使われているサイト（Giphyなど）はたくさんありますが、掲載されているものはあなたのブランドのものではないため、使用する際は著作権表示に気を付ける必要があります。では、オリジナルのGIFアニメーションはどのようにして作ればよいのでしょうか？ 方法はたくさんありますが、この記事では2つご紹介します。

#1. コマ送りのGIFアニメーション

連続した複数の画像を使ってコマ送りのGIFアニメーションを作成することができます。 下図のBrandlessの例では、ストップモーションの原理でGIFアニメーションが作成されています。オブジェクトを少し動かして写真を撮り、また少し動かして写真を撮る…を繰り返していることがお分かりいただけるかと思います。

この方法で重要なポイントは、角度が一定に保たれるように、全ての写真を全く同じ位置から撮影することです。

あるいは、上図のAllBirdsの例のように、一連の共通するデザインの画像を用意し、ストーリー性の高いアニメーションを作成する方法もあります。

下図は無料ツールのGifmakerを使い、3分ほどで作成した愛犬の写真で作ったGIFアニメーションです。 このツールは直感的で最終結果をカスタマイズすることができます。GIFアニメーション作成初心者の方にお勧めです！

#2. 画面キャプチャのGIFアニメーション(専用のソフトウェアが必要です)

私はプロのデザイナーではないので、手頃な価格で使いやすいソフトウェアに魅力を感じます。スクリーンキャプチャのソフトであるCamtasiaはそんなソフトウェアの1つであり、私はCamtasiaを使って製品紹介ページで使われているようなGIFアニメーションや動画を作成しています。

Camtasiaで画面をキャプチャするのはとても簡単です。

1. キャプチャしたい範囲が録画されるようにCamtasiaを設定します。
    
   
2. 「rec」ボタンを押して画面をキャプチャし(前後数秒間長めに録画してバッファを設けるようにします)、その後録画を停止します。
3. 録画したものを編集して、GIFアニメーションに含みたいフレームだけになるようにします（フレームを編集するには、画面下部のメディアバーをクリックしてください）。 キャンバスのサイズを調整して、GIFアニメーションにする領域を変更します。
    
   
4. トップのメニューバーから、 Share > Advanced Exportを選択してGIFフォーマットでエクスポートします。
    
   
   

   Camtasiaは30日間無料で体験利用ができます—詳しくはこちらをご覧ください

以下はユーザーにNordstromアプリのダウンロードを勧めるメールの例です。GIFアニメーションを使用してメール内にアプリの利用イメージを表示するという、先進的な内容になっています。 受信者にアニメーションを見せることで、アプリをダウンロードしてほしいというメッセージとアプリの使用感を明確に伝えることができます。

そして以下がSendGridで作成したメールの一例です：

まとめ

GIFアニメーションのサンプルや作成方法、使用方法の概要をご紹介しましたが、あなたの会社のメールにとって最適な方法はあなた自身がご存じのはずです。メールをよりよくするためにどんなことができるでしょうか？

受信トレイのように様々なメールが混在する場所では、読み手の興味を引き付けるための工夫が必要です。メールを読んでもらえるようになったら、読み続けてもらえるようにGIFアニメーションを使ってワンランク上のメールを作成してみてください！

他のメールデザイン要素に関する詳細およびベストプラクティスのヒントについては、SendGridのメールデザインガイドを参照してください。