(公開日2023年08月10日)
HTMLメールを使っている企業の営業・マーケティング担当の方、フリーランスの個人事業主の方のために記事を書いています。最近はスマートフォンでメールを受信したり、ウェブサイトを見たりするのが主流であり、HTMLメールもスマートフォン向けに作ることが必要です。
この記事では、スマートフォンに対応したHTMLメールの作り方、送信する方法、うまく表示できない時の対策について解説します。これを読めばスマートフォンに最適化したHTMLメールを作成する方法が理解できるはずです。そしてスマートフォンで受信する読者の視覚に訴えて、効果的なメルマガを配信できるようになるでしょう。
以下のような条件を満たすメールがスマートフォンに適しています。
条件1：幅が狭く小さい画面に対応したメール
条件2：メールの容量が小さいメール
条件3：いろいろな受信環境に適したレイアウト
スマートフォンは画面が小さく、文字が小さすぎると見えにくいのがデメリットです。また文字が大きすぎたり情報量が多すぎたりすると改行が多くなり、スクロールが増えてしまいます。読みやすい表示にするために、フォントサイズは14px以上、1行あたり45文字までに設定してください。画像が表示される幅は100％がよいでしょう。
2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320〜480pxであり、タブレットの横幅は768〜1024pxです。これに合わせて、HTMLメールの幅、画像の横幅は600px前後に設定してください。
CTAボタンをタップしやすくするために、タップできるリンクエリアは四方50pxが最適です。CTAボタンをコンテンツの上部および下部に置き、文章量が多い場合は中部にも配置してください。
画像・動画を使い過ぎるとメールが重くなり、メールを受信するのに時間がかかります。ユーザーはストレスを感じて、メールを読む前に閉じてしまうかもしれません。さらにGmailでは102kb以上のメールはクリッピングされてしまいます。
メールの容量を減らすため、動画の代わりにGIFアニメーションを用いるとよいでしょう。
また重いコンテンツを提供するには、ウェブサイトへリンクを組むのも一法です。
スマートフォン・タブレット・パソコンなどいろいろなデバイスに対応できるレイアウトが必要です。コンテンツの内容に合わせて、以下の３種のレイアウトから選ぶとよいでしょう。
・レスポンシブレイアウト：デバイスの画面サイズに合わせて変化
・リキッドレイアウト：横幅いっぱいに表示
・フレキシブルレイアウト：ウインドウ幅の最大値・最小値を固定し、画面の幅に合わせて伸縮
次の手順に従ってスマートフォンに対応したHTMLメールを作成してください。
手順1：パソコン用のHTMLメールを作成
手順2：viewportを設定
手順3：メディアクエリーを設定
手順4：CSSプロパティを設定
HTMLメールはtableタグを使ってテーブルレイアウトでコーディングするため、広い画面のほうが表示崩れを防げます。ですから最初にパソコン用のHTMLメールを作りましょう。その後、モバイル用にアレンジします。
外部読み込み形式のCSSは使えず、インライン形式もしくは埋め込み型CSSを用います。インライン形式はHTMLタグ内にCSSを記述し、埋め込み型はhead内にCSSを記述する形式です。
viewportはスマートフォンやパソコンで見えている画面の表示領域であり、スマートフォンは狭いのが特徴です。viewportはhead内に以下の形式で記述します。
<meta name=”viewport” content=”プロパティ=値”, “プロパティ=値”, “プロパティ=値”>
使えるプロパティは以下のとおりです。
・width：表示領域の横幅
・height：表示領域の高さ
・minimum-scale：最小の縮小倍率
・maximum-scale：最大の拡大倍率
・initial-scale：ぺージの読み込み時の拡大率
・user-scalable：ユーザーに拡大縮小を許可するかどうか
実例を示します。設定は横幅がデバイス画面の広さ、読み込み時の拡大率が1.0。これで表示領域にページがフィットします。ユーザーは自分で画面を拡大・縮小できない設定です。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>
メディアタイプとメディア特性を組み合わせて作るCSSの仕様で、head内に埋め込み形式のCSSを記述します。
メディアタイプはscreen（パソコンやスマートフォンなど画面を持つデバイス）を、メディア特性としてwidth（ビューポートの幅）を指定するのが一般的です。さらにその下にCSSを記述します。
/* 画面サイズが480px以下の場合 */
<style>
#EAE9E9
img {
width:100%;
}
}
</style>
2022年3月現在に販売されているスマートフォンのCSSピクセルの横幅は320〜480px。
max-width 480pxを境界として、スマートフォンと他のデバイスの表示を切り替える設定です。
パソコン用のHTMLメールが横並びレイアウトのとき、スマートフォンでは1カラムに切り替えます。実例では、スマートフォン用にテーブルの幅を100％、フォントサイズを14px、画像の横幅を100％に変えています。
<table id=”design_area_result”></table>
@media only screen and (max-width:480px) {
#design_area_result {
width: 100% !important;
}
html {
font-size:14px !important;
line-height: 1.6 !important;
}
img {
width:100% !important;
}
}
関連記事：htmlメールの作成手順作り方のコツをプロが徹底解説
以下の手順に沿ってGmailからHTMLメールを送信します。
手順1：Gmailの編集画面を開きリッチテキストモードに設定
手順2：HTMLをブラウザで表示させGmailへコピペする
手順3：メールを送信する
➀Gmailを開きます
②画面左上の「作成」をクリック
③画面右下の「⋮」アイコンをクリックし、プレーンテキストモードにチェックが入っていないことを確認
④リッチテキストモードが選択されました
ただし直接HTMLを記述することはできません
➀前の段落で作成したHTMLをブラウザで表示
②画面を全て選択してコピー
③Gmailのリッチテキストモードに張り付ける
④ブラウザと同じコンテンツが、Gmailで表示されます
➀宛先にメールアドレスを入力
②送信ボタンをクリック
③配信されたメールを確認
参考記事：htmlメールはgmailで作成できる？作成方法から配信まで解説
HTMLメールが送られてきているのに、何らかの理由でテキストしか表示されないことがあります。この際にHTMLメールかどうか見分ける方法を解説します。
スマホに送られてきたメールをパソコンのメールクライアントへ転送し、メールのソースを開いてください。そしてContent-Typeの項目を探すと、以下のように見分けられます。
・text/htmlであればHTMLメール
・text/plainであればテキストメール
HTMLメールをスマホで受信した場合、画像が表示されないケースは常に起こり得ます。原因として以下の2つが考えられます。
Android末端は、パソコンと同じメールドメインで受信することを前提にしており、キャリアメールはフィーチャフォン末端で受信することを前提としています。前提条件が食い違い、うまく受信できないため、画像が表示されません。これを解決する方法はないようです。
対策としては、マルチパート配信にして、HTMLメールが受信できないときは、テキストメールを表示させるとよいでしょう。またウェブブラウザへリンク誘導することで、同じコンテンツを提供できます。この2つを組み合わせれば、より確実にユーザーへ情報を送れます。
MMSは本来はショートメッセージの拡張アプリケーションです。ところが日本の通信業者によっては、キャリアメール設定にしているケースがあります。このため、うまく受信できず、画像が表示されません。これを解決する方法はないようです。
対策としては、マルチパート配信とウェブブラウザへのリンク誘導を組み合わせれば、確実にユーザーへ情報を送れます。
HTMLメールを作成時に、tableタグのプロパティとして「width=”600”」などを用いると、スマホでは縮小されて文字が小さくなってしまいます。これを回避するためには「max-wide=”600”」と記述すれば文字は縮小されません。
さらに「style=”max-width:600px;” align=”center”」と記述すれば、パソコンで見た場合に幅600pxで画面の中央に表示されます。
メールの全文あるいは一部分が文字化けするケースがあります。
全文文字化けするのは、メールのエンコードに問題があるからです。パソコンで文字を入力する際には「シフトJIS」が使われますが、メールクライアントでは「ISO-2022-JP」に変換されて送受信されます。文字化けするのは、変換がうまくいかないケースです。ちゃんと変換するメールクライアントに変えると解決します。
一部文字化けする場合は、環境依存文字が使われているからです。WindowsやMacでは、それぞれに独自の記号・絵文字が使われています。一部文字化けするのは、送信側と受信側が環境が違うケースです。HTMLメールを作成する際には環境依存文字は使わないでください。
参考記事：htmlメールが文字化けしてしまうときの原因と対処法は？
よく見られるQ&Aをご紹介します。
Q：ソフトバンクのiPhoneではHTMLメールを見れないことがある？
Q：Androidのauメールアプリで画像が表示されないことがある？
Q：iPhon用ドコモメールの設定によってはHTMLメールを見られない？
Q：キャリアメールにHTMLメールを受信すると文字化けしやすい？
A：ソフトバンクのiPhoneで@softbank.ne.jpのメールアドレスを使って受信するとHTMLメールは表示されません。この際にHTMLメールを正しく表示させる方法はないようです。この場合、マルチパート配信でメールを送るとよいでしょう。
A：アプリの設定によって外部画像の表示がキャンセルされる場合があります。以下の手順で確認してください。
手順1：auメールアプリのメニューボタンをタップ
手順2：Eメール設定をタップ
手順3：外部画像表示がoffになっていると画像が表示されない
手順4：onにすれば画像が表示される
A：基本的にiPhonではHTMLメールが表示されますが、@docomo.ne.jpをMMSに設定すると、HTMLメールを見られないことがあります。別のキャリアメールを設定すると解決できるかもしれません。
A：多くのキャリアメールはHYMLメールに対応していません。キャリアメールは、コード変換する対象が多いので、処理過程で間違った変換が行われてしまいます。これを解決するのは難しいようです。この場合、マルチパート配信でメールを送るとよいでしょう。
スマートフォンに対応したHTMLメールの作り方、送信する方法、うまく表示できない時の対策について解説しました。スマートフォンに最適化するには、いろいろな条件が必要であり、HTMLのコーディングは相当に難しいようです。
うまく作成しないと文字化けしたり、表示が崩れたりするリスクがあり、企業の営業の方、個人事業主の方が本業の合間に手がけるには手間がかかり過ぎるでしょう。専門家に依頼してHTMLメールを作成してもらった方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
