モバイル端末向けメールを作成するポイント

この記事は How to Optimize Your Email for Mobile の抄訳です。

フライト中に顧客からのメールを確認したり、カフェでの順番待ちの間にメールを書いたり、私たちは携帯電話を使ってたくさんの仕事をこなしています。事実、SendGridで調べたところ、メールの大半(55.6%)はモバイル端末で開かれていることがわかりました。

外出中でもコミュニケーションをとることがますます増えているため、どんなデバイスでも見栄えの良いメールを送ることが大切です。そこで、モバイル端末向けに最適なメールを送るための10のヒントをご紹介します。

1. 受信者の環境を知る

モバイル端末に適したメールを作る第一歩は、受信者がどのようにメールを閲覧しているかを知ることです。 SendGridの調査によると、米国のメールコンテンツの大半がGmail（42.1％）とiPhoneで閲覧されています。 受信者がメールを見るのに使っているデバイスとサービスプロバイダを知ることで、メールを作成するベストな方法を知ることができます。

下図は、Apple Mailのアプリ（左）とGmailのアプリ（右）で、同じメールのプレビューテキストの表示を比較したものです。 Apple Mailのアプリでは、プレビューテキスト用にGmailのアプリの2倍のスペースを使えることが分かります。メールがどのように見えているかを知ることで、例えばプレビューテキストに含めるべき単語の数を決めることができます。

2. 差出人名、件名、プレビューテキスト

受信者にメールを開いてもらえるように、モバイル端末画面に表示されるこれらの小さなスペースをフル活用しましょう。件名だけでなく、送信元メールアドレスや、プレビューテキストも活用しましょう。

1. 送信元メールアドレスによって、即座にブランド名を認識してもらうことができます。
2. 件名は4単語程度(英語の場合)の短いものにしましょう。
3. プレビューテキストを活用して、さらに受信者の興味を引き付けましょう。

3. メールの表示幅

PCの場合、推奨するメールの表示幅は600pxですが、ほとんどのモバイル端末ではこの幅では広すぎます。メールを拡大表示しなくて済むように、CSSにメディアクエリを組み込みましょう。メディアクエリを組み込むことで、様々なデバイスの高さと幅に合わせたテンプレートを作成することが可能になります。モバイル端末向けのメディアクエリでは最大幅を480pxに設定することが推奨されています。

メール作成方法の詳細については、ブログ記事「メールのデザインを考えるときのポイント」をご覧ください。

4. 1段組みにするか複数段組みにするか

モバイル端末で2段組みのテキストを表示すると、文字が密集してしまい、読みづらくなってしまいます。そのため、テキストが重要なメールの場合は、1段組みにすることをお勧めします。

メール内の画像が小さければ、2段組みのレイアウトでもうまく表示させることができます。しかし、複数段組みにすると、さまざまなプラットフォームやデバイスで意図したとおりに表示させることが、1段組みの場合よりはるかに難しくなります。

下図のメールをご覧ください。1つ目はデスクトップ用のデザインで、複数段組みのレイアウトを使用しています。2つ目はモバイル端末用のデザインで、1段組みのレイアウトを使用しています。1段組みのレイアウトでは、色々な製品を簡単に表示し、スクロールすることができます。

5. 画像サイズとALT属性

4KやRetinaディスプレイで明瞭に表示させるため、サイズを2倍にした高解像度画像は、ロゴや重要な画像で使用するのに理想的です。しかし、画像が多いメールでは、高解像度のものが多すぎるとダウンロード時間が長くなる可能性があります。 メールのロードが遅いと、受信者にメールを読んでもらえなくなるリスクが高くなるので、高解像度画像の使い過ぎには注意してください。

一部のメールサービスプロバイダ（Gmail iPhoneブラウザ、Gmail IOSアプリなど）はデフォルトで画像をブロックするため、閲覧者に表示される内容を知らせるためにALT属性を利用するようにしてください。 画像が読み込まれていないときに表示されるALTテキストにもスタイル設定をすることができます。

6. フォントサイズ

メールを読むために老眼鏡を出さなくてもいいよう、文字サイズは大きくし、読みづらいフォントは避けるようにしましょう。また、デバイスごとにフォントが変更されてしまう点にも注意してください。 たとえば、Comic Sansのフォントはモバイル端末ではサポートされていません。

7. 余白とレイアウト

メールをよりよいものにするために、余白を活用しましょう。メールを読みやすくするために、箇条書きやCTA、画像で文面を分割します。受信者はメールを一言一句漏らさず読んでいるわけではなく、ざっと目を通しているということに気を付けましょう。目を通しやすいようにモバイル端末向けのメールをデザインしてください。そしてできるだけ長いメールは避けるようにしましょう。

ブログ記事 「Whitespace and Harmonious Rhythm in Design」(英語)で、モジュラースケールを使用してWebサイトデザインのバランスを保つ方法をご紹介しています。 このスケールを使用すると、メールのデザインでも最適な余白の比率を適用することができます。

8. 親指での操作性について考える

モバイル端末用のテンプレートでCTAを作成する場合は、親指での操作のしやすさを気にかけておくようにしましょう。CTAは、親指で簡単にクリックできるだけの幅を持たせることが必要です(誤って他のものをクリックしてしまうことのないようにしましょう)。

縦長のメールを送信する場合は、CTAをメールの上部と下部の両方に配置してみてください。 こうすることで受信者は、電子メールの最後に到達したときにCTAまでスクロールするという手間を掛けずにすみます。 Artifact Uprisingの例では、3つの製品を上下のCTAで挟んでいます。 Artifact、いい仕事しています。

モバイル端末のメールから、Webサイトではなくアプリに受信者を誘導したい場合は、受信者を直接App Storeに誘導するユニバーサルリンクを追加するという方法もあります(コーディングが必要です)。

9. ランディングページ

メールをモバイル端末での表示に対応させるだけでなく、ランディングページの対応も忘れないようにしましょう。 ランディングページは、携帯電話で表示した場合でも、標準のブラウザで表示した場合と同等かそれ以上に見栄えが良いものにするべきです。ページ幅には上述のメール幅と同じルールを適用することに加え、コンテンツを分かりやすいものにし、外出中でも簡単に概要が理解できるようにしましょう。

10. 入念にチェックする

Email on Acid や Litmus のようなツールを使って、様々なデバイスやプロバイダでメールをテストをしましょう。こうすることで、あらゆる受信トレイで見栄えよくメールが表示されるという安心感を得られます。

まとめ

モバイル端末向けのメールをデザインする際は、受信者の読みやすさや操作しやすさを念頭に置くようにしましょう。 30秒程度でメールを読みきったり最後までスクロールしたりできない場合は、改善する余地があります。 上記の10のヒントや、更に一般的なメールデザインについてのヒントが掲載されている、The Experts Guide for Email Design(英語)を参照してください。

モバイル端末向けのレスポンシブメールテンプレートの開発に取り掛かる準備ができていなくても心配無用です。SendGridには、自分のブランドに合わせて調整できるレスポンシブテンプレートがたくさんあります。 ぜひSendGridにサインアップしてメールマーケティングテンプレートをお試しください！