HTMLメルマガコーディングまとめ！

#「弊社から制作依頼を出した会社」さんに届け！！
こちらの記事は、ぶっちゃけると「弊社から制作依頼を出した会社」さんに届け！！と念じながら書いております。
なんか思いの外メルマガコーディング界は変わらないし、でもtableタグに馴染みのない若い子にはめんどくさい仕事で、かといってtableタグ全盛期の人たちを稼働するには金額足りないですよね、HTMLメルマガコーディング。
なので、どうにか検索でここに辿り着いて欲しいという気持ちを、弊社から出す修正依頼の何かしらの解決の糸口になるものをwwwに放つ。
#メーラー界隈は進化していません。
進化してない上にレガシーメーラー全然生きてるの辛い。
なので、基本的に最底辺に合わせる気持ちで書こう。divタグなんか忘れて。
業界というか、ターゲットによるとスマホ古い人がメインターゲットとかもあるしね。
ガラケーは捨ててもええやろ…

また、配信ソフトによってのクセ・強制的につくCSS等々あるので、そういう部分でも最底辺に合わせたコーディングだと他社環境でも一発で通る率上がると思います。
##構築は基本的にはtableタグの乱用乱発。
寧ろtableタグだけでの構築でもいい。
これはね～～もうテトリス。tableタグで入れ子入れ子にして積み上げてくの。解ってるよ、divにmargin設定して真ん中に寄せるって書けば1タグで済むよ。でもメーラーはそれを読めない子もいるの。くっそめんどいけどtableタグで積み上げよう。

例えば

こういう画を作りたい時、

<div style="border: 2px solid #ccc; padding: 10px; text-align: center; background-color: #eee; width: 576px;">
    なかみ
</div>

こうではなく、

<table width="600" border="0" cellspacing="0" cellpadding="0" style="width: 600px;" bgcolor="#ccc">
    <tr><td height="2" style="font-size: 0; line-height: 0;"></td></tr>
    <tr>
        <td align="center">
            <table width="596" border="0" cellspacing="0" cellpadding="0" style="width: 596px;" bgcolor="#eee" align="center">
                <tr><td height="10" style="font-size: 0; line-height: 0;"></td></tr>
                <tr>
                    <td align="center">
                        なかみ
                    </td>
                </tr>
                <tr><td height="10" style="font-size: 0; line-height: 0;"></td></tr>
            </table>
        </td>
    </tr>
    <tr><td height="2" style="font-size: 0; line-height: 0;"></td></tr>
</table>

こう、書く、のだ…
##画像は圧縮しよう
HTMLメールでわざわざ知らせたいってことは商品画像があると思うんですよ、大抵。
圧縮しよ！！！！！！
1.通信速度を理由に軽量画像しか使わない時代、
2.インターネットユーザーがみんなADSLとか光回線とかを引き出して通信速度が高速になり画像サイズが大きくなった時代、
3.スマホをみんなが持ち出してレスポンシブ対応をしだした時代、
4.若い子がPCを持たなくなってスマホも3大キャリアだけでなく格安SIMの通信量制限もあるしでスマホ版だけ作ればいいじゃんの時代（2020年）
という移り変わりがあったなと思います。雑だけど。
とにかく今は再び通信量制限が立ちはだかってんじゃないかと。コレはメルマガだけの問題じゃないけど、メルマガから自サイトに誘導した後に画像何枚も見せて通信容量使い切らせたりとかするのはユーザビリティー悪すぎじゃないか！っていう話ですよ。画像は圧縮しよう。最近は動画も見せるしさ、どうでもいい見出しとか背景で無駄にパケット消費させないようにしよう。
っていうか自分の端末で実機検証を繰り返して10G使い切るとかあるよ。そんなものをお客様に送り続けるって、そりゃメール配信停止されるに決まってるよ…
というわけで圧縮しまくれ、圧縮、圧縮だ！！
特に私はpng大好きなので、死ぬほど使ってる。パンダにはコーヒー代を贈ろう。便利ツールを作ってくれた方にはサンキューの心を忘れないで。
##背景画像は使えない
背景装飾はbackground-color！でもより安全を求めるならwebセーフカラー縛りでbgcolor。
ここに関しては工夫次第でにぎやかに見せる事も出来るので、頑張って。
##使えるcss制限に気をつけよう
死ぬほど便利　https://www.campaignmonitor.com/css/
タグ毎にcssが対応してるかどうかがわかるよ！すごい、このサイト死ぬほど見た。
オレたちの強い味方であるmarginがNotes・Outlook・Windows 10 Mailでダメです。
paddingもtableだとバグる（効かない）という理由でNotes・Outlook・Windows 10 Mailでダメです。tableタグが主流なのに？？というわけでmarginb・paddingは使えないものと思ってください。
環境によっての表現差異を許してくれる（説明して解ってくれる）クライアントさんならいいですが、いくら説明しても絶対デザイン再現！！！のクライアントさんもいますし、頑張りと工夫で再現は出来ます。そこはもう頑張れ…としか言えないんですが、頑張りと工夫、具体的にいうと空tableを隙間に敷き詰めることで再現出来ないこともないので頑張ろうな…。
cssじゃないけど、rowspanとcolspanも使わないほうがいいです。無限に箱を積み上げるのだ。
また、効果のあるcssでもインラインスタイルで指定しないといけないのでコピペ地獄が待っています、クリップボード履歴管理ソフトがあると便利だよ。
おすすめはClibor　https://chigusa-web.com/
##タグ締め忘れを死ぬほどチェックしよう
tableにつぐtable、入れ子地獄となったコードはもう目視チェックじゃ辛くなってきます。
Crescent Eve　https://www.kashim.com/eve/index.html
エディタはなんでも好きなのを使って作って、最後にチェックだけコレでするのおすすめ。文法チェックが最高にありがとう。タグスペルミスも見つけてくれるよ。みんなそんなのしないだろ～って思うだろうけど、めっちゃあるからな。これ指摘されたら恥ずかしいだろうな…こちらとしてもDeleteキー1つ押すだけだし…って感じで納品後こっそり直したり、ブラウザが勝手に補完してくれてるだけなので、機械の力に頼って完璧なものを作ろう。本当に恥ずかしいよ。いらんプライドは犬に食わせて納品物のクオリティを上げよう。
##画像は絶対パスなんだけど、URLに気をつけよう
ねえ知ってる？httpsのURLの画像ってデスクトップ版Outlookじゃ画像表示されないんだわ…
これはURLをhttpに変えるだけで対策出来るのだけど、例えばSalesforceみたいに画像をブラウザでアップできて、それを配置する～みたいな作り方だと画像URLはhttpsなんですよ…めんどくさいけど、別途サーバーにアップした方が安全です。
##メルマガ資料用ブクマフォルダ
https://sirotanashi.wordpress.com/2014/12/22/html-mailmagazine/
https://www.webcreatorbox.com/webinfo/html-email
https://www.atmarkit.co.jp/ait/articles/1007/14/news103_3.html
https://qiita.com/drasky1132/items/7beb80589ae1cef7f5e6
https://univetech.com/%e3%83%a1%e3%83%bc%e3%83%ab%e3%82%92%e9%80%81%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%abhtml%e3%83%a1%e3%83%bc%e3%83%ab%e3%81%ae%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%92%e7%9b%b4%e6%8e%a5%e6%9b%b8%e3%81%8f-440.html
https://winandcompany.net/html%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95/
https://qiita.com/kinoshitatomomi/items/1c1165b10aaa0389b0e5
古い内容もあるけど、全然今でも参考になるので是非。
#ぶっちゃけ一番デザインを崩さない方法は、画像だけで構成
開封したらユーザー側は文字なんてテキストだろうが画像だろうが受け取れる情報は同じなので気にしない、っていうのもあるんだけど、開封率を上げるためにタイトルや見出し文章があって、この見出し文章はバカに出来ない力があります。あそこに人を惹きつけられる文章を載せるにはテキストでの構成も必要になります。

個人的に思うのは、発注側も、受注側もデザインの完全再現は最初から諦め、妥協できるゴールを定めて進めるべきです。
言い方がすごく悪くなりますが、メルマガは使い捨てです。たかだか一読しかされないコンテンツのコーディングに詰まって無駄な工数を消費するなら、切り上げて次の配信コンテンツの作成に進むべきです。
正直メルマガコーディングは、コーダーとしての能力が上がるものではないと思っています。リテイクなしでサクッとこなして進みましょう。

むかしむかしの話なんですけど、本文1行目に書くcssリセット込みのtable

と、横幅99%にするというおまじないがあったんですけど、誰か覚えてませんか？