マーケティングキャンペーン機能の新エディタ(Beta)について
- 2017年7月11日
- by 菊田 洋一
- Category: 機能・使い方
マーケティングメールのハンズオンを担当している菊田(@kikutaro_)です。
SendGridのマーケティングキャンペーン機能を日々ご利用いただいている方々は既にお気づきかと思いますが、先日、エディタのデザインや機能に変更がありました。まだBeta版ですが、便利な機能がたくさん追加されているので、是非ご活用いただければと思います。本日のブログでは、主な変更点について紹介していきます。
デザインエディタとコードエディタの選択
1番大きな変更点は、メール作成のはじめにエディタの種類を選択するようになった点です。キャンペーン作成のボタンを押すとメールをビジュアルに編集する「デザイン」エディタとHTMLを直接編集する「コード」エディタを選択するメニューが表示されます。
以前までのエディタ（以降、「旧エディタ」と表現）では、下図のように、エディタの中で「デザイン」と「コード」を切り替える形式となっていました。
作業途中でエディタを切り替えできて便利だったのに！という方もいらっしゃるかもしれませんが、わかりづらい点もありました。具体的には、手動でコードを編集した後、デザインモードに切り替えて編集すると、せっかく書いたコードが上書きされて消えてしまうという動きです。もちろん上書き前に警告は表示されるのですが、せっかく書いたコードが消えてしまった、という経験をされた方もいらっしゃったのではないでしょうか。
今回の新エディタでは、入り口でエディタの種類を分けることで、上記のようなミスをなくすデザインへと変わりました。また、コードの編集に関しては、後述する「モジュールのHTML編集機能」によって引き続き可能ですので、全体的には使い勝手が向上した形となっています。
HTMLエクスポート
今回のリリースで新しく「Export HTML」メニューが増えました。名前のとおり、HTMLをエクスポートする機能です。この機能により、キャンペーンのHTMLを保存したり、デザイン含めてまるごとファイルで受け渡したりできます。
キャンペーン一覧のアクションメニューから「Export HTML」を選択してください。すると、キャンペーンの名称が付いたテキストファイルがダウンロードできます。
このエクスポート機能は、デザインエディタ内でも実行可能です。「Build」タブのADVANCEDから「Export」ボタンを押してください。
モジュールのHTML編集機能
マーケティングキャンペーン機能では、メールの部品となるボタンやラベルをモジュールと呼び、ドラッグ＆ドロップで自由に配置することができます。下図はボタンモジュールを配置した状態ですが、新エディタでは右上に「< >」のマークが表示されています。
こちらをクリックすると、このモジュールのHTMLが表示されます。
HTMLコードは、ウィンドウ内で自由に編集できます。したがって、HTMLやCSSに慣れた方は、簡単にデザインやコンテンツを編集できます。試しにボタンのカラーコードや丸み具合、表示文字を編集してみましょう。
下図のようにボタンのデザインやテキストが変わりました。部分的な修正をする場合、とても便利です。
コードモジュール(Code Module)
さきほど紹介した「モジュールのHTML編集機能」は、配置したモジュールのHTMLを編集する機能でした。新しいエディタでは、コードそのものをモジュールとして定義できるようになっています。言葉では少しわかりにくいので、実際に試した例を示します。
「Build」タブのADD MODULESから「Code」モジュールを選び、ドラッグ＆ドロップで配置します。
配置すると、モジュールのHTML編集機能と同様に、ウィンドウが表示されます。今回のウィンドウの中身は空の状態で、ここへ自由にHTMLを記述できるようになっています。
この機能をうまく活用すると、例えばオープンに公開されているメールテンプレートの部品を簡単に利用できます。ここでは例として、Responsive Email Patternsにあるレスポンシブなサムネイルリストを使ってみたいと思います。
表示されているコードをコピーして、コードモジュールにそのまま貼りつけます。
デザインを確認すると次のように表示され、簡単に部品として利用できました。
マーケティングキャンペーン機能ではモバイルプレビューができるので、今回のようなレスポンシブな部品をリアルタイムに表示確認できます。これで見栄えの良いキャンペーンメールを今まで以上に効率よく作成できます。
HTMLヘッダの設定
デザインエディタ内でHTMLヘッダを設定できるようになりました。BuildタブのADVANCEDからEDIT HTML HEADを選びEditボタンを押してください。
するとHTMLのheadタグだけ含んだウィンドウが表示されます。
この機能を利用すると、Webフォントや日本語フォントを簡単に利用することができます。例としてGoogle Fontsを試してみましょう。ここでは「Indie Flower」というフォントを選びました。
Google Fontsではheadタグに埋め込む値も表示してくれるので、コピーしやすいよう表示しておきます。
タグをコピーして、headタグで以下の定義を行いました。divタグのフォントをGoogle Fontsに変更するための定義です。
では早速、テキストのモジュールを配置してみます。
配置した時点ではデザインエディタのままなので、フォントが適用されていないようにみえる点にご注意ください。実際にフォントを確認するにはプレビューモードへ切り替えます。
プレビューするとGoogle Fontsが適用されて表示が変わりました。このように、HTMLヘッダでスタイルなどの定義を簡単に行えます。
送信確認ダイアログ
完成したマーケティングキャンペーンのメールを送信するSend Campaignボタンにも小さな変更が入りました。ボタンを押した際に「送信確認ダイアログ」が表示されるようになりました。小さな変更ですが、誤送信を防ぐのにとても有効な機能です。
Blank Template
キャンペーン作成の際、Blank Templateという空のテンプレートを選択できるようになりました。
こちらを選択すると、基本的なHTMLタグ（<html>や<head><body>など）だけが付いたエディタが開きます。自らHTMLを記述したり、既にあるHTMLをコピー＆ペーストしたり、と自由度の高い操作が可能となっています。
キャンペーンのプレビュー
新エディタでは新しく「Preview」メニューが追加されました。こちらは旧エディタにあるPC・モバイル・テキストのプレビュー機能と差異はありません。
プレビューに関しては、小さい拡張ですが、メールデザインの上に「From」「Subject」「Preheader」が常に表示されるようになり、確認しやすくなっています。
SNSのアイコン表示
こちらもかなり小さな変更ですが、地味に嬉しい変更です。SNSモジュールを使ったとき、URLが入っていないSNSがあったとします。
以前は使っていないSNSでもグレーアウトされたアイコンが表示されてしまう仕様でした。今回の新エディタでは下図のように利用しているSNSアイコンのみ表示される仕様となっています。
さて、ここまで新しい機能について色々ご紹介してきました。最後に、以前の旧エディタで作成したキャンペーンメールの編集がどうなっているのか？ご紹介します。
旧エディタで作成したキャンペーンの編集
以前の旧エディタで作成したキャンペーンを開くと、旧エディタのまま表示されます。もちろん、そのまま編集も可能です。旧エディタを利用している場合、下図の画面上部のように「YOU ARE USING THE OLD EDITOR」と表示されています。
右上に「Switch Beta Editor」メニューがありますが、こちらをクリックすると、新しいエディタへ切り替わります。旧データへ簡単に戻せるよう、データは自動的に新しくコピーされますので、安心してご利用ください。
さいごに
いかがでしたでしょうか？突然デザインが変わって驚いた方もいらっしゃるかと思いますが、便利な機能がたくさん加わっているので、是非このブログを参考にして触ってみてください。
8月3日(木)に開催する「【マーケター向けセミナー】SendGridマーケティングメールハンズオン【無料】」は、今回ご紹介した機能をハンズオン形式で触っていただくセミナーとなっております。まだよくわからない！実際に触ってみたい！という方は、是非セミナーへご参加ください。
