崩れにくいHTMLメールの基本：幅・表組み・画像・リンクの確認

HTMLメールはWebページと同じCSSを期待しない

メールクライアントは利用できるHTMLとCSSがそれぞれ異なります。Webサイトで一般的なレイアウト指定がOutlookなどで同じように動くとは限りません。主要部分は単純な1カラムとテーブル構造を使い、重要なスタイルは要素へ直接指定する方法が広く使われます。

デザインを複雑にするほど検証する組み合わせが増えます。最初に差出人、件名、プリヘッダー、本文、主要ボタンという情報の優先順位を決めます。

画像が表示されなくても内容を伝える

受信者の設定によって画像が最初は読み込まれない場合があります。画像だけでセール内容やボタン文言を伝えず、本文テキストでも要点を記載します。画像には内容を説明するaltを設定し、装飾画像なら空のaltを検討します。

画像URLは受信者がアクセスできるHTTPSの絶対URLにします。作成者のPC内パスやログインが必要なURLは配信先から表示できません。

配信前チェック

生成したHTMLは配信サービスへ登録した後、実際にテスト送信して確認します。

• Gmail、Outlook、Apple Mailなど主要環境での表示
• スマートフォンでの文字サイズと横スクロール
• 全リンクの遷移先とUTM
• 配信停止リンクと会社情報
• HTML容量と画像容量
• ダークモードでのロゴ・文字の見え方