読者です 読者をやめる 読者になる 読者になる

As far as i know...

私が知る限りでは。

レスポンシブE-mailデザイン

こもりまさあき 2015


[導入] https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic スマホで、読めないけど既読されてしまうと読まれない。 ※CTA(CALL TO ACTION)→Webサイトを訪れた人が、本来の目的に沿った行動(資料請求等)を促すこと。 CTA向上のため、目につく、見やすいメルマガを作成することは意味がある。 GIFアニメはoK(使ってもOK)


[事例] http://reallygoodemails.com/ https://www.campaignmonitor.com/best-email-marketing-campaigns/ http://www.email-gallery.com/


[基本] テーブルを縦に並べる、フォントサイズは最低13px(16〜20が理想)、画像は多用せず極限まで軽くALTを必ず入れgifかjpg、リンクボタンは最低44px、縦長にしすぎない。 オンラインデザインガイド www.emailology.org/


[作成方法詳細] ・宣言 HTML4.01か、XHTML1.0。ASPやESPシステムを使う場合は指定がないか確認する。 ・文字コード 日本語の標準は、JIS(ISO-2022-JP)。ASPやESPシステムを使う場合は指定がないか確認する。 ・表示幅を広げられるように、viewportを指定する


[検証] 厳密に調べたいときは、下記のようなメール検証サービスがある。 https://litmus.com/(有料) https://www.emailonacid.com/(有料) outlookだけでうまくいかない、と言った場合は、 Hack的な、コンディショナルコメントを入れて対応することもできる


[効果測定] ASP(Mailchimp)などのサービスを使うと、通常開封率・クリック率が測定出来る。 ☆Google Analyticsで開封率を調べる(How to Track Email Opens With Google Analytics) 計りたいボタン、リンクの img要素にパラメータを追加 ※トラッキングの詳細は、アナリティクス Measurement Protocol Google Analyticsでクリック率を調べる カスタムキャンペーン機能でHTMLメールに埋め込むリンク先にダミーパラメーターを設定する。 (URL生成ツールを使う、utm_campgaignを日付等に変更)


[送信の仕方] htmlで保存し、メーラーのひな形として選択する。

☆各メーラーによって解釈が違ってくるので、サービスを使った方が楽そう。