メール配信の商品画像：サイズと容量とダークモード

開封を勝ち取るのは件名です。クリックを勝ち取るのは商品画像です。ただし、そもそも表示されればの話ですが。メールはマーケティングで最も過酷なデザイン環境です。何十種類ものメールクライアントがあり、それぞれに独自のレンダリングエンジン、独自の画像ブロックの初期設定、そして近年はダークモードに対する独自の強いこだわりがあります。

デザインツールでは完璧に見えた商品写真が、届いた先ではしばしば崩れています。レイアウトからはみ出して引き伸ばされ、電波の悪い回線には重すぎ、空のグレーの箱に置き換えられ、あるいは現代の定番として、透過PNGがダークモードの背景に静かに溶けていきます。

ここでは、配信メールの画像を正しく仕上げる方法を解説します。幅の基準、ファイルサイズの節度、きちんと働く代替テキスト、そしてダークモードの罠への実際の対処法です。

メールの商品画像はどのくらいの幅にすべきか

配信メールの標準的なコンテンツ幅は600ピクセルで、最近のテンプレートには640まで広げるものもあります。この数字が生き残っているのは、プレビューペインと、レスポンシブという知らせを受け取り損ねた古いデスクトップクライアントのためです。この幅に合わせて設計しましょう。

• 全幅の商品カット — 1200pxで書き出し、600pxで表示します。2倍の書き出しなら、レイアウトを変えずに高精細ディスプレイでも輪郭をシャープに保てます。
• 複数カラムのグリッド — 600pxのコンテンツ領域を分割し、各画像を表示幅の2倍で書き出します。
• width属性を明示する — CSSのサイズ指定を無視して画像を実寸で表示するデスクトップクライアントがあります。書き出したまま忘れられた2400pxの画像1枚が、レイアウト全体を吹き飛ばすのはこのためです。

ここでは広ければ良いというものではありません。どこでも表示される600pxの画像は、どこでも表示されない1400pxの傑作に勝ります。

画像のファイルサイズは軽く保つ

1キロバイトごとに、モバイル回線の読者が税金を払っています。読み込みの遅いメイン画像は、表示される前にスクロールで通り過ぎられます。

• 1枚あたり200 KB未満を目安に、ファーストビューの画像はさらに切り詰めましょう。フラットな背景の上のきれいな商品切り抜きは、とてもよく圧縮できます。
• 写真はJPEG、フラットな色と切り抜きはPNG。 WebPはどちらより高効率で、remover.bgも書き出しに対応していますが、メールクライアントの対応は今もばらついているため、配信用にはJPEGとPNGのマスターを残しておきましょう。
• Gmailのクリップを知っておく。 GmailはHTMLがおよそ102 KBを超えるメールを途中で切ります。ホスティングされた画像はこの上限に含まれませんが、クリップされたメールは切れ目から下がすべて隠れてしまうので、コードも軽く保ちましょう。

画像がブロックされる前提で代替テキストを書く

企業で使われているOutlookや、プライバシーを重視する読者は、今も初期設定で画像をブロックします。そうなったとき、代替テキストがビジュアルのすべてになります。

• 商品と要点を説明する — 「セージグリーンのTerra陶器製ドリッパーセット」は「image1.png」に、売上と削除ボタンほどの差をつけて勝ちます。
• スタイルを当てる — 多くのクライアントは代替テキストをスタイル可能なテキストとして表示します。フォント、サイズ、色をインラインで指定しておけば、ブロックされた画像も意図のある表示に落ち着きます。
• 重要な情報をピクセルに閉じ込めない — 価格、期限、CTAは本物のテキストで書きます。画像がブロックされても、オファーが成立するようにしておきましょう。

ダークモードの罠：ダーク表示のメールクライアントと透過PNG

これが罠です。きれいな商品の切り抜きを透過PNGとして書き出します。透過PNGガイドで説明しているとおり、他のほぼすべてのチャネルでは正しい判断です。それを白を前提に設計したメールに置きます。すると、ダークモードの読者にはクライアントがその背景をほぼ黒に反転させます。チャコールのヘッドホンは薄い輪郭だけになり、黒いロゴ文字は消えます。そして白を前提になじませたアンチエイリアスの縁が、淡いふちどりのように光ります。

さらに厄介なことに、そもそもダークモードが何を意味するかについてクライアントごとに解釈が違います。色をそのままにするもの、背景だけ反転するもの、ほとんどすべてを塗り替えるものがあります。読者がどのクライアントを使うかは選べないので、どれでも生き残る切り抜きを作りましょう。

• 合わせた単色背景を焼き込む — 透過のまま送らず、意図したブランドカラーの上に切り抜きを統合します。remover.bgのエディターで単色の上に置いてしまえば、クライアントに反転させるものがなくなります。どちらのモードでも破綻しない色選びは、商品写真の背景色ガイドが助けになります。
• 輪郭と余白を足す — 暗い縁を持つ商品には、控えめな線や柔らかい影を回しておくと、キャンバスが塗り替えられても判別できます。たっぷりの余白は、ぎりぎりのトリミングがクライアント側の装飾とぶつかるのを防ぎます。
• 実機のクライアントでテストする — 配信のたびに、ダークモードをオンにしたApple Mail、Gmail、Outlookへ実際のテストメールを送りましょう。あるクライアントが尊重するものを、別のクライアントは平然と塗り替えます。

キャンペーン全体で商品の切り抜きをそろえる

キャンペーンが1通で終わることはめったにありません。発売告知、注目商品の紹介、最終案内と、同じ商品が4回も5回も登場します。配信ごとに処理がぶれると（こちらは白背景、あちらはグレー、影あり、影なし）、一連のメールはありあわせの部品を継ぎ合わせたように見えてしまいます。

処理をひとつに固定して、すべてに適用しましょう。背景色はひとつ、商品が画面をどれだけ占めるかのサイズ規則もひとつ、影のスタイルもひとつです。remover.bgのエディターはリアルな影を付けるので、切り抜きが浮かずに枠の中へ収まります。大規模なカタログなら、HTTP APIがすべてのカットに同一の処理を自動で適用します。EC分野のAIを静かに作り変えているのと同じ自動化の論理です。

まとめ

メールの画像は、送信ボタンを押す前の4つの判断で生死が決まります。

1. 幅 — 600pxで設計し、2倍で書き出す。
2. 容量 — 1枚200 KB未満、対応の広さを取るならJPEGかPNG。
3. 代替テキスト — 説明的に、スタイルを当て、オファーを隠さない。
4. ダークモード — 背景を焼き込み、暗い縁に輪郭を付け、実機のクライアントでテストする。

ここを押さえれば、ライトモードでもダークモードでも、画像がブロックされていてもいなくても、どの受信トレイでも商品が意図どおりに見えます。それだけで、多くのキャンペーンより一歩先です。