(公開日2023年08月25日)
企業の営業・マーケティング担当者ならびに個人事業主の方に向けて記事を書いています。顧客に情報を提供するため、メルマガを配信されている方は多くいるでしょう。そしてデザイン性に富んだメルマガをご希望の方は少なくないはずです。
この記事では、メルマガデザインの最新トレンド情報、おしゃれなデザイン事例、デザインのコツをご紹介します。これを読めば、メルマガをおしゃれなデザインにする方法が分るでしょう。そして読者へ視覚を通じて訴求するメルマガを配信できます。
メルマガデザインの最新トレンドは以下の５つです。
トレンド1：洗練されたデザイン
トレンド2：多様性をもつ読者に対応
トレンド3：ユーザー生成コンテンツ（UGC）を利用
トレンド4：双方向コミュニケーションができる
トレンド5：レスポンシブデザインにする
最近のメルマガの読者はデザインを重視し、洗練されたメルマガでないと読んでくれません。メルマガのコンテンツばかりでなく、デザインが大切です。メルマガのデザインは企業のブランドを表現したものと言えます。それでは洗練されたデザインとはどのようなものでしょうか。
メルマガに使われるカラーは、3色配色「70:25:5」の法則に従っています。
・背景となるベースカラー：70％
・テキストや枠のメインカラー：25％
・強調するアクセントカラー：5％
この配色比率に従ったデザインが最も魅力的であり、バランスが崩れると印象が悪くなります。例えばアクセントカラーが多すぎると、くどくなり、メールを読む気がうせてしまいます。洗練されたデザインには適切な配色が必要です。
メルマガでは文章を読んでもらうことも大切であり、フォントの形式やサイズが重要です。
適切なフォントサイズは、スマホでもパソコンでも16px。そもそもブラウザーのデフォルトは16pxに設定されています。
16pxよりも小さいサイズだと見えにくくなり、メルマガを読む気がうせます。特に高齢者や子どもはその傾向が強いでしょう。なお強調する際に用いるフォントサイズは24px以上が必要です。
ビジネス用のメルマガは、ポップ体などのフォント形式は不向きであり、以下のようなフォントがおすすめです。
・MS Pゴシック
・BIZ UDPゴシック
・メイリオ
参考記事：メルマガのテキストデザインを良くするならHTMLメールがおすすめ
最近のメルマガの読者にみられる傾向は、文章を読むより映像を流し見することです。特に若い世代には、その傾向が強く見られます。だいたい画面の小さなスマホで多くの文章が読めるはずはありません。
メルマガもできる限り文字数を減らし、画像を使うとよいでしょう。目を引く画像、GIFアニメーション、短い動画などが最適です。メールというよりも、広告のイメージが当てはまります。
全体のボリュームは、3スクロールで読み切れる量がよいでしょう。それ以上になると、最後まで読まれず離脱されてしまいます。
メルマガに挿入する画像の横幅は800～1,000pxくらいがよいでしょう。大きすぎると画像の容量が増して表示スピードが落ちますし、小さすぎると拡大して表示されるため画質が悪くなります。
なおメルマガで表示される画像は、スマートフォン画面の横幅、パソコンでは横幅700px前後に合わせて表示されます。つまり元の画像の横幅が800〜1,000pxならば、ちょうどよいくらいに縮小されるサイズです。
大きな画像は画像変換ソフトで縮小したり圧縮したりして、画像の容量を100kbくらいにしてください。大きすぎるとHTMLメールの容量も増し、受信環境によっては表示されなくなります。
自社のランディングページなどに誘導するCTAボタンは大切な要素です。スマホだと画面が小さく、ボタンを押しにくいため、CTAボタンの大きさは、縦幅20pt以上にするとよいでしょう。ボタンの前後に他のリンクを埋め込まないことも重要です。
メルマガを最後まで読まない読者が多いので、最初のCTAボタンを1スクロール以内で目に触れる箇所に配置してください。さらにメルマガの中間帯や最後尾にもボタンを設置して、メール全体で2〜3カ所に置くとよいでしょう。
参考記事：HTMLメールのコーディングのやり方！特徴・手順・注意点を解説
年齢・性別・人種・障害の有無など、さまざまな特性をもつ読者の意見を取り入れたインクルーシブデザインが、多くのウェブサイトで採用されています。そして最近ではメルマガでも重視されつつあります。
小さな文字が見えない人のために大きめのフォントを用いる、耳が聞こえにくい人のために動画に字幕をつける、理解力が弱い人のために論理的な順番でコンテンツを配置するなどの工夫がなされるようになりました。
最近では老若男女がインターネットを利用するようになっています。したがって多様性をもつ読者に対応できるメルマガが必要です。ターゲットの裾野が広がり、自社のビジネスの発展につながります。
商品・サービスに対する肯定的なレビュー、SNS投稿などのUGC（User Generated Content）を紹介するメルマガが多くなりました。UGCはマーケティングツールの一つですが、顧客体験の共有は共感度・信頼性が増し、メルマガの読者の購買意欲を高めます。
「The State of User-Generated Content」によれば、消費者の72%が、企業の宣伝よりも、顧客の意見の方が信頼できると答えています。また投稿を紹介されたユーザーは、サイトを経営する企業に親しみを感じ、再度アクセス・投稿する傾向が高まります。
メルマガを読むだけでなく、読者のほうからも情報を送り返す双方向性コミュニケーションがはやりです。たとえばメルマガにクイズやパズルを組み込んで、正解するとプレゼントが当たるなど、読者がときめくようなイベントを盛り込んだメルマガがみられます。
また半年間メルマガを購読すると2,000ポイントが手に入るなどの特典をつけたメルマガもあります。特典があると誰しも関心をもつでしょうし、続けてメルマガを購読してくれる確率が高まります。ひいてはコンバージョン率も向上するかもしれません。
多くの読者はメールをスマートフォンでみるため、レスポンシブデザインは必須です。レスポンシブ対応していないと、読者はスマートフォンで読みにくく、メルマガから離脱してしまいます。
HTMLメールはデザインの崩れを防ぐため、テーブルレイアウトを用います。ですからモバイルファーストの原則に従い、スマートフォン向けの１カラムのデザインを制作し、その後他のデバイス用にアレンジするのは困難です。まずパソコン用にコーディングして、モバイル表示にアレンジするとよいでしょう。
参考記事：HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます
おしゃれなデザインの事例を５つご紹介します。
事例1：トレンドカラーを使用
事例2：大胆なタイポグラフィ
事例3：ホワイトスペースの確保
事例4：マイクロアニメーション
事例5：3Dグラフィクス
Instagram Pantoneから引用
メルマガのメインカラーとして用いられる色は、メルマガのイメージや企業のブランド性を示す重要なアイテムです。最新のトレンドカラーをメルマガのアイキャッチ・見出しなどに用いると、読者の目を引きます。
PANTONE社から発表されるカラー・オブ・ザ・イヤーで、2023年はビバ・マゼンダが選ばれました。ビバ・マゼンダは、強さとバイタリティを表現した赤色です。アクティブな企業イメージを埋め込むカラーとしておすすめします。
photo AC 青い花文字メッセージー感謝 3より引用
タイポグラフィとは文字や文章を読みやすく、美しく見せるための技法です。アイキャッチ画像内のテキストやタイトルには太くて大きなフォントを使用するとよいでしょう。読者の視覚に訴え、メッセージをダイレクトに伝えられます。なおコピーは短く簡潔にしてください。
色鉛筆とホワイトスペースのフリー素材より引用
ホワイトスペースとは余白スペースのことです。要素同士の間に余白を持たせ、見せたい要素を強調させます。この技法を用いると高級感のあるデザインが可能です。なおCTAボタンの上下には十分なホワイトスペースを確保してください。
マイクロアニメーションとは5秒以下の短いアニメーションのことです。ユーモアのある動きで目を引きつけます。視線誘導や、続きのコンテンツをスムーズに読み進めてもらう効果もあります。メルマガのキャッチ画像やCTAボタンなどに用いるとよいでしょう。
容量の大きな動画を用いると、メルマガの容量も大きくなり、受信環境によってはメールを表示できなくなります。容量を小さくするため、GIFアニメーションあるいは容量の小さな動画がおすすめです。
photoAC – サイバートンネルイメージより引用
3Dグラフィックスとは、コンピューターの中で3次元的に構築された空間を、画像として表現したものです。物体の奥行きを表現でき、多くのクリエイターたちによって、このトレンドが進化しています。メルマガのキャッチ画像として埋め込めば読者の目を引くことでしょう。
1：HTMLメルマガを見られないことがある
2：容量が大きすぎないこと
3：文字化けに注意
どうしてもHTMLメルマガを見られない受信環境があることを知っておいてください。たとえばスマートフォンのキャリアメール、MMSで受信した場合、デザインが崩れることがあります。またメールクライアントのフィルターで迷惑メールに振り分けられる場合にも注意が必要です。
こういったケースでHTMLメルマガを正しく表示させる方法はありません。代わりにマルチパート配信にして、HTMLメールが見られないときはテキストメールを表示させるとよいでしょう。また同じコンテンツのウェブサイトを作り、メルマガからリンクさせておくのもよい方法です。
メルマガの容量が大きすぎると、クリッピングされてしまい、正しく表示されないことがあります。たとえばGmailは102kbをこえるとクリッピングされる仕組みです。ですからHTMLメルマガは100kb以内に抑えるようにしてください。容量の大きな画像や動画は使わないほうがよいでしょう。
キャリアメール・MMSで受信すると文字化けすることがあります。メールの文字コードはいろいろなタイプがありますが、MMSやキャリアメールでメールを受信する際に「ISO-2022-JP」へ変換されて読み込まれる仕組みです。この際に変換がうまくいかないと文字化けしてしまいます。対策としてはマルチパート配信を活用してください。
また環境文字を使うとWindowsとMacでは異なるため、一部文字化けします。HTMLメルマガには環境文字を使わないようにしましょう。
参考記事：HTMLメールが文字化けしてしまうときの原因と対処法は？
メルマガデザインの最新トレンドとして、カラー・フォント・画像の選び方、ユーザー生成コンテンツ、双方向コミュニケーションについて解説しました。またトレンドカラー、タイポグラフィ、マイクロアニメーションなどをご紹介しました。
これでHTMLメルマガをおしゃれにデザインするコツは分かったと思います。ただし専門的なスキルが必要であり、本業の合間に制作するには手間がかかり過ぎるでしょう。HTMLメールの専門家に制作を依頼した方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのテキストデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
