こんにちは
UniposというサービスでUIデザイナーをしているみりんです。
本記事は、Fringe81 Advent Calendar 2019の13日目の投稿です。
アドベントカレンダー初めてでワクワク
Qiitaの記事も初めて書くのでワクワク
今回、HTMLメールのデザインのみ担当し、エンジニアに実装してもらいました。HTMLメールは実装上の制約がとても多く、デザインを作り終わった後に修正が必要になりました。
デザイン段階から、HTMLの特性を知ってデザインすると、もっと素早い開発が出来るので、忘備録的に書きます。
実装担当者の記事は沢山あったのですが、デザイナーさんが書いている記事はなかったので活用されるといいな
わたしの失敗を教訓にLet's エンジニアさんとスムーズな開発！
##目次
- HTMLメールとは？
- HTMLメールコーディングの制約
- デザイナーが気をつけること
- まとめ
HTMLメールとは
通常のテキストメールはこんなの
一方、htmlメールとは、画像を載せたり、装飾（文字の太さ、色など）をつけたりして送ることの出来るメールです。
こんなの
通常のテキストメールよりワクワクした雰囲気を出せるので特に季節に合わせた施策、キャンペーンなどで効果的に使えそうです。テキストメールより出来ることも多いのでデザインするのも楽しい！
調査のために自分のメールボックスをみていたら、日本のBtoBサービスにおいて、テキストメールの場合が多かったです。Uniposも通知メールはテキストメールです。外国のサービスからのメールは内容がテキストだけでも、ロゴをつけてHTMLメールになっているものばかりでした。
メール一つとっても、サービスの特徴や戦略が見えておもしろい
HTMLメールの制約
実装において、
普段多用しているCSSがほぼ使えません。marginやpaddingなどレイアウトを構築する上でよく使うプロパティも使えないのでHTMLメールでは、CSSではなくテーブルでレイアウトし、装飾には幅広いメーラーで使えるCSSのみを使う。
ことが必要になります。
想像した100万倍使えなくて、実装が始まってから、エンジニアさんに「使えないのデザインの変更をお願いします」と言われて、ギョエー〜ーー！ってなりました。
実装的制約はこちらを参考にしてください
くずれないないHTMLメール
https://qiita.com/kinoshitatomomi/items/1c1165b10aaa0389b0e5
HTMLメール作成で調べたことまとめ
https://qiita.com/ta-ke-no-bu/items/675130afd1ecc09e38b4
デザイナーが気をつけること
web上で見るのにはほぼ問題ありませんが、Desktopアプリを使っている人までサポートしようとすると、以下は使えません。
- gradient：グラデーション
- drop-shadow：影
- background-image：何かのモノの後ろに画像をおく
Uniposのサービスカラーがグラデーションなので、guradientが使えないのは辛かった。。。
デザインする時に、使うであろうcssのプロパティをこのサイトで調べるのがおすすめです。
右上のSearch cssにプロパティを入力して調べてください。
https://www.campaignmonitor.com/css/
追加で
-
書き出しの画像はjpgかgifで無駄に大きくしない(読み込みが早い、容量が軽くなる)
容量が大きいと、スパム扱いされる可能性があるのです。 - fontは、webには反映されるが、スマホでは反映されない
- outlookのDesktopアプリにはレスポンシブという概念がないので、全ての幅に対応出来るようなデザインにする
まとめ
今回は、実装するエンジニアがhtmlメール実装初めてだったり、エンジニアが海外にいて全部会話がSlackだったこともあり、デザイン修正も含め、会話が150往復くらいしてしまいました><
デザイナーはエンジニアと事前に会話して、
出来ることと出来ないことの認識を揃える
のは、htmlメールだけでなく、とってもとっても大切。
実装のことを理解し、実装とのバランスを取りながらデザインを作ることも、デザイナーの力量だと思うのです。
次は、クリスマスにHTMLメールを送ることになり、絶賛今、今回の反省を生かして、実装を見据えたデザインを作っております。
クリスマスメールでは、新たな挑戦として、今回エンジニアさんにしてもらっていたデザイン調整を、デザイナーのわたしがやることにしました。
Uniposユーザーの方は、メール通知をonにして待っててくださいね ☺️