Blog

ビジネス向けメルマガデザインとは?チェックポイントと事例を紹介


(公開日2023年08月25日)

  • デザイン

企業の営業・マーケティング担当者ならびに個人事業主の方のために記事を書いています。ビジネス向けのメルマガを配信する際に、HTMLメールを用いることがあるでしょう。ビジネス向けのメルマガデザインはどのようなものでしょうか?

この記事では、ビジネス向けのメルマガデザインのチェックポイント、メルマガのヘッダー・フッターについて解説します。またビジネス向けのメルマガの事例をご紹介します。これを読めば、視覚に訴えられるメルマガの作り方が分るでしょう。ビジネス向けのメルマガを配信する際に役立ててみてください。

ビジネス向けメルマガデザインとは? 



1:デザインの配色を考慮
2:ターゲットの性別にデザインを合わせる
3:文字情報は少なめ、画像は多め
4:CTAボタンの配置に気をつける

1:デザインの配色を考慮

HTMLメルマガにはカラーを付けられます。見出し・背景などにブランドカラーを含めるとよいでしょう。伝えたいメッセージを目立たせるだけでなく、自社のブランドをカラーを通じて印象づけられます。

使うカラーは3〜4色で、配色は以下のようにしてください。

  • メルマガの背景となるベースカラー:70%
  • 自社のブランドカラーを含ませるメインカラー:25%
  • 強調する箇所に使うアクセントカラー:5%

また画像を使って色を追加できます。ヘッダー、フッターは塗りつぶすか、色付きの枠をつけるとよいでしょう。色の組み合わせは難しいですが、色見本をみながら赤系・青系などの同系色で統一するとまとまります。

2:ターゲットの性別にデザインを合わせる


メルマガのターゲットの性別に合わせてデザインの内容を変えてください。女性には共感・イメージを重視し、男性には性能・商品情報を打ち出すとよいでしょう。この基本をまちがえるとたちまち読者に受け入れられなくなります。

例えばファッションに関するメルマガの場合、女性向けは、多くのコーディネート例を掲載して着用イメージを打ち出します。それに対し、男性向けは商品の仕様を伝えて他の商品と比較する形式をとるとよいでしょう。

またメルマガの全体のデザインも性別で異なります。女性向けはやわらかく優しい雰囲気、男性向けは理性的な配色・レイアウトが必須です。もちろん画像の中身が異なることはいうまでもありません。

参考記事:メルマガの最新トレンド情報!おしゃれなデザインにする方法をお届け


3:文字情報は少なめ、画像は多め


メルマガの読者は、文章を読むのではなく、流して見る傾向があります。メルマガをスマートフォンで受信するのが主な理由です。B to Cの商品・サービスであれば、特にその傾向が強いでしょう。

ですからメルマガには一瞬で目を引き、直感的に興味をもつ要素が必要です。文章ではなく、画像を使って商品・サービスのイメージを伝えるようにしてください。キャッチコピーは画像に添えるのが最善です。

ウェブサイトの見出しはSEOに影響しますので、画像ではなく文字が必須ですが、メルマガはその必要はありません。見出しあるいはCTAボタンなどは、GIFアニメーションにして目立たせるとよいでしょう。

参考記事:メルマガのテキストデザインを良くするならHTMLメールがおすすめ


4:CTAボタンの配置に気をつける


CTA(Call To Action)とは日本語で「行動喚起」のことです。CTAボタンはリンクを通じてウェブサイトへのアクセスや問い合わせを促します。「キャンペーンの詳細はこちら」などのテキストにリンクを埋め込むこともできます。

一部の読者はメルマガの最上部しか見ません。ですからメルマガの最初の部分で重要な情報を伝え、CTAボタンを設置するとよいでしょう。また読み進めてくれた場合にそなえて、メルマガの中間帯、最後にもCTAボタンを配置してください。

メルマガの背景色は白が多いですから、CTAボタンはアクセントカラーで塗りつぶして白抜きの文字をそえるのが効果的です。

ビジネス向けメルマガデザインのヘッダーについて



ヘッダーに載せるとよい要素を示します。

1:企業名・ロゴ
2:メルマガの趣旨を説明した文章
3:お得な情報
4:CTAボタン
5:目次

1:企業名・ロゴ


法律でメルマガには必ず送り主は誰なのかを示すことが義務付けられています。企業名・店名など正式名称を載せるとよいでしょう。またロゴもあった方が印象が高まります。ロゴはいつも同じ場所に設置すると効果的です。

2:メルマガの趣旨を説明した文章


メルマガの趣旨「オフィス移転しました」などをタイトルとして載せます。読者がメルマガのヘッダーだけ見る場合にも、メルマガの趣旨が伝わるでしょう。キャッチコピーならばなおよしです。


3:お得な情報


「全商品10%引き実施中」といったお得な情報も添えておくとよいでしょう。タイトルとともに読者の目を引き付ける効果があります。興味を抱いた読者は、メルマガの本文まで読み進めてくれるはずです。

4:CTAボタン


CTAボタンはヘッダーに必ず設置してください。ヘッダーだけに目を通す読者でも、CTAボタンがあればクリック率が向上します。また「正しくメールが表示されない方はこちら」といった文を載せ、メルマガと同じ内容のウェブサイトをリンクさせるのも効果的です。受信環境によってHTMLメルマガがうまく見られないとき、リンクページを閲覧できます。

5:目次


長いメルマガの時は、アンカーリンク付きの目次を置いて、クリックすれば目的の場所へ移動できるようにしてください。このほうが読者がメルマガを読みやすいでしょう。このようにいろいろなアイテムを使って読者の興味を引き出します。

参考記事:メルマガのヘッダー・フッターとは?htmlでデザインを一新する方法


ビジネス向けメルマガデザインのフッターについて



フッターに載せるとよい要素を示します。

1:送信元情報・配信停止リンク
2:問い合わせ先、実店舗の情報
3:自社サイトへのリンク、会員ぺージへのログインボタン
4:よくある質問集、カスタマーサポート情報
5:継続して認知させたいコンテンツ

フッターのコンテンツは補足事項です。フォントサイズを本文より小さくするとよいでしょう。本文とフッターの間にラインを引くとか、フッターの背景色を変えるとかして区別してください。

1:送信元情報・配信停止リンク


この2項目は特電法で載せることが定められています。送信元情報として企業名・住所を載せてください。企業名にはホームページのリンクを貼るとよいでしょう。配信停止リンクは、メルマガの配信を断るための連絡先リンクです。

2:問い合わせ先、実店舗の情報


実店舗の情報として以下のような項目を載せるとよいでしょう。

・電話番号
・SNSのアカウント
・営業時間
・アクセス方法

3:自社サイトへのリンク、会員ぺージへのログインボタン


そもそもメルマガは、自社サイトへのリンク誘導が目的です。ホームぺージ、ランディングページ、会員ページへのログインボタンなどをフッターに載せてください。これがあれば読者が必要な時にクリックしてもらえます。

4:よくある質問集、カスタマーサポート情報

よくある質問、カスタマーサポート、プライバシーポリシーなどもリンクしておくとよいでしょう。これがあれば、ゆるやかな認知付けとなるはずです。読者の必要に応じてクリックしてもらえます。

5:継続して認知させたいコンテンツ

次回のメルマガの予告など、読者に継続して伝えたい内容を載せてください。あまり長くなるとくどいですから、短い文が望まれます。「次回のメルマガはメルマガの横幅についてです」くらいがよいでしょう。

ビジネス向けメルマガデザインの事例2選



事例1:引っ越しのごあいさつ用のメルマガ
事例2:新年のごあいさつ用のメルマガ

事例1:引っ越しのごあいさつ用のメルマガ


■ヘッダー

ヘッダーの左上にロゴが張り付けられています。大抵のメルマガは左上もしくは右上にロゴを張り付けることが多いようです。いつも同じ位置にあるほうが読者の脳裏に刻まれやすくなります。またロゴの右側に「オフィス移転のお知らせ」といったタイトルが載せられています。

さらにヘッダーの右上には「GIFバナーが見られない方はこちらといった文を載せています。こちらにはメルマガと同じ内容のウェブサイトがリンクされており、HTMLメルマガがうまく表示されない際にはウェブサイトをみることが可能です。

■キャッチ画像

キャッチ画像にはGIFアニメーションが使われています。読者の目を引き、強く視覚に訴えられるのが特徴です。オフィス移転の様子をイラストで描写し、メルマガの趣旨が一瞬で伝わるでしょう。

■本文

本文には、移転のご案内とあいさつが載せられています。引っ越しですから「移転先の住所」「電話番号」も記入されます。さらに段落の終わりに、ラインとしてGIFアニメーションが使われています。引っ越しのトラックが走る光景が目を引きますね。

■サービス一覧

自社のサービスを箇条書きで紹介し、各項目からウェブサイトへリンクが誘導されており、サービス内容が分かります。

■フッター

フッターには以下の要素が載せられています。
・ロゴ
・住所
・電話番号
・Email
・営業時間
・配信停止リンク

参考記事:HTMLメールのデザインテンプレートを特別公開!


事例2:新年のごあいさつ用のメルマガ


■ヘッダー

ヘッダーの左上にロゴが張り付けられています。大抵のメルマガは左上もしくは右上にロゴを張り付けることが多いようです。いつも同じ位置にあるほうが読者の脳裏に刻まれやすくなります。

ヘッダーの右上には「正しくメールが表示されない方はこちら」といった文を載せています。こちらにはメルマガと同じ内容のウェブサイトがリンクされており、HTMLメルマガがうまく表示されない際にはウェブサイトをみることが可能です。

■キャッチ画像

ヘッダーの下には、キャッチ画像として桜のイラストを背景とした大きなイラスト画像を埋め込んでいます。「新年度のご挨拶」といったタイトルが、大きなフォントで白枠を付けて強調され、さらに陰影を添えて立体感を持たせているのが特徴的です。

「昨年度は多くの皆さまに~よろしくお願い申し上げます。」は本文ですが、画像に埋め込まれています。画像のALTに同じ文章が記載されており、画像が表示されない場合も文章は表示される点が特徴的です。

■埋め込み画像

画像を7つ埋め込み、それぞれにサービス内容を紹介しています。テキストのみで箇条書きにするよりも、画像を使った方が読者の目を引きますね。また画像からウェブサイトへリンクが誘導されており、各サービスの内容が分かります。

さらに画像のALTへ見出しを記入しておけば、画像が表示されない場合にはテキストが表示されます。

■フッター

フッターには以下の要素が載せられています。

・企業名
・住所
・電話番号
・Email
・「このメールはこれまでに弊社のスタッフが名刺交換、もしくはご連絡させていただいた皆さまへお送りしております。」といった説明
・配信停止リンク
・プライバシーポリシー

まとめ



ビジネス向けのメルマガデザインのチェックポイント、メルマガのヘッダー・フッターについて解説しました。またビジネス向けのメルマガの事例を2つご紹介しました。これでビジネス向けのメルマガデザインの方法はご理解いただけたと思います。

ただしHTMLメルマガの制作は専門的なスキルが必要であり、本業の合間に制作するには手間がかかり過ぎるでしょう。HTMLメールの専門家に制作を依頼した方がよいかもしれません。

株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのテキストデザイン・コーディング・配信をすべてお任せください。

興味がある方は、以下のリンクページをご覧ください。

HTML制作・サービス紹介

HTML制作の料金

よくあるご質問・FAQ

関連記事