メール・メルマガ配信サービスの【配配メール】ホーム > メール・メルマガ配信コラム > HTMLメールのデザインを見直す!見やすい設定と参考になるデザイン

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メールを作成しましょう。HTMLメールの『サイズ』に関しては、こちらの記事でも詳しく紹介しています。

関連記事はこちら知らないと恥ずかしい!?HTMLメールを作る時に知っておくべきサイズ

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

テンプレートの利用

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

メール配信システムの導入

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

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

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

何度配信しても定額のメール・メルマガ配信サービスは「配配メール」

お役立ちコラム一覧はこちらから

何度送っても定額だから安心

配配メール関連サイト情報

何度配信しても定額のメール・メルマガ配信サービスは「配配メール」

  • OEM
  • メルラボ
  • クルメル
  • メールディーラー
  • ビジネスパートナー
  • Pマーク