HTMLメールがスマホで見れない・崩れる原因と対処法を解説

こんにちは。ブラストメールの森神です。

「HTMLメールの画像がうまく表示されない。」そんな経験をしたことがある人も多いのではないでしょうか。近年では、メルマガ配信の主流は「テキストメール」から「HTMLメール」へ移行していると言われています。

テキストメールとは、文字通りテキストのみのメールのことで、HTMLメールはメール本文に画像が入っていたり、文字が装飾されていたりする「おしゃれなメール」のことを言います。

「一般社団法人 日本ビジネスメール協会」の調査によれば、2011年〜2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の企業での使用率が約1.５倍にまで伸びています。

しかし、HTMLメールは、受信した際に画像がうまく表示されないことやレイアウトが崩れることがあります。特にスマートフォンで受信した際によく見受けられます。そこで今回は、「スマホでHTMLメールが表示されない原因」と「スマホでHTMLメールの画像を表示させる3つの方法」を紹介します。

スマホでHTMLメールの画像が表示されないケース

実際にスマホでHTMLメールが表示されないケースは以下の3つです。

それぞれ詳しく解説します。

キャリアメールでの受信

キャリアメールとは携帯電話を契約するときに必ず付いてくるメールアドレスのことです。

HTMLメールの多くは、メール内に含まれる画像をインターネット上から取得します。

届いたメールのHTMLにはインターネット上のアドレスが記載されています。

メール受信者が画像を開いたとき、インターネット上の画像を取得することで、メール内に画像が表示されます。

キャリアメールでは、インターネットを参照できないものが多く、その場合はHTMLの画像が表示さません。

MMSでの受信

メッセージアプリである「MMS」でHTMLメールを受信した場合でも、画像が表示されないケースがあります。

MMSとは、マルチメディアメッセージングサービスの略で、上述した「@softbank.ne.jp」のような、キャリア独自のメールアドレスを利用します。

長文のメールや写真つきのメッセージをチャット形式でやり取りできるサービスで、HTMLメールの受信は可能ですが、レイアウトが崩れてしまいます。

メールソフトの設定

スマートフォンやPCでHTMLメールを受信した場合に、メールソフトの設定によっては画像が表示されないことがあります。（稀にメールソフト自体がHTML形式のメールに対応していない場合もあります。）

メールソフトの設定については、各ソフトのマニュアルなどを確認すれば、すぐに設定の変更ができます。

例えば、利用しているメールソフトがOutlookの場合は以下の手順でHTML形式の画像を表示させることができます。

とても簡単ですよね。

スマホやPCでHTMLメールの画像が表示されない場合は、まずメールソフトの設定を確認しましょう。

また、HTMLメールでは「CSS」というプログラミング言語も使用します。

CSSの役割はHTMLメールやwebページのスタイルを定義することで、HTMLタグによって定義された文字や画像を、どのように配置・装飾するかを決めています。

CSSは、レイアウトやフォントを指定する方法がメールソフトによって異なります。そのため、送信先の端末でによってレイアウトが崩れる可能性がありますので注意しましょう。

スマホでHTMLメールの画像を表示させる方法

続いて、スマホでHTMLメールの画像を表示させる方法を3つ紹介します。

それぞれ詳しく解説します。

マルチパート配信を行う

マルチパート配信とは、HTMLメールが受け取れない場合にテキストメールを送信する機能です。

マルチパート配信のメリットは以下の2点です。

ユーザーのメール受信環境によってはHTMLメールを開けない場合や、正しく表示されないことがあります。

また、HTML形式のみのメールは、スパムメールとみなされ受信ブロックされる場合があります。

参考
スパム事業者はHTMLメールを使い、ウィルスをばらまいたり、個人情報盗むプログラムを組み込んだりします。

反対に、スパム事業者がテキストメールを送るメリットはないため、マルチパート配信でテキストを配信することで受信ブロックを減らせます。

これらの理由から、HTMLメールを配信する際はマルチパート配信を必ず行いましょう。

ブラストメール にもブラストメールにはマルチパート配信機能があり、HTMLメールを受信する環境に応じて、HTMLパートとテキストパートを切り替えることが可能です。

ブラストメールの機能一覧を見る

テキストメールを配信する

最も簡単な解決法は、HTMLメールを送らずテキストメールを送ることです。

ただし、すべての宛先に対してテキストメールを送ると「HTMLメールで画像を表示させたい」という本来の目的からそれてしまいます。

そこで、メール配信サービスの「グループ配信機能」を利用することで、特定のメールアドレス群にHTMLメールを送らず、テキストメールを送るということが可能となります。

ただし、同じメールを2回に分けて送信する手間がかかるの注意が必要です。

メールと同じ内容のWebページに誘導する

HTMLメールと同じコンテンツをWeb上に用意し、誘導しましょう。

コンテンツをWeb上に準備する手間がかかりますが、普段からブログの内容などをメルマガで配信している人にとっては有効です。

メール上部に「正しく表示されない方はこちら」などのリンクを挿入するのが一般的です。

誘導するのは基本的にスマホでメールを受信した人となるため、誘導先のWebページはレスポンシブデザインなどスマートフォンでの閲覧に最適化されていることを確認しておきましょう。

レイアウト崩れだけじゃない！「メールの中身が消える」現象と対策

HTMLメールのトラブルはレイアウトの崩れだけにとどまりません。受信者の環境によってはメールの一部が消えてしまったり画像が表示されなかったりする深刻な問題が発生します。ここでは特に見落としがちな表示トラブルの技術的な原因と今日からできる対策を紹介します。

【Gmailの仕様】メールサイズが102KBを超えると「省略」される問題

Gmailにはメールのデータサイズが一定を超えると表示を強制的に中断する独自の仕様があります。具体的にはヘッダー情報を除いた本文のソースコードサイズが102KBを超過した場合です。この制限にかかるとメールの末尾に「メッセージ全体を表示」というリンクが表示されそれ以降のコンテンツは隠されてしまいます。

重要なCTAボタンが隠れるだけでなく最下部に設置されがちな開封確認用のトラッキングコードも読み込まれなくなるため正確な効果測定ができなくなるリスクもあります。不要なスペースや改行コードを削除しソースを軽量化する対策が必須です。

画像が読み込まれない？「画像の自動表示オフ」設定への配慮

通信データ量の節約やセキュリティ意識の高さからメール内の画像を自動で読み込まない設定にしているユーザーも一定数存在します。この場合画像だけで情報を伝えようとすると相手には空白が表示されるだけで何も伝わりません。

対策として画像が表示されない場合に代わりに表示されるテキストである「Alt属性（代替テキスト）」を必ず設定しましょう。また最も伝えたい重要な情報は画像の中に埋め込むのではなくテキストとして記述することで画像オフの状態でも内容が伝わるように配慮することが重要です。

iPhoneとAndroidでフォントサイズが勝手に変わる「文字サイズ自動調整」への対策

スマートフォンには画面サイズに合わせて文字の大きさを読みやすいサイズへ自動的に調整する機能が備わっています。特にiPhoneなどのiOS端末では小さな文字を拡大表示する機能が働くことがありこれが意図しない改行やレイアウト崩れを引き起こす原因となります。

この現象を防ぐにはCSSで文字サイズの自動調整を無効化する記述（text-size-adjustなど）を追加する調整が有効です。制作時にはPC上のプレビューだけでなく必ず実機での検証を行い文字サイズが意図通りに表示されているか確認しましょう。

最新トレンド：スマホの「ダークモード」でHTMLメールが見えなくなる？

近年スマートフォンのOSで標準搭載が進むダークモードへの対応もHTMLメール作成における新たな課題です。画面の明るさを抑え目に優しいとされるこのモードでは通常とは異なる配色でメールが表示されるため予期せぬ視認性の低下を招くことがあります。

背景色が反転して文字が読めなくなる仕組み

ダークモードでは白背景に黒文字という一般的な配色が黒背景に白文字へと自動的に反転されます。多くの場合は問題なく読むことができますがメール作成側で背景色や文字色を中途半端に指定してしまうとこの反転機能とうまく噛み合わないことがあります。

例えば背景色の指定を省略しつつ黒い文字色だけをCSSで指定していると、背景がダークモードによって黒く反転された際に「黒背景に黒文字」となってしまい文章が完全に読めなくなる現象が起こります。これを防ぐには背景色と文字色を常にセットで指定する習慣をつけることが大切です。

ダークモードでも視認性を保つための画像作成・配色のコツ

ダークモード環境でもロゴやアイコンを綺麗に見せるには画像の作り方に工夫が必要です。背景が白であることを前提とした画像はダークモード下では白い四角い枠が目立ってしまいデザイン性を損なうことがあります。また黒いロゴは背景と同化して見えなくなる恐れがあります。以下のポイントを意識して画像を作成しましょう。

これらの対策を講じることで受信者がダークモードを使用していても違和感なく情報を伝えることができます。

メール配信システムを活用する

HTMLメールの表示トラブルを防ぎ、確実に読者に情報を届けるためには、個別の対策だけでなく「メール配信システム」の活用が非常に有効です。自社サーバーや一般的なメールソフトからの配信では限界がある「表示の最適化」を、システムが自動で補ってくれます。

メール配信システムを使うメリット

メール配信システムを導入することで、以下のようなメリットが得られます。

おすすめのメール配信システム「ブラストメール」

数あるシステムの中でも、特におすすめなのが「ブラストメール」です。ブラストメールは15年連続顧客導入数No.1を誇る、非常にシンプルで使いやすい配信システムです。

ブラストメールでは、実際の操作感を確認できる無料お試しを実施中です。「スマホで画像が表示されない」といった悩みをお持ちの方は、ぜひ一度その快適さを体感してみてください。

公式サイト：シェア1位のメール配信システム「ブラストメール」

HTMLメールがスマホで表示されないときに行うことまとめ

スマホでのメール受信者向けにHTMLメールを配信するときは注意が必要です。せっかくおしゃれな「HTMLメール」を送信しても、レイアウト崩れによって印象が悪くなるのでは、本末転倒ですよね。

メールを送信する際は、それぞれの端末でどのようにメールが表示されるのかを確認しましょう。スマホでHTMLメールが表示されない場合は、本記事で紹介した以下3つの方法を参考にしてください。

これらを簡単にできるのが、メール配信サービスです。ブラストメールでは上記3つに機能はもちろん、レスポンシブ対応しており、作成したHTMLメールのレイアウトを受信した端末の画面サイズに合わせて自動変更することが可能です。

また、HTMLメールを作成するのに便利なテンプレート30種類を無料で使うことができます。テンプレートはこちらで紹介しています。

現在、ブラストメールでは7日間の無料お試しを実施しています。100アドレスまでなら有料プランと同様にメール配信が可能ですので、ぜひお試ししてみてください。

→ブラストメール7日間の無料お試しはこちらから

 

メール配信のプロが教える！「メール配信システムの選び方」ガイドブック

メール配信システムの 選び方ガイドブック お役立ちガイドブックを無料プレゼント！ メール配信のプロが 「メール配信システムの選び方」を解説します…