メルマガのデザインを極める！HTMLメールの見やすい設定とデザインのコツ

HTMLメールはデザイン性に優れ、テキストメールより多くの情報を伝えられます。配信したメールの効果が伸び悩んでいるなら、設定やデザインを見直してはいかがでしょうか。他社のHTMLメールの事例を参考に、自社のユーザーに好まれるメールを考えてみましょう。

HTMLメールの特徴

HTMLメールはHTMLとCSSで構成されるため、テキストメールよりも豊富な表現が可能です。また、効果測定も容易なため、多くの企業のメルマガに利用されています。

幅広い表現力が魅力

HTMLはテキストと画像を使いメッセージをユーザーに伝えられるため、工夫次第でよりわかりやすく、印象に残りやすいメールを作成できます。昔の携帯電話と違い、スマートフォンは画面サイズも大きいため、アイキャッチ画像をひとつ入れるだけでも、ユーザーの目を引きやすくなります。特に、アパレルや家電販売などのECサイトは、注目商品の画像を表示することで訴求力も高まります。

効果測定でユーザーの特性を把握

HTMLメールに画像やリンクのURLを埋め込むことで、クリックされたときにデータ読み出しのリクエストがサーバーに送られます。このリクエストを元に、開封率・クリック率・開封といったユーザーの特性を確認することが可能です。こうした情報から、ユーザーの傾向を把握して仮説を立てることが、メルマガ配信の効果を高めるために必要となります。リンクの位置、文量、画像の枚数を定期的に変更することにより、最も効果が出やすい設定が自社のユーザーにあったデザインになります。ここでは、「情報を集め、仮説を立て、改善案を試す」そしてまた、改善案の効果がでたのか情報を集めるといったサイクルを繰り返し、HTMLメールをより良いものにしていきましょう。

作成の注意点

HTMLメールをすべてのユーザーに同じように表示させるためには、設定が必要です。設定によっては表示が崩れ、自分が思ったデザインになっていないケースもあります。どのような部分に注意するべきか確認しておきましょう。

レスポンシブデザイン

パソコンで確認したときはキレイに見えていたのに、スマートフォンやタブレットで確認してみると、レイアウトが崩れているケースがあります。この問題は、レスポンシブデザイン対応のメールであれば解消されます。レスポンシブデザインは、画面サイズに合わせてメールのレイアウトが変化することで、どの端末でも見やすくなるというものです。以前は実装難易度が高いデメリットがありましたが、現在ではレスポンシブデザインに対応したHTMLメールテンプレートを利用できるメール配信ソフト・サービスも登場しており、作成の手間を軽減できるようになっています。

マルチパートメール

画像と文字装飾でユーザーの目を引くデザインを作りやすいHTMLメールですが、すべてのユーザーが閲覧できるとは限りません。HTMLメールに対応していないメールソフトの場合、開封されても本文が表示されずにソースコートがそのまま表示されてしまいます。マルチパート配信では、HTMLとテキストの両方をひとつのメールとして送ることができます。HTMLメールに対応していないユーザーへは、画像の部分をテキストで置き換えて表示してくれるため、デザインが大きく崩れることはありません。

画像設定

画像はサーバーにアップして『http://』から始まる絶対パスで記述してください。また、画像を非表示に設定しているユーザーもいるため、alt属性にわかりやすい文章を入れておきましょう。他にも、「アニメーションGIFや背景画像に頼ったデザインはデバイスによって表示されないことを考慮する」「画像で容量が重くなるとスパム認定される可能性があるため軽くする」といった点で注意が必要です。

サイズ設定

HTMLメールの横幅は600pxか850pxで設定できます。主な違いは、表示されるデバイスでの見やすさ・インパクトの違いです。600pxはスマートフォンでは読みやすくなりますが、パソコンでの表示は少しインパクトに欠けてしまいます。また、横幅だけでなくフォントサイズも重要であり、スマートフォンで拡大せずに読めるサイズは15pt以上です。主なユーザーのデバイスがパソコンなのかスマートフォンなのか、文字サイズは読みやすくなっているかを意識してHTMLメールを作成しましょう。

関連記事はこちらメルマガ効果UP！初心者でもできるHTMLメール活用法

HTMLメールに必要なスキル

一般的な内容であれば、HTMLとCSSを理解していれば、対応可能です。もし、一人で作成する場合には、構成を考えたり、テキストを校正したりと作業は多岐に渡りますので、可能であればチームを作って分業するのがおすすめです。

HTMLメールの作成手順

HTMLメールを作成する際は、次の3つの手順で進めるのが一般的です。利用するツールによって操作は少しずつ異なりますが、大筋の流れを確認しておきましょう。

1.本文を作成する

文字だけのメールを作成するときと同様に、本文の内容を考えます。基本的にはテキストメールと作成方法は同じですが、本文の作成中に画像を挿入する箇所や装飾する箇所を決めておくと装飾時に全体のバランスを整えやすくなります。

2.HTMLとCSSで構造化する

HTMLとCSSというWebサイトを作成する際に使うプログラミング言語で、全体を構造化（HTMLメールの様式に変換）します。作成には専門知識が必要になりますが、ツールを利用していれば、簡単に制作するためのサポート機を活用できる場合もあります。

3.全体を装飾する

構造化が完了したら、文字サイズを調整したり文字色を設定したりして、全体を印象的に装飾します。リンクの指定や背景色の設定など、適切な装飾を活用して興味をひくようなメールに仕上げましょう。

HTMLメール作成のコツ

HTMLメールは上記のような機能的な部分を理解した上で、ユーザーの心を掴めるようなポイントを意識して作成していく必要があります。どのような手順で構成を考えるのか、以下の項目を参考にしてみてください。

ターゲットや目的を具体的に考える

「どのような相手に」「どんな内容を」「ゴールはどこに設定するのか」など、デザインを考える前にメルマガの概要を設定しておく必要があります。デザインはあくまで目的達成のための手段なので、この軸を明確にしておくことがメルマガの配信において非常に重要です。

相手の受信環境を考える

HTMLメールは受け取る側の端末やソフトなどの環境によって表示のされ方に差が生じてしまいます。すべての状況を網羅することは難しいですが、主要な端末での動作確認や表示確認などは事前に行うようにしましょう。折角のデザインも表示されなければ意味がありません。

UI/UXを考慮しよう

スマホでの閲覧が圧倒的に多数を占める状況です。スマホユーザーの目線の位置や指の位置に考慮したデザインで、スムーズにコンバージョンさせていくような戦略を練ると良いでしょう。UI/UXについては、複数の関係者の意見を取り入れながら、運用と並行して改善を行なっていく必要もあります。

スマホに対応したランディングページを用意しておく

メルマガからの遷移先が整っていないとコンバージョンが期待できません。スマホ専用のランディングページを作成する必要はありませんが、レスポンシブ対応デザインのWebページにするなど、必ず、スマホで問題無く表示ができるランディングページを用意しておきましょう。

メルマガ解除の導線を明示する

メルマガの解除と登録は表裏一体です。解除の導線がわかりにくい設計のデザインだと、安心して受信できません。確実に見つけられる場所に解約の導線を用意しておくことで、より信頼のおける関係性を構築しましょう。

HTMLメールのデザインを学ぶ

「メールのデザインをより良くしたい」、「もっと目を引く効果的なデザインにしたい」と考えているのなら、他社のメルマガを参考にしてみるのも効果的です。HTMLメールを見てみると、サムネイル画像は大きめでシンプルに作られているものを多く見かけます。また、メールからWebサイトまでの動線のわかりやすさ、文章量での見やすさなども参考にできるはずです。実際に参考にするためにメルマガを見てみようと考えたときに、気になる企業すべてのメルマガ登録をして確認するのは大変です。そこで、おしゃれなHTMLメールを紹介しているサイトをご紹介します。

Email Gallery

海外の事例のみになりますが、種類が多く画像配置やリンク設置などのパターンを参考にできます。大手企業のメルマガも紹介されているので、ぜひ目を通してみてください。
Email Gallery – Email Design Inspiration

HTML Email Gallery

こちらも先ほど紹介したサイトと同じく、海外の事例を紹介しています。奇抜なデザインのメールも紹介されているので、他社とは違ったデザインのメールを作る際に参考になるかもしれません。
HTML Email Gallery | Email Design Inspiration

CodeCampus

プログラミング講習やテクノロジーの情報を発信するCodeCampusでも、ファッションや通販業界を中心にHTMLメールの事例が紹介されました。アパレル系ではメール全体の印象や頻度、件名に人気商品を入れることで、開封率を高める工夫なども紹介されています。
読まれるには理由がある！参考にしたいHTMLメール事例14選 | CodeCampus

ASCII.jp

こちらはWebデザインからマーケティングまでさまざまな情報を紹介しているサイトになります。その中で、ファッションや小売業、旅行といったさまざまな業種のHTMLメールが紹介されました。商品ページへのリンク設定の位置やコンテンツのまとめ方を業種ごとに閲覧できるため、サイト自体も見やすい構成になっています。
ASCII.jp：絶対見ておきたい国内有名企業のHTMLメール事例まとめ

ツールを使って早く魅力的に作る

HTMLメールを使った集客の経験があまりなく、まだデザインに悩んでいる方もいらっしゃると思います。そういった方は、テンプレートやツールの力に頼ってみてはいかがでしょうか。

テンプレートの利用

テンプレートを活用することで、一人では思いつかないようなデザインを取り入れながら、工数を削減することが可能です。無料でテンプレートをダウンロードできるサイトもありますし、中には用意されたテンプレートを元に、自社に合わせてカスタマイズできるサイトもあります。普段送るメールはもちろん、キャンペーン情報などの使用回数が限られているメールは、いつもとは違うテンプレートを使うことで簡単にデザインの変更が可能です。無料テンプレートを紹介しているサイトは、サイトによってシンプルなデザインや高級感のあるものなど特徴が違います。何種類か確認して、相性の良さそうなものを選びましょう。おすすめのサイトを5つ紹介するので参考にしてください。

ZURB

ZURBはカリフォルニアのデザインカンパニー、Foundationが公開しているオープンソースで、メールだけでなくサイトとアプリ用のデザインテンプレートも提供しています。無料テンプレートの定番となっており、ベーシックなデザインからシーンを選べずに利用できるのが人気の理由です。HTMLの初心者にはおすすめのテンプレートといえるでしょう。

ZURB

Free newsletter templates by CakeMail

メール配信システムのCakeMailはHTMLメールのテンプレートを無料で提供しています。テンプレートの数は50以上にものぼり、人気の高いものは4万回以上もダウンロードされています。無料とはいえ、海外サービスならではのハイセンスなデザインが人気の理由となっています。

Free newsletter templates by CakeMail

Antwort

レスポンシブデザインの無料テンプレートをダウンロードできます。デザインがシンプルなため、HTMLメール初心者でもとっつきやすいです。幅広いメールクライアント（Gmail、Yahoo!Mail、Hotmail、Outlookなど）に対応しており、使い勝手がいいのが特徴です。

BeeFree

8つあるベースのデザインから選んで、ブラウザ上でカスタマイズできるテンプレートです。ベースのデザインの品質が高い上に、自分でもカスタマイズできる希望通りのHTMLメールを作れます。HTMLメールに慣れてきて、少し凝ったデザインを作りたい方におすすめです。

BeeFree

Free Responsive Email Template - Part Ⅰ

シンプルながらも精密に計算されたデザインで、HTMLメール初心者から玄人まで納得できるサイトです。SNSでも多くのシェアを集めたこともあり、幅広い層に人気があります。2013年に提供を開始した、比較的新しい無料テンプレート配布サイトです。

Free Responsive Email Template – Part I

HTMLエディタを使う

HTMLエディタはHTMLやCSSの編集に特化したツールであり、テンプレートをそのまま使うよりもカスタマイズ性が高いです。HTMLやCSSなどのタグを自動的に補完してくれ、複数行を一度に編集することも可能で、メモ帳などを利用するより効率的に制作を進められるというメリットがあります。

画像やフォント、全体の文字配置や段組みなどを自由自在にレイアウトできるので、独自性のあるHTMLメールを作成したい方にはおすすめの方法といえます。しかしあくまでも入力を補完する機能がついているだけなので、基本的なHTMLやCSSの知識を持っていないと使いこなすのは難しいというデメリットもあります。

メール配信サービスの導入

メール配信サービスを利用すると、簡単にHTMLメールの作成・効果測定が行えます。装飾に必要なHTMLタグの知識がなくても使いやすいように制作されているため、初心者の方でも安心です。社もの実績を持つ配配メールでは、HTMLメールをより簡単に作成するために『HTMLエディタ』をオプションでご用意しています。この機能ではドラッグ＆ドロップの直感的な操作で、画像、テキスト、リンクボタンなどのコンテンツを配置可能です。また、配配メールではミスなく効果的に配信する、効果を測定して改善するといったマーケティングに重要な機能も用意されています。手軽に効果的なHTMLメールを作成したい方は、ぜひ、ご確認ください。

自社の顧客に合わせたデザインを探す

ユーザーの閲覧しているデバイス、業種、年齢層によって、必要なレイアウト設定・求められるデザインは異なります。どのデバイスでも見やすい設定にした後は、メールの開封率やクリック率といった情報を確認して、ユーザーの好みに合ったデザインを模索します。そうした測定・分析・改善を繰り返すことで、今以上にHTMLメールの効果を高められるはずです。今回紹介した配配メールにもHTMLエディタのほか、作成したメールをテンプレートとして登録する機能が備わっています。ユーザーの反応の良かったメールをテンプレート化して、自社の顧客に合わせたデザインに近づけていきましょう。

－メルマガ・メール配信サービス－

「配配メール」は、企業の集客・販促活動に携わる方のメールマーケティング業務を支援するサービスです。
シンプルな配信操作、見やすい成果指標レポート、メールの反応による見込み客の可視化、サイト来訪通知といった機能によりメールマーケティングの実践をサポートします。
また、機能の提供だけではなく、ナレッジ提供や個社の運用に踏み込んだ手厚いアフターフォローにより、お客様の販促の成功に向け伴走します。
メール配信の初心者から本格的なメールマーケティングの実践を目指している方まで、どなたでも安心してお使いいただけるサービスとして、お客様に長く愛され、98%の継続利用率を維持しています。