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

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

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

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

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

PCで表示した場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ロゴ画像が変わりました。

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

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

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

では、実際にメールをテスト送信してみましょう。マーケティングキャンペーン機能のテスト送信機能で送ります。

PCでメール表示した場合

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

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

おわりに

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