マーケティングキャンペーン機能の新エディタ(Beta)について

マーケティングメールのハンズオンを担当している菊田(@kikutaro_)です。

SendGridのマーケティングキャンペーン機能を日々ご利用いただいている方々は既にお気づきかと思いますが、先日、エディタのデザインや機能に変更がありました。まだBeta版ですが、便利な機能がたくさん追加されているので、是非ご活用いただければと思います。本日のブログでは、主な変更点について紹介していきます。

デザインエディタとコードエディタの選択

1番大きな変更点は、メール作成のはじめにエディタの種類を選択するようになった点です。キャンペーン作成のボタンを押すとメールをビジュアルに編集する「デザイン」エディタHTMLを直接編集する「コード」エディタを選択するメニューが表示されます。

NewEditor

以前までのエディタ(以降、「旧エディタ」と表現)では、下図のように、エディタの中で「デザイン」「コード」を切り替える形式となっていました。

OldEditor

作業途中でエディタを切り替えできて便利だったのに!という方もいらっしゃるかもしれませんが、わかりづらい点もありました。具体的には、手動でコードを編集した後、デザインモードに切り替えて編集すると、せっかく書いたコードが上書きされて消えてしまうという動きです。もちろん上書き前に警告は表示されるのですが、せっかく書いたコードが消えてしまった、という経験をされた方もいらっしゃったのではないでしょうか。

今回の新エディタでは、入り口でエディタの種類を分けることで、上記のようなミスをなくすデザインへと変わりました。また、コードの編集に関しては、後述する「モジュールのHTML編集機能」によって引き続き可能ですので、全体的には使い勝手が向上した形となっています。

HTMLエクスポート

今回のリリースで新しく「Export HTML」メニューが増えました。名前のとおり、HTMLをエクスポートする機能です。この機能により、キャンペーンのHTMLを保存したり、デザイン含めてまるごとファイルで受け渡したりできます。

キャンペーン一覧のアクションメニューから「Export HTML」を選択してください。すると、キャンペーンの名称が付いたテキストファイルがダウンロードできます。

ExportHTMLMenu

このエクスポート機能は、デザインエディタ内でも実行可能です。「Build」タブADVANCEDから「Export」ボタンを押してください。

ExportHTMLMenuDesign

モジュールのHTML編集機能

マーケティングキャンペーン機能では、メールの部品となるボタンやラベルをモジュールと呼び、ドラッグ&ドロップで自由に配置することができます。下図はボタンモジュールを配置した状態ですが、新エディタでは右上に「< >」のマークが表示されています。

DefaultEditHTMLModule

こちらをクリックすると、このモジュールのHTMLが表示されます。

BeforeModuleHTML

HTMLコードは、ウィンドウ内で自由に編集できます。したがって、HTMLやCSSに慣れた方は、簡単にデザインやコンテンツを編集できます。試しにボタンのカラーコードや丸み具合、表示文字を編集してみましょう。

AfterModuleHTML

下図のようにボタンのデザインやテキストが変わりました。部分的な修正をする場合、とても便利です。

EditHTMLModule

コードモジュール(Code Module)

さきほど紹介した「モジュールのHTML編集機能」は、配置したモジュールのHTMLを編集する機能でした。新しいエディタでは、コードそのものをモジュールとして定義できるようになっています。言葉では少しわかりにくいので、実際に試した例を示します。

「Build」タブADD MODULESから「Code」モジュールを選び、ドラッグ&ドロップで配置します。

CodeModule

配置すると、モジュールのHTML編集機能と同様に、ウィンドウが表示されます。今回のウィンドウの中身は空の状態で、ここへ自由にHTMLを記述できるようになっています。

CodeModuleEditor

この機能をうまく活用すると、例えばオープンに公開されているメールテンプレートの部品を簡単に利用できます。ここでは例として、Responsive Email Patternsにあるレスポンシブなサムネイルリストを使ってみたいと思います。

ThumbnailsList

表示されているコードをコピーして、コードモジュールにそのまま貼りつけます。

CodeModulePaste

デザインを確認すると次のように表示され、簡単に部品として利用できました。

ThumbnailsPcView

マーケティングキャンペーン機能ではモバイルプレビューができるので、今回のようなレスポンシブな部品をリアルタイムに表示確認できます。これで見栄えの良いキャンペーンメールを今まで以上に効率よく作成できます。

ThumbnailsMobileView

HTMLヘッダの設定

デザインエディタ内でHTMLヘッダを設定できるようになりました。BuildタブADVANCEDからEDIT HTML HEADを選びEditボタンを押してください。

EditTemplateHTMLHead

するとHTMLのheadタグだけ含んだウィンドウが表示されます。

DefaultHeadEditor

この機能を利用すると、Webフォントや日本語フォントを簡単に利用することができます。例としてGoogle Fontsを試してみましょう。ここでは「Indie Flower」というフォントを選びました。

SelectGoogleFonts

Google Fontsではheadタグに埋め込む値も表示してくれるので、コピーしやすいよう表示しておきます。

SettingGoogleFonts

タグをコピーして、headタグで以下の定義を行いました。divタグのフォントをGoogle Fontsに変更するための定義です。

SetGoogleFontsToHead

では早速、テキストのモジュールを配置してみます。

SetGoogleFontsModule

配置した時点ではデザインエディタのままなので、フォントが適用されていないようにみえる点にご注意ください。実際にフォントを確認するにはプレビューモードへ切り替えます。

PreviewGoogleFonts

プレビューするとGoogle Fontsが適用されて表示が変わりました。このように、HTMLヘッダでスタイルなどの定義を簡単に行えます。

送信確認ダイアログ

完成したマーケティングキャンペーンのメールを送信するSend Campaignボタンにも小さな変更が入りました。ボタンを押した際に「送信確認ダイアログ」が表示されるようになりました。小さな変更ですが、誤送信を防ぐのにとても有効な機能です。

ConfirmDialog

Blank Template

キャンペーン作成の際、Blank Templateという空のテンプレートを選択できるようになりました。

BlankTemplate

こちらを選択すると、基本的なHTMLタグ(<html>や<head><body>など)だけが付いたエディタが開きます。自らHTMLを記述したり、既にあるHTMLをコピー&ペーストしたり、と自由度の高い操作が可能となっています。

キャンペーンのプレビュー

新エディタでは新しく「Preview」メニューが追加されました。こちらは旧エディタにあるPC・モバイル・テキストのプレビュー機能と差異はありません。

プレビューに関しては、小さい拡張ですが、メールデザインの上に「From」「Subject」「Preheader」が常に表示されるようになり、確認しやすくなっています。

PreHeader

SNSのアイコン表示

こちらもかなり小さな変更ですが、地味に嬉しい変更です。SNSモジュールを使ったとき、URLが入っていないSNSがあったとします。

SNSIcon

以前は使っていないSNSでもグレーアウトされたアイコンが表示されてしまう仕様でした。今回の新エディタでは下図のように利用しているSNSアイコンのみ表示される仕様となっています。

ResultSNSIcon

さて、ここまで新しい機能について色々ご紹介してきました。最後に、以前の旧エディタで作成したキャンペーンメールの編集がどうなっているのか?ご紹介します。

旧エディタで作成したキャンペーンの編集

以前の旧エディタで作成したキャンペーンを開くと、旧エディタのまま表示されます。もちろん、そのまま編集も可能です。旧エディタを利用している場合、下図の画面上部のように「YOU ARE USING THE OLD EDITOR」と表示されています。
OldEditorEdit

右上に「Switch Beta Editor」メニューがありますが、こちらをクリックすると、新しいエディタへ切り替わります。旧データへ簡単に戻せるよう、データは自動的に新しくコピーされますので、安心してご利用ください。

さいごに

いかがでしたでしょうか?突然デザインが変わって驚いた方もいらっしゃるかと思いますが、便利な機能がたくさん加わっているので、是非このブログを参考にして触ってみてください。

8月3日(木)に開催する「【マーケター向けセミナー】SendGridマーケティングメールハンズオン【無料】」は、今回ご紹介した機能をハンズオン形式で触っていただくセミナーとなっております。まだよくわからない!実際に触ってみたい!という方は、是非セミナーへご参加ください。