Htmlメールを作った話。
今回は、HTMLメールを作った話と、思ったより大変だったという話です。
大変なポイント
一番大変だったのは環境による違いです。
Webページのモバイル対応とかも、大変だと思いますが、それ以上なんじゃないかなと思います。 単純に注意しなければいけないところが増えることが原因なのかもしれません。 OS × ブラウザ × Webメーラーとか。
特にスマフォのキャリアメールについては、Htmlメールを表示できないキャリアもあるようで、対応を諦めたものもあります。
他に大変だったのは、CSSを埋めこまなければいけないとか、Webからは送れないとか、テーブルをめっちゃ組み合わせなきゃいけないとかは大変でした。
基本的な作り方
今回は、上のような理由から、一から作る事は諦めて、テンプレートを調整していく形で作っていくことにしました。 (初心者でもお洒落なhtmlメールが作れる高品質テンプレート20選とか。知らなかっただけで結構ある) 基本的には、テーブルを組み合わせる事、CssはインラインCssで書く事で作っていきます。
今回は使わなかったんですが、Cssをインライン化してくれるサービスもあるので、それを使うと楽かもしれません。 CSS inliner
作り方を調べていて思ったこと
みんな苦労してるんだな、、、という事と海外ではHtmlメールが多いという事です。
作成自体は、すぐにできるけど、検証が大変！という話は多かったです。 メールなので送ってから修正する！とはできないですから検証が大事なのかもしれません。
あと一つは、テキストのメールが多いのは日本だけだよ。みたいな話。 実際どうなのかは知らないですが、確かに、英語で来る迷惑メールとかはhtmlメールが多いなーとは思いました。
作ったもの
こんな感じです。
ちなみに送り方はMacだと数クリックで送ることができます。
- htmlを作成する。
- ブラウザで開く
- ファイルの共有からこのページをメールで送るを選択
- MacのMail.app?が起動するので、送信する。
これで送ることができます。
おわり
今回はGmailをメインにちゃんと表示できるように調整しています。 環境によってのフォントの違いとかで多少ずれたるするものの、大きな崩れはないみたいです。
これが他にも対応したいとかになると大変ですね。
おわり2
PAKUTASO便利。
ゆかちぃが可愛い。
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
・
おわり3
可愛い。
河村サンタは渋谷を徘徊してます。
サンタの服を着た女が歩いていたら、、、優しい一言をお願いします。
「めり〜くりすま〜す🎅🎄✨」 pic.twitter.com/f4TujMkRn9
— 河村友歌 (ゆかちぃ) (@xmas_yk) 2015, 11月 30