HTMLメールを制作する際には、事前に検証環境を決めることをお勧めします。

現在、メールを閲覧できる環境は、メールクライアント(PCメールソフトウェア)、WEBメーラー、スマートフォンアプリなど多種多様に存在してます 。
メールクライアントから始まり、ネット環境の普及に伴いPC上でログインすれば、どこでも確認できるWEBメーラー、そして、スマートフォンの登場によりさらに閲覧環境は複雑化しました。
主なメール閲覧環境には以下のものがあげられます。

▼  メールクライアント ▼  WEBメーラー(ブラウザ) ▼  アプリ
・Outlook Express
・Outlook 2003
・Outlook 2007
・Outlook 2010
・Outlook 2013
・Windows Live
・Mail(Mac)
・Thunderbird
・yahooMail
・Gmail
・Outlook com
・メールアプリ
・gmail アプリ

■検証環境の選定

では、その中からどの検証環境を採用したら良いのでしょうか?
仕事におけるメールの利用状況と実態を調べる「ビジネスメール実態調査2014」(日本ビジネスメール協会調べ)では以下のような結果が出ています。

「ビジネスメールの送受信に使っている主なメールソフトを教えてください」
・Gmail(Google Apps含む)(33.61%)
・Microsoft Outlook(30.31%)
・Thunderbird(13.50%)

以上の数字的根拠を踏まえ、メールのコンテンツ内容や送信するユーザーの年代や性別などを考慮する必要もありますが、ディレクタスでは、PCとスマートフォン各々でシェアが多く、これからもシェアが伸びるであろうデバイス選び出し、基本検証環境としています。

■検証のポイント

次に、検証する際にどのような事柄に気をつけてチェックするのか、表示崩れが起こりやすい環境についてご紹介します。

Outlook 2010以降

表示のズレが多く見られます。
これはHTMLを表示するためのレンダリングエンジンをWordのレンダリングエンジンを使用している事に起因していると考えられています。
以前まで使えていた要素が使えなくなったり、制限が多く存在します。

ex.)
・アニメーションGIFは最初の一コマしか使えない
・背景画像が使えない
・フォームが使えない
・不要なスペースが空く
Gmail(WEBメール)
ex.)
・画像の下部にスペースが空く場合があるので、ひとつづきになるような画像を分ける場合は、注意が必要。
・スタイルを設定する場合は、インラインにて入れないと効かない
Gmail(スマートフォンアプリ)
ex.)
・アプリがスマートフォン最適化として幅や文字サイズを変更することがある

その他にも細かな部分で表示崩れは発生することもあります。
表示の前後関係にも注意しながら検証し、各ポイントで対処していくことが必要になります。

最後に、検証環境は一度、決めたら終わりではなく、メールのリニューアルのタイミングやIT環境の大きな変化などに合わせて、随時見直し、再度検証する事が必要になってきます。

Yama

主にWebコンテンツの制作を担当。