メルマガの画像サイズとヘッダー画像ガイド
メールの幅とバナーの高さを選ぶと、鮮明に表示できる書き出しサイズが分かり、プレビューと画像コードも表示されます。手持ちのバナーをブラウザ上でリサイズすることもできます。無料で登録も不要です。画像はアップロードされません。
サイズガイドを使うにはJavaScriptが必要です。メールで表示する幅の2倍で書き出してください。600pxのメールなら、通常は1200pxです。
メルマガのバナーは何pxにすべき？
幅はメールと同じにし、書き出しはその2倍の幅で行います。メールテンプレートの多くは幅600pxです（規格ではなく慣習です）。そのため、全幅のバナーは600pxで表示され、高密度ディスプレイ向けには1200pxで書き出します。
高さは自由に決められます。スマートフォンでは600 × 300のバナーが約半分の大きさで表示されるため、スクロールしなくてもメッセージが見えるようにしてください。
きちんと表示されるバナーのポイント
- 2倍で書き出し：600pxのメールなら幅1200px
- width属性を指定し、Windows版Outlookでもサイズを保つ
- 画像と同じ内容を伝える代替テキスト（alt）
- 写真はJPG、ロゴや文字はPNG
- メッセージを画像の中だけに入れるのは避ける
よく使うバナーサイズ
幅600pxのテンプレートを前提としたサイズです。ツールでサイズをクリックすると、プレビューできます。
| バナー | 表示サイズ | 書き出しサイズ（2×） | 用途 |
|---|---|---|---|
| ロゴヘッダー | 600 × 100 | 1200 × 200 | 本文の上に置くブランド表示 |
| ヘッダーバナー | 600 × 200 | 1200 × 400 | メルマガ、短いお知らせ |
| ヒーロー画像 | 600 × 300 | 1200 × 600 | イベント、ウェビナー、新製品・サービスの発表 |
| 縦長ヒーロー | 600 × 400 | 1200 × 800 | 製品や人物を主役に見せる |
4ステップでバナーを作る
デザインファイルから、鮮明で軽い画像としてテンプレートに配置するまでの手順です。
- 1
表示サイズでデザイン
幅600pxでレイアウトし、文字はスマートフォンで読める大きさにします。
- 2
2倍で書き出し
幅は1200pxです。写真はJPG、単色の塗りや文字はPNGにします。
- 3
ファイル容量を確認
上のツールでファイルを開くと、容量がKBで表示されます。書き出し幅より大きいファイルは、その幅にリサイズできます。
- 4
画像コードで配置
画像コードを使い、width属性、max-width、height:auto、代替テキスト（alt）を指定します。
配信前の確認
デザイン完成後にバナーが崩れる4つの原因です。
- PardotとMarketing Cloud Next。Account Engagement（旧Pardot）とMarketing Cloud Nextは、どちらもテンプレートのHTMLをそのまま送信します。そのため、バナーの幅はテンプレートの幅で決まります。2倍サイズのファイルをアップロードし、表示幅は画像の設定かHTMLで指定してください。
- WebPとAVIF。すべてのメールクライアントが表示できるわけではありません。caniemail.comの対応表（新しいタブで開きます）
- Gmailのクリッピング。GmailはHTMLが約102KBを超えるメールを途中で切ります（Googleはこの数値を公開していません）。この約102KBには、外部サーバーに置いた画像は含まれませんが、メール内に直接書いたコードは含まれます。Spam Resource（新しいタブで開きます）
- 画像が非表示の環境。画像が表示されず、代替テキストだけが見える読者もいます。見出しとボタンはバナーに入れず、HTMLのテキストで配置してください。
メルマガ画像サイズのよくある質問
バナー画像とヘッダー画像のサイズについて、よくある質問に短くお答えします。
メールのバナー画像に最適なサイズは？
600 pxのテンプレートなら、幅は600 px、高さはメッセージに合わせて決めます。高密度ディスプレイでも鮮明に表示されるよう、書き出しは幅1200 pxで行います。
メールのヘッダー画像のサイズは？
通常はテンプレートの全幅にあたる600 pxで、高さはロゴやヘッダーバナーなら100〜200 pxです。書き出しはその2倍で行います。
バナーがぼやけて見えるのはなぜですか？
表示されるサイズのまま書き出しているためです。スマートフォンやほとんどのノートPCでは、CSSピクセル1つあたりのデバイスピクセルが2つ以上あります。表示幅の2倍で書き出してください。
Outlookでバナーが大きく表示されすぎるのはなぜですか？
Windows版のOutlookはmax-widthを無視し、ファイル本来のサイズで表示します。imgタグのwidth属性に表示幅を指定してください。
どのファイル形式を使えばよいですか？
写真はJPG、ロゴ・ベタ塗り・文字はPNG、シンプルなアニメーションはGIFです。WebPとAVIFは、すべてのメールクライアントで表示されるわけではありません。
画像はアップロードされますか？
いいえ。画像の読み込みもリサイズもブラウザ内で行い、私たちのサーバーには何も送信されません。