スマホで崩れないメールヘッダー画像の作り方｜推奨サイズ・セーフゾーン・送信前チェックリスト
# スマホで崩れないメールヘッダー画像の作り方｜推奨サイズ・セーフゾーン・送信前チェックリスト
Gmail・iCloud Mail・Yahoo!メールでの表示崩れを防ぐ、ピクセル仕様とレティナ対応の実務ガイド
- 標準コンテナ幅: 600〜640px
- スマホ向けセーフゾーン幅: 中央320px
- レティナ対応書き出し解像度: 2倍（2x）
メルマガやHTMLメールを送る前に、ヘッダー画像のサイズを正確に把握しているだろうか。デスクトップ画面で確認したときは問題なく見えていたのに、スマートフォンで開いたらロゴが半分切れていた、キャッチコピーが読めないほど小さくなっていた、という経験は珍しくない。これはデザインの美的センスの問題ではなく、ピクセル数・セーフゾーン・クライアント別の描画仕様を事前に把握していないことから生じる、構造的な問題だ。
日本国内でよく使われるメールクライアントには、GmailのAndroid版・iOS版、iCloud Mail（Apple Mail）、Yahoo!メール、そしてOutlookが含まれる。それぞれが画像の表示幅や高さの扱いを微妙に異なる形で処理するため、「一つのサイズで全クライアント対応」という単純な解はない。ただし、正しい基準値とセーフゾーンの考え方を理解しておけば、大半の表示崩れは送信前に防ぐことができる。
---
ヘッダー画像を制作する前に、まず数値を固定しておく必要がある。tabular.emailのガイドによれば、メールテンプレートのコンテナ幅は600〜640pxが標準で、600pxがクロスクライアントの基準値、640pxは現代的なテンプレートが採用する上限値とされている。
ヘッダー画像の高さについては、ロゴとナビゲーションバーを含む場合で100〜150pxが理想的で、最大でも200pxに抑えることが推奨されている。これを超えると、スマートフォンの縦向き画面でヘッダーだけで画面の大部分を占めてしまい、本文が折り返し以下に押し込まれる。ブランド訴求を重視したビジュアル系キャンペーンでは250pxまで許容されるが、それ以上は避けたほうがよい。
ファイルサイズについては、warmy.ioの解説が示すとおり、ヘッダー画像は200KB以下、理想的には100KB以下に収めることが求められる。モバイル回線での読み込み速度を考えると、この数値は単なる目安ではなく実務上の制約として扱うべきだ。
以下に主要な数値をまとめる。
この表はあくまで出発点だ。実際のクライアント別の挙動については、次のセクションで詳しく見ていく。
---
「レティナ対応のために2倍サイズで書き出す」という話は広く知られているが、その意味を正確に理解していないと、意図しない表示崩れを引き起こすことがある。
tabular.emailの仕様によれば、画像アセットは1,200px幅で制作し、HTMLコード上では`max-width: 600px; width: 100%;`を指定して600pxで表示させる。これにより、レティナディスプレイ（高解像度画面）では1つのCSSピクセルに対して2つの画像ピクセルが割り当てられ、鮮明な描画が実現する。
ここで多くのデザイナーが見落とすのは、「2倍書き出しはレンダリング後のクロップ境界を変えない」という点だ。たとえば1,200×400pxで書き出した画像を`max-width: 600px`で表示すると、レンダリング後のサイズは600×200pxになる。書き出しファイルの行380番目にあるテキストは、レンダリング後の行190番目に相当し、200px高のヘッダー内に収まる。しかし行420番目にあるテキストは、レンダリング後の行210番目となり、クリップされてしまう。
つまり、デザインは1,200px幅のキャンバスで行いながら、テキストやロゴの配置は600pxのレンダリングキャンバスを基準に考える必要がある。書き出しサイズと表示サイズを混同したまま制作を進めると、セーフゾーン外にロゴを置いてしまうリスクが高まる。
実務的な手順としては、デザインツール（Figma、Illustratorなど）で1,200px幅のアートボードを作成し、その上に「表示時の600px境界」を示すガイドラインを引いてから制作を始めるとよい。重要なテキストやロゴは、この600px基準のセーフゾーン内に収めることを最初から意識する。
---
同じHTMLメールでも、メールクライアントによって画像の表示幅・クロップ・スケーリングの挙動が異なる。日本のユーザーが多く使うクライアントに絞って、具体的な挙動と対策を整理する。
GmailのAndroid版 Gmail Androidは端末によって異なるコンテナ幅を適用する。ミドルレンジ端末では360px前後が一般的だ。画像に`width: 100%; max-width: 600px;`のインラインスタイルが指定されていない場合、Gmailはネイティブの600px幅でそのまま描画し、右端をクリップすることがある。これが最も破壊的な失敗パターンで、製品名やロゴが右側で切れる原因になる。対策として、すべてのヘッダー画像タグに必ずインラインスタイルで幅指定を入れること。また、重要なテキストやロゴは水平方向の中央280px帯（左右それぞれ80pxを余白として扱う）に収めることを推奨する。
iCloud Mail（Apple Mail） iCloud MailはiPhoneのビューポート幅（現行モデルで390px前後）に合わせてテンプレート全体を比例縮小する。600×200pxのヘッダーは390×130px程度にレンダリングされる。水平方向のクロップは発生しにくいが、垂直方向のコンテンツが圧縮される。画像の下半分に配置したテキストは、縮小後に読みにくいサイズになる可能性がある。セーフゾーンとして、テキストは画像の上55%以内、水平方向は中央60%の幅に収めることが目安になる。
Yahoo!メール Yahoo!メールは日本国内で依然として一定のシェアを持つクライアントだ。基本的な幅スケーリングはGmailに近い挙動を示すが、画像の縮小処理がクライアントバージョンによって異なる場合がある。600px幅の標準仕様に従っていれば大きな問題は起きにくいが、テスト送信で実機確認することが望ましい。
Outlook（Windows版） tabular.emailの解説が指摘するとおり、OutlookはWordのレンダリングエンジンを使用しており、非標準の幅では予測不能な挙動を示すことがある。Outlookユーザーが多い法人向けメールの場合は、コンテナ幅を600〜640pxの範囲に固定することが安全策だ。また、Outlookはデフォルトで画像をブロックするため、warmy.ioが指摘するように、altテキストと背景色のフォールバック設定が必須になる。
---
「セーフゾーン」とは、主要なメールクライアントでクロップや縮小が発生しても、確実に表示される領域のことだ。ヘッダー画像の制作において、この概念を具体的なピクセル数に落とし込んでおくことが重要になる。
600px幅のキャンバスを基準にすると、水平方向のセーフゾーンは左右それぞれ80pxを余白として扱い、中央の440px幅に重要な要素を収めることが推奨される。320pxのモバイル画面では、このゾーンが約234pxに縮小されるが、短いタグラインとロゴを18px以上のフォントサイズで配置するには十分な幅だ。
垂直方向については、ヘッダー高さを200px以内に抑えた上で、重要なテキストを上側55〜60%の範囲に配置することが基本だ。画像の下部に配置したオファー情報やキャッチコピーは、スマートフォンでの縮小表示時に読めなくなるリスクが高い。
また、warmy.ioの指針が強調するとおり、プロモーションコードや締め切り日時などの重要情報は、画像ファイルの中に埋め込まないことが原則だ。画像がブロックされた場合、その情報は完全に失われる。こうした情報はHTMLテキストとして画像の下に配置し、画像が表示されない環境でも読めるようにする。
AIを使って生成した画像をヘッダーに使う場合、主要な被写体やテキストが意図しない位置に配置されることがある。生成後に必ずセーフゾーンのガイドラインと照合し、必要に応じてトリミングや再配置を行うことが求められる。
---
以下のチェックリストは、送信前に必ず実行する確認手順だ。仕様を「知っている」だけでなく、実際のプレビューで目視確認したときにのみチェックを入れること。
① コンテナ幅が600pxに設定されているか テンプレートのコンテナ幅を確認する。640pxを使用している場合は、ヘッダー画像がコンテナを左右の余白なく埋めているかを確認する。
② ヘッダー高さが150〜200pxの範囲内か プレビューツールでレンダリング後の高さを測定する。ソースファイルの高さではなく、表示後の高さを確認すること。300px以上のヘッダーはスマートフォンで画面の大部分を占有する。
③ 画像を1,200px幅で書き出し、HTMLで600pxに制限しているか `<img>`タグに`max-width: 600px; width: 100%;`のインラインスタイルが入っているかを確認する。このmax-width指定がないと、1,200pxのソースファイルがデスクトップクライアントではみ出す可能性がある。
④ ロゴとテキストが水平方向の中央440px帯に収まっているか 600pxキャンバス上で、左右それぞれ80pxの余白を除いた中央440px内にすべての重要要素があるかを確認する。
⑤ 写真・生成画像の主要被写体が中央50%の幅に収まっているか 背景に写真やAI生成画像を使用している場合、主要な被写体が画像の中央50%幅に配置されているかを確認する。端に寄った被写体は320pxレンダリング時に消える可能性がある。
⑥ ファイルサイズが200KB以下か（理想は100KB以下） 写真系ヘッダーはJPEG形式で圧縮し、ロゴや透過要素を含む場合はPNGを使用する。GIFを使用する場合は500KB以下に抑える。
⑦ ヘッダーセルに背景色が設定されているか 画像がブロックされたときに白い空白にならないよう、`<td>`タグに`bgcolor`属性とインラインの`background-color`CSSを両方設定する。OutlookはHTML属性を読み、現代的なクライアントはCSSプロパティを読むため、両方の記述が必要だ。
⑧ altテキストが60〜80文字の実用的な文章になっているか 「header_v3_final.jpg」のようなファイル名ではなく、「春のセール開催中 — 全品30%オフ、日曜日まで」のようにオファー内容を伝える文章を書く。
⑨ ダークモードで320pxと600px両方のビューポートでテキストが読めるか Apple MailはダークモードでHTMLメール全体の色を反転・再着色することがある。画像内に白テキストを埋め込んでいる場合、ダークモードで見えなくなる可能性がある。Apple Mailのダークモードで実機またはプレビューツールを使って確認する。
⑩ プリヘッダーテキストが50〜100文字で設定されているか tabular.emailの仕様によれば、プリヘッダーテキストは50〜100文字が推奨で、モバイルでは最大140文字程度で切り捨てられる。プリヘッダーが空の場合、クライアントはHTML本文の最初のテキスト（配信停止リンクなど）を引用することがある。
---
画像ブロックは例外的なケースではない。warmy.ioが指摘するとおり、OutlookはデフォルトでHTMLメールの画像を非表示にする。法人向けメールや社内通知を送る場合、受信者の多くが画像なしの状態でメールを読んでいる可能性がある。
フォールバック設計の基本は三つだ。
背景色の設定 ヘッダー画像を含む`<td>`セルに、ブランドのプライマリカラーを`bgcolor`属性（Outlook用）とインラインCSSの`background-color`（現代クライアント用）の両方で指定する。画像がない状態でも、ヘッダー領域が意図的なデザインとして見えるようにする。背景色に合わせてaltテキストの文字色も調整し、読みやすさを確保すること。
altテキストの内容 ヘッダーのaltテキストは60〜80文字を目安に、オファーやブランドの核心を伝える文章にする。「春のセール — 全品30%オフ、日曜日まで」のような形式が実用的だ。スパムフィルターへの影響という観点からも、適切なaltテキストの設定は重要とされている。
CTAボタンの独立配置 ヘッダー内にCTAが含まれる場合、ボタンを画像の中に埋め込まないこと。tabular.emailの基準では、CTAボタンは幅200〜300px、高さ50〜75pxが推奨されており、モバイルでは全幅表示が望ましい。テーブルベースのアンカータグとして実装した「bulletproofボタン」は、画像ブロック環境でも確実に表示され、タップ可能な状態を維持する。
送信前の最終確認として、プレビューツールで画像を非表示にした状態でヘッダー領域を確認する。背景色が正しく表示されているか、altテキストが意味のある文章として読めるか、CTAボタンがタップ可能な状態で表示されているか、この三点を目視で確認してから送信に進む。
---
一度作ったチェックリストを毎回ゼロから確認するのは非効率だ。実務に組み込むための方法をいくつか紹介する。
最もシンプルな方法は、上記10項目のチェックリストをNotionやGoogleドキュメントのテンプレートとして保存し、新しいキャンペーンを開始するたびに複製して使うことだ。各項目に担当者名と確認日時を記入できる欄を追加しておくと、複数人で制作する場合の確認漏れを防ぎやすくなる。
デザインツール側での対応としては、Figmaで1,200px幅のメールヘッダー用コンポーネントを作成し、セーフゾーン（中央440px帯と上55%の高さ）をガイドとして埋め込んでおく方法が有効だ。制作者が毎回ガイドを引き直す手間が省け、セーフゾーン外への要素配置を視覚的に防げる。
Veeso AIのようなビジュアルコンテンツ制作ツールを使う場合、veeso.aiでは画像をレティナ書き出し用の1,200px幅など正確なピクセル寸法に合わせて生成・リサイズできるため、制作後の手動リサイズ工程を短縮できる。ただし、ツールを使った場合でも、フォールバック設定・altテキスト・クライアント別レンダリングの確認は人間による目視チェックが必要だ。
メルマガの配信頻度が高い場合は、テスト送信の手順も標準化しておくことを勧める。実機テストの対象として、GmailのAndroid版・iOS版、iCloud Mail（iPhone）、Yahoo!メール（PCブラウザ）の4環境を最低限カバーし、可能であればOutlookのWindows版も含める。Litmusやメール配信サービス付属のプレビュー機能を活用すれば、実機を複数台用意しなくても主要クライアントの表示を一括確認できる。
制作フローの中でチェックリストが機能するのは、「送信直前に慌てて確認する」ではなく「ヘッダー画像の制作を始める前に仕様を確認し、書き出し後にチェックリストを走らせる」という順序で使われるときだ。表示崩れのほとんどは、制作段階での仕様確認と、送信前の目視確認という二つのステップを踏むだけで防ぐことができる。
幅は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）
# スマホで崩れないメールヘッダー画像の作り方｜推奨サイズ・セーフゾーン・送信前チェックリスト
Gmail・iCloud Mail・Yahoo!メールでの表示崩れを防ぐ、ピクセル仕様とレティナ対応の実務ガイド
ja-JP · /ja/guides/メールヘッダー-画像サイズ-スマホ表示-チェックリスト
ヘッダー画像仕様 早見表
- 標準コンテナ幅: 600〜640px
- スマホ向けセーフゾーン幅: 中央320px
- レティナ対応書き出し解像度: 2倍（2x）
メールヘッダー画像のサイズとスマホ表示：制作前に知っておくべき仕様まとめ
メルマガやHTMLメールを送る前に、ヘッダー画像のサイズを正確に把握しているだろうか。デスクトップ画面で確認したときは問題なく見えていたのに、スマートフォンで開いたらロゴが半分切れていた、キャッチコピーが読めないほど小さくなっていた、という経験は珍しくない。これはデザインの美的センスの問題ではなく、ピクセル数・セーフゾーン・クライアント別の描画仕様を事前に把握していないことから生じる、構造的な問題だ。
日本国内でよく使われるメールクライアントには、GmailのAndroid版・iOS版、iCloud Mail（Apple Mail）、Yahoo!メール、そしてOutlookが含まれる。それぞれが画像の表示幅や高さの扱いを微妙に異なる形で処理するため、「一つのサイズで全クライアント対応」という単純な解はない。ただし、正しい基準値とセーフゾーンの考え方を理解しておけば、大半の表示崩れは送信前に防ぐことができる。
---
基本仕様：幅・高さ・ファイルサイズの数値を確認する
ヘッダー画像を制作する前に、まず数値を固定しておく必要がある。tabular.emailのガイドによれば、メールテンプレートのコンテナ幅は600〜640pxが標準で、600pxがクロスクライアントの基準値、640pxは現代的なテンプレートが採用する上限値とされている。
ヘッダー画像の高さについては、ロゴとナビゲーションバーを含む場合で100〜150pxが理想的で、最大でも200pxに抑えることが推奨されている。これを超えると、スマートフォンの縦向き画面でヘッダーだけで画面の大部分を占めてしまい、本文が折り返し以下に押し込まれる。ブランド訴求を重視したビジュアル系キャンペーンでは250pxまで許容されるが、それ以上は避けたほうがよい。
ファイルサイズについては、warmy.ioの解説が示すとおり、ヘッダー画像は200KB以下、理想的には100KB以下に収めることが求められる。モバイル回線での読み込み速度を考えると、この数値は単なる目安ではなく実務上の制約として扱うべきだ。
以下に主要な数値をまとめる。
この表はあくまで出発点だ。実際のクライアント別の挙動については、次のセクションで詳しく見ていく。
---
レティナ対応の正しい理解：2倍書き出しの意味と落とし穴
「レティナ対応のために2倍サイズで書き出す」という話は広く知られているが、その意味を正確に理解していないと、意図しない表示崩れを引き起こすことがある。
tabular.emailの仕様によれば、画像アセットは1,200px幅で制作し、HTMLコード上では`max-width: 600px; width: 100%;`を指定して600pxで表示させる。これにより、レティナディスプレイ（高解像度画面）では1つのCSSピクセルに対して2つの画像ピクセルが割り当てられ、鮮明な描画が実現する。
ここで多くのデザイナーが見落とすのは、「2倍書き出しはレンダリング後のクロップ境界を変えない」という点だ。たとえば1,200×400pxで書き出した画像を`max-width: 600px`で表示すると、レンダリング後のサイズは600×200pxになる。書き出しファイルの行380番目にあるテキストは、レンダリング後の行190番目に相当し、200px高のヘッダー内に収まる。しかし行420番目にあるテキストは、レンダリング後の行210番目となり、クリップされてしまう。
つまり、デザインは1,200px幅のキャンバスで行いながら、テキストやロゴの配置は600pxのレンダリングキャンバスを基準に考える必要がある。書き出しサイズと表示サイズを混同したまま制作を進めると、セーフゾーン外にロゴを置いてしまうリスクが高まる。
実務的な手順としては、デザインツール（Figma、Illustratorなど）で1,200px幅のアートボードを作成し、その上に「表示時の600px境界」を示すガイドラインを引いてから制作を始めるとよい。重要なテキストやロゴは、この600px基準のセーフゾーン内に収めることを最初から意識する。
---
クライアント別の表示挙動：Gmail・iCloud Mail・Yahoo!メールで何が起きるか
同じHTMLメールでも、メールクライアントによって画像の表示幅・クロップ・スケーリングの挙動が異なる。日本のユーザーが多く使うクライアントに絞って、具体的な挙動と対策を整理する。
GmailのAndroid版 Gmail Androidは端末によって異なるコンテナ幅を適用する。ミドルレンジ端末では360px前後が一般的だ。画像に`width: 100%; max-width: 600px;`のインラインスタイルが指定されていない場合、Gmailはネイティブの600px幅でそのまま描画し、右端をクリップすることがある。これが最も破壊的な失敗パターンで、製品名やロゴが右側で切れる原因になる。対策として、すべてのヘッダー画像タグに必ずインラインスタイルで幅指定を入れること。また、重要なテキストやロゴは水平方向の中央280px帯（左右それぞれ80pxを余白として扱う）に収めることを推奨する。
iCloud Mail（Apple Mail） iCloud MailはiPhoneのビューポート幅（現行モデルで390px前後）に合わせてテンプレート全体を比例縮小する。600×200pxのヘッダーは390×130px程度にレンダリングされる。水平方向のクロップは発生しにくいが、垂直方向のコンテンツが圧縮される。画像の下半分に配置したテキストは、縮小後に読みにくいサイズになる可能性がある。セーフゾーンとして、テキストは画像の上55%以内、水平方向は中央60%の幅に収めることが目安になる。
Yahoo!メール Yahoo!メールは日本国内で依然として一定のシェアを持つクライアントだ。基本的な幅スケーリングはGmailに近い挙動を示すが、画像の縮小処理がクライアントバージョンによって異なる場合がある。600px幅の標準仕様に従っていれば大きな問題は起きにくいが、テスト送信で実機確認することが望ましい。
Outlook（Windows版） tabular.emailの解説が指摘するとおり、OutlookはWordのレンダリングエンジンを使用しており、非標準の幅では予測不能な挙動を示すことがある。Outlookユーザーが多い法人向けメールの場合は、コンテナ幅を600〜640pxの範囲に固定することが安全策だ。また、Outlookはデフォルトで画像をブロックするため、warmy.ioが指摘するように、altテキストと背景色のフォールバック設定が必須になる。
---
セーフゾーンの設計：どの範囲にロゴとテキストを置くか
「セーフゾーン」とは、主要なメールクライアントでクロップや縮小が発生しても、確実に表示される領域のことだ。ヘッダー画像の制作において、この概念を具体的なピクセル数に落とし込んでおくことが重要になる。
600px幅のキャンバスを基準にすると、水平方向のセーフゾーンは左右それぞれ80pxを余白として扱い、中央の440px幅に重要な要素を収めることが推奨される。320pxのモバイル画面では、このゾーンが約234pxに縮小されるが、短いタグラインとロゴを18px以上のフォントサイズで配置するには十分な幅だ。
垂直方向については、ヘッダー高さを200px以内に抑えた上で、重要なテキストを上側55〜60%の範囲に配置することが基本だ。画像の下部に配置したオファー情報やキャッチコピーは、スマートフォンでの縮小表示時に読めなくなるリスクが高い。
また、warmy.ioの指針が強調するとおり、プロモーションコードや締め切り日時などの重要情報は、画像ファイルの中に埋め込まないことが原則だ。画像がブロックされた場合、その情報は完全に失われる。こうした情報はHTMLテキストとして画像の下に配置し、画像が表示されない環境でも読めるようにする。
AIを使って生成した画像をヘッダーに使う場合、主要な被写体やテキストが意図しない位置に配置されることがある。生成後に必ずセーフゾーンのガイドラインと照合し、必要に応じてトリミングや再配置を行うことが求められる。
---
送信前チェックリスト：10項目で表示崩れを防ぐ
以下のチェックリストは、送信前に必ず実行する確認手順だ。仕様を「知っている」だけでなく、実際のプレビューで目視確認したときにのみチェックを入れること。
① コンテナ幅が600pxに設定されているか テンプレートのコンテナ幅を確認する。640pxを使用している場合は、ヘッダー画像がコンテナを左右の余白なく埋めているかを確認する。
② ヘッダー高さが150〜200pxの範囲内か プレビューツールでレンダリング後の高さを測定する。ソースファイルの高さではなく、表示後の高さを確認すること。300px以上のヘッダーはスマートフォンで画面の大部分を占有する。
③ 画像を1,200px幅で書き出し、HTMLで600pxに制限しているか `<img>`タグに`max-width: 600px; width: 100%;`のインラインスタイルが入っているかを確認する。このmax-width指定がないと、1,200pxのソースファイルがデスクトップクライアントではみ出す可能性がある。
④ ロゴとテキストが水平方向の中央440px帯に収まっているか 600pxキャンバス上で、左右それぞれ80pxの余白を除いた中央440px内にすべての重要要素があるかを確認する。
⑤ 写真・生成画像の主要被写体が中央50%の幅に収まっているか 背景に写真やAI生成画像を使用している場合、主要な被写体が画像の中央50%幅に配置されているかを確認する。端に寄った被写体は320pxレンダリング時に消える可能性がある。
⑥ ファイルサイズが200KB以下か（理想は100KB以下） 写真系ヘッダーはJPEG形式で圧縮し、ロゴや透過要素を含む場合はPNGを使用する。GIFを使用する場合は500KB以下に抑える。
⑦ ヘッダーセルに背景色が設定されているか 画像がブロックされたときに白い空白にならないよう、`<td>`タグに`bgcolor`属性とインラインの`background-color`CSSを両方設定する。OutlookはHTML属性を読み、現代的なクライアントはCSSプロパティを読むため、両方の記述が必要だ。
⑧ altテキストが60〜80文字の実用的な文章になっているか 「header_v3_final.jpg」のようなファイル名ではなく、「春のセール開催中 — 全品30%オフ、日曜日まで」のようにオファー内容を伝える文章を書く。
⑨ ダークモードで320pxと600px両方のビューポートでテキストが読めるか Apple MailはダークモードでHTMLメール全体の色を反転・再着色することがある。画像内に白テキストを埋め込んでいる場合、ダークモードで見えなくなる可能性がある。Apple Mailのダークモードで実機またはプレビューツールを使って確認する。
⑩ プリヘッダーテキストが50〜100文字で設定されているか tabular.emailの仕様によれば、プリヘッダーテキストは50〜100文字が推奨で、モバイルでは最大140文字程度で切り捨てられる。プリヘッダーが空の場合、クライアントはHTML本文の最初のテキスト（配信停止リンクなど）を引用することがある。
---
フォールバック設計：画像がブロックされたときのヘッダーを作る
画像ブロックは例外的なケースではない。warmy.ioが指摘するとおり、OutlookはデフォルトでHTMLメールの画像を非表示にする。法人向けメールや社内通知を送る場合、受信者の多くが画像なしの状態でメールを読んでいる可能性がある。
フォールバック設計の基本は三つだ。
背景色の設定 ヘッダー画像を含む`<td>`セルに、ブランドのプライマリカラーを`bgcolor`属性（Outlook用）とインラインCSSの`background-color`（現代クライアント用）の両方で指定する。画像がない状態でも、ヘッダー領域が意図的なデザインとして見えるようにする。背景色に合わせてaltテキストの文字色も調整し、読みやすさを確保すること。
altテキストの内容 ヘッダーのaltテキストは60〜80文字を目安に、オファーやブランドの核心を伝える文章にする。「春のセール — 全品30%オフ、日曜日まで」のような形式が実用的だ。スパムフィルターへの影響という観点からも、適切なaltテキストの設定は重要とされている。
CTAボタンの独立配置 ヘッダー内にCTAが含まれる場合、ボタンを画像の中に埋め込まないこと。tabular.emailの基準では、CTAボタンは幅200〜300px、高さ50〜75pxが推奨されており、モバイルでは全幅表示が望ましい。テーブルベースのアンカータグとして実装した「bulletproofボタン」は、画像ブロック環境でも確実に表示され、タップ可能な状態を維持する。
送信前の最終確認として、プレビューツールで画像を非表示にした状態でヘッダー領域を確認する。背景色が正しく表示されているか、altテキストが意味のある文章として読めるか、CTAボタンがタップ可能な状態で表示されているか、この三点を目視で確認してから送信に進む。
---
制作フローへの組み込み方：チェックリストを使い回せる形にする
一度作ったチェックリストを毎回ゼロから確認するのは非効率だ。実務に組み込むための方法をいくつか紹介する。
最もシンプルな方法は、上記10項目のチェックリストをNotionやGoogleドキュメントのテンプレートとして保存し、新しいキャンペーンを開始するたびに複製して使うことだ。各項目に担当者名と確認日時を記入できる欄を追加しておくと、複数人で制作する場合の確認漏れを防ぎやすくなる。
デザインツール側での対応としては、Figmaで1,200px幅のメールヘッダー用コンポーネントを作成し、セーフゾーン（中央440px帯と上55%の高さ）をガイドとして埋め込んでおく方法が有効だ。制作者が毎回ガイドを引き直す手間が省け、セーフゾーン外への要素配置を視覚的に防げる。
Veeso AIのようなビジュアルコンテンツ制作ツールを使う場合、veeso.aiでは画像をレティナ書き出し用の1,200px幅など正確なピクセル寸法に合わせて生成・リサイズできるため、制作後の手動リサイズ工程を短縮できる。ただし、ツールを使った場合でも、フォールバック設定・altテキスト・クライアント別レンダリングの確認は人間による目視チェックが必要だ。
メルマガの配信頻度が高い場合は、テスト送信の手順も標準化しておくことを勧める。実機テストの対象として、GmailのAndroid版・iOS版、iCloud Mail（iPhone）、Yahoo!メール（PCブラウザ）の4環境を最低限カバーし、可能であればOutlookのWindows版も含める。Litmusやメール配信サービス付属のプレビュー機能を活用すれば、実機を複数台用意しなくても主要クライアントの表示を一括確認できる。
制作フローの中でチェックリストが機能するのは、「送信直前に慌てて確認する」ではなく「ヘッダー画像の制作を始める前に仕様を確認し、書き出し後にチェックリストを走らせる」という順序で使われるときだ。表示崩れのほとんどは、制作段階での仕様確認と、送信前の目視確認という二つのステップを踏むだけで防ぐことができる。
よくある質問｜メールヘッダー画像サイズとスマホ表示
メールヘッダー画像の推奨サイズ（幅・高さ）は何ピクセルですか？
幅は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）
GmailとiCloud Mailで画像の表示幅が異なるのはなぜですか？
各メールクライアントは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はどちらの形式を使うべきですか？
写真やグラデーションを多用するヘッダーにはJPEGが適しています。ロゴ・テキストオーバーレイ・透過要素を含むヘッダーにはPNGを使用してください。PNGは透過が必要な場合に不可欠ですが、ファイルサイズがJPEGより大きくなりやすいため、書き出し時に圧縮設定を確認することが重要です。（参考：warmy.io）
画像が表示されない場合に備えてaltテキストはどう設定しますか？
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）
