スマホでHTMLメールの画像が表示されない！どうしたら防げるの？

　HTMLメールを受信した際、画像がうまく表示されないことやレイアウトが崩れることがあります。特にスマートフォンでのHTMLメール受信時にこうした事象を経験したことのある方は多いのではないでしょうか。今回は、なぜこういった事象が起きるのか、どうすれば回避できるのかを説明します。

スマホで画像が表示されないケースとは？

　スマートフォンでレイアウトが崩れる事象は、主に以下の環境で発生します。

　いずれも日本特有の事象といって良いでしょう。本来あり得ない状況でHTMLメールを受け取れてしまうがゆえに、スマートフォンでレイアウトが崩れてしまうのです。

　また、スマートフォンで受信したHTMLメールがモバイルフレンドリーでない場合についても、画像が正しく表示されない場合があります。それぞれ詳しく見ていきましょう。

アンドロイド端末×キャリアメールで受信した場合

　docomo.ne.jpなどの「キャリアメール」は、NTTドコモの「デコメール」をはじめとするCompact HTML形式のメールを「フィーチャフォン端末」で受信することを前提に1990年代後半に開発・発展していきました。

　一方、2000年代末期から浸透し始めたスマートフォン（及び受信するメール・アプリケーション）は、PCと同じく「標準的なメールドメイン」で「標準的なHTMLメール」を受信することを想定しています。

　　この結果、日本独自のフィーチャーフォンを想定した「キャリアメール」とPCと同等の使い方を想定した「スマートフォン端末」の組み合わせによって、うまく受信出来ない事象がしばしば発生するようになりました。

　特に「キャリアメール」×「アンドロイド端末」の場合、下記の様に文中の画像が表示されない状況に陥るケースが多く見られます。

※事象を再現したイメージとなります。

MMSでHTMLメールを受信している場合

　もうひとつは、メッセージアプリである「MMS」をEメール受信アプリに設定しているケースです。「MMS」は「SMS（ショート・メッセージ・サービス）」の拡張機能です。「MMS」は、テキストだけでなく、画像やビデオ、リッチテキストを含んだメールを送受信できます。規格上、確かにHTMLメールの送受信は可能ですが、MMSは受信する前にMMSサーバーで内容が改変される場合もあり、作成したそのままの内容を送れるとは限りません。レイアウトも下記の様にフキダシ型のインターフェイスによって崩れてしまいます。

※事象を再現したイメージとなります。

　海外では「MMS」は「ショートメッセージの拡張アプリケーション」として位置付けられている一方、日本の場合、通信事業者によっては「MMS」利用時にキャリアメール設定を必須としているケースもあるため、レイアウト崩れのHTMLメールを受け取る環境が構築されてしまうのです。

HTMLメールがモバイルフレンドリーでない場合

　デスクトップ用に作成された大きなサイズの画像を、画面の小さなスマートフォンでそのまま表示した場合、画像が見切れてレイアウトが崩れてしまったり、画像が表示されないといった問題が発生する可能性があります。

　また、スマートフォンは通信速度が遅い場合や、通信データ量に制限が設けられている場合があるため、大きなサイズの画像や、過剰な枚数の画像がHTMLメールに含まれている場合、画像の読み込みに時間が掛かり、いつまで経っても画像が表示されない問題が発生することがあります。

　これらの問題を解決するためには、スマートフォンで表示することを意識した、モバイルフレンドリーなHTMLメールの作成が必要になります。

どうすればスマホで画像が表示される？

　こうした事象はどうすれば解決できるのでしょうか。一般的な3つの方法と、当社の解決方法をご紹介します。

1.ウェブページに誘導する

　HTMLメールと同じウェブコンテンツを用意しておき、表示崩れが起きた読者をそちらへ誘導させることで回避します。safariやChromeなどのウェブブラウザであれば「MMS」や「キャリアアドレス」独自の仕様から解放されるので、問題なく閲覧できます。この様にメール上部に「正しく表示されない方はこちら」といった文言にリンクを挿入するパターンが一般的です。

※事象を再現したイメージとなります。

メリット

　確実にHTMLメールの内容を閲覧させることができます。

デメリット

　準備にそれなりの手間が掛かります。メルマガ配信を行う側は、同一のコンテンツを予め作成し、ウェブサーバに設置する必要があります。もちろんレスポンシブ・デザインなどスマートフォンでの閲覧を想定した仕様にするべきでしょう。ここまで用意するのは小規模の企業では難しいかもしれません。

2.テキストメールを送る

　表示崩れが起きる読者にはテキストメールだけを送れば、問題自体が発生しません。最もシンプルな解決方法ですね。

メリット

　受信環境に適したコンテンツが届けば、受信した読者は何も煩わしさを感じずにメールを閲覧できます。

デメリット

　何をもって表示崩れが起きる読者と判断するかを定義することが難しい場合があります。日々新しい端末が発売される中で、ユーザー端末の最新情報を把握することはなかなか困難ではないでしょうか。OSや受信アプリのアップデートも考慮すると、多くのことを想定した判別を行わなければなりません。また、ドコモメールのようにウェブメール化したキャリアメールの場合は、PC、スマホ、タブレットといった複数環境で閲覧されている可能性を考慮する必要もあります。

3.モバイルフレンドリーなHTMLメールを送る

　HTMLメールをモバイルフレンドリーにするためには、以下のような方法が考えられます。

レスポンシブデザイン
HTMLメールにレスポンシブデザインを採用することによって、表示端末の画面サイズに応じて、画像サイズを自動調整して表示することが可能になります。

画像の最適化
必要以上に大きなサイズの画像や、過度な枚数の画像使用は避けましょう。また、画像にはATL属性を設定し、画像の読み込み中にテキストが表示されるようにすることで、スマホユーザーのストレスを軽減することができます。

メリット

　スマートフォンの利用ユーザーが増加しているため、HTMLメールをモバイルフレンドリーにすることで、より多くのユーザーに適切な情報を分かりやすく伝えることができます。その結果として、クリック率やCV率の向上にもつながります。

デメリット

　レスポンシブデザイン対応のHTMLメールを作成するためには、専門的なプログラミングの知識が必要になります。内制・外注どちらについても、多くの時間とコストが掛かる可能性があります。

　また、スマートフォン端末とメールクライアントの組み合わせは、非常に多岐にわたるため、コーディングの仕方によっては、正しく表示されない場合があります。高度なコーディング技術や表示検証が必要になります。

4.WiLL Mailはハイブリッド型

　上記3つが一般的な対策方法となりますが、メール配信システムによっては、独自の解決方法を持っているケースもあります。一例として、当社の「WiLL Mail」の場合の解決方法をご紹介します。

スマートリンク機能でHTMLコンテンツへ誘導

　WiLL Mailは「スマートリンク」という機能を搭載しています。この「スマートリンク」をコンテンツに挿入してメルマガを配信すれば、前述したデメリットを回避しながら、HTMLメールのコンテンツを確実にスマホユーザーに届けることができます。

　WiLL MailのHTMLメール作成エディタを使って、HTMLメールを作成することで、ウェブブラウザ表示用のコンテンツも自動的に作成されます。同一コンテンツを2回作成する手間は不要です。

マルチパート配信なら柔軟に対応できる

　WiLL Mailは、HTMLメールを受信できない読者に対してコンテンツを届ける方法として「マルチパート配信」機能も搭載しています。

　マルチパート配信とは、HTMLメールとテキストメールを1つのメールとして配信し、HTMLメールが受信できない読者には、自動的にテキストメールを表示するという方法になります。

　スマートリンク機能とマルチパート配信機能の詳しい内容については、機能詳細ページをご覧ください。

レスポンシブデザインHTMLメール作成

　WiLL Mailは、レスポンシブデザイン対応のHTMLメール作成機能を搭載しています。専用エディタを使用してHTMLメールを作成するだけで、ノーコードでレスポンシブ対応のHTMLメールを作成することができます。

　また、専用エディタでは、スマートフォンでの見え方をチェックしながら制作を進められる、ライブプレビュー機能も搭載されており、デスクトップ用とスマートフォン用の表示を見比べながら、効率良く制作を進めることができます。

　専門的な知識がなくても、スマートフォン対応の本格的なHTMLメールを作成することができるため、多くの時間やコストが掛かるというデメリットも払拭することができます。

　当社のメール配信システム「WiLL Mail」は、スマートフォンの契約数がフィーチャーフォンの契約数を上回った2014年にリリースされたため、あらゆる事象を考慮したハイブリッド型のソリューション機能を標準搭載しています。

まとめ

　いかがでしたでしょうか。スマートフォンが普及して10年近くが経過した現在も、こうした国内独自の事情による問題がいくつか存在します。メール配信システムを開発する当社は、届ける側も受け取る側も余計な負荷を減らせる環境づくりを日々目指しています。

　以上、スマートフォンでHTMLメールの画像が表示されない事象について原因と解決方法をご紹介しました。最後までお読みいただきありがとうございました。