喉→鼻→咳の風邪三段階進化を歩んでいますAOKOちゃん(@nishiaoko)です。三段階目が弱そうだなオイ！
HTMLメールマガジンね。作りました。お仕事で。やはり予備知識無しで挑んではダメですね。率直に言うとひたすらクソめんどうだったとしか感想がありません。。。
CSS3やHTML5に慣れきってしまた昨今、まさかまた一昔に戻ってコーディングを行うとは…クッ！
そんな気持ちにさせるHTMLメールマガジン制作で学んだことを適当アウトプットします。
衝撃のテーブルコーディング
まずはドーーン。すべてのコーディングはtableで組めい！
ブラウザよりややこしい各メールソフトの齟齬。数多くあるソフトの種類とそれに乗っかるブラウザのバージョンやらなんやら。
そしたらもうテーブルにすればいい。崩れると一気に残念になるwidthのアレコレも気に気にしなくていい。要素の回り込みとか洒落臭えことも関係ない。
ね！崩れる心配もないし簡単でしょ！…なんかそういうかんじらしい。
参考 : http://www.atmarkit.co.jp/ait/articles/1007/14/news103_2.html
先方や大事なお客様が崩壊したメールマガジン的なものに遭遇してしまわれないためには。tableタグで積み上げブロックのように組んでいくのが安全だと。tableの中身はtrで。そのまた中身はth,tbで。
確かに回りこみやwidthが崩壊はしないけどこれが手慣れていない分地味に大変。。。
ちなみにそんなときはHTML Table Generatorがお役立ちでした。ありがたや。
しかしとりあえず、初心に戻ってテーブルタグをもう一度おさらいしましょ。。。
参考1 : http://www.kanzaki.com/docs/html/htminfo16.html
参考2 : http://www.tagindex.com/html_tag/table/table.html
CSSはインラインで記述！
なんとびっくり。Gmailはhead内のCSSを読み込みません。ワ～オ！他のメーラーもクライアントによっては読み込まない可能性あり。
つまり、各要素はその記述内で個別に読み込ませるのが安全策。これがクッソクッソご面倒仕る。
各要素にstyleやなんやらでとにかく細かく細かく記述記述。崩壊したメールマガジンを送らないためには、記述の鬼になるしかないわけです。
使用可能CSSは各メールクライアントによって変わってくる
CSS3？んなもん使えるわけねーだろ！背景装飾はbackground-color以外使うなボケ！
そんな怒号が聞こえるようです。
headが使えないばかりか、そのCSSさんとは共演NGなんで〜…というまさかの展開。これはもう下記URLをフル参考にしていくしかありませんでした。。。
参考 : https://www.campaignmonitor.com/css/
もう私はとにかくOutlookにpaddingやmarginが消滅されるのが非常に厄介でした。
しかし使用ユーザーは一番多いクライアント。何度やっても余白によってデザインが崩れてしまう場合は思い切って画像で調整してしまうのも手です。(ただし送信先で画像ダウンロードがうまくいかなかった場合はかゆうま状態ですが)
文字コードはiso-2022-jp？
よく見られるのは、文字コード指定は「iso-2022-jp」や「shift_jis」にすべきと。特に「iso-2022-jp」はよく推薦されています。
ううーん難しいですね。私はひとまず試験的に網羅する「UTF-8」で作成しました。安全策としてはやはり「iso-2022-jp」を使用すべきだと思います。(ビクビク)
参考 : http://internet.watch.impress.co.jp/www/article/980525/mojibake.htm
参考2 : http://coliss.com/articles/build-websites/operation/work/104.html
見た目はとにかくわかりやすく、かっこよく
急にデザインの話になっちゃうのですが。
LINEやメッセンジャーアプリが盛り上がる昨今、メールでおくられるテキストオンリーの情報、シンプルすぎる一昔前のガラケー時代を彷彿とさせるビジュアルは重視されない傾向にあるというのが私の持論で。とくに毎日大量のメールが送られてくる企業のメールアカウントなんかだと特にそういったメールは見もせず流すのが常だと思います。
さらに、いくらHTMLで組まれたメールであってもメールはユーザー自身が自分で情報を探しに行くサイトとは違い、一方的に送られてくるもの。それをわざわざクリックやタップする手間があった分、尚の事ユーザーはそのメールに期待を持つでしょう。しかし開いた一瞬で「有益に成り得ない」と感じると光の速さでソッコー閉じる。そしてダセェメール送ってくんじゃねーとキレる。(それは私です)
まぁ一番重要なのはもちろんコンテンツですが、まあファーストビュー的にパッと見た目は思わず目を通したくなる(さらに読みやすい)格好良いやつにしようぜ、と。
もうオラはありがたしまとめサイトさんをガンガン参考に作りました。ありがたやありがたや。。
参考1 : http://design.kayac.com/topics/2010/11/mailmagazine.php
参考2(海外サイト) : http://inspiration.mailchimp.com/
参考3(海外サイト) : http://www.email-gallery.com/
個人的には、海外のHTMLメールのようにシンプルで端的にわかりやすく好印象だったため私は海外のまとめサイトを参考に作成しました。フラットデザインだと画像も少なく済む(ような気がした)からね…！
まだまだルールや方法はあるけれど
とりあえず抑えておくのはこんな感じかなと。。。
レスポンシブとかtableを使用しないコーディング(海外のHTMLメールはtableを使用しない例が多いみたいです)方法も多々ありますが、ひとまず基礎ということで。。。
非常に勉強になるありがたしHTMLメールマガジン解説記事様方
参考1 : http://www.webcreatorbox.com/webinfo/html-email/
参考2 : http://www.atmarkit.co.jp/ait/articles/1007/14/news103.html
参考3 : http://hibitano.hatenablog.com/entry/2013/08/31/023632
参考4 : http://n2p.co.jp/blog/tech/htmlmailmagazine03/
ま、もう二度と作りたくないです。
AOKO LOG 