番外編 レスポンシブメールを送る

マーケティングキャンペーン機能の便利な機能の一つであるレスポンシブメールの作成方法についてご紹介します。

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

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

テンプレートからレスポンシブメールを作成する

SendGridのマーケティングキャンペーン機能では、標準テンプレートが数多く用意されており、すべてレスポンシブに対応しています。

ここでご紹介するテンプレートは100%レスポンシブメールになることを保証をしているものではないことにご注意ください。モバイル端末やOS、メールクライアントには数多くの種類があり、その組み合わせを考慮すると、すべてを網羅することは困難です。 期待通り表示されるかについては可能な限り実環境で確認することをお薦めします。期待通りに表示されない場合、受信環境に合わせて適宜調整を行ってください。 また、外部サービスとなりますが、「Litmus」のようなメールの表示テストを支援するサービスを活用する方法も考えられます。

Webポータルのメニューから「Marketing > Templates」を選択して、「SendGrid Templates」タブを選択すると、SendGridが用意した標準テンプレートが表示されます。

今回は「MERCADO」をベースに編集してみましょう。各テンプレート右下の歯車アイコンから「Create Campaign」メニューを選択します。

エディタが表示されます。

Webブラウザ上でテンプレートを作成・編集することができます。ロゴ画像を変更するため、下図のようにロゴ画像右上の「・・・」にマウスオーバーし、ゴミ箱のアイコンを押してください。

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

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

今回はドラッグ&ドロップの操作をするために、一度画像モジュールを削除する流れで説明しました。単純に画像を差し替えるだけであれば、画像選択後に「Build」タブの「MODULE STYLES」内「Image Properties」の「Edit」からImage Source URLを変更したり、別画像をアップロードすることができます。

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

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

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

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

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

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

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

  • PCでメール表示した場合

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

スマートフォンでは、PCと異なり、パネルが縦に表示されて、画像も適切なサイズで表示されることがで確認できます。