メール・メルマガ配信サービスの【配配メール】ホーム > メール・メルマガ配信コラム > 効果を上げるHTMLメールの作り方! - 押さえるべきポイントと、スマホ対応 -

効果を上げるHTMLメールの作り方! - 押さえるべきポイントと、スマホ対応 -

  • このエントリーをはてなブックマークに追加

HTMLメルマガは画像を貼り付けられるため、テキストだけのメルマガよりも顧客への訴求力が優れています。HTMLメルマガの基本的な作成方法と注意点、そしてスマホに対応させるための方法の3点についてご紹介します。

HTMLメルマガの作り方

マーケティング効果の高いHTMLメルマガを作成するためには、HTMLの技術だけでなく、メール本文の工夫やメール配信システムの選び方なども意識する必要があります。現在ではスマホが急速に普及したため、スマホからでも正しく表示されるようにメールを作成することも大切です。そこで、HTMLメルマガを作るために、HTMLメールの基本的な特徴と、主な2つの作業、そして初心者におすすめの作り方を紹介します。

HTMLメールの特徴とメリット

HTMLは、ウェブサイトの作成にも使用されている言語です。HTMLを使用したメールは、ウェブサイトと同様に、画像の挿入や文字の装飾などを行えるため、見栄えの良いデザインにできます。また、視覚的にインパクトがあることから、分かりやすい画像を入れると、文字数を減らして読みやすくできる点もメリットです。さらにHTMLメールでは、メルマガの開封率も測定できます。開封率の測定は、HTMLメール内の画像が読み込まれた回数などを使用するため、テキストメールでは測定ができません。メルマガのより正確な効果測定を行うためにも、HTMLメールを使いこなしてみましょう。

HTMLメールには2つの作り方がある

HTMLメルマガは、マークアップとスタイリングと呼ばれるふたつの作業で作成します。マークアップは、HTMLタグに文章や画像を入れていき、メールの構造を作成していく作業です。主に、テーブルレイアウトという手法が使われます。
スタイリングは、色やサイズなどを装飾していく作業であり、マークアップの後に行われます。CSSを用いて行われます。主なスタイリングの作成手法には、インラインスタイル、埋め込みスタイルシート、外部スタイルシートの3つがあります。

インラインスタイル:スタイリングをHTMLタグに直接に入力する方法です。
埋め込みスタイルシート:スタイリングをHTMLのhead部分に入力する方法です。
外部スタイルシート:スタイリングを入力した別のファイルをHTML内で読み込ませる方法です。

埋め込みスタイルシートや外部スタイルシートでHTMLメルマガを作成すると、メールサーバーによっては読み込まれない場合もあります。そのため、インラインスタイルを用いるのがおすすめです。

HTMLメール初心者でもメルマガを作れる方法

HTMLコーディングの経験がない方は、HTMLメールエディタ機能や既存のテンプレートを利用しましょう。HTMLメールエディタには、コーディングを補助するものから、コーディングをしなくても直感的に作成できるものまでさまざまです。コーディングが必要ないものでは、画像やテキスト、リンクボタンなどのコンテンツを、ドラッグ&ドロップで配置するだけで済むため簡単です。また、テンプレートだけに限れば、エディタ機能に付属しているものだけではなく、インターネット上で配布されていて無料で利用できるものもあります。まずはこれらの機能・テンプレートに慣れ、完成形をイメージできるようになってから、HTMLコーディングでの作り方に取り組むことをおすすめします。

関連記事はこちらメルマガはテンプレート化すべき?テンプレート化のメリットや注意点

HTMLメルマガ作成時に注意する5つのポイント

HTMLメルマガのマーケティング効果を高めるためには、メール配信システムの選択も大切です。特に、以下の5点はとても大切なポイントです。

1.読みたくなる工夫がされているかどうか

HTMLメルマガは、テキストメルマガよりも顧客に訴えかける効果が高くなります。ただし、顧客が思わず読みたくなるような工夫を施さなければ開封率の上昇は見込めません。インパクトのある画像を用いるなど、顧客の興味を惹きつけるようなメールを作成しましょう。Webサイトへのリンクを設置する場合は、本文の上部など目立つ部分に貼り付けることでクリック率の向上が見込めます。

2.開封した顧客の情報を測定できる機能が備わっているかどうか

HTMLメルマガは開封率を調べられますが、開封した顧客一人ひとりの情報までは調べられません。
メール配信システムには、年齢や性別といった顧客情報や開封に利用した端末などの情報を取得できる機能が備わっているものもあります。情報は多ければ多いほど次回の配信に生かせるため、機能の充実したシステムを選ぶことが大切です。

3.マルチパートメールを送信できるシステムかどうか

マルチパートメールは、受信した端末でHTMLメールの表示がうまくいかない場合に、テキストメールを代わりに表示するメールです。メールを確認できる端末は増え続けており、すべての端末で受信確認を行うことは困難であるため、ぜひとも備えておきたい機能です。

4.環境ごとにテスト配信を済ませておく

HTMLメールの表示は、受信者の使っているメーラーによって、表示の仕方が異なっているため注意が必要です。作成中は問題なく表示されていた場合でも、実際に配信してみると画像や文字の配置が崩れてしまう可能性があります。そのため、HTMLメールは作り方だけではなく、配信前にメール配信システムのテスト機能などを使い、主要なメーラーで表示できるかどうかのテストをしておく必要があるでしょう。

5.システムの提供会社がしっかりしているかどうか

会社を選ぶ際には、通信環境に着目してみましょう。サーバーを1台しか所持していない会社では、そのサーバーがダウンしてしまうとメルマガを配信できません。もしもメルマガ配信中にサーバーがダウンしてしまうと、同じ顧客に同じメールを再送信することも起こり得ます。そのため、サーバーを複数台所持している会社を選択することが大切です。
徹底されたセキュリティ対策の有無もまた、会社を選ぶ際の基準になります。顧客の個人情報を取り扱う以上、その漏洩には一層の注意が必要です。もしも個人情報を流出させてしまうと、顧客からの信用を失ってしまいます。そのため、セキュリティ対策を徹底している会社のシステムを選ぶことが大切です。

HTMLメルマガをスマホ向けに送信するために

スマホが普及したことで、スマホからメルマガの確認を行う方は少なくありません。なお、パソコン用のHTMLメルマガをスマホで表示させるとレイアウトズレが起こってしまうことがあるので注意が必要です。そうした状況を防ぐためには、以下の方法が効果的です。

レスポンシブメール

レスポンシブメールは、受信した端末の画面サイズに合わせてメールのレイアウトを変化させて表示するメールです。受信者は、パソコンからでもスマホからでも常に読みやすいメールを受け取れます。ただし、レスポンシブメールの表示にはmedia queryが必要であるため、media query非対応のメールサーバーで受信した場合には非常に見づらくなります。GmailやOutlook、Yahooメールといった主要なメールサーバーのスマホアプリ版には、media queryが対応されていないため注意が必要です。

リキッドデザイン

リキッドデザインは大幅なレイアウトズレを起こすことなく、画面サイズに合わせて表示する方法です。media queryを必要としない点が大きな特徴です。ただし、リキッドデザインに対応していない端末で表示するとレイアウトが崩れてしまいます。特に、Yahoo!メールは非対応であるため注意が必要です。

HTMLメールの作り方のまとめ

HTMLメルマガは画像を貼り付けられるため、テキストメルマガよりも顧客への訴求力が強い点が特徴です。主にメールの構造を作るマークアップと、色やサイズを整えるスタイリングのふたつの作業から作成されます。
マーケティング効果の高いHTMLメルマガを作るためには、インパクトのある画像を使用するなど顧客に開封させる工夫を凝らす必要があります。メール配信システムの選択も大切で、「具体的な顧客情報まで調べられるかどうか」「マルチパートメールを送信できるかどうか」「システムを提供している会社が信頼できるかどうか」の3点を重視して検討するようにしましょう。
スマホの普及により、HTMLメルマガをスマホから確認する方も増えています。スマホからでも見やすいように、レスポンシブメールやリキッドデザインを上手に使い分けましょう。
今回ご紹介した内容を踏まえて、マーケティング効果を上げるHTMLメルマガを作ってみませんか。

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

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

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

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

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