これがEメールデザインの未来です

過去にメールのデザインが行き詰まっていることについては多くのことが言われています。 最初のプロジェクトに取り組むデザイナーは、テーブルとインラインスタイルの使用を嘆きます。 最初のキャンペーンを計画しているマーケターは、バッチアンドブラストの精神を超えて考えることを拒否します。

しかし、一部の勇敢な送信者は、電子メールの設計を取り巻く（時には）時代遅れのテクノロジーやメンタリティが彼らを引き止めさせることを拒否しています。 彼らは、高度なWebデザインに一般的に見られる手法を使用して、電子メールデザインの限界を押し広げ、購読者を驚かせ、喜ばせ、つながります。

実験的なメールデザインに関連する課題を見て、私たちのお気に入りの未来的なメールキャンペーンのいくつかをまとめましょう。

2020年のEメールマーケティング 20人の主要な専門家の洞察に加えて、何千ものマーケターと消費者からの調査結果を使用して、Eメールマーケティングの将来に備えてください。 ダウンロード中

メールのデザインを制限する必要はありません

ほとんどの人が電子メールマーケティングについて考えるとき、彼らは何かを売りたいと思っている会社によって送られるずんぐりした、退屈なニュースレターを思い浮かべます。 また、メールキャンペーンの作成を担当している場合は、HTMLテーブルとインラインCSSの山を見て、どこでも問題なく機能するメールをハッキングするまでの分数を数えている可能性があります。

電子メールの設計の基礎が少し古いのは事実ですが、少しの創造性、計画、および多くのテストを考えると、それらを使用して実行できることには実際には制限がありません。 はい、メールデザイナーはテーブルベースのデザイン（ありがとう、Outlook！）、インラインCSSを使用し、ハックの海を泳ぐ必要がありますが、以下の例が示すように、受信トレイでいくつかの驚くべきことを実行できます。

ポイントを証明するために、ルールを破り、メールデザインの限界を押し広げているメールのお気に入りの例をいくつか紹介します。

メールのカルーセル？

しばらく前に、英国の小売業者B＆Qは、業界を熱狂させるメールを送信しました。

このキャンペーンでは、ユーザーはボタンにカーソルを合わせるかタップして、さまざまなコンテンツセクションがメールにスムーズに出入りするのを見ることができます。 一般にカルーセルと呼ばれるこの手法は、Webの世界で広く使用されていますが、電子メールキャンペーンではまれです。 カルーセルは効果がなく、単に見せるためだけだと不満を言う人もいるかもしれませんが、B＆Qキャンペーンは、最先端の技術を使用して電子メールの購読者を驚かせる方法の良い例です。

電子メールは、その魔法を実行するために、いくつかの巧妙なターゲティングとともに、いくつかのCSS3プロパティを使用します。 CSSトランジション、アニメーション、z-index、およびオーバーフロープロパティを使用することにより、デザイナーは、タップするように頼むだけの巧妙な電子メールを作成しました。

さらに印象的なのは、これらのより高度な技術をサポートしていない電子メールクライアントではすべてが美しくフォールバックすることです。

クレイジーな色とスターウォーズ

英国の電子メールエージェンシーであるActionRocketは、しばらくの間、電子メールの設計を主導してきました。 巧妙にタイトルが付けられたEメールニュースのウィークリーダイジェストであるEmailWeeklyを使用して、最終的にクライアントキャンペーンに取り入れられる可能性のあるいくつかのクリエイティブなテクニックをテストします。

私たちのお気に入りの例の1つは、「このメールは何色ですか？」という質問をしたメールです。

CSSキーフレームアニメーションを使用して、見出しセクションの背景色をアニメーション化し、魅惑的な幻覚効果を生み出します。 最初は微妙ですが、加入者がアニメーションに追いつくと、彼らは背を向けることができません。

Action Rocketのもう1つの優れた例は、実験的な-webkit-perspectiveプロパティとCSS変換を利用して、みんなのお気に入りのSF映画の象徴的なオープニングクロールを再現した、最近のスターウォーズ風のダイジェストです。

メールのインフォグラフィック？

メールエージェンシーの表示ブロックは一貫して優れたメールを送信しますが、私たちの注意を引いたのは最近のインフォグラフィックメールです。

Email Weeklyの例の背景色と同様に、表示ブロックはCSSキーフレームアニメーションを使用して、すでに適切に設計されたキャンペーンに活気を与えます。 本当に素晴らしいのは、電子メールが美しく応答し、モバイルデバイス上で各セクションをうまく積み重ねることです。 レスポンシブデザインとアニメーションアイコンはすべて、モバイルメールの使用に関する優れたデータを強化するのに役立ちます。

このようなインフォグラフィックをメールで目にしたことはあまりないため、さらに印象的で画期的なものになっています。 インフォグラフィックの例をもっと見てみたいので、それらに捧げられたコミュニティコンテストを開催しています！

HTML5ビデオとインタラクティブツアー

私たちは説教することを実践するのが好きです。それが、主にデスクトップの聴衆がいるにもかかわらず、私たちの電子メールを素晴らしく応答性の高いものにする理由です。 これは、昨年の電子メールデザイン会議（今年の夏に再び開催される）のHTML5ビデオの背景など、独自の最先端の電子メールキャンペーンの背後にある理由でもあります。

私たちのデザイナーであるケビンは、高度な電子メールクライアントターゲティングを使用して、他の点では単純な設計を段階的に強化しました。 彼がどれほど正確にそれをやってのけたか興味があるなら、彼はプロセスを詳述したブログ投稿を書いた。

そして、私たちの電子メールコードエディタであるビルダーの立ち上げを祝うために、彼は電子メールでインタラクティブなツアーを構築することでさらに物事を進めました。

CSSアニメーション、チェックボックスのハック、CSSコンテンツプロパティの自由な使用を利用して、彼は受信トレイでBuilderの機能の一部を披露し、ログインしなくてもサブスクライバーに製品の味を提供します。たくさんあります。それを動かすコードの、しかしあなたはビルダーでそれを直接チェックすることができます（一種の電子メールインセプションのようなもの）。

おいしいメールメニュー

カルーセルメールのように、デザイナーのジェリーマルティネスは、ウェブからインスピレーションを得て、モバイル加入者向けのハンバーガーメニューを実装しました。

ナビゲーション要素は、特にモバイルでは、メールデザイナーにとって常にトリックです。 積み重ねるとかなりのスペースを占める傾向があるため、キャンペーンの主な召喚状から注意をそらす可能性があります。 この問題を解決するために、ジェリーはモバイルユーザーがナビゲーションアイテムを選択的に表示できるエレガントなハンバーガーメニューを作成しました。

私たちはジェリーのソリューションにとても感銘を受けたので、コミュニティコンテストの1つで他のクリエイティブなナビゲーションパターンを披露するように人々を招待しました…

コミュニティコンテスト：真の最先端

私たちのコミュニティコンテストは、人々にクレイジーなアイデアを思いつくように本当に挑戦する場所です。 毎月、テーマを設定し、スキルを伸ばしていきます。 ALTテキストのクリエイティブな使用法を検討した最初のコンテストでは、電子メールのスペースインベーダーのような驚くべき結果が得られました。

2回目のコンテストでは、興味深いナビゲーションパターンを考えてもらいました。 Remi Parmentierのねばねばしたナビゲーションコンセプトのような結果のいくつかに私たちは驚かされました：

何か新しいことを試していますか？

電子メールで新しいことを試すのはエキサイティングですが、キャンペーンを徹底的にテストしないと、多くのことがうまくいかない可能性があります。 電子メールプレビューを使用すると、デスクトップ、Webメール、およびモバイル電子メールクライアントで任意の手法を簡単にテストできます。

Litmusを無料でお試しください→