安易にHtmlメールに手を出したら大変だった話

Google Form -> SpreadSheet -> Calendar && Mailで簡単な予約フォームを作る。に引き続き、学習支援コーナーでのお話です。

学習支援コーナーでは毎月の初めに、メールで学部の皆さんにお知らせを送っています。

何か変わったお知らせの方法がないかな？と思って、思いついたのがHTMLメールです。

今回は、HTMLメールを作った話と、思ったより大変だったという話です。

大変なポイント

一番大変だったのは環境による違いです。

Webページのモバイル対応とかも、大変だと思いますが、それ以上なんじゃないかなと思います。
単純に注意しなければいけないところが増えることが原因なのかもしれません。
OS × ブラウザ × Webメーラーとか。
特にスマフォのキャリアメールについては、Htmlメールを表示できないキャリアもあるようで、対応できないものもあります。
auは表示できないみたいですね。

他に大変だったのは、CSSを埋めこまなければいけないとか、Webからは送れないとか、テーブルをめっちゃ組み合わせなきゃいけないとかは大変でした。

基本的な作り方

今回は、上のような理由から、一から作る事は諦めて、テンプレートを調整していく形で作っていくことにしました。
(初心者でもお洒落なhtmlメールが作れる高品質テンプレート20選とか。知らなかっただけで結構ある)
テーブルを組み合わせる事、CssはインラインCssで書く事で作っていきます。

実は、このテーブルとCSSをインラインで書くというのは、Htmlメールを作成する時に必須になるポイントだったりもします。
上で話したような、環境の違いによる表示のずれなどを極力抑えるためです。
しかし、全てテーブルで組んだとしてもiPhoneなどでは隙間ができてしまうこともあるようなので注意が必要ですね。

今回は使わなかったんですが、Cssをインライン化してくれるサービスもあるので、それを使うと楽かもしれません。
CSS inliner

作り方を調べていて思ったこと

みんな苦労してるんだな、、、という事と海外ではHtmlメールが多いという事です。

作成自体は、すぐにできるけど、検証が大変！という話は多かったです。
メールなので送ってから修正する！とはできないですから検証が大事なのかもしれません。

あと一つは、テキストのメールが多いのは日本だけだよ。みたいな話。
実際どうなのかは知らないですが、確かに、英語で来る迷惑メールとかはhtmlメールが多いなーとは思いました。

作ったもの

こんな感じです。

ちなみに送り方はMacだと数クリックで送ることができます。

htmlを作成する。
ブラウザで開く
ファイルの共有からこのページをメールで送るを選択
MacのMail.app?が起動するので、送信する。

これで送ることができます。

今回は学内メールでGmailが使われているので、Gmailをメインにちゃんと表示できるように調整しています。
環境によってのフォントの違いとかで多少ずれたるするものの、大きな崩れはないみたいです。

ちなみに教員向けのメーラー(ActiveMail?)では表示できていないみたいです。

これが他にも対応したいとかになると大変ですね。

おわり

送信済みになってるのに、だれも受信できてないみたいなんだけど、どういうことだ、、、

おわり2

PAKUTASO便利。
ゆかちぃが可愛い。@xmas_yk