2023 年のデザイン、テンプレート、および例

携帯電話でメールを開いたときに、画像の品質が低く、テキストが小さすぎて、行動を促すフレーズのボタンが壊れていたことはありませんか? これらはすべて、静的メール設計の欠陥です。 レスポンシブメールが答えです。

米国居住者の半数以上が携帯電話で電子メール マーケティング メッセージを見ていることを考えると、モバイルやタブレットを含む複数の画面に合わせて電子メールを最適化する必要があります。

レスポンシブ メールでは流動的な画像と表を使用して、さまざまな画面サイズに柔軟に対応します。 最終的に、各ユーザーの最適なエクスペリエンスのために設計されたコンテンツを配信します。

レスポンシブ メールは CSS メディア クエリを使用して設計できますが、コーディングの経験は必要ありません。 レスポンシブ メールを作成することは、コーダーだけの仕事ではありません。

ここでは、いくつかのベスト プラクティスとすぐに使用できるテンプレート、およびレスポンシブ メールの基礎に関する簡単なチュートリアルを用意しました。

レスポンシブ メールは、サブスクライバーが好みのデバイスで読むことができるため、よりアクセスしやすくなります。

例として、私が受け取ったプロモーション メールがデスクトップでどのように表示されるかを以下に示します。

このメールには素晴らしい画像、購入可能なアイコンが含まれており、適切にフォーマットされています。 モバイルでメールを開くと、このようなメッセージが表示されます。

同じ情報、同じ写真、購入可能なアイコンがまだあります。 唯一の顕著な違いは、電子メールの形式です。 モバイル エクスペリエンスにより適したものとは異なります。

では、同じデスクトップ レイアウトがモバイルに適用された場合を想像してみてください。 写真やテキストを見るには、携帯電話でズームインする必要があります。 そうする代わりに、私は登録を解除します。

レスポンシブ メールを使用すると、ユーザー エクスペリエンスとキャンペーンの ROI を向上させることができます。

考えてみてください: 最適化されたモバイル メール デザインに満足している購読者は、アクセスしやすく見栄えが良いことを知っているため、より多くのマーケティング メッセージを開くことに気付くでしょう。

ですから、レスポンシブ メールについてここまで話していると、自分でメールを作成したくてうずうずしているに違いありません。 次に、レスポンシブ メールの例とテンプレートをいくつか見ていきます。

レスポンシブ メール デザイン

レスポンシブ メールをデザインするには、さまざまな方法があります。

コーディングの知識があれば、画面サイズごとに異なるメール テンプレートをコーディングできます。 また、すべての画面サイズで機能する既製のテンプレートを使用することもできます。

アプローチに関係なく、メール マーケティング ソフトウェアが必要です。 ここでは、電子メールをデザインし、複数のデバイスでその電子メールをプレビューできます。 ほとんどの電子メール ソフトウェアは、デザインが複数のデバイスでどのように表示されるかを示します。

以下のビデオでは、テンプレートを使用してメールをデザインする方法について説明します。 ビデオでは、ユーザーは Klaviyo を使用していますが、使用するソフトウェアに関係なく、概念は当てはまります。

応答メールのコーディング

電子メールの要素をレスポンシブにしようとしている場合は、メディア クエリを使用する必要があります。

メディア クエリは CSS の手法です。 特定の条件が真の場合にのみ表示されるスタイル ルールを設定できます。 たとえば、画面の幅が 600 ピクセル以下の場合に使用するフォント サイズと画像サイズを指定できます。

電子メールを操作する場合、メディア クエリを使用して、デスクトップ、タブレット、およびモバイル デバイスでのデザインの外観を指定できます。 そのためには、以下を指定する必要があります。

• セレクター「@media」を使用し、「screen」を指定します。 これは、コードが画面付きのデバイスに影響することを示しています。
• 「最大幅」をピクセル単位で設定します。 これは、コードが有効になる画面サイズを指定します。
• 特定の画面が従うようにする CSS スタイル ガイドを指定します。

以下のコードを見てみましょう。

@media 画面と (最大幅: 600px)

体

フォントサイズ: 30px;

メールの CSS に適用すると、幅 600px 以下の画面では本文が 30px のサイズで表示されます。

このアプローチは、メール応答の特定の要素を作成するのに役立ちますが、可能であればテンプレートを使用することをお勧めします。

包括的な Web デザインの経験がない限り、複数のメディア画面をコーディングするのは時間がかかり、イライラすることがあります。

技術に詳しくない場合や、より簡単な方法が必要な場合は、レスポンシブ テンプレートが組み込まれたメール マーケティング ツールを使用してみてください。 たとえば、HubSpot の無料のメール ソフトウェアは、デフォルトでレスポンシブなドラッグ アンド ドロップ テンプレートを提供します。

レスポンシブ E メールの設計例

例を見てみましょう。 このビデオから始めましょう。このビデオでは、いくつかの優れたメール マーケティング キャンペーンについて説明しています。

次に、私たちのお気に入りのレスポンシブ メール デザインのいくつかについて読むことができます。

1. TOMSニュースレター

TOMS のニュースレターでは、デスクトップ版とモバイル版の主な違いは、ディスプレイ広告のスタックとサイズです。

レスポンシブ デザインにより、モバイル版はナビゲーションが雑然とせず、画像が画面にうまく収まります。 視認性を高めるために、CTA も移動されました。

画像ソース

2.メトロポリタン美術館

TOMS ニュースレターに見られるように、レスポンシブ メール デザインは、視覚的に魅力的で消化しやすい方法でコンテンツを積み重ねるのに役立ちます。 この MET の例も例外ではありません。

モバイルでは、メニューの位置が変わります。 さまざまなギフト ショップのアイテムへのリンクは、ページの下部にあります。 これにより、利用可能なお土産の画像が前面と中央に保持されます。

画像ソース

3. 桑の実

繰り返しますが、レスポンシブ メール デザインでは、ゲームの名前が積み重ねられています。 誰かがコンテンツを表示しているデバイスがどれほど小さくても、コンテンツを読みやすく、視覚的に魅力的にすることがすべてです。

写真とテキストが交互に配置されているのはデスクトップでは理にかなっていますが、モバイルでは関連するテキストの上に一貫して写真が重ねられており、区切り線も付いているため、閲覧者が混乱することはありません。

画像ソース

レスポンシブ メール テンプレート

レスポンシブ テンプレートはあらゆる画面サイズに自動的に適応するため、電子メールがスマートフォン、タブレット、またはコンピューターのいずれで開かれても、見栄えがよく、完全な機能を備えています。

コーディングのバックグラウンドが少ない人や、デザインに費やす時間を減らしたい人には、テンプレートを使用することをお勧めします。 これらは、メールがプロフェッショナルに見え、応答性が高いことを確認するための確実な方法です。

レスポンシブ メール テンプレートを使用すると、選択したメールをデザインする時間を節約できます。 たとえば、HubSpot のメール マーケティング ツールには、レスポンシブ メール専用の 60 を超えるテンプレートが含まれています。

ここで、いくつかのテンプレート オプションを見てみましょう。

1.ハブスポット

HubSpot は、無料のレスポンシブ E メール テンプレートをいくつか提供しています。 HubSpot の顧客または無料ユーザーは、ダウンロードして自分で試すことができます。

たとえば、レスポンシブ メール テンプレートの 1 つを次に示します。複数のデバイスでテンプレートをプレビューできるサイドバーに注目してください。

画像ソース

デバイスの種類をクリックしてメールがそれに応じてフォーマットされていることを確認することは、デザイン プロセスの最終ステップの 1 つであり、HubSpot などのソフトウェアを使用している場合のレスポンシブ メール プロセスの唯一のステップです。

たとえば、プレビュー用にスマートフォン デバイスをクリックすると、コンテンツ (フォント サイズや画像解像度など) がモバイルに適した方法でフォーマットされているかどうかを確認できます。

2.キャンペーンモニター

CampaignMonitor が提供するテンプレートは他の多くのテンプレートと似ており、応答性の高い電子メールの結果がプレビュー ツールに表示されます。 たとえば、CampaignMonitor テンプレートは次のとおりです。

画像ソース

さまざまなデバイスを並べて表示できるため、設計要素を簡単に比較できます。 すべてのサブスクライバーにとって最高のエクスペリエンスを作成するために、小さな編集を行うことができます。

CampaignMonitor テンプレートは多くの場合無料であるため、予算が最小限の場合に適しています。

3. ストリップ

Stripo は、300 を超える無料の HTML メール テンプレートを提供しています。 業種、季節、種類、機能ごとにテンプレートを選択できます。 たとえば、これはビジネス業界セクションのテンプレートです。

画像ソース

Stripo のプレビュー モードで示されているように、デスクトップとスマートフォンの両方のバリエーションでプレビューを表示するオプションは、堅牢なレスポンシブ メール テンプレートの良い兆候です。

モバイル プレビューでは、電話の仕様に合わせて 1 列のレイアウトが採用されていることに注意してください。

Stripo は、目的に合ったテンプレートを見つけるためにすばやくアクセスできる Web サイトです。 レスポンシブ メールを試してみたい場合や、デザインのインスピレーションが必要な場合は、Stripo を検討してください。

4. 絶え間ない接触

Constant Contact は、サインアップ後にアクセスできる 200 以上のプロフェッショナルなメール テンプレートを提供しています。 以下の例を見ると、プラットフォームがレスポンシブ メール テンプレートを提供していることがわかります。

画像ソース

Constant Contact のテンプレートには、ドラッグ アンド ドロップ編集、調査を追加するオプション、e コマース機能、および写真ライブラリ ツールがあります。 これらの機能はすべて、メール購読者が見たいと思うものを作成するのに役立ちます.

上記の例のように、特定のツールを使用すると一貫性を維持できるため、Constant Contact などのサービスを使用すると便利です。 電子メールのレスポンシブな性質が、どのデザイン要素も妥協していないことがわかります。

いくつかのテンプレート オプションを見てきたので、レスポンシブ メールを機能させる別の方法とベスト プラクティスを見てみましょう。

レスポンシブ メールのベスト プラクティス

レスポンシブ メールの正確なデザインは、キャンペーンの目標によって異なります。 ただし、これらのヒントは、読者に最高のエクスペリエンスを提供するのに役立ちます。

• レスポンシブ メールがスケーラブルで柔軟であることを確認してください。 さまざまなデバイスでメールをプレビューして、メッセージが応答することを確認します。
• 独自の電子メールをコーディングしている場合は、CSS メディア クエリが、流動的なフィールドに固定されているフィールドを変更することを覚えておいてください。
• 小さな画面でも読みやすい大きなフォントを使用してください。
• 単一列のレイアウトは、スケーリングが容易です。 単純なレイアウトが Web ページに適している場合は、レスポンシブ メールのレイアウトを検討してください。

「スケジュール」を押す前に、必ずメールをテストしてください。 複数の画面解像度でどのように見えるかを確認してから、デザインを完成させてください。 非常に多くの人が、簡単にするためだけにモバイルでメールにアクセスしています。

メールの有効性を確認する簡単な方法は、テストとして自分自身またはチームにメールを送信することです。受信トレイにある他のレスポンシブ マーケティング メールと比べて効果があるでしょうか? その場合は、送信する準備ができています。

レスポンシブ E メールの使用を開始する

レスポンシブ メールは、より優れたアクセスしやすいエクスペリエンスを顧客に提供します。 移行を行っている場合は、事前に作成されたレスポンシブ メール テンプレートを調べることから始めます。 これらは、設計の柔軟性を提供しながら時間を節約します。

次に、セカンドオピニオンを取得します。 同僚に、デスクトップと電話でメールを開いてもらいます。 両方の経験について率直なフィードバックを得ることができます。

最後に、実験することを恐れないでください。 最も共鳴するレイアウトが見つかるまで、さまざまなレスポンシブ デザインの A/B テストを行うことができます。

すぐに、レスポンシブ メールを送信し、開封率を向上させることができます。