動く画像(アニメーション)を使ったHTMLメールの作り方

2017年07月05日

最近では、メルマガにHTMLメールを活用する企業が、BtoCビジネスだけでなく対法人取引(BtoB)でもよく見るようになってきました。

HTMLメールはテキストメールと比べて、メールの表現方法が増えるため、反応率やコンバージョンを高める工夫が可能です。

その1つがアニメーションGIFです。今日は、アニメーションGIFをHTMLメールで活用する具体的な方法を解説します。

1.HTMLメールで画像が動く仕組み

HTMLメールで動く画像を活用するための基礎知識をおさらいしていきましょう。動くHTMLメールには、HTMLメールとアニメーションGIFを活用します。

まずはHTMLメールとアニメーションGIFなど、HTMLメールで画像が動く仕組みの理解をしましょう。

1-1.HTMLメールとは

HTMLメールとは、HTML言語を使って作成したメールコンテンツです。テキストメールでは実現できなかった、画像の活用、フォントサイズや色の変更、メール本文のレイアウトや配色を自由度高く変更できます。

HTMLメールをくわしく知りたい方は
HTMLメールの詳細については別の記事「HTMLメールとは|メルマガ担当者が知っておきたい基本事項のまとめ」でまとめました。合わせてごらんください。

HTMLメールを使うことで、テキストメールでは難しかった視覚効果の高いメールを送ることができます。メルマガの反応率アップが期待できます。

1-2.アニメーションGIFとは

HTMLメールの動く画像の部分では、アニメーションGIFを利用します。つまり、アニメーションGIFをHTMLメールに埋め込むことで、動きがある視覚効果の高いメールコンテンツを作成できます。

アニメーションGIFとは、GIFという画像のフォーマットの仕組みを利用して、複数の静止画をまるで動画のように次々と表示できる画像形式です。詳しいアニメーションGIFの説明は割愛しますが簡単に説明すると、複数の静止画をあらかじめ設定した表示時間で次々に表示できる画像フォーマットであると理解してください。

アニメーションGIFのファイル形式は、「.gif」です。「gif」は「ジフ」と呼ぶことが一般的です。順次入れ替わる複数の画像があるにもかかわらず、1つの「gif」ファイルで保存できることも、アニメーションGIFの特徴です。

1-3.HTMLメールの画像が動く仕組み

HTMLメールは、HTML言語で書かれたオブジェクトを埋め込むことができます。HTMLメールでは、画像をメール本文に埋め込み、表示することができます。

HTMLメールにGIFファイル(アニメーションGIF)を埋め込めば、HTML本文で動く画像の表示ができるようになります。

2.アニメーションGIFの作り方

続いて、HTMLメールに埋め込むアニメーションGIFの作り方を説明します。Photoshopで作る方法と、無料のクラウドサービスで作る方法を説明します。

2-1.ソフトウエア(Photoshop)でアニメーションGIFを作る

HTMLメール用のアニメーションGIFはPhotoshopを使うと簡単に作成できます。大まかな作業は、アニメーション化したい画像をPhotoshopで取り込んで、アニメーションのタイミングや時間などを設定して、アニメーションGIFを保存するという流れになります。

AdobenのアニメーションGIF作成のチュートリアル
Photoshopを使ったアニメーションGIFの作り方は、Photoshopの提供元であるAdobeがくわしく解説しています。
https://helpx.adobe.com/jp/photoshop/how-to/make-animated-gif.html

HTMLメール用のアニメーションGIFをPhotoshopで作成するメリットは、アニメーションGIFの各画像の表示時間、トランジション(画像と画像の移り変わりの設定)などが細かく設定できることでしょう。

HTMLメールでこだわったアニメーションGIFを作りたい方には、PhotoshopでアニメーションGIFを作成することをお勧めします。

2-2.無料のクラウドサービスでアニメーションGIFを作る

アニメーションGIFをPhotoshopで作ると、さまざまな細かい設定が可能です。でも、マーケティング担当者でPhotoshopを自分のPCにインストールしている人は、あまりいないでしょう。

次のアニメーションGIFの作り方は、無料のクラウドサービスを使う方法です。Photoshopのようなソフトウエアのインストールは不要です。では早速アニメーションGIFを作成できるサービスを紹介していきます。


https://ao-system.net/gifanima/

アニメーションGIFが作成できるこのサイトでは、複数の静止画からアニメーションGIFの作成をします。画像の表示時間や透過など割と細かい設定ができます。

アニメーションGIFに利用できる画像は、30枚まで対応しています。Photoshopがなくても十分に細かいアニメーションGIFの設定ができると言えます。

上記画面内の「画像ファイルを選択」で、アニメーションGIFに利用したい画像をアップロードします。アニメーションGIFで利用したいすべての画像(静止画)をアップロードしたら、最後に「アニメーションGIFを作成」をクリックして、できあがったアニメーションGIFを保存します。

このサイトのサービスは、インターネットエクスプローラー(IE)に対応できません。なぜなら、IEは仕様上、画像をGIF形式で保存できないからです。ChromeやFirefox、SafariでアニメーションGIFを作りましょう。

IEでアニメーションGIFを作りたい場合には
どうしてもIEでアニメーションGIFを作る場合には、以下のURLのサービスを使いましょう。先ほどアニメーションGIFを作る方法として紹介したWebサービスよりも機能は限定される傾向にあります。
http://www.bannerkoubou.com/anime/
http://mcgif.nexz.jp/

2-3.できあがったアニメーションGIF

無料のクラウドサービスを使って作成したアニメーションGIFはこのようになりました。次からこのアニメーションGIFを使って実際にHTMLメールを作成していきます。

このアニメーションGIFに使った画像は、当社の製品紹介サイト「Kairos3 SFA」にあります。

2-4.MS Office製品でアニメーションGIFをつくる

メルマガ担当者にとってアニメーションGIFの悩みは画像作成にあるでしょう。Photoshopのような高価なソフトが仕事用のパソコンにインストールされていない場合、画像の作成は他の誰かに頼まなくてはなりません。

例えば、パワーポイントでアニメーションGIFのための画像素材を作ることができます。以下はパワーポイントで作成した画像を元に、先ほど紹介したWebサービスでアニメーションGIF化しました。

パワーポイントのメニュー、ファイル > ページ設定でおおよその縦横比をそろえました。「7月10日」が黒と赤の2つのパワーポイントファイルを用意(コピー)して、それぞれエクスポートでJPGファイルに保存しました。

保存したそれぞれの画像を前述のWebサービスを使ってアニメーションGIFにしています。

HTMLメールの見出しやタイトルを文字ベースで少し強調したい場合などに活用できます。メルマガで読者に取っていただきたい行動がある場合には、パワーポイントでアニメーションGIFをつくる方法が使えるかもしれません。

3.HTMLメールを作る

アニメーションGIFを作成したら、そのアニメーションGIFをHTMLメールに埋め込んでみましょう。

メルマガやニュースレターなどのマーケティングメールでアニメーションGIFを活用すると、商品やサービスのメッセージがよりしっかりと伝わりやすくなります。

3-1.アニメーションGIFをHTMLメールへの埋め込む

アニメーションGIFで作成した動く画像は、HTMLメールに埋め込むことができます。

みなさんがいつも利用しているメールソフトでもHTMLメールの作成をサポートしています。きっと簡単にHTMLメールにアニメーションGIFを埋め込むことができるでしょう。

ただ、通常マーケティングメールではないメールでアニメーションGIFを使わないと思います。

アニメーションGIFを自分のメールソフトで利用する場合の注意点
HTMLメールの編集画面で画像を埋め込むだけでアニメーションGIFを添付できます。ただ、いくつかのメールソフトでは、埋め込んだだけでは、アニメーションGIFの動作を確認できません。その場合は、自分自身にアニメーションGIFを埋め込んだHTMLメールを送ることで動作確認しておきましょう。

マーケティングオートメーション「Kairos3」では、アニメーションGIFも簡単にHTMLメールに埋めることができます。HTMLメールの表示したい箇所でアニメーションGIFのファイルを選ぶだけで、アニメーションGIFをアップロードして該当箇所に埋め込みます。

最近のクラウド型のメール配信機能ではおおよそこのような簡単な運用でアニメーションGIFをHTMLメールで活用できます。

3-2.HTMLメールとアニメーションGIFの動作をチェック

HTMLメールにアニメーションGIFを埋め込んでも、そのままの状態ではアニメーションGIFが動作しないメールソフトがほとんどかと思います。そのため、HTMLメールでアニメーションGIFの動作を確認することをおすすめします。

アニメーションGIFを埋め込んで作成したHTMLメールを、自分のメールアドレスに送信して、画面上でアニメーションGIFの動作を確認してみましょう。

最近ではスマートフォンでメールを読む機会も増えています。そのため、アニメーションGIFの動作の確認は、パソコンだけでなくスマートフォンでの確認もお勧めします。

3-3.マルチパートメールの設定をしておく

HTMLメールを送ると、まれに「真っ白なメールが送られてきた」と受信者から報告を受けることがあります。これは受信側の環境でHTMLを拒否しているか、そもそもHTMLを読むことができないことが原因です。

マルチパートメールについて
マルチパートメールとは、1つのメール本文で「HTML形式」と「テキスト形式」の両方のメッセージを同時に送るメールのことです。マルチパートメールの詳細は「マルチパートメール配信でHTMLメールの開封率をアップしよう」にまとめました。合わせてごらんくださいませ。

メール配信システムなどを利用してHTMLメールを送信するときには、必ずマルチパートメール配信することをおすすめします。特にメルマガでは「真っ白なメールが送られてきた」とクレームを受けることがあります。このような事態を避けるためにも、HTMLメールに加えて別途テキストメールを用意し、マルチパートメール配信することを心がけましょう。

ほとんどのメール配信システムでは、マルチパートメール配信が可能です。

4.さいごに

アニメーションGIFをHTMLメールに活用すると、メルマガの資格効果がグッと良くなるだけでなく、CTR(クリック率)にも良い影響を期待できます。

アニメーションGIFは動画に比べて比較的簡単に作成できます。パワーポイントと無料のWebサービスを使って作ることができるので、みなさんもぜひお試しくださいませ。

  • このエントリーをはてなブックマークに追加