モバイルファーストアプローチのメールをデザインする方法

公開: 2015-05-21

私たちは良い戦いを戦っています。それは、絶え間ない電子メールの流れの終わりのない戦いです。どこに行っても、どのデバイスを持っていても、メールでどこにでも見つけることができます。この記事を読んだ後、さらに10通のメールが届く可能性があります。そして、デザイナーとして、私たちは受信トレイの両側にいます。私たちは常にメールを受信しますが、実際のメールデザインのデザインと作成にも責任があります。

メールの対象者に関係なく、目標は、サブスクライバー、顧客、および見込み客にメールを送信するときに最高のユーザーエクスペリエンスを提供することです。また、メールの大部分はモバイルデバイスで開かれるため、開く可能性のあるすべてのデバイスに対応できるようにメールを設計する必要があります。

レスポンシブウェブデザインや一流のモバイルアプリケーションに慣れてきた私たちは、どんなデバイスでも手に取って、オーダーメイドのエクスペリエンスをデザインできることを当然のことと思っています。電子メールの場合、物事はそれほど単純ではありません。テクノロジーの面では、現代のWebデザインから数年遅れています。 HTML属性、テーブルベースのレイアウト、およびインラインスタイルを使用して設計する必要があります。これらは、各電子メールクライアントで同じように動作することが保証されているわけではありません。

すべてのデバイスの電子メールを設計していますが、私の選択肢は何ですか？

CD-ROMコレクションに取り掛かる前に、制限があっても、成功する「応答性の高い」電子メールを設計する希望があることを忘れないでください。真に応答性の高い電子メールを作成することは確かにオプションですが、成功するモバイルファーストデザインを作成するときは、これら3つのアプローチすべてを考慮することが重要です。

スケーラブルなデザイン
流体設計
レスポンシブデザイン

ニーズに最適なアプローチを選択するには、これら3つの形式の設計の違いと制限を理解することが重要です。決定を下すには、オーディエンスと、オーディエンスが使用するデバイスと電子メールクライアントについての知識が必要です。すべての電子メールクライアントが同じCSSサポートを提供しているわけではないため、これは、どのアプローチがユーザーに最適かを判断するのに役立ちます。

スケーラブルなデザイン

スケーラブルな電子メールレイアウトは、すべての画面サイズで読み取り可能でクリック可能であるため、用途が広いです。これは、オーディエンスがモバイル、タブレット、デスクトップなどのさまざまなデバイスでメールを開く傾向がある場合に最適なオプションです。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

このオプションは、メディアクエリを使用せず、調整する必要のあるテーブル幅がないため、通常、実装が最も簡単です。 1つの利点は、このタイプの電子メールを設計するときに大きな学習曲線がないことです。ほとんどの場合、モバイルは電子メールを読むための最も一般的なデバイスであり、これにより、モバイルを最初に検討することが容易になります。大きなボタン、読みやすいテキスト、明確なアクションの呼び出しにより、モバイルは小さな画面サイズのニーズに対応するための最優先事項になります。

スケーラブルな電子メールの設計は、すべてのデバイスで適切に機能するために単一の列である必要があるという事実を制限する可能性があります。その理由は、デザインに複数の列がある場合、モバイルデバイスではこれらが非常に小さくなり、読みやすさに影響するためです。ただし、受信トレイをスクロールすると、非常に一般的であるため、単一列のレイアウトが多数表示されます。

コンテンツはすべての電子メールの鍵となるため、テキストサイズは、モバイルや大画面でも適切に機能するサイズにする必要があります。ほとんどの電子メールクライアントでは、電子メール全体が画面全体に表示されるため、ユーザーは垂直方向にスクロールする必要がありません。ただし、メールが意図したとおりに画面に表示されない場合に備えて、重要な情報と召喚状をメールの左上に配置することをお勧めします。

流体設計

流体-電子メール-デザイン

あなたはウェブデザインからの「液体」レイアウトに精通しているかもしれません。デザインコンポーネントにはパーセンテージ幅があり、同じ幅を維持しながら、ユーザーの画面解像度に合わせて調整されます。流動的な電子メールの設計は、これと同じ考えを利用しています。

この電子メールオプションは、スケーラブルなオプションと真に責任のあるオプションの間のギャップを埋めます。スケーラブルなオプションよりも、より多くの先行設計を行う必要があります。この理由は、パーセンテージベースのサイズ設定により、テーブルと画像の幅が、電子メールが表示される画面サイズに適応するためです。テーブルはさまざまなサイズでレイアウトを変更しませんが、コンテンツが流れてスペースを埋めます。これは、コピーと画像の相互関係を制御しにくいため、テキストが多い電子メールに最適なオプションです。レイアウトをシンプルに保つことは依然として良い考えです。できれば、電子メールの読みやすさを最優先に保つために単一のテーブルレイアウトを維持することをお勧めします。

これが固定と応答の間のギャップを埋めると言ったことを覚えていますか？その理由は、大きな画面ではサイズを制限する必要があるためです。メールの幅が広すぎると、テキスト行が視覚的に長くなりすぎて、読者がメールを簡単に読めるようにしたいと考えています。メールの内容を固定幅のコンテナテーブルでラップすると、より大きな画面サイズでの表示に役立ちます。次に、有用なメディアクエリは、より小さな画面サイズを対象とします。

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

モバイルデバイスのメディアクエリの例：

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

返信メール

レスポンシブデザイン

スケーラブルで流動的な電子メールから私たちが知っていることを取り入れて、さらにいくつかのルールを追加しましょう。 Responsiveを使用すると、CSSメディアクエリを使用してさまざまなブレークポイントに表示される内容をより細かく制御できます。このオプションを使用すると、レイアウトを変更したり、特定のブレークポイントの条件付きスタイルを使用して他の要素をカスタマイズしたりできます。

レスポンシブレイアウトのメディアクエリの例を次に示します。

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

他のオプションと同様に、1つの列または単純なデザインに制限されません。メールはより複雑になる可能性があり、画像のレイアウトと量の制限が少なくなります。たとえば、電子メールのデザインは、大型のデバイスでは複数の列になりますが、モバイルでは単一の列になります。テキストサイズ、画像、その他ほとんどすべてを最適化して、最高のエクスペリエンスを実現できます。

複数のメディアクエリを使用して複雑なデザインを作成する前に、いくつかのトレードオフについて説明することが重要です。メディアクエリは、すべての電子メールクライアントで機能するわけではありません。実際、サポートはかなり制限されています。 Litmusメディアクエリサポートリストによると、Android Outlook.comアプリ、Android 4.xネイティブクライアント、およびiOS（iPhone / iPad）が現在それらをサポートしています。視聴者の大多数がモバイルおよびタブレットユーザーである場合、これらを最大限に活用できます。

その他の設計上の考慮事項

電子メールのデザインの作成を開始する前に、分析を調べて、ユーザーの電子メールクライアントとデバイスを特定することが重要です。これを頻繁にチェックし、状況の変化に応じて設計アプローチを進化させることをお勧めします。制限はありますが、電子メールは進化しているため、現在サポートされているものについていくことが重要です。

さらに読むためのいくつかの素晴らしいリソースがあります：

モバイル固有のCSS
メールの未来
iPhoneとAndroidのメール

幸いなことに、現在の電子メールの制限により、モバイルファーストのアプローチが可能です。デザインが「レスポンシブ」の真の形ではなく、いくつかの指定されたパーセンテージといくつかのメディアクエリがある場合でも、どのデバイスに関係なく、印象的な電子メールデザインを作成します。ほとんどの場合、ユーザーの大多数はモバイルデバイスで電子メールをチェックしているため、モバイルファーストのアプローチを取ることが電子メール設計の強力な基盤になります。