HTMLメールを作りました
HTMLメールのデザイン、HTML/CSSコーディングが終わりました！
１、２年前に自分でコーディングしてHTMLメールを作成したことがあるのですが、それ以外はメール配信サービスを使ってHTMLメールをカンタンにつくる作業ばかりしていたので、今回調べて勉強になったことを作業の流れと合わせてまとめてみました。
（配信設定などのプログラムはエンジニアさんにお願いしており、対応していません。）
0. HTMLメールの作り方
まず作り方について。
「テーブルレイアウトにする」「CSSはインライン形式にする」という２点は覚えていたのですが、根本的なHTMLメールの理論や最新事情が知りたかったので、調べてみました。
学んだこと
- CSSは埋め込み形式でも良いが、メールクライアントによってはサポートされていないことがあるので、インライン形式がカタい。
- 幅は600pxがベスト。
- titleはメールの件名に反映される。
- 画像は重くならないように善処しましょう。
参考
1. デザインのリサーチ
HTMLメールのデザインを調べたもののなかなか見つけられず困っていたのですが、こちらの記事がとても参考になりました。
特によかったのがこの２つのサイト。
CakeMail
コードをダウンロードできます。
その上プレビュー画面で色の変更が簡単にできる！
http://templates.cakemail.com/
有料テンプレートを販売しているサイト。
購入せずともデザインを見ることができるので、勉強になります。 「mail template」で検索するとたくさん出てきます。
https://themeforest.net/
2. デザインを考える
AdobeXDで作成しました。
最初は横幅600pxのアートボードを作ってその上でデザインを作っていたのですが、body（600px外の背景部分）に色をつけられることを思い出し、PCの画面サイズのアートボードに横幅600pxの長方形を重ねて、そこでデザインを作りました。
関係ないですが、今回のように余白に番号を振ってWEBで共有すると、他の人に意見をききやすいのでありだな！と思いました。
3. コーディング
決定したデザインに従ってコーディングをしました。
前述したとおりテーブルレイアウトになります。
新たに学んだこと
- tableの中にさらにtableを入れたい場合、２つ目のtableをdivで囲むとイケる。
- メールクライアントによっては、画像の拡張子SVGにサポートしていない場合があるので他の拡張子にするのがベスト。
- メールアドレスはaタグで囲んで装飾を行うこと。何もしてないとメールクライアントがよしなにリンク表示してくれて、そこだけ青字になってしまうので注意。
以上です。
個人的には、デザイン通りにコーディングできてよかったです。
あと今回のように情報をまとめるレイアウトデザインは、わかりやすく伝えることが大事だし、かつデザイン性も担保することが難しくていい経験になりました。とても楽しかったです。
引き続きこれからも頑張ります！
