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

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

HTMLメルマガは画像を貼り付けられるため、テキストだけのメルマガよりも顧客への訴求力が優れています。ただし、マーケティング効果の高いHTMLメルマガを作成するためには、HTMLの技術だけでなく、メール本文の工夫やメール配信システムの選び方なども意識する必要があります。現在ではスマホが急速に普及したため、スマホからでも正しく表示されるようにメールを作成することも大切です。そこで今回は、HTMLメルマガの基本的な作成方法と注意点、そしてスマホに対応させるための方法の3点についてご紹介します。

HTMLメルマガの作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブメール

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

リキッドデザイン

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

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

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

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

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

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

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

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