標準のEmail Templateを改造してみよう（２）
みなさん、こんにちは。Yamadaです。
先日投稿した、↓の投稿の続きです。
Templateを改造したのがこちらです↓ 上部だけですがご了承を（隠すつもりはなく、単にスクリーンショットが取りづらかっただけです）。
改造箇所は、結局３０箇所近くなりました。いくつかポイントを参考までに。
１）上部のHero Bannerの高さを調整。
もとのHero Banner(絵の部分)は高さが525pxありましたが、これだと高すぎるので、350pxまで縮めています。メールを開いたときにFirstViewで、Hero Bannerに加えて1つ目のコンテンツが見えるくらいは欲しいですからね。
なお、絵の上に、ロゴと文字が乗っています。とくに文字が画像ではなくて、テキストになっているのがポイントですね。もともとTemplateがそうなってますが、それを維持したままで高さを調整してますが、気をつけて改造しないと一気に崩れてしまうので注意が必要です。
それと、結構Hero Bannerに文字も取り込んでしまっているメールも見かけますが、やはりここは”テキスト”にしておきたいですね。画像表示が許可されていなくても一番大事なタイトル文字が出てくれないとメールのパフォーマンスに影響大きいですからね。
２）余計な要素をカット
元のTemplateでは、見出し＋投稿日＋本文 という３段構造になっていましたが、投稿日の部分が不要なのでカットして２段構造に変えてます。これも該当部分を単純に削除すればいいかといえば、そういうわけではなく、カットしても見出し と 本文 との間に適切な余白が入るような調整が必要なところ。
３）文字の行間を調整(for Outlook)
実は元のTemplateでは、Outlookでメールを開くと、やたらと行間が開いてしまい間抜けな感じになってしまう。という問題があります（特に日本語のフォントをつかったときに）。なので、行間を適切な高さにOutlookでもなるようにコードを書き足してます。このあたりはメーラーごとの振る舞いを理解したうえで対応しないとならない（面倒な）ところですね。
４）ボタンの「幅」を統一、色の変更を可能に
クリックしてもらうことになるボタンは大事な部分です。実は元のTemplateは、このボタンの「幅」が、ボタンの中の文字列に応じて長さが変わってしまう仕様になっています。たとえば「ダウンロードする」と「登録はこちら」だと文字数が違うので、ボタンの長さが違って見えるんです。画面では１つしか要素が見えていないので違和感ないですが、実際にはこの要素が縦方向に３，４つ並べて使う想定になってますが、そのときに、その３，４つのボタンの「幅」がバラバラだと、とても残念な感じになります。
なので、ボタンの幅を全てのボタンで統一する仕様にし、また、その幅は、メール編集画面上で数値を入れて可変できるようにしています。
さらに、元のTemplateのコードの延長上で普通にHTML/CSSで書いてしまうと、Outlookのときに幅が狙ったように変わらない問題があるので、ここはOutlook用のコードを独自に書き足して、Outlookでも幅がただしく表示されるように改造しています。
もう１つ。ボタンの中のテキストの色を変更できるようにしています。もとのTemplateでは色変更はできない仕様でしたが、ここも編集画面で色を選べるようにしています。なお、画面は赤枠＋赤文字ですが、文字を白抜きにして、ボタンをベタ塗りにすることも可能です（色は任意に変更可）。
５）フォントを変更
もとのTemplateは、欧文フォントを前提にしています。もっというとWeb Fontの読み込みなども含まれています。ですが、残念ながら日本語の文字を入れると、作者が意図しない残念なが表示になってしまいます。そこで、メール全体でフォントを統一して変更できるようにしました(font familyを変更できる）。実際には、游ゴシックを優先し、なければメイリオなどを指定しているので、Windows 10やMac環境なら游ゴシック。Windows 7環境ならメイリオが表示されます。（PCだと顕著ですが、スマホは、スマホ機種ごとのフォントで表示されるので、そこまでみすぼらしくなることはないですね）
他にもFooter部分をSnippetにして入れ替えする仕組みにしていたり、マルケトの編集画面で「Module」として表示される要素を分かりやすく整理したり、細部は色々と調整していますね。
ちなみに、WebのHTMLを書いてる人からすると「はて？、たとえばフォントファミリーの変更なんて、CSSで１行書き足せば終わる話じゃないの？そんなの１０秒仕事でしょ？」と思うかもしれませんが、そうならないのがEmail HTMLの奥深い（ただひたすらに複雑で面倒）ところなのです
。
メールのHTMLを改造するには、WebのHTMLを改造するのの５倍は大変です。また、特にOutlook対応をしっかりするには、HTML/CSSではない別の言語を使いこなす必要があったりします（具体的にはVMLですね。今回の改造でもVMLも使ってますし、また、元のTemplateでもVMLが一部使われてます）。なので、WebのHTMLをデキる人がそばにいるからといって、その人を頼って「EmailのHTMLを改造してくれない？」と軽くお願いするのは酷なので気をつけてください。。。。
「HTMLメールの改造が必要なのです。。。。何から勉強したらいいんでしょうか？。。。。」
ということでお困りの方がポツポツおられるようでしたら、ウェビナーとかも開催しようかなと思いますので、そのような方は、ぜひ、こちらに何か一言コメントください
。そしたらそれをエネルギーにして実施を検討しようとお見ます
-Yamada