Dyspatchを利用したHTMLメール制作

Dyspatchには複数のテンプレートが用意されており、テンプレートの内容をドラッグ＆ドロップすることで直感的に操作できます。無料版でも簡単なHTMLメールの作成ができますので、ご参考の一つとして活用ください。※triplaが保証するサービスではありませんので、ご自身の判断にてご利用ください。

①Dyspatchのサイトにアクセス

Dyspatch公式サイトにアクセスし「Try Dyspatch for free」ボタンから制作に進みます。

https://www.dyspatch.io/resources/templates/

②テンプレートを選択

様々あるテンプレートから、今回は「Lifestyle Templates」の選択し、使い方をご説明いたします。

③テンプレートタイトルを選択

今回は「Welcome」の選択してください。無い場合は他のテンプレートでも問題ありません。

④パーツを組み立て

画面の左側に複数のパーツがあり、ヘッダーやタイトル、ボタンや画像、テキストなどを左のメインメニューに移動して、メールの要素を作成していきます。

⑤画像の編集

ヘッダーのパーツを組み込むと、ダミーのロゴが表示された状態になるので、こちらを変更します。 パーツをクリックすると左側にパーツを構成する一覧が表示されます。ここでは一番上の行の「IMAGE - SOURCE URL」が表示しているロゴとなっているため、その画像パス（URL）を変更すれば、差し替えが可能です。 ※画像をアップロードして差し替えるサービスとは異なり、初めからWeb上にアップロードされた画像のURLを読み込む方式となります。

画像パス（URL）の確認方法として、自社HPに掲載されたロゴを例にご説明します。(windows chromeの場合） 掲載したいロゴを右クリックし、メニューから「画像アドレスをコピー」をクリックします。但しcss制御などで右クリックにて画像アドレスが表示されない場合があります。その際はページ管理者に確認してください。

「IMAGE - SOURCE URL」の欄にコピーしたURLを張り付けると、メインのロゴが切り替わります。 （ロゴのサイズを変えたい場合は、最後にHTMLソースをコピーし本文に貼り付けてから、そのソース内でのHTMLコード修正が必要になります。）

⑥テキストの編集

タイトルやテキストパースをメインメニュに設定すると、右側に編集画面が表示されます。 TITLEやTEXTを編集すれば、メインメニューに反映され、ボタンURLなども変更が可能です。 ※Dyspatchは外国語サイトのため、日本語をそのまま打ち込むと上手く入力できない場合があります。その場合は予めメモ帳やワードパットなどテキストソフトで文字を作成しておき、コピー＆ペーストで貼り付けてください。

⑦完成後にHTMLコードを発行

メールの作成が完了したら、右上の「Export」ボタンを押してください。

⑧必要事項の記載

HTLMコード表示の前に無料版ではお客様情報の入力が表示されます。ご確認の上で次にお進みください。

⑨完成したHTMLコードのコピー

作成したHTMLメールのHTMLコードが表示されます。 「Copy to Clipboard」をクリックすると、HTMLコードがコピーされます。

⑩tripla管理画面に貼り付け

tripla管理画面のブランド画面メニューから、「tripla Connect」→「プロモーションメール」に進み、作成したメルマガを選択の上で、「本文」に貼り付けてください。

以上が基本的な設定となります。

triplaが提供しているサービスではございませんので、詳しくはDyspatchお問い合わせまでご確認ください。

triplaコネクトにつきましては下のリンクからご確認ください。

tripla Connect