メールのデザインをブランドイメージに揃える方法

この記事は How To Maintain Brand Standards in Your Email Designs の抄訳です。

マーケティング活動においては様々なメディア（媒体）を利用して顧客やプロスペクトと接触しますが、それぞれで一貫したブランド、顧客体験を提供することがエンゲージメントの醸成においては重要です。
特に、メールからWebサイトへ、といった遷移をする際は注意が必要です。一貫したブランドイメージを提供するには、メールをどのようにデザインし作成するかにかかっています。メールのデザインがWebサイトを含む全体のブランドデザインと揃っていないと、受信者は混乱しエンゲージメントが低下する恐れがあります。本記事では、メールとWebサイトのデザインを揃えるのに役立つTipsをご紹介します。このTipsを参考にすれば、一貫性のないブランディングで受信者を驚かせてしまうようなことはなくなるでしょう。

本記事でご紹介するのは、SendGridユーザのWine Exchange (以下、Winex) の事例です。WinexではメールとWebサイトの見た目を揃えるために、SendGridのマーケティングキャンペーン機能でメールテンプレートのデザインを変更しました。以下のTipsはマーケティングキャンペーン機能で実現可能なものです。

レイアウト

まずはWebサイトの基礎的なデザイン要素（例：カラム数）から確認していきましょう。とはいえ、Webサイトが3カラムだからといってメールも3カラムにしなければいけない、というわけではありません。デザインの発想を統一し閲覧した時に受ける印象を同じにすることが大切です。

こちらが、WinexのWebサイトのカラムレイアウトです。

そして、こちらがメールのレイアウトです。

Webサイトは3カラム、メールは2カラムです。カラム数は異なりますが、商品の見え方は揃っています。

メールのレイアウトにおいてフッターは見落とされがちな要素ですが、Webサイトとメールの一貫性を出すためにはフッターを揃えることが効果的です。フッターが揃っていれば、受信者は簡単にWebサイトの特定のページに辿り着くことができます。

Webサイトのレイアウトを完璧に反映する必要はありません。Webサイト全体の見た目をメールに反映させればブランドイメージは統一できます。

画像

画像はデザイン要素の中でも影響力が大きく、メールを華やかにし受信者のエンゲージメントの向上にも役立ちます。しかし、画像（その他のデジタル情報も）は読み込み速度の課題ももたらします。画像をどのように処理し、表示するかは受信ボックス毎に異なりますが、画像数が多いと読み込み速度が落ちます。また、画像が多すぎるとISPによってはメールを完全に読み込まないまま表示したり迷惑メールフォルダに振り分けたりもします。

デザイン変更前、Winexではレスポンシブ対応でない画像を利用していました。これは受信者を困惑させるだけでなく、イライラさせたり、エンゲージメントが低下する原因にもなっていました。デザイン変更後の画像はレスポンシブ対応しており、受信者がスムーズに操作できるようになっています。画像のレスポンシブ化にはマーケティングキャンペーン機能を利用しました。

受信ボックスによっては画像が表示すらされない、ということを心に留めておきましょう。メールの内容を伝えるために画像に頼りすぎると、上記に挙げたようなリスクが大きくなります。

画像は補足情報であり、メールマーケティングの成功を約束してくれるものではありません。

また、ブラウザテストも忘れずに実施しましょう。主要なブラウザとデバイスの組み合わせでメールが意図した通りに表示されるか確認しましょう。

ボタンとCTA

ボタンとCTAも、できるだけWebサイトと似ているものにしましょう。そうしておけば知りたい情報を得るためにクリックすべきボタンが自然にわかります。WinexではWebサイトで利用しているボタンをメールでもそのまま利用しました。上の段がWebサイトから直接取得したボタンで、下の段はメールに入れたボタンです。

上記のボタンとCTAは、閲覧しているのがWebサイトなのかメールなのかに関わらず一貫性があり明確です。CTAについてより詳しく知りたい方は、Build A Strong Call To Action Guideをダウンロードしてください。

フォント

メールのフォントは、可能な限りWebサイトのフォントと似たものを採用しましょう。Webサイトと同じフォントを利用したければHTMLのヘッダにフォントを追加しましょう^※。しかしながら、これはメールデザインにおいて「必須」ではありません。

※マーケティングキャンペーンをご利用の場合、コードエディタでヘッダを編集できます。

なぜなら、フォントは常にサポートされているとは限らず、予備のフォント（似たフォントでサポートされているもの）を利用しなければいけないこともあるからです。予備のフォントを用意しておけば時間をかけずにメールを作成できるでしょう。フォントを並べて比較すれば、Webサイトのフォントとよく似たものを見つけることができます。Winexでは、最終的に広く世界で利用されているArialを採用しました。

まとめ

メールとWebサイトのデザインが完全に一致している必要はありませんが、メールからWebサイトへ遷移した時（逆もしかり）に「ブランドが一貫している」と感じてもらえるようにしておきましょう。このような体験は顧客との関係を良好にし、かつ、エンゲージメントを保つ鍵となります。マーケティングメールをデザインし編集する時は下記の項目を心に留めておきましょう。

• デザインの見た目は揃えるべきですが、全てを同じにする必要はありません。
• 画像がレスポンシブ対応になっているか確認し、送信前にブラウザテストを実施しましょう。
• フォントは完全に一致させる必要はありません。多くのESPはWebサイトのフォントと似ているWebフォントを持っています。

メールデザインについての戦略をもっと知りたければ、ぜひ メールデザインに関する5つの疑問をご覧ください。また、ブランドの一貫性を保ったデザインのメールが簡単に作成できるマーケティングメール機能のエディタをぜひお試しください。