HTMLメールはテキストメールよりも豊富な表現が可能なメールの手法で、効果測定の機能もあるため多くの企業のメルマガに利用されています。ですが、ただなんとなくHTMLメールを作成するだけでは、その効果は出にくく、狙った成果に繋がりません。メルマガにもWebサイトの制作のようにデザインの基本や開封率を上げるためのコツを取り入れる必要があります。
今回はHTMLメールで成果を出すためのデザインのポイントをHTMLの特徴を踏まえながら解説します。
目次
HTMLメールの特徴
HTMLメールとは、HTMLタグを利用して構成されるメールのことです。以下の2点が大きな特徴となります。
幅広い表現力で伝わりやすいメール
HTMLは、Webページのように文字の配色やサイズの変更、イメージ画像の挿入、レイアウトのカスタマイズなど、テキストメールよりも視覚的に訴求することが可能です。そのため、デザインのポイントを押さえることが重要になります。画像やボタンをクリックするとハイパーリンクから特定のウェブページへ誘導することができる点も大きな特徴です。
トラッキングによる効果測定と分析
HTMLメールでは、画像やCTAボタンにURLを埋め込み、トラッキング機能を活用することで受信者の行動を追跡することができます。開封率やクリック率の分析を行うことで、ユーザーの特性を把握することができるので、顧客の情報収集を行ったうえで、仮説を立て改善していくことができます。メルマガの構成においても、効果検証をもとに画像やボタン、バナーなどの構成要素を改善し、効果の出やすいデザインを目指すことできます。
HTMLメールの作成方法
次に、HTMLメルマガを作る方法を3つの方法を紹介します。
自作する
HTMLやCSSに関する知識やスキルがある場合は、HTMLメールを自分でコーディングすることが可能です。HTMLにはコンテンツとレイアウトを構成する役割があり、CSSはそこにデザインを加えて見栄えを整える役割があります。CSSを使う場合は、HTMLのhead内にまとめて配置する「埋め込み形式」、HTMLの各タグ内に記述する「インライン形式」のどちらかのパターンで作成します。
テンプレートを使う
HTMLやCSSの知識がない場合は、さまざまなレイアウトが使えるHTMLメールのテンプレートで作成することができます。デザインやレイアウトがひな形に組み込まれているので、デザインの専門知識がなくても、クオリティの高いHTMLメールが作れる点がメリットです。HTMLメールテンプレート作成サービスを選ぶ際は、幅広いメーラーに対応しているか、レスポンシブ対応しているかを事前に確認しましょう。
メール配信ツールを使う
メール配信ツールには、HTMLメールを作成するための編集機能やテンプレートが付いていることがほとんどです。配信リストの管理からHTMLメールのコンテンツ作成、配信まで一連の流れを全て実行できるため継続的にHTMLでメルマガを配信する企業には非常に便利な方法です。
HTMLメールのレイアウト例
HTMLメールをデザインするために必要な設定
HTMLメールのデザインを決めるためには、メルマガ配信の目的やターゲットを決めておくことが重要です。
メルマガ配信の目的・ゴールを設定する
デザインについて考える前に、どのような相手に向けてどのような目的でメルマガを配信するのか、メルマガの方向性を明確にしておく必要があります。この段階でメルマガの設計がしっかりと固まっていると、デザインの際にスムーズに各要素を選択できるようになります。
ターゲットを具体的に定める
メルマガの設計をより具体的にするために、メルマガを送るターゲットを明確にしておきます。ターゲットの性別や年齢層、職業などによってデザインで押さえるべきポイントが変わってくるため、メルマガの作成前に訴求したい対象を決めて、そのターゲットに合ったデザインを決めましょう。
商材やサービス、ブランドによって打ち出し方は様々ですが、例えば、女性向けのメルマガの場合、共感やイメージを重視しやわらかい色合いや優しいデザインにすると受け入れてもらいやすいと言われています。男性は、機能や性能のスペックの情報、比較検討できる材料に対して興味を持つ傾向にあるため、過度な装飾は控えスマートな配色とレイアウトを打ち出すとよいでしょう。
HTMLメール作成で押さえたいデザインのポイント
メルマガの配信目的やターゲットが明確になったら、その対象に向けて成果の出やすいポイントを押さえてデザインを行いましょう。
シンプルなレイアウト
HTMLメールの特性を活かすためには、文字情報は少なめにして画像を目立たせることを意識しましょう。複雑なデザインや装飾があったり、情報を詰め込みすぎたメルマガは、ユーザーが本当に見てほしい情報やコンテンツにたどり着く前に離脱してしまう可能性があります。シンプルなレイアウトを作成するためには、適切な余白を設け、シンプルなテーブルやグリッドを使用して、必要な情報を目立たせる工夫が必要です。そして、メルマガ配信の目的の一つでもあるクリック率を高めるためにも、CTAボタンやクリック可能なバナーの数と位置をコントロールしましょう。目を引くデザインにすれば複数設置する必要もないため、1～2個にし、位置はファーストビューに収まるようにすると効果的です。
ブランド要素の統一
HTMLで作成するメルマガデザインでは、ビジュアル面のブランディングを統一することが重要です。ブランドカラーをメール内のテキストや背景色、ボタンの色などに使用することで、ブランドの印象をユーザーに認識してもらいやすくする効果があります。さらに、メルマガの上部のフッターには、ブランドやサービスの象徴であるロゴを組み込むことで、テーマの異なる内容のメルマガでも統一感を出すことができます。これらの他にもカラーパレット、ロゴの扱い方、フォント、アイコンやボタンのスタイルなど、ブランド要素を出すための細かいルールをスタイルガイドにまとめておくと、軸がぶれずに統一感のあるデザインができるためオススメです。
読みやすいフォントとサイズを選択
読みやすいメルマガをデザインするためには、フォント選びも重要ですが、上記で説明したように基本的にはスタイルガイドをベースにブランドイメージや伝えたいメッセージに合ったフォントを選択します。例えば、信頼感やモダンなイメージを出したい場合はゴシック体、洗練された印象やクラシカルなデザインにしたい場合は明朝体を選択するとよいでしょう。そして、視覚的な一貫性を保つために使用するフォントの数を制限することも重要です。ヘッダーのフォントはブランドのメインのフォントを選択し、メール本文は読みやすいフォントを選びましょう。本文のフォントサイズは、14～16ptにすると読みやすいメルマガになります。テキストにリンクを貼る場合はクリックしてもらいやすいように18pt以上にするとよいでしょう。
適切なカラーを選択
カラースキームも、フォント同様にブランドのイメージやメッセージに合わせて選ぶことが重要です。ブランドのカラーパレットをもとに色を選び、派手すぎない読みやすさを考慮した色の組み合わせを選びましょう。背景色は、コントラストや関係性を意識して濃度を調整することでメインのコンテンツが際立って読みやすくなります。URL付きのボタンなどの注目させたい要素には、淡い色ではなく目立つ色を使用し、濃い色にした場合は文字を白抜きにするなどコントラストも意識しましょう。
一貫性を持たせて色数を使い過ぎないようにすることが見やすいメルマガデザインのポイントです。
イメージ画像の活用
HTMLメールの最も分かりやすい特性がイメージ画像の活用による視覚的なアピール効果です。イメージ画像の活用によって、商品の魅力が伝わる、クリック率を高められるなどの効果が得られます。そのため、メルマガでは文章だけでは伝わりにくい商品・サービスのアピールポイントを画像で補い、一目見て直感的に興味を持ってもらうことが重要です。
具体的には、ファーストビューでまず目に入るヘッダーのデザインにはメルマガの内容に沿ったイメージ、企業のロゴ、キャッチコピーを入れると効果が出やすいでしょう。メルマガ内ではコンテンツのイメージが沸きやすい画像、例えば、商品・サービスの写真、イラストやグラフィックスなどを活用して少ないテキストの量でも内容が伝わるようにします。メルマガからサイトや問い合わせへ誘致したい場合は、メインカラーやブランドカラーに埋もれない目立つカラーでボタンやリンクを作成します。BtoBの場合、営業担当者の顔写真を活用することで個別メールのような親近感を持たせやすいためおすすめです。
HTMLメールデザインの注意点
テーブルレイアウトで組む
CSSプロパティの互換性を確保するために、HTMLメールはテーブルレイアウトで組むことが推奨されています。テーブルレイアウトでセルや行を配置することで、どのメーラーで見ても崩れないデザインにすることができます。
CSSはインラインスタイルで設定
一部のメーラーでは、外部のCSSファイルを認識しない場合があります。そのため、CSSはインラインスタイルで設定することが忘れてはいけないポイントです。
レスポンシブデザインで確実な画像表示
メールはPCやスマートフォン・タブレットなど様々なデバイスで表示される可能性があるため、レスポンシブデザインで対応する必要があります。レスポンシブデザインは、画面サイズに合わせてメールのレイアウトを変化させることで、様々なデバイスで適切に表示されるようにできるものです。
適切なデザインでHTMLメールの効果を最大限に引き出そう
HTMLメールで成果を出すためのデザインのポイントを解説しました。HTMLメールは、コンテンツの内容を視覚的に補い、ユーザーの興味関心を引き出すことが最大の魅力ですが、機能の特性とメルマガに適したデザインで作成することで効果を出します。
オンラインアシスタントサービス「セリーズ（Selly-s）」では、HTMLメールの作成からメルマガ運用などクリエイティブからマーケティングまで幅広い専門知識を活用した対応が可能です。メールマーケティングでより効果を出したいと考えている方は是非一度ご相談ください。
この記事の投稿者
- 冨澤 まどか
- 株式会社ビズリンクスが運営する営業オンラインアシスタントサービス「セリーズ」の統括マネジャー。
BtoBビジネスの集客、インサイドセールス、商談など、営業支援会社ならではのノウハウをお届けします。
