マーケティングキャンペーン機能でレスポンシブメールを送る

本日のブログでは、前回の「マーケティングキャンペーン機能でセグメント配信を行う」に続いて「マーケティングキャンペーン機能」の便利な機能であるレスポンシブメールについてご紹介します。

レスポンシブメールとは?

レスポンシブ(responsive)とは、一般的には「応答する」「反応する」といった意味の言葉です。Webの世界では「レスポンシブデザイン」「レスポンシブWeb」そして「レスポンシブメール」といった用語がよく用いられます。PCやスマートフォン、タブレットなど、画面の解像度、表示サイズが異なる端末でWebサイトやメールを開いたとき、その端末に適切なデザイン、表示形式で動作することを意味します。モバイル専用の別サイトや別リソース(HTMLなど)を用意しているのではなく、同じサイトで1つのリソースを利用しているのが特徴の1つです。

たとえば、弊社SendGridのWebサイトもレスポンシブWebとなっており、PCとモバイル端末で次のように表示が変わります。

PCで表示した場合


SendGridのWebサイト表示(PC)

スマートフォンで表示した場合


SendGridのWebサイト表示(スマホ)1 SendGridのWebサイト表示(スマホ)2

メニューの表示形式や画像のサイズ、レイアウトが変わり、スマートフォンで操作しやすい形となっているのがわかります。

現在、モバイル端末の普及とともに、Webサイトだけではなく、メールのレスポンシブ表示も重要になっています。事実、今年の9月にGoogleのGmailがレスポンシブに対応するなど、今後さらに需要が高まっていきそうです。

レスポンシブメールを作成したいけど、どうやって作ったらいいのかわからない!HTMLやCSSに詳しい人がいない!とお困りの方もいらっしゃるかもしれません。そういった方々には是非一度SendGridのマーケティングキャンペーン機能で、レスポンシブメールをお試しいただければと思います。

なお、マーケティングキャンペーン機能をまだご利用されたことがない方は、まずはじめに「マーケティングキャンペーン機能を触ってみよう!」のチュートリアル記事をお試しいただければと思います。

SendGridのテンプレートを使ったレスポンシブメール

SendGridのマーケティングキャンペーン機能では、標準テンプレートが10種類用意されており、すべてレスポンシブに対応しています。とても便利なテンプレートですが、残念ながら、これらのテンプレートを使えば100%レスポンシブメールになる、という保証をしているものではありません。モバイル端末の種類やOS、メールのクライアントアプリケーションも数多くあり、そのすべてを網羅することは難しいため、実際に期待通り表示されているか確認することをお薦めします。

SendGridのテンプレート
それではテンプレートをベースに編集してみましょう。今回は「MERCADO」を選びました。


MERCADO

エディタでデザインが表示されます。

マーケティングキャンペーン機能のエディタ
マーケティングキャンペーン機能では、Webブラウザ上でメールを作成・編集することができます。下図のようにロゴ画像をクリックし、「×」ボタンを押してください。


テンプレートのロゴ画像削除

ロゴ画像が消えて「Drag Modules Here」と表示されています。このエリアにはテキストやボタンなど配置することができます。


テンプレートのロゴ画像削除後

今回は別のロゴ画像を配置するものとして、「Build」タブの「ADD MODULES」から「IMAGE」を選択し、先ほどの「Drag Modules Here」エリアへドラッグ&ドロップします。

IMAGE MODULEのドラッグ&ドロップ
下図のように画像ファイルのアップロードダイアログが表示されるので、キャンペーンメールで使うロゴ画像を選びます。


画像ファイルのアップロードダイアログ
配置画像選択後のアップロードダイアログ

画像のプロパティ情報が表示されるので、画像をクリックしたときに開く「Link URL」などを設定します。また、レスポンシブメールを作成する場合には「Responsive」が「ON」となっている必要があるので、必ずチェックしてください。

画像のResponsive確認
ロゴ画像が変わりました。

ロゴの変更後
同様に操作を進めて、メールを作成していきます。今回は次のようなメールを作成しました。

作成したマーケティングメール1
作成したマーケティングメール2
メールを送信する前に、モバイルのプレビューを確認してみましょう。画面上段のメニューにあるスマートフォンのアイコンをクリックすることで切り替えることができます。

モバイルプレビュー
モバイルでのデザインがプレビュー表示されます。機種や解像度などは選べないため、簡易的なプレビュー機能となりますが、1つのWeb画面内でモバイル表示を確認できるのは便利です。

モバイルプレビュー1 モバイルプレビュー2
では、実際にメールをテスト送信してみましょう。マーケティングキャンペーン機能のテスト送信機能で送ります。

PCでメール表示した場合

PCでのメール確認結果1
PCでのメール確認結果2

スマートフォンでメール表示した場合


スマートフォンでの確認結果1 スマートフォンでの確認結果2

スマートフォンでは、PCと異なり、パネルが縦に表示されて、画像も適切なサイズで表示されています。今回、いくつかの実機(iPhone/Android)を利用して確認しましたが、一部、Gmailのアプリで綺麗に表示されないケースなどもありました。この辺りがレスポンシブメールの難しいところです。はじめてレスポンシブメールを送信する前には、可能な限りテストするようにしてください。端末の機種やOSを意識してテストしたい場合は、有償ですがLitmusのようなサービスを利用してテストする工夫が必要です。

おわりに

いかがでしたでしょうか。今回はSendGridのテンプレートを利用してレスポンシブメールを送信する流れを簡単に紹介させていただきました。レスポンシブメールのテンプレートは、現在インターネット上にさまざまな種類のものがあり、対応の幅が広いものも出てきています。SendGridでは、こうしたテンプレートのHTMLを利用することもできるので、是非色々と試してみてください。