メールテンプレート用プレースホルダー画像
HTMLメールテンプレートに最適化されたプレースホルダー画像を作成。メール対応画像サイズ、フォーマット要件、メールクライアントのRetina対応を解説。
Use Cases
詳細な説明
メールテンプレート用プレースホルダー画像
HTMLメールテンプレートはWebページとは異なる固有の要件があります。Outlook、Gmail、Apple Mail、Yahoo Mailなどのメールクライアントはそれぞれ画像の表示方法が異なるため、メールテンプレート開発時に正しいサイズのプレースホルダー画像を使用することが重要です。
一般的なメール画像サイズ
| 画像タイプ | 推奨サイズ | 備考 |
|---|---|---|
| メールヘッダー/バナー | 600×200 or 600×150 | 標準600pxメール幅のフル幅 |
| ヒーロー画像 | 600×300 or 600×400 | ヘッダー下、本文上 |
| 商品サムネイル | 200×200 or 280×280 | グリッドレイアウト（1行2-3個） |
| ロゴ | 200×60 or 150×50 | メールヘッダーロゴ |
なぜ600px幅なのか
600px最大幅はメールテンプレートの長年の慣例です。ほとんどのメールクライアントは約600-640ピクセル幅のビューイングペインでメールをレンダリングします。
メール固有の注意点
- 常にPNGまたはJPEGを使用 — SVGはOutlookやGmailを含むほとんどのメールクライアントでサポートされていません
widthとheight属性を含める — メールクライアントは画像読み込み前にスペースを確保するために<img>タグに明示的な寸法が必要- 画像ブロックを考慮 — 多くのメールクライアントはデフォルトで画像をブロックします。すべての画像に説明的な
altテキストを含めてください
ユースケース
メール開発者やマーケティングチームは、最終クリエイティブアセットが準備される前にHTMLメールテンプレートのレイアウトを視覚化するためにプレースホルダー画像を使用します。メールクライアントはWebブラウザとは異なるHTMLレンダリングを行うため、レイアウトの問題を早期に発見することが特に重要です。