見た目そのまま編集可能なオープンソースのHTMLメールデザインツール「SENDUNE」を使ってみた

SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。

Open source, drag and drop HTML email designer. | SENDUNE
https://designer.sendune.com/

サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。

「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。

標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。

アップロードされた画像を確認し、「Select」をクリック。

ロゴの下の枠にURLを入力すると、ロゴをクリックした際のリンク先を設定できます。URLを入力して保存マークをクリック。

ロゴの下の画像アイコンをクリックすると、ロゴの時と同様の編集メニューが表示されます。

それぞれのパーツの左下には矢印ボタンが存在しており、クリックするとパーツの位置を入れ替える事が可能です。

ゴミ箱マークのボタンをクリックするとパーツを削除できます。

左欄からパーツをクリックすると新たなパーツを挿入可能。「Heading Text」をクリックするとタイトルが挿入され、左の編集画面でテキストを編集するとリアルタイムで文字が反映されました。

「Body Text」では本文用のパーツが挿入されます。こちらも左の欄で編集すると文字がリアルタイムで反映されます。

テンプレートにあらかじめ配置されていた「Button」要素をクリックしてみると、ボタンの色やテキストの色、ボタンのテキスト、リンク先が設定可能でした。テキストを「GIGAZINEへアクセスする」と設定し、リンクをGIGAZINEのトップページに変更。

下部のパーツを一度全削除し、新たにカラムを追加してみます。「One Column」をクリックすると1列のカラムを挿入でき、「Two Columns」をクリックすると左右2列になったカラムが挿入されます。

また、「Video」パーツでは、YouTubeもしくはVimeoにアップロードしたムービーをURLを指定することで埋め込むことが可能です。

フッターではSNSアイコンおよびそのリンク先の設定を行えます。「X」の欄にXのアカウントのURLを入力。

ロゴの色をカスタマイズ可能で、スポイトツール付きの高性能カラーピッカーが用意されていました。

編集できたら保存ボタンをクリック。

なお、その他のSNSアイコンを使用したい場合は検索欄にSNSの名前を入力すればOK。「世界中の全てのSNSに対応しているのでは？」と思えるほど大量のアイコンが用意されていました。

フッターにテキストを挿入する場所も用意されています。

デザインが完成したら「Preview」をクリック。

見た目のイメージを確認できます。

スマートフォンのアイコンをクリックするとスマートフォンの横幅で見たときのサイズを確認可能。

コードのマークをクリックするとHTMLが表示されます。「Copy」をクリックして内容をコピーし、このHTMLをメールで送信すればOK。

上記のHTMLは「Export HTML」をクリックすると一発で表示可能です。

Previewだけでは信用できない場合には、テストメールを送信することもできます。「Test Email」をクリック。

送信したいメールアドレスを入力し、reCAPTCHAにチェックを入れて「Send Email」をクリックします。

初回のみ認証が必要です。認証用のリンクが送信されているので、リンクをクリック。

「Email Verified Successfully」と表示されれば認証完了。しばらくすると先ほど送信したテストメールが送られてきます。

無事、こんな感じに表示されました。

SENDUNEは公式のホスティングサービスが用意されており、月間5万メールまでの無料プラン、月間25万メールまでの月額24ドル(約3500円)の有料プラン、それ以上使用する人向けの企業プランが存在しています。なお、SENDUNEはAWSと連携してメールを送信するため、AWSのメール送信費用が別途必要になり、「無料プラン」であってもAWSの費用が発生する点に注意が必要です。