Zuora の事例: Litmus
Litmus社は、マーケターが自信を持って優れたエクスペリエンスをサブスクライバーに配信できるように支援する、Webベースの電子メール作成、テスト、分析用プラットフォームを提供しています。Litmus社は、MailChimpやIBM Silverpopを含む250社を超える主要な電子メール・サービス・プロバイダーおよび代理店と提携し、ユーザーが迅速かつ簡単にキャンペーンを作成、テスト、トラブルシューティングおよび最適化できるように促進しています。 Litmus社のCEO、Paul Farnell氏によれば、Litmus社は2005年の創業以来、利益を生み続けてきました。おそらく、その中でも喜ばしい展開として、Litmus社は、2015年10月にSpectrum Equityから4,900万ドルの資金提供を受けましたこの資金提供により、Litmus社は、このお金を革新に費やし、予定していた世
専門知識がなくても大丈夫！HTMLメルマガを配信するなら知っておくべきツール9選
メールマガジン(以下メルマガ)を送信する際の配信形式として、HTMLメールがあります。 HTMLメールであればテキストだけでなく画像を利用できるため、インパクトの大きい訴求を行うことが可能です。 今回は、HTMLメルマガを送信するなら知っておくべきツールを、作成・配信ツール、表示確認ツール、テンプレートツールの3つの項目に分けてご紹介します。 どれも手軽に利用することができるツールばかりですので、本記事を参考に自社に必要なツールを選択してください。 HTMLメールを手軽に作成・配信するなら 1.Benchmark Email http://www.benchmarkemail.com/jp/ 利用料金：1,500円〜/月 無料トライアルあり HTMLメールに特化したメール作成・配信システムです。 コードの専門知識がなくても、手軽にHTMLメールを作成して配信することができます。 コードエデ
Home
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
HTMLメール作成の覚書
HTMLメールとは その名の通り、HTMLタグを使って作成されたメールです。テキストで作成されたメールと違って、テキストのサイズや色を変えたり、画像を配置させたりと、リッチな表現が可能となります。また解析タグも埋め込めるので開封率やトラッキングなどのデータ取得も可能です。 数年前までは海外のwebサービスのメールなどで目にすることが多かったですが、最近では国内のメールでもHTMLメールが使われるケースが増えてきました。 参考 国内企業の40%以上がHTMLメールを利用 | EC業界ニュース・まとめ・コラム「eコマースコンバージョンラボ」 HTMLメールの作成方法 メールを表示するメールクライアントの種類は多種多様であり、対応しているタグの種類もバラバラです。 Campaign MonitorやMail Chimpが主要なメールクライアントがサポートしているCSSを公開しています。 CSS
HTMLメールを作るにあたって知っておきたいこと - Qiita
最近、HTMLメールをいっぱい書く機会があったのですが、あまりウェブに良い情報がなかったので、メールを作る上でこれは知っておいた方が良いと思うことをまとめておきます。 メールの表示はブラウザとは異なる 大前提として、メールの表示はブラウザとは異なることが多いです。 なので、ちゃんとレイアウトを再現しようとすると、 ブラウザではなくメーラーで表示を確認する必要があります。 メールの表示はメーラーによってバラバラ メールの表示はメーラーによってバラバラです。ブラウザとほぼ同じように解釈してくれるメーラーもあれば、全然違うレイアウトで表示してくるメーラーもあります。なんでそんなに変わるのかというと、主に以下のような要因があります。 各種CSSプロパティの解釈の有無 ヘッドタグやスタイルタグの読み込みの有無 メーラーによる独自の最適化（それっぽい感じで'読みやすく'しようとする） CSS Supp
HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
“標準的なHTMLメール”は存在しない 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが（※）、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。 HTMLメールを受け取る環境の組み合わせは100万以上存在する スマートフォンが浸透したことにより、あらゆる環境でHT
最近のHTMLメールはリキッド＋最大横幅固定がオススメ！HTMLメール事情2017 実装編 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
久しぶりにHTMLメールを作成しました。以前記事を書いた時から状況が変わっており、改めて最新情報をリサーチしてみました！ 調査編はこちらから コーディングと文字サイズの関係性 iOS10 標準メールアプリにて、コーディングと文字サイズの関係性を検証しました。 gmailアプリでも同様の傾向でした。 テンプレートはこちらを利用しています。 横幅を固定した実装の場合 横幅XXXpxで固定された実装の場合、スマートフォンから見たときのテキストサイズが変動します。 指定している横幅が大きいほど、縮小して表示されます。 環境によっては横スクロールが出る場合もあります。発生条件は確定していませんが、後から画像を読み込んだ際に発生する傾向があります。 ソースはこのようになります。 [html] <!--外側のテーブル--> <table cellpadding=
こもりまさあきのレスポンシブEメール入門 – WPJ
Webサイトでは当たり前になった、マルチデバイス対応。でも、HTMLメールの マルチデバイス対応は大丈夫ですか？ このLessonでは、メールとWebの違いを押さえながら、レスポンシブなメールの作り方を学びます。 80% of people delete an email if it doesnʼt look good ontheir mobile device. 自分のモバイルデバ メンバー登録してください いつもWPJのご利用ありがとうございます。 この記事は、読める記事数の上限に達したか、プレミアムメンバー限定のため、お読みいただけません。フリーメンバーに登録すると読める記事数を増やせます。
HTMLメール作成で調べたことまとめ - Qiita
HTMLメールのお仕事がきて調べたことまとめ htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。 注意点 基本的にテーブルコーディング CSSはインライン 全体のサイズは600pxで作る 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須 pngではなくgifやjpgを使用する 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする 文字の自動調整をしないようにbodyにsize-adjust必須（noneじゃなく100%で） viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる レイアウトで段組やカラム分けしたいときはtableの入れ子で作る メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にす
HTMLメールを作成した時の備忘録 - Qiita
HTMLメールを作成してと言われた時に 気をつけたことをまとめました。 主流の書き方 HTMLメールは昔のIE対応ごとくメーラー独自のバグが非常に多いです。 そのため 2018年4月現在のHTMLメール作成の主流は未だ**「テーブル組」**です。 HTMLのバージョンは XHTML1.0やHTML4で作成するのが主流です。 テーブル組の理由 メーラーは多くの種類存在していますが CSSプロパティで指定できることは、メーラー毎に異なります。 以下参考URLで主流なメーラーのCSSを対応一覧がわかります。 The Ultimate Guide to CSS https://www.campaignmonitor.com/css/ こちらに書いている通り 普段多用しているCSSがほぼ使用することが難しいです。 marginやpaddingなどレイアウトを構築する上でよく使うプロパティも使えないの
くずれないないHTMLメール - Qiita
くずれないないHTMLメール レイアウト 使うべきタグと避けるべきタグを意識する. ・paddingやmarginは使わない。 ・インラインCSSを使う。 ・br、hr、heightタグは使わない。 ・全体のレイアウトを作成するときはtableを使う。 ・doctypeを指定する。 ・”wrapper div”でリセットCSSを指定する。 ・フォントはデバイスによって変化することがあるので注意する。 ・基本的なタグや昔から使われているタグを使用する。 ・背景の色は常にリセットする。 https://sendgrid.kke.co.jp/blog/?p=2223 画像 ・pngファイルは使わない。 ・画像のサイズを指定する。 ・alt属性を全ての画像につける。 ・Outlookでは画像の周囲に余白が追加されてしまうことに注意する。 ・floatプロパティは使わない。 どう作るか？テーブルレイ
HTMLメールの受信環境での表示確認テストができる「Litmus」を使ってみた - Benchmark Email
遠藤 聡 iBound代表。社員数30名以内の小規模企業のデジタルマーケティングやECサイト運営の業務サポート、コンテンツマーケティングのサポート、企業研修。UdemyでWebマーケティング関連のコースを提供中（受講者数は2万人以上）【著書】1時間でわかるSEO対策（技術評論社） January 7, 2020 WEBサイトでも訪問者の環境（使用しているブラウザ）によってレイアウトが崩れてしまうことがありますよね。HTMLメールでも同じようにメール受信者の環境（使用しているデバイスやメールソフト）によって、レイアウトが崩れることがあります。 せっかく丹精込めて作ったHTMLメールも、読まれるときにレイアウトが崩れていたり、正しく表示されていなければ、メールの魅力も効果も半減してしまいます。 では、そんな事態を防ぐにはどうしたらいいのでしょうか？答えは「HTMLメールの表示テストをする」とい
レスポンシブなHTMLメールをつくる - Qiita
仕事でHTMLメールを作る機会があったんですが、メーラーは種類が多く、各メーラーによって実装状況にかなり差があるので、多くのユーザー環境で正しく表示されるHTMLメールを作ろうと思うとなかなか面倒でした。 しかもレスポンシブとなると、通常のwebページでいうクロスブラウザ対応の比ではないほど気を使うことに。。 なので、やったことをここにメモしておきます。 後々、会社のブログで記事にするつもりだけど。 基本的なつくりかた レスポンシブという言葉の響きで、なんかモダンな作りができそうだなーと思ってしまうけど、結局は下記のような昔ながらの作り方をしなくちゃいけないです。 tableレイアウトでコーディング。 これでやらないとOutlookでまともに表示できない。 インラインスタイルでCSSを記述。 <style>タグに対応していないメーラーが多いため。 また、前述のとおり各メーラーで動作に差異が
HTMLメールの話 ⛄️ 2017冬 - Qiita
この記事は「みんなのウェディング Advent Calendar 2017」の7日目の記事です。 業務でHTML メールを出すことがあります。例えば、キャンペーン告知や、口コミ掲載連絡などです。そして、作るたびにハマって...「ああ...もう」という気持ちになるので書きためたメモです。 3行でまとめると... Gmail も、Yahoo! メール も Outlook もアプリがあり利用者も多い。さらに iOS / Android では挙動が異なる 効果検証はやってる？Google Analytics を使うと便利 デザインガイドラインを作ると捗る（が作っていない） 以上です。ハマりどころは、iOS の「メール」です。 HTMLメールについて テキストだけでなく、装飾（文字の太さ、色など）、画像などをレイアウトして送る事ができます。 利用状況 アメリカなどでは人気があるらしい 自分調べ。Go
Outlookに勝てるHTMLメールコーディング vol.2「レスポンシブ設計編」 - Qiita
前回に引き続きメールコーディングのちょっとしたコツをつらつらと書いていきたいと思います。 ちなみに前回の投稿はこちらから。 Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 あんまり関係ないけどファイル構成 特にレスポンシブ対応には関係ないのですが、HTMLメールのコーディングってとにかくコードが長く、インデントも煩雑になっていきませんか？ 今回長文のコードを書くに当たって、ファイル分割してコーディングしています。 共通化できる場所を別ファイルとして作成しておけば、一括でヘッダなどの内容も変えることが出来ますし、何よりコードの可読性があがります。 分割したファイル構成 <!-- ヘッダの設定 --> <%= render :partial => '/user_mailer/template_head' %> <body class="res" width="
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
HTMLメールを作成したらレイアウトがダダ崩れした話 - Qiita
株式会社LITALICOでWebエンジニアをしています、 @negi です。 本記事は『LITALICO Advent Calendar 2016』5日目の記事となります！ HTMLメールをRailsのActionMailerを使って送る際に困ったこと、注意点について書こうと思います。 前提 開発環境 Ruby 2.2.3 Rails 4.2.5 やったこと Railsの Action Mailer Previews を使ってプレビューを見ながらHTMLメールを作成 このとき、roadie-railsを使っているので、view（.html.erb）とCSS（.scss）は別ファイルで管理 実際に配信してみる プレビューでは綺麗に見えてたのに、スタイルが崩れている 確かにプレビュー上では綺麗にスタイルが組まれていたものが、いざメールを送信してみるとスタイルが崩れてしまっていることに悩まされま
最近のHTMLメール横幅は600px台前半！HTMLメール事情2017 調査編 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
HTMLメールのメインエリアの横幅を調べてみました。 600px未満 paidy 460px X（Twitter） 500px chatwork 580px Adobe 600px STORES 600px nuzzel 600px note 600px codepen 620px cakes 640px giftee 640px plesk 640px MFクラウド給与 640px ユニクロ 640px CAMPFIRE 642px ホットペッパービューティー 660px ぐるなび 700px plesk japan team 700px apple 740px 700px以上・リキッド ZOZO 一部リキッド・メイン700px Facebook リキッド Peatix リキッド ぐるなびお取り寄せニュース リキッド 600px台前半にボリュームがある感じです。 最近のものは700px台
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Litmus PutsMail — Test your HTML emails before sending them.
Foundation for Emails 2 Docs | Getting Started with CSS