便利ツールみなさん、購読しているニュースレター(メールマガジン)はありますか?私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう!HTMLメールとはテキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通知メールはすべてHTMLメール。昨年日本のWebサービスからテキスト形式のニュースレターを頂いた時は、正直久しぶりに見たテキストメールに驚きました。個人的にHTMLメール大好きです。2013昔から日本では『HTMLメールは嫌われる』という謎の固定概念があるようですが、そんな考えも今は昔。2010年に行われたマクロミルのメールマガジンに関する調査(PDF)によると、テキスト形式での配信を望むユーザーの割合は24%に留まりました。言い換えれば残りの76%のユーザーは(メールの内容にもよりますが)HTMLメールを嫌っているというわけではありません。2014年現在、日本のWebサービスでもHTMLメールを配信する企業が増えつつあり、ユーザーの考えはさらに変化していることでしょう。日本のユーザーがニュースレターを嫌う要因のひとつとして、某大手ネットショップのスパムメールが挙げられる気がしますが...まぁこの辺は今回は割愛...。ちなみに現在は、デフォルトではHTMLメールを送信し、テキストメールしか対応していないユーザーにはテキスト形式を表示させる機能のあるメール配信システムも多く、安心して配信できます。HTMLメールもレスポンシブ時代にこれまでのメールは、そのほとんどがデスクトップのメールクライアント及びWebメールに向けたものでした。スマートフォンが普及してからはモバイルデバイスでメールを閲覧する人も増加。エクスペリアンジャパンが2013年4~11月に行った開封エンゲージメントサービス調査によると、HTMLメールの65.5%はモバイルデバイスでの閲覧だったそうです。これからのメールマーケティングはデスクトップのメールクライアントのみならず、モバイルデバイス対応の重要性も伺えます。HTMLメールでできること見やすく、メリハリのあるメールを配信ユーザーを魅了するメールを届けるには、モノクロかつ同じサイズのテキストのみでは限界があります。テキストのみで「かわいいキャラクターのイラスト付き化粧ポーチ入荷!」と紹介されるよりも、実際にその写真が掲載されている方がわかりやすいですね。Recipients」によると、デザインのよくないメールの内、80.3%は削除されてしまい、30.2%のユーザーが定期購読を解除するそうです。単純にテキストメールからHTMLメールにすればいいというわけではなく、ひとつのWebページをデザインするのと同様に、見やすさや使いやすさも考慮してデザインしなければなりません。メールの開封率を計測HTMLメールでは開封率やクリック率がわかるので、今後のマーケティング戦略を考える材料としてフル活用できます。無断で計測すると不信感を抱くユーザーも。計測することをニュースレターの登録ページやプライバシーポリシーのページに加えておくといいでしょう。HTMLメール制作時に覚えておくべきことでは、どのようにしてモバイルに対応したHTMLメールを制作するのでしょうか?「HTMLメール」という呼び名から、通常のWebページと同じように進められると思われがちですが、実はかなり原始的な方法で制作していきます...。必須項目を中心にダダっと紹介します。タグを使ってレイアウトを組んでいました。その頃と同じ手法で、すべてのレイアウトをテーブルで組んでいく必要があります。やっかいなのが、メールクライアントによっては謎の余白ができてしまうこと。タグに以下の指定をすることで解決できます。テーブルのHTMLタグを生成してくれるジェネレーターです。直感的にテーブルを作成できるので、HTMLメール制作初心者の方でも比較的楽に進められるはず。部分のスタイル指定を無視するため、各要素に直接CSSを指定する必要があります。#fc2;">こんな感じですね。要素にスタイルを指定するのではなく、できるだけ直近の要素に指定するとトラブルを回避しやすいです。stylerを使えば、すでに外部CSSで指定しているスタイルを各要素に指定してくれます。HTMLを貼り付けるか、URLで指定生成可能。始まる絶対パスでないとエラーとなるので注意です。詳しい説明不要な簡単な注意点ばかりなので、箇条書きにて。始まる絶対パスで記述するデフォルトで画像を非表示にしているユーザーも多いので、alt属性必須アニメーションGIFは避ける。デバイスによっては表示されない背景画像に頼ったデザインは避ける。レスポンシブデザインレスポンシブWebデザインと同様、HTMLメールでもレスポンシブに対応させるためにはメディアクエリーを利用します。タグを無視するため、モバイルファースト手法で制作していきます。モバイルファーストとは、従来のデスクトップデザイン→メディアクエリーで小さい画面に対応、という順序ではなく、先にスマートフォンサイズで制作しておいて、メディアクエリーでデスクトップサイズに対応させるという手法です。これならメディアクエリーが利用できないスマートフォンアプリでもうまく表示されるでしょう。*/}この書き方だと、デバイスの幅が480pxを超える場合は別のスタイルを適応させる、という指定になります。数値はもちろん変更可能。デスクトップサイズのテーブルの幅は600pxが最適だと言われています。ストレスフリーなコンテンツをここまで制作の技術面で大切なことを紹介しましたが、ここではコンテンツの見やすさや使いやすさという視点でHTMLメール制作を考えてみたいと思います。表示するコンテンツを限定するひとつのメールでたくさんの事を書きすぎてはいけません。多くのユーザーはメールをササッと確認する程度で、最初から最後までじっくり精読する人は少ないです。極端な話、掲載するのはユーザーの印象に残るような画像とキャッチコピーと5行前後の簡易説明文、そして詳細を掲載しているページへのボタンのみでOK。重要ではない要素を省く勇気も必要です!右のHTMLメールはSTORES.jpが配信しているものです(拡大して見る)。新機能のお知らせや便利な機能の使い方が月に3〜5回ほど配信されています。内容もひとつのメールでひとつのコンテンツに絞り、余白をたっぷり使ったスッキリとしたデザインで大変読みやすく作られています。スマートフォンで見ても問題なし。重要な決断を迫らない先ほど述べたとおり、ユーザーはメールを短い時間で簡単に確認する程度で読み流します。そんな時に「今すぐ登録!」「今すぐ購入!」という決断を迫られても単純に無視されるか、最悪の場合うっとうしく感じられて購読を解除されてしまいます。そのため、メールでは軽く行動を促す程度におさめ、リンク先でより詳細な情報とともにCTAボタンを置くとよいでしょう。具体的には「今すぐ購入!」ボタンの代わりに「詳しい情報を見る」「サイズを確認する」「もっと画像を見る」などなど。去る者は追わないたとえニュースレターの登録を解除したいというユーザーがいたとしても、その方法を隠したり、阻止してはいけません。どのメールにも登録解除のリンク(または解除方法)を記載しましょう。サービス自体に不満はなく、ただメールが不要だ、というユーザーもいます。それなのに解除を妨害されることでユーザーにストレスを与えると、会社自体にマイナスなイメージを持たれてしまいます。どのユーザーにもハッピーな気持ちでサービスを楽しんでもらいたいですよね!レスポンシブ対応の無料HTMLメールテンプレートHTMLメールを制作する時の注意点をずらずら並べましたが...はいそうです、とにかく制限が多すぎる!!これを一から自分でコーディングしていくのは一苦労。そのうえ手間をかけて制作したにもかかわらず一度読まれて終わりという悲しき運命です。多くのメールクライアントでテスト済みのHTMLメール配信サービスや、テンプレートを使ってみましょう。MailChimpMailChimpは世界中で愛されているニュースレターの作成支援&配信サービス。無料で最大2000人の購読者に、月間1万2000通まで配信できます。多くのユーザーに配信したり、月間配信数を増やしたい場合は月額料金が発生します。HTMLメールもテンプレートを選択し、画像やテキストを挿入したり、ドラッグ&ドロップで項目を追加して手軽に作成可能。メール配信後の解析ツールも充実しています。A/Bテストも実施できますよ。詳しい登録方法や簡単な使い方については「無料で手軽にHTMLを使ったメルマガの作成と配信ができるウェブサービス「MailChimp」を使ってみた」が参考になります。MonitorもMailChimpと同じくHTMLメールの作成や配信ができるサービス。Monitorを利用していました。ドラッグ&ドロップでHTMLメール制作、解析ツール、A/Bテスト等、できることはMailChimpとほぼ同じ。料金形態は月額プランの他、一通$5+配信ユーザー数×1セントという配信メール単位での課金もできます。3,000人に配信するなら$35($5+3000*$0.01)かかります。Monitorの方がお得なようです。MonitorのHTMLメール作成ツールは無料のものも用意されています。なんと日本語にも対応しています!!ただこちらは有料のものとは別で、あくまで骨組みを作成するツールと考えていただきたいです。詳しい手順は「無料ツールを利用したHTMLメールの作り方~前編~【非デザイナー向け】」という記事を読んでみてください。InkInkはCSSフレームワークFoundationを開発したZURB社によるHTMLメールのフレームワーク。CSSフレームワークと同様、グリッドやボタンといったコンポーネントが含まれています。数種類用意されているテンプレートもダウンロード可能。Inlinerを使って各要素にスタイル指定する必要があります。その他シンプルなHTMLメールテンプレート他にも使い勝手のよさそうなテンプレートいろいろ。枠組みさえあればカスタマイズも難しくないと思うので、ぜひ試してみてください。WebサイトをIE6に対応させるのがまだかわいく思えるほど大変な作業です。通常のWebサイトの制作とは異なり、表示確認をするメールクライアントやWebメール、アプリの種類がブラウザーに比べてはるかに多く(20種類以上!)、どれも言うことの聞かない困ったちゃんです。対応させるメーラーを絞り、完璧を目指さないことがコツですかね...。表示確認するには実機で行うのが一番いいのですが、さすがに種類が多すぎて大変なので、HTMLメールの表示確認ツールを使ってみましょう。Acidでは約70種類のメールクライアント・Webメールでの表示確認が可能。インターネットマーケティングの会社で働いていた頃は常にこのサイトを利用していました。表示サンプルはこんな感じ。月額$45〜、一週間の無料トライアル期間有り。LitmusLitmusでは約30のメールクライアントでテスト可能。こちらはHTMLタグをコピペして無料で使えるプレビューツールがあります。Acidより表示に時間がかかる気がします。月額$79〜、一週間の無料トライアル期間有り。最後にHTMLメールを制作する時に参考になりそうな、素敵デザインを集めたサイトを紹介します。GalleryHTMLメールはテキスト形式のものに比べて、表現力が格段にアップします。その分ユーザーへの訴求力もあがるかもしれませんが、同時に使いやすさや読みやすさを含む設計そのものをきちんと理解して制作しないと、逆効果となりかねません。参考サイトや補助ツールの豊富さ、向き不向き等がわかりやすくまとめられていて、とても勉強になります。私も以前HTMLメールの事を書いた事があり、自分なりに色々調べたつもりだったのですが、まだまだだなあと感じました。HTMLメールの作り方と記事のまとめ方の両方の事を学べる、個人的には一粒で二度おいしいエントリーでした。ありがとうございました。有益な情報ありがとうございます。最近HTMLメールと格闘しているのでたいへん参考になりました。レスポンシブデザイン」のところ、このアプローチでは多くのPCメーラーでもモバイル版のレイアウトで表示されてしまいます。CSSサポートが弱くメディアクエリにも対応していないPC版メールクライアントのための設定をしたあと、メディアクエリに対応したIOS/Android標準メーラーのためにモバイルサイズの設定をするというアプローチが、現状のレスポンシブなHTMLメールの組み方としてはベターだと思います。以下にまとめてみましたので、参考にしていただければうれしいです。かたログhttp://ashinoyoshi.tumblr.com/post/92685232771/responsiveemailぜひまた、HTMLメールに関する情報をお願いします。pm素敵なエントリーをありがとうございます!今回は「モバイルでメールを閲覧する人が多い」という調査結果に応じる形でモバイルファーストを推奨いたしました。PCで確認するユーザーの割合が多い場合はデスクトップファーストでアプローチする方が効果的だと思います。pm初めてのコメントです。明日、仕事でHTMLメールを作成することになり、manaさんのブログ記事を参考にさせて頂きます。HTMLメールの無料作成ツールから必須のタグまで細かく紹介して頂きまして大変に役に立ちます。ありがとうございます。http://freshmail.com/newsletter-templates/ニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。