メール配信の記事
ARTICLEHTMLメールの作成方法とツールの機能を紹介！効率的なメルマガ運用を行う方法
HTMLメールはテキストメールに比べ、デザイン性が高く、かつメール配信後の効果測定も可能なのが特徴です。難しいと思っている人も多いかもしれませんが、便利な作成ツールを使えば作るのも簡単です。HTMLメールの効率的な作成方法について解説します。
HTMLメールとは？
一般的にメルマガに使われるのは、『テキストメール』と『HTMLメール』の2種類です。テキストメールとは、その名の通りテキストのみのメールです。
一方、HTMLメールとは、HTML（Hyper Text Markup Language）形式で作られたメールを指します。
HTMLはテキストにタグをつけることで文章の構造をコンピューターに理解させるための言語です。HTMLを使うことで、テキストのうちどこからどこまでがタイトルなのか、1記事分の範囲はどこまでなのか、といった文章の役割を指定できます。
そして、CSS（Cascading Style Sheets）と呼ばれる、文字装飾や背景のデザインを指定するための言語と併用することでデザイン性の高いメールを作成することができます。
HTMLメールとテキストメールの違い
『HTMLメール』には、『テキストメール』と異なる点として以下２つがあります。
- 画像や動画、フォントなど、デザイン性が高い
- 開封率を計測できる
これらの『HTMLメール』ならではの特徴を詳しく解説していきます。
特徴１：画像や動画、フォントなど、デザイン性が高い
HTMLメール最大の特徴は、デザイン性の高さです。テキストの色や大きさを変えたり、リンクを貼ったり、画像を埋め込むことが可能です。
HTMLメールはWebページと同じように読者の視覚に訴えて興味を引けるため、メルマガを読んでもらえる確率が高いとされています。テキストメールで配信している競合他社との差別化にもつながるでしょう。
特徴２：開封率を計測できる
テキストメールの場合、メルマガの開封率をチェックすることはできません。しかしHTMLメールならメールの開封率を測定できるのです。
『タイトルにこのキーワードを入れたら開封率が上がった』『何時に配信したら開封率が下がった』『このテーマは開封率が良かった』というような読者の反応を集めてデータ化しましょう。
そこからタイトルや配信時間など改善点を見つけ、次のメルマガに活かせます。
こうしてHTMLメール配信とデータ測定を繰り返しながら、開封率アップを狙っていきましょう。検証できる機能があることは、HTMLメールの大きなメリットといえます。
ただし、HTMLメールにも『表示が安定しない』『容量が大きい』などの懸念点があります。また、テキストメールに比べて作成時間やコストもかかるでしょう。
次にHTMLメールを作成する方法について紹介しますので、これらを踏まえたうえで、HTMLメールの配信を検討してください。
HTMLメールの配信は効果的？メリット・デメリット、流れを解説
HTMLメールを作成する方法
HTMLメールを作成する方法について解説します。テキストメールに比べるとやや専門的な用語が出てきますが、初心者向きの簡単に使える作成ツールもあるので安心してください。
ここでは作成前に確認しておきたいポイントと、『直接HTMLを書き上げる方法』『作成ツールを使用する方法』の2パターンをご紹介します。それぞれの特徴をつかんで、自分に合った方法を選びましょう。
HTMLメールを作成する前に目的・ターゲット・構成を整理する
HTMLメールを作成する前に、配信目的やターゲット、訴求内容を整理しておきましょう。キャンペーン案内や既存顧客への案内など、メールの役割によって、掲載する情報や訴求の優先順位は変わります。
また、本文構成や画像とテキストの使い分け、CTAの位置などを事前に決めておくことも大切です。デザインやコーディングから始めるのではなく、誰に何を伝え、どのような行動につなげたいのかを明確にしたうえで作成しましょう。
直接コーディングをする
テキストメールの場合、文章を書き込むだけで完成しますが、HTMLメールの場合はまず土台となるテンプレートを作成する必要があります。さらに、そのテンプレートをコーディングしなければいけません。
コーディングとは、作成したテンプレートをHTML化することです。HTMLで表示できるように変換する『翻訳のような作業』と捉えると分かりやすいかもしれません。
直接コーディングする場合、ある程度のコーディングスキルが必要となります。初心者の場合は、次に解説する作成ツールを利用した方が賢明でしょう。
HTMLメール作成ツールを使う
テンプレートを自力で作ろうとすると、画像の挿入場所やテキストの配置など、全体のバランスを考える必要があります。
さらに直接コーディングする場合、専門知識が必要となる上、時間と労力がかかってしまうでしょう。
そこでおすすめなのが、HTMLメール作成ツールです。作成ツールを活用すれば、専門知識がなくてもHTMLメールを作成できます。
初心者の場合は、自動的にコーディングを行いHTMLとして出力してくれる作成ツールを利用するようにしましょう。
HTMLメールの送信テスト方法は？作成時のポイントとともに紹介
HTMLメールを作成する際の注意点
HTMLメールは、テキストメールに比べて機能性が高く大変便利です。しかし、作成する際には注意すべき点もあります。
レイアウトやレスポンシブデザイン、各メーラーへの対応に加えて、表示崩れを防ぐための記述方法や、配信前の確認作業などにも注意が必要です。ここでは、HTMLメールを作成する際に気をつけたいポイントを解説します。
デバイスによっては綺麗にレイアウト表示されない
HTMLメールを作成する際に最も注意したいのが、レイアウトです。パソコンだけでなく、スマホやタブレットなどあらゆるデバイスから閲覧されることを想定して、レイアウトを考える必要があるのです。
例えば、パソコンでは綺麗に閲覧できても、スマホではぐちゃぐちゃのレイアウトが表示されてしまうケースもあります。そうなると、読者は一気に読む気をなくしてしまうでしょう。
最悪の場合、メルマガ配信を解除されてしまう可能性もあります。そのため、どのデバイスで閲覧されたとしても、綺麗なレイアウトが表示されるよう設定しなければなりません。
レスポンシブデザインなら対応可能
レスポンシブデザインとは、あらゆるデバイスや画面サイズに応じて自動的に文字や画像を調整してくれるウェブデザインのことです。近年、デバイスの種類が増えたことをきっかけに、このデザインが主流となってきました。
先ほどのレイアウトの問題をクリアするためには、レスポンシブデザインのHTMLメールを作ることが重要です。一般的に、レスポンシブ化するだけでクリック率は上がるとも言われています。
各メーラーに対応したテンプレートを使用しよう
近年、デバイスのみならず、GmailやOutlookなどメーラーの種類も増えました。それぞれ対応しているCSSのプロパティが異なるため、必ずしもすべてに上手く表示されるとは限りません。
「HTMLメールとは？」の項で軽く触れましたが、HTMLメールの文字装飾や背景色といった画面上のレイアウトはCSSという言語で指定します。このCSSの記述パターンは無数にあり、メーラーによって対応できるパターンが異なるため、受信側でレイアウト崩れが起きる場合があるのです。
各メーラーごとにテストをするのは手間なので、あらかじめ複数のメーラーに対応しているテンプレート作成ツールを使うようにしましょう。主要なメーラーに対応していれば、安心してメルマガを配信できます。
テーブルレイアウト・インラインCSSで表示崩れを防ぐ
HTMLメールは、受信者が利用するメーラーによってCSSの対応状況が異なります。そのため、Webページと同じ感覚で作成すると、意図したレイアウトで表示されない場合があります。
表示崩れを防ぐには、tableタグを使ったテーブルレイアウトで構成する方法があります。HTMLメールでは、divタグを使ったレイアウトよりも、table、tr、tdなどのタグを使って骨組みを作る方法が用いられます。
また、CSSを使う場合は、外部CSSではなくHTMLタグ内に直接記述するインラインCSSを使用するのが一般的です。HTMLメールを作成する際は、メール環境に合わせた記述方法を確認したうえで作成しましょう。
配信前にプレビュー・テスト配信を行う
HTMLメールを配信する前には、プレビューやテスト配信で表示内容を確認しましょう。作成画面上では問題なく見えていても、実際のメーラーでは画像の表示や文字の折り返し、余白などが変わる場合があります。
確認時は、GmailやOutlook、Yahoo!メールなどの主要なメールソフトに加えて、PC、スマートフォン、タブレットなど、読者が閲覧する可能性のある環境でもチェックすることが大切です。
あわせて、レイアウト崩れがないか、画像が正しく表示されているか、リンクが正しく機能するかも確認しておきましょう。配信前に表示テストを行うことで、送信後の表示トラブルを防ぎやすくなります。
HTMLメール作成ツールの主な機能
HTMLメール作成ツールには、さまざまな機能が付いています。初心者だと、どの機能を使えば良いのか判断に困ってしまうでしょう。
主な機能である『ドラッグ＆ドロップ』『レスポンシブ対応』『テキスト、画像エディタ』について解説します。この3つの機能が使いこなせれば、HTMLメールは比較的簡単に作れるはずです。
機能１．ドラッグ＆ドロップ
編集メニューの中にあるドラッグ＆ドロップを使うと、感覚的にコンテンツを編集できます。作成ツールの使用経験や特別なスキルがなくても、直感で使い方が分かるでしょう。
マウスを使って配置したい場所にテキストや画像などをドラッグ＆ドロップすると、どんどん形が出来上がっていきます。すでにある程度完成したテンプレートに付け足していくので、それほど時間もかかりません。
機能２．レスポンシブ対応
HTMLメール作成ツールには、レスポンシブ対応のものが多くあります。あらゆるデバイスに対応できるため、レイアウトが崩れるリスクを回避できます。
作成ツールを選ぶ際には、レスポンシブ対応を前提に探しましょう。1人でも多くの読者にメルマガを読んでもらうためには欠かせない機能です。
ただし、レスポンシブ対応には以下のようなデメリットもあります。
- デバイスのスペックによっては表示できない
- メールの読み込みが重くなる可能性がある
レスポンシブメールを表示するには、受信側のデバイスがHTML5とCSS3に対応している必要があります。
ガラケーなどの古い機種は対応していない場合がほとんどなので、配信先のデバイスが決まっている場合は確認しておきましょう。
また、受信先のデバイスに併せてレイアウトを調整するため、読み込みが遅くなる可能性があります。
レスポンシブ対応機能を使用する場合は、これらのデメリットも十分検討する必要があります。
機能３．テキスト、画像エディタ
選択したテンプレートのテキスト部分をクリックすれば、簡単にテキストを編集できます。テキストの色やサイズも、自由に変更しましょう。リンクを貼ることも可能です。
先ほどのドラッグ＆ドロップを使って、画像もスムーズに挿入できます。操作が簡単なので、全体のレイアウトを見ながら修正を繰り返してもそれほど時間はかかりません。
この機能にもメリットだけではなくデメリットが存在します。
画像や動画を使用しすぎると、メールのデータ容量が大きくなることで以下のような弊害が出てきます。
- スパム判定されやすくなる
- 受信ボックスの容量を圧迫する
スパム判定されてしまえばそもそもメルマガを読んでもらえません。
また、メールボックスの容量を軽くしておきたいユーザーはメールを読まずに削除してしまったり、配信を解除されてしまう可能性もあります。
機能４．マルチパートメール配信設定
「レスポンシブ対応」の項にて、レスポンシブメールに対応していないデバイスが存在することを説明しました。
中には、HTMLメールそのものに対応していないメールソフトも存在します。
こうしたデバイスにHTMLメールを送信すると、本文が真っ白になったり、ソースコードが表示されたりといった事象が起きます。
この状況に対応するための機能として「マルチパートメール配信」という設定が存在します。これは、受信環境によってHTMLメール、またはテキストメールのいずれか適切な方を表示してくれる大変便利な機能です。
メール作成ツールによってはこの機能が搭載されていない可能性もあるので、利用したい場合は公式に問い合わせてみると良いでしょう。
HTMLメール作成ツールを使うメリット
近年、HTMLメールは、マーケティングツールの1つとして主流になってきています。ここまで解説してきた通り、HTMLメールを導入するメリットは大きいと言えるでしょう。
しかし、初心者にとって、HTMLメールの導入はまだまだハードルが高いと感じるかもしれません。そこでおすすめしたいのが『HTMLメール作成ツールの活用』です。
HTMLタグなどを深く理解していなくても、HTMLメールを簡単に作成できます。その3つのメリットについて解説しましょう。
メリット１．専門知識が不要
自力でHTMLメールを作成するには、HTMLメール用のソースコードの記述や専門知識が必要になります。しかし、HTMLメール作成ツールを使えば、初心者でも簡単に作成可能です。
ITリテラシーに自信のない場合でも、HTMLメール作成ツールなら使いこなせるでしょう。無料のツールも多いので、試しに使ってみることをおすすめします。
メリット２．豊富なテンプレートで簡単に作成
HTMLメール作成ツールには、100種類近くのテンプレートが用意されています。この中から自社に合ったテンプレートを選べば、自力でテンプレートを作成するより手軽にHTMLメールが作れます。
また、選んだテンプレートを編集して独自のテンプレートを作成することもできるので、一度作ってしまえば長期的に使えるでしょう。メール作成の時間短縮にもつながり、慣れればテキストメールを作るより短時間でできてしまいます。
メリット３．配信結果の測定が容易
メール本文内のURLを測定用のURLに変換できるので、メルマガ配信後『どれだけクリックされたか』が容易に分かります。ユーザーの反応が分かれば、今後のメルマガ配信に役立つでしょう。
HTMLエディタツールの種類によっては、クリックした『ユーザー情報』や『日時』までリサーチ可能です。メルマガの効果を数字で示せるので、マーケティングツールとして十分に機能します。
まとめ
そこでおすすめなのが、さまざまな機能を兼ね備えたHTMLメール作成ツールです。初心者でも簡単に作れるよう工夫されているので、安心して取り入れましょう。HTMLメールが作成できるようになれば、今以上にメルマガの効果工場が期待できます。
また、メール配信から運営・分析まですべてをワンストップで効率化したい方には弊社のメール配信サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
このコラムの執筆者
