本日よりPC向けメルマガにHTMLメールを活用してみました。もしかしたら、ありがた迷惑な可能性もありますので、実験的導入ですがしばらくの間HTMLメールでお付き合い頂けると幸いです。
メール配信CGI「エーシーメーラー」の活用
今回HTMLでメールを送ったキッカケの一つが、やはりNEWショッピングサイトでした。
NEWサイトの構築が一段落して気が抜けていたのですが、思いっきり忘れていた存在が『メルマガ』でした。それもそのはずで、多くのお客様がご存知の通り、ウチのメルマガって月に1回とか2回・・・ 無い時は月ゼロですもんね(汗)
なので完全に忘れていたのですが、サーバーも安定してきてソロソロNEWサイトのご案内を送ろうと思った時に思い出したワケです。
NEWショッピングサイトで使用しているwelcartにはメルマガの機能がありません。しかしながら、旧ショッピングサイトのシステムを利用すれば発行出来るワケですが、僕としては旧ショッピングサイトのシステムに依存しない運営がNEWサイト構築の目的の一つなので色々調べる事に。そこで出会ったのがサーバーインストール型の『エーシーメーラー』でした。
他にもMailChimp(メールチンプ)という海外のメール配信サービスも、かなり考えました。
MailChimp(メールチンプ)>> http://mailchimp.com/
非常に良さそうなサービスだったのですが、お客様のメールアドレスを他人のドメインの中で管理する事に抵抗感があり却下。恐らく有料バージョンがあるサービスなので、セキュリティーはシッカリしているはずですが、まだまだ僕はアナログな感覚は捨てられてません。
エーシーメーラーはサーバーにインストールするCGIなので、何となく僕には安心感があります。ここで『エーシーメーラー』の事を書くと長くなりそうなので、別の機会にご紹介します。(興味ない人がホトンドだと思うけど・・・)
acmailerはHTMLメール可能
今まではシステムの都合でテキスト型のメールしか送れませんでした。
いわゆるプッシュ型等と言われるメルマガ等の押し系の販促活動が苦手な僕にはそれでも良かったのですが、何かを構築する作業は大好きなので、HTMLメールもやってみたかったのが本音です。販促と言うよりは自己満足的な感じ。
実際問題として、僕自身HTMLメールはあまり開きません。というか好きなお店のメルマガは簡素なテキストメールしか送ってくれませんので(笑) そーゆー事もあり、HTMLメールはありがた迷惑かなぁー？とも思ったのですが、スマホでGmailを受信したり、PCアドレスを受信する方も増えているようでしたので、少しは活用のし甲斐がある？と思いやってみました。
acmailerはHTMLメール配信が可能です。不慣れなインストール作業をするに当たり、選んだ大きな理由の一つでもあります。当然ですがテキストメールも可能なので、携帯キャリア向けには従来通りのテキストメールを配信させて頂きました。
見易さを意識してHTMLメールのテンプレートを作る
HTMLを使えば、画像をバンバン入れられますからホトンドHPのようなメールを作る事も可能ですが、それってユーザビリティー無いですよね。多分OUTLOOKとかLIVEメールで受信してる人も多いはず。それだと、画像が表示されない状態で届き、その後表示させたり、そのまま放置＆ゴミ箱にポイが多いんじゃないかと・・・。僕はそれですｗ
なので画像は入れつつも、画像無しでも見られる状態に作るのが理想な気がします。
本当はレスポンシブと呼ばれる可変型のメルマガにしたかったのですが、レスポンシブのCSS書いたらサーバーに弾かれたので、文字は大きめの設定。
そして出来たのはこんな感じ↓
一応内容は隠しました。公開したらメールマガジンの意味無い気がしたので・・・。画像を表示するとこんな感じになります。もしまだ画像開いてないお客様は参考にどうぞ。
ヘッダーの書体がいつもと違うのは、サポートされたフォントで無いと崩れる可能性が高いからです。デザインだけ考えれば画像を入れたほうが良い感じなのですが、ヘッダーが小さなaltの中身じゃショボイですからフォントで処理しました。
なので、画像が表示されなくても↓
こんな感じです。
ヘッダーは右側のみが画像なので、表示されなくてもシンプルになるだけ。
内容の画像にはちゃんとaltを入れる事で、大体分かる感じになります。cssは全てインラインです。head内も試しましたが、メールソフトによっては読んでくれないようです。とは言え、僕自身色々な端末を持っているワケじゃないので、自分の持ち物範囲でしか検証出来ませんでしたが・・・
テンプレートはこんな感じです。
<meta name="viewport" content="width=320, target-densitydpi=device-dpi">
<body>
<table id="background-table" style="table-layout:fixed" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tbody><tr>
<td align="center" bgcolor="#ececec">
<table style="margin:0 10px;" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody><tr><td height="20" width="640"></td></tr>
<tr>
<td width="640">
<div style="font-size: 16px;color: #000;margin-top: 0px;margin-bottom: 10px;font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="left">
＊本メールはHTMLL形式で送信しております。メールソフトによっては画像が表示されません。メールソフトの設定で『セーフリストに追加』や『画像の表示』等で画像が表示されるようになります。
</td>
</tr>
<tr>
<td width="640">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000" width="640">
<tbody>
<tr>
<td width="20"></td>
<td width="300">
<div style="text-align: left; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;">
<a style="text-decoration: none;" href="ヘッダーリンク">
<div style="color: #EDE899; font-size: 45px; font-weight: bold; margin-bottom: -10px;">ヘッダータイトル</div>
</a>
<div style="color: #E97900;font-weight: 700; font-size: 20px;">
サブタイトル</div>
</div>
</td>
<td width="290">
<img editable="true" src="ヘッダー右画像" label="Image" border="0" width="290" height="88">
</td>
<td width="20"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td bgcolor="#ffffff" height="30" width="640"></td></tr>
<tr id="gallery-content-row"><td bgcolor="#ffffff" width="640">
<table border="0" cellpadding="0" cellspacing="0" width="640">
<tbody><tr>
<td width="30"></td>
<td width="580">
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td width="580">
<div style="font-size: 18px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="left">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="580"></td></tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td valign="top" width="580">
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td width="580">
<a href="リンク">
<img editable="true" src="大きな画像" label="Image" border="0" width="580" height="321" alt="テキストテキストテキスト"></a></td>
</tr>
<tr><td height="10" width="580"></td></tr>
<tr>
<td width="580">
<div style="font-size: 18px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="580"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td valign="top" width="280">
<table border="0" cellpadding="0" cellspacing="0" width="280">
<tbody><tr>
<td width="280">
<a href="リンク">
<img editable="true" src="中画像" label="Image" border="0" width="280" alt="テキストテキストテキスト"></a></td>
</tr>
<tr><td height="10" width="280"></td></tr>
<tr>
<td width="280">
<div style="font-size: 16px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
テキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td valign="top" width="280">
<table border="0" cellpadding="0" cellspacing="0" width="280">
<tbody><tr>
<td width="280">
<a href="リンク">
<img editable="true" src="中画像" label="Image" border="0" width="280" alt="テキストテキストテキスト"></a>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
<tr>
<td width="280">
<div style="font-size: 16px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
テキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td valign="top" width="280">
<table border="0" cellpadding="0" cellspacing="0" width="280">
<tbody><tr>
<td width="280">
<a href="リンク">
<img editable="true" src="中画像" label="Image" border="0" width="280" alt="テキストテキストテキスト"></a>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
<tr>
<td width="280">
<div style="font-size: 16px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
テキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td valign="top" width="280">
<table border="0" cellpadding="0" cellspacing="0" width="280">
<tbody><tr>
<td width="280">
<a href="リンク">
<img editable="true" src="中画像" label="Image" border="0" width="280" alt="テキストテキストテキスト"></a>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
<tr>
<td width="280">
<div style="font-size: 16px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
テキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="280"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="580">
<tbody><tr>
<td width="580">
<div style="font-size: 18px;color: #000;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="left">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>
</td>
</tr>
<tr><td height="10" width="580"></td></tr>
</tbody></table>
</td>
<td width="30"></td>
</tr>
</tbody></table>
</td></tr>
<tr><td bgcolor="#ffffff" height="15" width="640"></td></tr>
<tr>
<td width="640">
<table id="footer" border="0" cellpadding="0" cellspacing="0" bgcolor="#618442" width="640">
<tbody><tr><td width="30"></td><td height="30" width="580"></td><td width="30"></td></tr>
<tr>
<td width="30"></td>
<td valign="top" width="580">
<div style="font-size: 25px;color: #EDE899;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif; font-weight: 700;" align="center">
店名
</div>
<div style="font-size: 16px;color: #fff;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
住所系
ホームページ：<a href="リンク" ><span style="color: #fff;">アドレス</span></a>
</div>
<div style="font-size: 16px;margin-top: 0px;margin-bottom: 10px; font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif;" align="center">
<a style="text-decoration: none;" href="リンク" ><span style="color: #EDE899;">＞＞メルマガ変更/解除はコチラ</span></a>
</div>
</td>
<td width="30"></td>
</tr>
<tr><td width="30"></td><td height="15" width="580"></td><td width="30"></td></tr>
</tbody></table>
</td>
</tr>
<tr><td height="60" width="640"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table></body>
HTMLメールの場合、テーブルを入れ子にすると良いらしいのでそうしました。
元々はツールを使ってみたのですが、CSSが弾かれたのもあってホボ書き直しでした。
とはいえ、Gmailでワリと普通に表示されたので、まぁまぁではないかと・・・。
と、そんなこんなで新しいメルマガ組みましたので、ふーん と思って見ていただければ幸いです。
ちなみにテンプレ使いたい人はご自由にどうぞ。pre変換でペーストしたので、そのままでは使えない状態に変化してしまいました・・・。
ではでは。