メール内画像の非表示への対策 – モバイル編

メール内画像の非表示への対策 – モバイル編

前回はPC環境でのメールクライアント・Webメール両方でのメール内の画像が非表示にされた場合の対策について書きました。今回はそのモバイル編です。

モバイル環境でのメール内画像の取り扱い

メールクライアント デフォルトの画像表示 ALTテキストの表示 ALTテキストのスタイル表示
Android 4.x 表示する 対応 対応
AOL Mail (Androidブラウザ) 非表示 対応 対応
AOL Mail (iPhoneブラウザ) 非表示 対応 対応
BlackBerry OS7 非表示 対応 対応
BlackBerry Z10 非表示 対応 対応
Gmail (Androidブラウザ) 表示する 対応 対応
Gmail (iPhoneブラウザ) 表示する 対応 対応
Gmailアプリ (Android) 表示する 対応 対応
Gmailアプリ (iOS) 表示する 対応 対応
iOS 6.x 表示する 対応 対応
Mailbox (iOS) 表示する 非対応 非対応
Outlook.com (Androidブラウザ) 時々表示する 対応 対応
Outlook.com (iPhoneブラウザ) 時々表示する 対応 対応
Windows Mobile 7.5 非表示 非対応 非対応
Windows Phone 8 非表示 非対応 非対応
Yahoo! USA アプリ (Android) 非表示 非対応 非対応
Yahoo! USA アプリ (iOS) 非表示 対応 対応
Yahoo! USA Mail (Androidブラウザ) 非表示 一部対応 一部対応
Yahoo! USA Mail (iPhoneブラウザ) 表示する 非対応 非対応

日本ではほとんどユーザはいないWindows Phoneは、画像非表示の場合、下記のようにALTテキストの代わりに「Download pictures.(タップして画像を表示)」が表示されます。

Windows Phoneの場合

Yahoo! USAメールのAndroidブラウザ上での表示はもっと気をつけないといけません。下記のように、画像だけでなく背景色やリンクなどほとんどのHTML表記が表示されません。表示されるのはテキストだけと考えた方がいいでしょう。

Yahoo! USAのAndroidブラウザでの表示

しかも、「View full HTML message(HTMLを表示)」をタップしても下記のように画像は表示されないのです。

HTMLを表示しても画像は表示されない

これらをもとに、ベストプラクティスとしてはやはり下記を心がけましょう。

  • ALTテキストは必ず付けましょう
  • ALTテキストにはスタイルを付けましょう

ALTテキストが付かない場合、下記のように画像非表示では伝えたいことが十分にユーザに伝わりません。

ALTテキストなし

ALTテキストが付けば、画像表示されない場合でも、その画像エリアが何であるのかがわかります。

ALTテキスト付き

せっかくALTテキストを付けるのですから、ちょっとした遊び心も有効です。たとえば猫の画像のALTテキストに「猫の画像」と付けるのではなく「ふにゃんとした猫ちゃん。カワイイ!」なんて付けられた方が画像を見たくなりますよね。

もう一つ大切なことは、

  • 画像を使わないで表現できるものには画像は使わないようにしましょう

ということです。たとえばボタン。ボタンを画像で表現しているメールはまだまだあります。画像が非表示でもボタンはちゃんとボタンであると認識して欲しいですし、クリックして欲しいですよね。

このボタン、HTMLでステキ・カンタンに表現できるんです。たとえば下記のように入力すると、

<table border="0" cellspacing="0" cellpadding="0" width="80%">
  <tr>
    <td bgcolor="#ff6666" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px;" align="center">
      <a href="http://www.ingage.jp/" target="_blank" style="font-size: 16px; font-weight:normal; color:#ffffff; text-decoration:none">インゲージのサイトへ</a>
    </td>
  </tr>
</table>

下記のようにHTMLだけでボタンが作れちゃいます。

インゲージのサイトへ

これらを活用して、画像が非表示でも効果的に想いが伝わるメールを作成していきましょう!

The Ultimate Guide to Email Image Blockingより要約と抜粋

Share this post

Start typing and press Enter to search

Shopping Cart