メルマガデザインのコツとは？HTMLメール作成で押さえるポイントを解説

HTMLメールとは、HTMLタグを利用して記述するメールのことです。Webページのように文字の色付けやフォントサイズの変更、画像の表示等が行えるため、商品やサービスを視覚的に訴求することができます。また、HTMLを記述するため「メルマガの開封率」を取得することも可能です。

当社が企業のメールマーケティング担当者721名を対象にメール配信の形式を調査したところ、「必ずHTMLメール」「ほとんどHTMLメール」「どちらかというとHTMLメールのほうが多い」と回答した人の合計は79.7％にものぼり、多くの企業が顧客へのマーケティングやプロモーションにおいてはHTMLメールを採用していることがわかりました。「必ずテキストメール」と回答した人は1.6％にとどまりました。

■あなたの所属する部門・チームでは、メール配信の際、HTML形式とテキスト形式のどちらを採用していますか（単一選択）

まずは、メルマガをHTML形式にすることでどのようなメリット・デメリットがあるかを解説します。

たとえば商品の画像やイベントの写真など、文字だけでは伝わりづらい情報を視覚的に伝えることができます。写真が用意しづらい商材を扱っている場合でも、メルマガのタイトルや内容に合ったアイキャッチ画像を挿入することで読者の興味を引くことが可能です。

画像を使うことで「Webページで何が書かれているか」を理解してもらいやすいため、Webページ遷移後にコンバージョンにつなげやすくなります。読者が情報をスムーズに理解できるよう、メルマガ内ではWebページで紹介している画像と同じものを使ったり、デザインを統一させたりするとよいでしょう。また、リンクボタンの位置や色、大きさなどを工夫してクリック率を高められれば、それに伴ってコンバージョン率の向上も期待できます。

メルマガをHTML形式にすることで開封率を取得できるようになるため、メルマガの効果検証・改善に役立てられます。画像参照用のimageタグを記述する方法もありますが、メール配信システムを利用するとより簡単に取得することが可能です。

開封率については以下の記事でもご紹介しています。
メルマガの開封率を上げる方法とは？開封率の高い業界や、効果を測定する方法を解説

HTMLメルマガの一番のデメリットは、作成するのに手間がかかることです。文字のみのテキストメールに比べ、画像の用意やデザインの調整作業が発生するため、作成～配信までは余裕を持ってスケジュールを組む必要があります。

次に、HTMLメルマガを作る方法を3パターンご紹介します。

HTMLメールを自分で作成（コーディング）するには、HTMLやCSSに関する知識やスキルが必要です。HTMLにはコンテンツとレイアウトを構成する役割があり、CSSはそこにデザイン（装飾）を加えて見栄えを整える役割があります。CSSを使う場合は、

①外部読み込み形式（CSS専用のファイルをリンクする方法）
②埋め込み形式（HTMLのhead内にまとめて配置する方法）
③インライン形式（HTMLの各タグ内にその都度記述する形式）

の3つの方法があり、Webサイトにおいては①が主流ですが、メール環境ではこの方法だと表示されないことがほとんどです。そのため、②③のどちらかで対応するのが望ましいといわれています（昨今は②の埋め込み形式で表示されるメールソフトが多くなりましたが、それでも印刷するとCSSが取り除かれてしまうケースがあります）。

HTMLやCSSの知識がない場合は、HTMLメルマガ用のテンプレートを活用するのもおすすめです。テンプレートサービスを選ぶ際は、幅広いメールソフトに対応しているか、表示崩れがないか、思い通りのデザインを再現できるか等をチェックするとよいでしょう。

多くのメール配信システムには、HTMLメルマガを作成するためのエディタ（編集機能）やテンプレートが付いています。サービスによって仕様や使い勝手は異なりますが、宛先リストの管理からHTMLメルマガ（コンテンツ）の作成、配信までを一つのツールでおこなえるので大変便利です。当社のメール配信システムにもHTMLメールを簡単に作成できるエディタやテンプレートが搭載されています。

HTMLメルマガを作成する際の横幅のサイズは、スマートフォン向けなら600px、PC向けなら850pxが適切です（2021年12月現在）。また、一歩先を目指すならレスポンシブデザインのHTMLメールもおすすめです。

レスポンシブデザインとは、1つのHTMLでどんなデバイス（端末）からでも見やすく、使いやすいWebページレイアウトにする技術です。これをHTMLメールに応用させたのがレスポンシブメールで、メール開封時に受信デバイスを判別し、スマートフォンならスマートフォン用、PCならPC用と、最適なHTMLを自動で表示します。

レスポンシブデザイン（レスポンシブメール）には、主に以下3種類のレイアウトがあります。

デバイスの画面幅に応じてCSSを切り替える（コンテンツの配置および表示／非表示を変える）レイアウトです。デザインを切り替える位置は「ブレイクポイント」と呼ばれ、この値（ピクセル数）をCSSで指定することで、ユーザーの使用デバイスに適した表示をすることができます。

ユーザーが閲覧する画面サイズに応じて、全体の幅を自動的に変更させる（＝画面幅にフィットさせる）レイアウトです。各HTML要素の単位をパーセンテージで指示するため、どのデバイスからでも全体をしっかり表示させることができます。リキッドレイアウトのHTMLメールは、幅を変えるだけなのでレスポンシブレイアウトに比べるとデザインの自由度は下がりますが、比較的制作コストがかからず、レイアウト崩れのリスクも少ないメールです。

リキッドレイアウトと同様に各HTML要素の単位をパーセンテージで指定しますが、同時に最小幅と最大幅も指定するレイアウトです。たとえばユーザーの画面サイズがどんなに大きくなったとしても、指定した最大値以上に広がることはありません（その場合、まわりに余白が生まれます）。

このようなレスポンシブメールを制作するには、適切なHTML・CSSの組み方や設定等、専門知識が欠かせません。また、メールの受信環境によってはレイアウトが崩れるリスクがあるため、送信前に主要な端末で検証する必要があります。そのため、スマートフォンで開いたときに読みやすいデザインに寄せる（スケーラブルデザインにする）のが最近の傾向です。スケーラブルデザインなら1パターンのデザインを用意するだけで済むため、「とりあえずモバイルフレンドリーなメールを試してみたい」「スピーディーにHTMLメールを作成したい」という場合におすすめです。

＞ メルマガの企画から制作、運用、分析、改善まで。貴社の課題に合った解決策をご提案します

HTMLメルマガを作成する際には目的やターゲットを明確にし、それに合わせたデザインを考える必要があります。

「とりあえずHTMLメルマガを配信しよう」と決める前に、そもそもなぜメールを配信するのか、なぜHTMLメルマガにすべきなのかを考えましょう。

たとえばメールを送る目的が販売促進や売上向上の場合、メール内に画像を入れることで「商品の魅力を伝えやすい」「クリック率を高められる（サイトへ誘導しやすい）」などの効果が考えられます。このような場合、購買を促進するようなデザインが向いています。

一方で、顧客との関係維持やステークホルダーへの情報提供などが目的の場合、売り感の強いデザインではなく落ち着いて読んでいただけるようなデザインが好ましいです。特に「営業担当者からの私信メール」のような体裁でメールを配信している場合は、下のHTMLメルマガのように営業担当者の顔写真を差し込み、顧客に応じて送り分けるのもおすすめです。こちらは当社のクライアントである全日空商事様のメルマガですが、この施策により開封率40％という成果をあげられています。

上記のメルマガは「顔なじみの営業担当者」を差し込むことで親近感を醸成することに成功していますが、BtoBビジネスの場合は一律にHTML形式にすることでかえって不自然になりオプトアウト（配信停止）が増えてしまうことも考えられるため、A/Bテスト等をおこないながら慎重に検討しましょう。

上記でお伝えした「配信の目的」とも被りますが、HTMLメルマガを作成する際にはターゲットを具体的に定め、その読者に合わせたデザインにするよう心がけましょう。本コラムでは、わかりやすい例として女性向けデザイン・男性向けデザインについてご紹介します。

メルマガで扱う商品やブランド、各社のトーン＆マナーにもよりますが、女性向けのメルマガにはやわらかい色合いや優しいデザインが好ましいといわれています。また、どんなにお買い得でもデザインや色使いにセンスが感じられないと購買意欲が下がってしまうため、「デザインをガチャガチャさせない」「適切な余白を取ってスマートにする」ことが大切です。

男性は女性に比べ、機能や性能などスペックを熟読することを好み、他商品との比較検討や分析に興味を持つ傾向があるといわれています。そのため情報量を比較的多めにし、性能や機能がわかりやすいメルマガに仕上げるのがおすすめです。デザインに関しては、力強さと理性を併せ持つような配色・レイアウトを採用するとよいでしょう。

最後に、HTMLメルマガを送る際の注意点をお伝えします。

前述した通り、HTMLメールは受け取る側の端末やメールソフトなどの環境によって表示のされ方が異なります。せっかくデザインしたHTMLメールも表示されなければ意味がないため、送信前に主要な端末で検証したり、メール配信システムのコンテンツ振り分け機能（端末情報を把握し、適切なコンテンツを自動で送り分ける機能）を活用したりするとよいでしょう。

また、HTMLメールを正常に表示できない方にもコンテンツを見ていただけるよう、Webページ上にメルマガコンテンツを掲載するのもおすすめです。「このメールがうまく表示されない方はこちら」のようなリンクを上部に掲載しておけば誘導もスムーズです（当社メール配信システムにもHTMLメールのWeb表示機能が搭載されています）。

HTMLメルマガ内の画像を自社サーバーにアップして参照させる場合には、「http://」もしくは「https://」から始まる絶対パスで記述します。メールソフト側で画像が非表示になるように設定しているユーザーもいるため、alt属性にわかりやすい文章を入れておくとよいでしょう。

HTMLメルマガが作成できたらテストメールを配信し、PCとスマートフォンの両画面でレイアウトに崩れがないかを確認しましょう。また、URLリンクが正しく設定されているか、ランディングページに間違いがないか等も細かくチェックしましょう。

以上、HTMLメルマガの作成方法や配信する際の注意点、デザインのコツなどをお伝えしました。HTMLメールはテキストメールに比べて作成・配信の手間がかかるものの、工夫次第で大きな成果が得られます。お客様のメール受信環境のことも考慮しながら、ぜひ活用してみてください。

当社WOW WORLDでは、HTMLメルマガの作成から配信までを行えるシステム「WEBCAS e-mail（ウェブキャス イーメール）」や、メルマガの制作支援サービスを多くの企業様に提供しています。ご興味があればお気軽にお問い合わせください。