HTMLメールの作り方：5記事まとめ

メールマーケティング担当者必読の記事を、5本まとめてご紹介します。自社のビジネスに最適なテンプレートをつくるための方法を模索してみてください。

HTMLメールの効果を知ろう：統計情報

昨今のコンテンツマーケティングの流行に後押しされ、あらためて注目が集まり始めているメールマーケティング。HTMLメールの効果を振り返るために、国内・海外のさまざまなデータをご紹介しています。

Q. あなたは、企業やショッピングサイトから送られてくるお知らせをインターネット上でどのように受信していますか？（いくつでも）

LineやFacebook、Twitterなど、オンラインのコミュニケーションツールとして、さまざまなソーシャル系メディアが登場しています。 統計情報を見ると、最も購買につながりやすいメディアは、やはりメール。
メールマガジンが重要な販売チャネルであることが分かります。
スマートフォンからメールを見ることが増えている昨今、今後は、間違いなく "モバイルファースト" のHTMLメールが流行りそうです。

▶「HTMLメールの効果を知ろう：統計情報」の記事はこちら

通常のウェブページ制作との違い

HTMLメールは、通常のウェブページ制作とは違います。
最も大きな違いは、メーラー（Outlook等のメールを閲覧するソフト）やウェブメール（Gmail等）で閲覧するという点。
それぞれのメーラーによって使えるCSSが異なり、通常のウェブページを作るよりも使える技術が制限されます。そして、確認すべきメールクライアントが多いので、表示の検証作業も、かなり面倒なことに・・。

このブログでは、知っておくべきCSSの基本や、テーブルレイアウトとCSSレイアウトの違いなどをご紹介しています。 現状ではメーラーのCSS対応状況にばらつきがあるため、"テーブルレイアウト＋必要最低限のCSS" というのが基本です。

最大公約数的な技術を使うことで、なるべく多くのメーラーで崩れが起きない（もしくは起きた場合でも、それほど見た目に影響がない）ように作っておくことをお薦めします。

▶「通常のウェブページ制作との違い」の記事はこちら

効果の上がる画面構成

画像や文字の扱いについてのヒントなど、ぜひ知っておきたい、HTMLメールならではのノウハウをご紹介します。

購読者は必ずしもあなたと同じ環境でメールを見ているとは限りません。スマートフォンやタブレットでメールを見ているかもしれませんし、メーラーの設定でHTMLをオフにしている可能性もあります。

さまざまな検証結果から、HTMLメールの「お手本」が生まれていますが、まずは「誰に、どんなメッセージを送りたいのか」をハッキリさせることが、いちばん大切ですね。

作り始める前に、メッセージの内容を十分考えて、購読者の心に刺さるメルマガを作りましょう。

▶「効果の上がる画面構成」の記事はこちら

スマホ対応とレスポンシブHTMLメール

スマートフォン端末が普及し始めた2012年ごろから、企業のウェブサイトのスマホ化が進められてきており、現在では半数近くのウェブサイトが対応済みのようです。 ウェブサイトのスマホ化とともに、メールマガジンのスマホ対応に注目が集まり始めています。

一つのソースで画面サイズに合わせてレイアウトが変化する "レスポンシブメール"、そして、比較的多くの情報を載せることができるうえ、対応端末の幅も広い "リキッドデザイン"。 それぞれのメリットとデメリットをご紹介しています。

ウェブサイトの構築とは異なり、HTMLメールは検証にたいへんな労力が掛かるので、あまり複雑な作り方をするのは好ましくありません。
シンプルにできるところはシンプルに構成し、リキッドで画面幅を対応させるという折衷的な方法で作っていく方法がベターかもしれません。

▶「スマホ対応とレスポンシブHTMLメール」の記事はこちら

HTMLメールデザインのこれから

時代の流れとともにさまざまな新しい技術が登場してきています。HTMLメールの閲覧環境が新しくなるに連れ、よりリッチな表現が可能になりました。

例えば、動画。すでにいくつかのメーラーでは背景動画を使えるようになっています。

そして、Google Web Fontsの利用も一部のメーラーで利用が可能になりました。

これからモバイルがますます普及し、さらに重要性が増すとともに、モバイルユーザーをターゲットとしたメール配信をするケースも増えてくると思います。モバイルには、新しいメーラーが搭載されているので、さらにリッチな訴求方法が検討できそうですね。

▶「HTMLメールデザインのこれから」の記事はこちら

この製品に関してのお問い合わせ