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