スマホで崩れないメールヘッダー画像の作り方｜推奨サイズ・セーフゾーン・送信前チェックリスト

幅は600pxが業界標準です。Gmail・Outlook・Yahoo!メール・Apple Mailいずれでも横スクロールなしに表示されます。高さは150〜200pxが推奨で、ブランド訴求を重視するビジュアル系キャンペーンでは最大250pxまで許容されます。700pxを超える幅は古いOutlookや小型スマホで横スクロールが発生するリスクがあるため避けてください。（参考：warmy.io, tabular.email）

画像アセットは表示サイズの2倍で書き出すのが基本です。たとえばメール上で600px幅で表示する画像は、1,200px幅で書き出してHTMLのwidth属性で600pxに指定します。これにより2倍解像度（@2x）のレティナ端末でも鮮明に表示されます。なおこのルールはテンプレートのコンテナ幅ではなく、画像アセットのみに適用されます。（参考：tabular.email）

主な原因は画像幅がメールクライアントの表示領域を超えていること、またはHTMLでmax-widthが指定されていないことです。モバイル表示ではクライアントが画像を縮小・クロップするケースがあり、重要なテキストやロゴを端に配置していると見切れます。また700pxを超える幅は小型スマホで横スクロールや切り取りが発生しやすくなります。（参考：warmy.io）

セーフゾーンとは、どのメールクライアント・端末でも確実に表示される画像内の安全な配置領域です。幅600pxのヘッダー画像の場合、左右各30〜40px・上下各20〜30pxを余白として確保し、その内側にロゴや重要なキャッチコピーを配置することが推奨されます。モバイルクライアントは画像を縮小して表示するため、バナーは縮小後も読めるデザインにする必要があります。（参考：warmy.io）

各メールクライアントはHTMLとCSSの解釈方法が異なるため、同じ画像でも表示幅が変わることがあります。GmailはHTMLが102KBを超えるとコンテンツをクリップし、画像が表示されなくなる場合があります。iCloud Mailを含む多くのクライアントはデフォルトで画像をブロックすることがあります。600pxを基準にmax-width: 100%を指定したレスポンシブ設計にすることで、クライアント間の差異を最小化できます。（参考：tabular.email, warmy.io）

ヘッダー画像のファイルサイズは200KB未満が推奨で、理想は100KB以下です。最大でも1MBを超えないようにしてください。GIFを使用する場合は500KB未満が目安で、最大1MBです。ファイルサイズが大きいと読み込みが遅くなり、表示前に受信者が離脱するリスクが高まります。（参考：tabular.email, warmy.io）

写真やグラデーションを多用するヘッダーにはJPEGが適しています。ロゴ・テキストオーバーレイ・透過要素を含むヘッダーにはPNGを使用してください。PNGは透過が必要な場合に不可欠ですが、ファイルサイズがJPEGより大きくなりやすいため、書き出し時に圧縮設定を確認することが重要です。（参考：warmy.io）

OutlookをはじめとするメールクライアントはデフォルトでHTMLメールの画像をブロックします。そのため、ヘッダー画像のimgタグには必ず内容を説明するaltテキストを設定してください。たとえばalt="〇〇ブランド 春の新作キャンペーン"のように、画像が表示されなくてもメッセージが伝わる文言にします。適切なaltテキストはスパムフィルターに対してメールが正当に構築されていることも示します。（参考：warmy.io）

プロモコードやオファー期限などの重要情報は画像内に含めないことを強く推奨します。画像がブロックされた場合、受信者はその情報を一切確認できなくなります。これらの情報はHTMLテキストとして配置し、画像はあくまでビジュアル補完として使用してください。（参考：warmy.io）

送信前に以下の項目を確認してください。①画像幅が600pxになっているか。②高さが150〜200px（最大250px）の範囲内か。③レティナ対応のため1,200px幅で書き出しHTMLで600px指定しているか。④ファイルサイズが200KB未満（理想は100KB以下）か。⑤ロゴや重要テキストがセーフゾーン内に収まっているか。⑥imgタグに適切なaltテキストが設定されているか。⑦GmailアプリおよびiCloud Mailのスマホ表示で実機確認済みか。⑧HTMLファイル全体が102KB未満でGmailクリップが発生しないか。（参考：tabular.email, warmy.io）