5 つの簡単なステップでメールのデザインをモバイル対応にレスポンシブにします
公開: 2024-01-17電子メール ニュースレターやマーケティング キャンペーンをどのデバイスでも見栄えよく表示したいと思いませんか? もちろんそうでしょう。 自分の努力が誰かの受信箱で読めなくなることを誰も望んでいません。 幸いなことに、わずか 5 つのステップで、メールの応答性が向上し、購読者に好印象を与えることができるようになります。 軽食、お気に入りのプレイリスト、またはドリンクを用意して、どの画面でも最高に見えることを確認してみましょう。
列幅をピクセルではなくパーセンテージで設定します
電子メールのデザインをレスポンシブにするには、固定ピクセル値ではなくパーセンテージを使用して列幅を設定します。 これにより、列をさまざまな画面幅に合わせて柔軟に調整できます。
流体グリッドを使用する
流動グリッド アプローチでは、列幅のパーセンテージを使用するため、画面サイズに基づいて必要に応じて拡大および縮小できます。 シンプルな 2 列レイアウトの場合、左列の幅を 60 ～ 70%、右列の幅を 30 ～ 40% にします。 例えば：
<テーブル>
<tr>
<td width=”65%">列 1 の内容はここです</td>
<td width=”35%”>列 2 の内容はここです</td>
</tr>
</テーブル>
これにより、列 1 が使用可能なスペースの 65% を占め、列 2 が残りの 35% を占めるようになります。 大きなデスクトップ画面では、列 1 の幅が 650 ピクセルになる可能性がありますが、小さなモバイル画面では、幅が 200 ピクセルしかない場合があります。 しかし、相対的な比率は変わりません。
レスポンシブ ブレークポイントのメディア クエリを追加する
メディア クエリを使用すると、画面の幅に基づいてさまざまなスタイル ルールを適用できます。 これらを使用して、さまざまなブレークポイントで流体グリッドをさらに調整できます。 例えば：
/* 携帯電話の場合: */
@media のみの画面と (最大幅: 600px) {
テーブル、td {
幅: 100% !重要;
}
}
/* タブレットの場合: */
@media のみの画面と (min-width: 601px) および (max-width: 900px) {
テーブル、td {
幅: 80% !重要;
}
}
これにより、テーブルと列が小型携帯電話では画面幅の 100%、タブレットでは 80% を占めるまで拡大され、デザインが完全にレスポンシブになります。
サイズ変更可能な流動的な画像とメディアを使用する
電子メールのデザインをモバイル対応にするには、画像やその他のメディアを画面サイズに合わせて柔軟にサイズ変更する必要があります。 次のヒントに従ってください。
レスポンシブな画像サイズを使用する
メールに画像を追加するときは、レスポンシブな画像サイズ設定を使用してください。 これは、電子メール クライアントが表示されている画面に適したサイズを選択できるように、複数の画像サイズを提供することを意味します。
たとえば、幅 1000 ピクセルの大きな画像を含めるだけでなく、次のものも含めます。
- 中くらいのサイズ（600pxくらい）
- 狭い列用の小さいサイズ (約 400px)
- 小さなモバイル画面用の小さなサイズ (約 200 ピクセル)
電子メール クライアントは、画面と帯域幅に最適なサイズを自動的に選択します。 電子メールで複数の画像サイズを指定するには、<img srcset> 属性を使用します。
メディアをモバイル対応にする
ビデオや GIF などの他のメディアの場合も、複数のサイズ オプションを提供します。 ビデオには、さまざまな解像度の MP4 ソースが必要です。 GIF と iframe (YouTube 埋め込みなど) には、画面に合わせてサイズを変更できる幅の制約が必要です。
これらのヒントを念頭に置いておけば、電子メールの画像、ビデオ、その他のメディアがどのデバイスでも美しく表示されます。 購読者は、見栄えがよく、どこを開いても読みやすいメールを高く評価するでしょう。
フォントのサイズをピクセルではなくemsで指定します
電子メールのデザインをモバイル対応にするには、フォントのサイズをピクセルではなく em 単位に設定する必要があります。 ピクセルは固定単位であるため、ブラウザを拡大表示するとテキストが歪む可能性があります。 一方、Ems は、ユーザーの設定に合わせて調整される相対単位です。
レスポンシブメールフレームワークを使用する
レスポンシブ電子メール フレームワークには、画面幅に合わせて自動的にサイズ変更されるコンポーネントが事前に構築されています。 よく使われるオプションとしては、MJML、Foundation for Emails、Ink などがあります。 これらのフレームワークはサイズ変更に ems を使用するため、自分で変換を行うことを心配する必要はありません。
フレームワークを使用しない場合は、ピクセルを ems に変換します
CSS を完全に制御したいが、フレームワークを使用したくない場合は、ピクセル サイズを ems に変換する必要があります。 その方法は次のとおりです。
- 基本のフォント サイズをピクセル単位で決定します。 16pxとしましょう。
- それをemsに変換します。 1em = 16px (基本サイズ)、つまり 16px = 1em です。
- 使用したいサイズは、16px で割って 1em を掛けます。 たとえば、24px の見出しの場合、24px/16px = 1.5em となります。
- CSS 内のすべてのピクセル サイズを同等のピクセル サイズに置き換えます。
コンテンツをレスポンシブに調整する
電子メールのデザインをレスポンシブにするには、どの画面サイズでも適切に表示されるようにコンテンツを調整する必要があります。 次の手順を実行します：
流体測定を使用する
列、画像、コンテナに固定ピクセル幅を使用するのではなく、パーセンテージを使用します。 これにより、コンテンツを画面の幅に基づいて比例的に拡大縮小できるようになります。 たとえば、width=”600px” の画像の代わりに、width=”50%” を使用します。
重めのスタイリングは避ける
一部の電子メール クライアントでは正しく表示されないカスタム スタイルの使用を制限して、電子メールをシンプルに保ちます。 基本的な HTML テーブル、インライン スタイル、レイアウトの align 属性を利用します。 必要に応じて要素を中央に配置します。
これらの実践的な手順に従うことで、読者が受信トレイを開くために使用するデバイスに関係なく、電子メールのコンテンツが美しく表示されるようになります。 購読者向けに優れたレスポンシブ電子メール デザイン エクスペリエンスを作成することは、努力する価値があります。
テスト、テスト、さらにテスト
モバイルデバイスでどのように表示されるかを確認する
大多数の人がモバイル デバイスを使用して電子メールにアクセスしていることは誰もが知っています。 そのため、メールがモバイル対応であることを確認するには、さまざまな携帯電話にメールを送信してテストしてください。 Android、iPhone、タブレットで確認してください。 縦モードと横モードの両方で画像、ボタン、テキストがどのように表示されるかを確認します。
主要な電子メールクライアントでテストする
すべての電子メール クライアントが同じ方法で電子メールを表示するわけではありません。 Gmail、Outlook、Yahoo Mail、および購読者がよく使用するその他の主要な電子メール サービスでテストを実行します。 画像、埋め込みリンク、ボタン、その他のインタラクティブな要素の表示方法に問題がないか探してください。 コードを編集して表示の問題を修正し、クライアント間の一貫性を確保します。
フォールバック コンテンツがどのように表示されるかを確認する
電子メール クライアントで画像が無効になっている購読者の場合、画像の代わりにフォールバック コンテンツが表示されます。 すべての代替テキスト、画像のキャプション、および画像の説明がそれ自体で意味をなし、電子メールのコンテンツのコンテキストを提供していることを再確認してください。 画像がなくても、代替コンテンツによって優れた読者エクスペリエンスが得られるはずです。
電子メールレンダリングサービスのレビュー
Litmus、Email on Acid、Mosaico などの無料の電子メール レンダリング テスト サービスを使用して、電子メールのデザインがさまざまな電子メール クライアントやデバイスでどのようにレンダリングされるかを一度に確認します。 電子メールの応答性を向上させるために対処すべき問題を強調するレポートが提供されます。 コードを変更し、レポートが正常に戻るまでテスト電子メールを再アップロードします。
リンクとインタラクティブ要素を再確認する
電子メール内の埋め込みリンク、ボタン、その他のインタラクティブなコンポーネントは、すべてのプラットフォームで適切に動作する必要があります。 リンクが意図した宛先に移動し、ボタンやフォームが期待どおりに機能することを再確認してください。 キャンペーンを開始する前に、複数回テストして、リンク切れや機能しない要素がないことを確認してください。
電子メールのレスポンシブ デザインを完成させるには、継続的なテストと調整が必要です。 しかし、事前に努力をしておくことで、すべての購読者のデバイスと電子メール クライアントにわたって広範囲にリーチし、高いエンゲージメントをもたらす電子メールが得られます。
レスポンシブメールの一般的な問題のトラブルシューティング
モバイルに溢れるコンテンツ
- 単一列レイアウトを使用します。 電子メールでは複数の列が応答性良く機能することはほとんどありません。
- 段落とセクションは短く簡潔にしてください。 長いテキストのブロックは、小さな画面では読みにくいです。
- 可能な場合は、箇条書きと番号付きリストを使用してください。 段落よりも占有するスペースが少なくなります。
- 小さな画面では二次的なコンテンツを非表示にします。 メディアクエリを使用して、画面幅に基づいてコンテンツを表示/非表示にすることができます。
メールの幅の問題
一部の古い電子メール クライアントでは、レスポンシブな電子メールの幅に問題があります。 これを修正するには:
- 電子メールコンテナの最大幅を設定します。 ほとんどのメールには 600px をお勧めします。
- 一部の電子メール クライアント CSS をオーバーライドするには、幅宣言の後に ! important を追加します。 例えば：
- Outlook 2007 ～ 2013 のフォールバック コードを追加します。 これらの古いバージョンには別のスタイル設定が必要です。
これらのトラブルシューティングのヒントに従うと、レスポンシブ電子メールに関する一般的な問題のほとんどが解決されます。 他にご質問がございましたら、お知らせください。
結論
これらは、メールの応答性を確認する簡単な方法です。 現在、電子メールの 50% 以上がモバイル デバイス経由で開かれているため、小さな画面サイズに合わせて最適化することが不可欠であることに留意してください。 電子メール用のすべてのテンプレートを確認し、フォント サイズ、画像サイズ、間隔に必要な変更を加えます。 受信者は、使用しているデバイスに関係なく、読んで操作できる電子メールの受信に感謝するでしょう。