(公開日2023年08月25日)
メルマガを作成・配信する際にHTMLメールを使う企業が増えています。カラーや画像を用いることで、読者の視覚に訴え、訴求効果の高いメルマガを配信できるからです。HTMLメールを用いる際には、ウェブサイトと同じようにヘッダー・フッターを設置します。そうすることでメルマガの内容が整理され、読みやすいデザインになるでしょう。
この記事では、メルマガのヘッダー・フッターの意味、載せるべき要素、デザインのコツについて解説します。これを読めば、ヘッダー・フッターのデザインがやりやすくなり、メリハリのついた読みやすいメルマガを作成・配信できます。
メルマガのヘッダー・フッターとは以下のような部分です。
・ヘッダーとはメルマガの冒頭に入る部分
・フッターとはメルマガの最後に入る部分
ヘッダーとフッターはそれぞれに役割があり、対になってメルマガの構成を形作ります。
メルマガを開封して最初に見える部分です。特にスクロールしなくても画面に全てが表示されて、読者の目に入ります。メルマガを受信するデバイスがスマートフォンであれ、パソコンであれ、ヘッダーは不可欠な要素です。
メルマガの効果で第一印象が決まるといってよいでしょう。それだけにヘッダーのデザインは重要ですし、最も力を注ぐべき部分です。ヘッダーを見ただけで、どの企業から届いたメルマガかを瞬時に伝えられるようにしてください。自社のブランドを訴える効果もありますから、毎回、共通のデザインを使うほうが効果的です。
読者がメルマガをスクロールしながら読み進め、最後に目にする部分です。この部分にメルマガを配信する際の必須情報を掲載します。とりわけ特電法で載せることが定められている要素を載せることが必要です。
また補足情報をフッターにまとめると、メルマガのデザインにメリハリがつき、見た目もきれいで読みやすくなります。フッターはヘッダーのように目立つ必要がありません。むしろメルマガに載せる情報を整理する役割があるといえます。
ヘッダーには次のような要素を載せるとよいでしょう。
・サービス名、商品名、企業名、ロゴ
・メルマガの主旨
・お得な情報
・自社サイトへのナビゲーションバー
・メルマガが正しく表示されない時の対処法
最初にメルマガの配信元を明示することが重要です。直感的に「〇〇からのメールだ」と分かるようにしてください。企業名あるいはロゴは欠かすことはできません。ロゴは毎回同じ位置に設置して読者に意識づけるとよいでしょう。多くのメルマガは、左上部にロゴを配置しています。
企業名あるいはロゴに続いて、アピールすべき商品名・サービス名を表示することがあります。メルマガのタイトルといえる要素ですから、ロゴとともに分かりやすくしてください。
つぎにメルマガの主旨を伝えます。これを読んだだけで、メルマガを配信した目的が伝わるようにしてください。瞬時に内容を理解できるように、短文で表示します。たとえば以下のような内容です。
「新サービスのご案内」
読者の興味を引き、メルマガを読み進める気が湧くような文にしてください。キャッチコピーをつけると、さらに効果があがります。
「一気通貫のサービスでマーケティングを包括的に対応」
メルマガには読者にとってお得な情報が含まれていることをアピールするのも大切です。うまく伝われば、読者はメルマガを読み進めてくれるでしょう。実例を以下に示します。
【ECサイトのメルマガでよくみられる例】
「全商品30％オフ！」
【ニュース配信サイトの例】
「子育て家族が住みやすい市町村ランキング」
【クーポンのプレゼント情報】
「お得なクーポンの申し込みはこちら」
メルマガを読んでくれた方に自社サイトにも来てもらい、もっと詳しい情報を伝えたい場合、リンクボタンを設置して誘導するとよいでしょう。ロゴにリンクを埋め込むのも一法です。メルマガの内容によっては、ランディングページやお問い合わせページへリンクすることもあります。
リンクボタンはメルマガの複数箇所に設置するとよいですが、ヘッダーとフッターの両方に設置しているケースがよくみられます。ただしメルマガをしっかり読んでほしい時は、離脱を避けるために、ヘッ
ダーには入れない方がよいでしょう。
メルマガの受信環境によっては、HTMLメールが正しく表示されないことがあります。たとえば画像が表示されないとか、全体の表示が崩れるとかです。そういったケースに備えて、以下のような1文を添え、メルマガと同じ内容のサイトへリンクするとよいでしょう。
「正しくメールが表示されない方はこちら」
メルマガの最上部に表示しておけば、トラブル時に対処できます。
参考記事：スマホに最適なメルマガのデザインとは？最適解を教えます
以下のような要素を載せるとよいでしょう。
・特電法で載せることが定められているもの
・問い合わせ先
・パーミッションリマインダー
・営業時間・アクセス方法
・自社サイトへのリンク、会員ページへのログイン
・SNSアカウント
・認知付けたいコンテンツサービス
特電法とは、特定電子メールの送信の適正化などに関する法律のことです。迷惑メール防止法とも呼ばれ、良好なインターネット環境を保つために施行されました。特電法によると、メルマガには以下の要素を載せることが定められています。
・送信元情報（企業名・住所）
・配信停止リンク（オプトアウト）：いつでも配信を解除できるようにするためです。
実例を示します。
株式会社Brand Activation and delivery
東京都荒川区荒川4丁目54-1 Goodビル
「今後、弊社からのメールを希望されない方は、こちらからお手続きをお願いいたします」
こちらからには、メルマガ配信を解除するページがリンクされています。
メルマガを読んだ人が、問い合わせをしようと思ったとき、すぐ連絡できるように電話番号、メールアドレスなどを載せておくとよいでしょう。メールアドレスから、メールクライアントを起動させるリンクを埋め込むことが可能です。下記に実例を示します。
Tel：03-4405-7521
Mail：info@bad-corp.com
メルマガが受信者の許諾（パーミッション）を得て送られていることを思い出させる文章です。パーミッションリマインダーを表示することで、読者に信頼感を与えます。迷惑メールではないことを伝えるのも重要な役割です。
「このメールはこれまでに弊社のスタッフが名刺交換、もしくはご連絡させていただいた皆さまへお送りしております」
会社や店舗の営業時間や地図もフッターに載せるとよいでしょう。地図はスペースを取るため、Googleマップのぺージなどをリンクさせてください。
営業時間／9:30～18:00（土・日・祝日定休日）
地図はこちらをご覧ください
自社のウェブサイトをリンクさせておけば、ゆるやかな認知付けとなり、必要な時にリンクしてもらえます。ロゴを張り付けてリンクを埋め込んでもよいでしょう。
会員ぺージへのログイン
最近はSNSの普及によって、メールよりもSNSを利用するほうが安心できるユーザーが増えています。LINE、Facebook、TwitterなどSNSのアイコンを貼りつけておけば、連絡が取りやすくなるかもしれません。
その他にも読者に認知付けたいコンテンツをフッターに載せるとよいでしょう。
・自社のサービスの内容
・キャンペーンの告知
・次回のメルマガの告知
フッターのスペースが広くなりすぎる場合は、フッターの上に別のコンテンツとして添えるのも一法です。
・ヘッダーサイズは600～700px
・テキストは左側に寄せる
・分かりやすい内容にする
・CTAボタンを設置する
・背景色はブランドカラーを使う
メルマガのヘッダーは、スマートフォンでもパソコンでも表示しやすいサイズにすることが必要です。レスポンシブデザインを使って、スマートフォンでは横幅に合わせた横幅サイズで表示します。元のサイズが大きすぎると、スマートフォンで表示すると縮小され過ぎて見えにくくなります。
パソコンで表示する際には、元のサイズのままで表示されますから、小さすぎると読みにくくなります。ですからスマートフォン、パソコン両方の画面で見やすいメルマガのサイズを選ぶことが必要です。具体的にはメルマガの横幅サイズを600〜700pxに設定するとよいでしょう。
参考記事：デザイン性に優れたメルマガの横幅はどれくらい？最適解を教えます
ヘッダーには企業名、商品名などのテキストが入りますが、テキストはできるだけ左端に寄せて表示するとよいでしょう。そうすればメルマガを読む際、視線を左から右へ自然に動かすことができます。
ヘッダーに入れる要素を2つ横並びにする際は、一つ目の要素は左端に寄せ、二つ目の要素を右端に寄せてください。そうすればバランスの取れた読みやすいデザインになるでしょう。
参考記事：メルマガのテキストデザインを良くしたいなら、htmlメールを活用すべき
ヘッダーはシンプルで要点を押さえた内容にしてください。文字やカラーが多すぎると見づらく、メルマガを開封してもすぐに閉じられてしまいます。キャッチコピーを入れて読者の目を引くと、効果的なヘッダーデザインとなるでしょう。
メルマガの上部だけしか見ない読者がいるため、CTAボタンを設置する際にはヘッダーにも設置してください。目立つボタンを画面の右側に寄せて、配置するとよいでしょう。ボタンを際立たせるためにはGIFアニメーションが効果的です。またクリックしやすいように縦幅は50pxにしてください。
参考記事：ビジネス向けのメルマガデザインとは？チェックすべき3つのポイント
ヘッダーの背景色にブランドカラーを用いると、企業のイメージをアピールできますし、メルマガを開封した時に、ヘッダーを際立たせ読者の目を引きます。ブランドカラーが濃い色の場合は、テキストカラーを白色にし、ブランドカラーが薄い色の場合は、反対色にするとよいでしょう。
背景色を白色にして、テキストカラーにブランドカラーを用いることもできます。その際には太めのフォントを用いて読みやすくしてください。
・フォントサイズを小さくする
・本文ブロックと差別化する
・背景色にブランドカラーを使う
フッターに載せるのは補足情報ですから、本文よりフォントサイズを小さくして、控えめに表示するとよいでしょう。本文のフォントサイズが14pxならば、フッターのフォントサイズは10〜12pxに設定してください。
本文ブロックとフッターをはっきりと区別することも重要です。
本文ブロックとフッターの間にラインを引く、背景色を変える、本文ブロックとの間に、ロゴやSNSアイコンを入れるなどで、差別化するとよいでしょう。
参考記事：メルマガ・htmlメールを一気におしゃれなデザインするレイアウトをご紹介
フッターの背景色は、ヘッダーとそろえたブランドカラーを用います。背景色を白色にする際には、テキストカラーにブランドカラーを用いてください。そうすればメルマガの統一感が高まります。
ヘッダーはメルマガの冒頭に入る部分で、企業名・ロゴ・キャッチコピーなどを載せます。スマートフォンやパソコンで読みやすいように、横幅を600〜700pxに設定し、ブランドカラーを使った分かりやすい内容を載せてください。
フッターはメルマガの最後に入る部分で、補足事項を整理して載せます。テキストサイズは本文よりも小さめに設定し、本文とフッターの間にラインを引くなどして差別化するとよいでしょう。
HTMLメール制作会社に興味がある方は、以下のリンクページをご覧ください。
