ブラストメールでHTMLメールを作成する際、画像サイズをどう設定すればいいのか迷っていませんか?スマホでもPCでも綺麗に表示されるメルマガを作りたいけれど、最適なサイズが分からない。そんなお悩みを持つ方は多いはずです。
本記事では、ブラストメールで使用する画像の最適サイズから、スマホ対応、Retina対応、容量制限まで、初心者の方にも分かりやすく徹底解説します。この記事を読めば、どんなデバイスでも美しく表示されるメルマガが作成できるようになります。
目次
- ブラストメールで使う画像サイズの基本
- デバイス別の最適な画像サイズ
- Retina対応で画像を鮮明に表示する方法
- ブラストメールの画像容量制限と注意点
- スマホで読みやすい画像を作る3つのポイント
- HTMLメールエディタで画像サイズを簡単設定
- よくある画像サイズの失敗例と対策
- まとめ:最適な画像サイズで反応率アップ
ブラストメールで使う画像サイズの基本
メルマガで使用する画像サイズは、読者の開封率やクリック率に直接影響する重要な要素です。まずは基本的な考え方から理解していきましょう。
推奨される横幅サイズは600〜700px
一般的なHTMLメールの画像サイズとして、横幅600〜700pxが業界標準とされています。
この理由は以下の通りです:
- スマホの画面幅に最適:600〜700pxならスマホでも適度に縮小表示される
- PCでも見やすい:メールクライアントのプレビュー画面にちょうど収まる
- 表示速度が速い:ファイルサイズが大きくなりすぎず、読み込みがスムーズ
- レスポンシブ対応しやすい:自動縮小による画質劣化が最小限
NIKE、Amazon、メルカリなど大手企業のメルマガを調査した結果でも、横幅640〜760px程度で作成されているケースが多く見られます。
ブラストメールの画像サイズ制限
ブラストメールでHTMLメール(デコメール)を作成する場合、以下の制限があります:
- 画像枚数:5枚まで
- 合計容量:50KBまで
- テキストメールの添付ファイル:50KB以内(PDF、Excel、Word)
注意:画像1枚あたりではなく、メール全体で50KBという制限がありますので、画像の枚数や解像度を調整する必要があります。
デバイス別の最適な画像サイズ

メルマガの読者は様々なデバイスでメールを開封します。それぞれのデバイスに最適化された画像サイズを理解しておきましょう。
スマートフォン向け:横幅600px
現在、メルマガの約70%以上がスマホで開封されているというデータがあります。
スマホ向けの推奨サイズ:
- 横幅:600px
- 高さ:自由(ただし長すぎないこと)
- 理由:iPhoneやAndroidの画面幅に収まり、横スクロール不要
600pxより大きい画像を使用すると、スマホの画面からはみ出して横スクロールが必要になり、ユーザー体験が著しく低下します。
タブレット向け:横幅700px
iPadなどのタブレット端末を考慮する場合:
- 横幅:700px
- 理由:タブレットの画面サイズに最適化され、余白とのバランスが良い
PC向け:横幅600〜800px
デスクトップPCやノートPCの場合:
- 横幅:600〜800px
- 理由:Outlook、Gmail、Yahooメールなどの主要メールクライアントのプレビュー幅に対応
結論:スマホを最優先に考えて横幅600〜700pxで作成するのが最も安全です。
他のメール配信ツールでも同様の推奨サイズとなっているか気になる方は、メルマガ配信ツール比較記事もご参照ください。
Retina対応で画像を鮮明に表示する方法
iPhone、iPad、MacBookなどの高解像度ディスプレイ(Retinaディスプレイ)では、通常の画像サイズではぼやけて見えるという問題が発生します。
Retinaディスプレイとは
Retinaディスプレイは、従来のディスプレイの2倍の画素密度を持っています。そのため、通常サイズの画像では画質が粗く見えてしまいます。
Retina対応の画像作成方法
Retina対応にするには、表示サイズの2倍の解像度で画像を作成します。
具体的な手順:
- 画像データを2倍サイズで作成:横幅600pxで表示したい場合、1200pxで作成
- HTMLで表示サイズを指定:
width="600"と指定して縮小表示 - 結果:Retinaディスプレイでも鮮明に表示される
具体例
| 表示サイズ | 作成サイズ(Retina対応) |
|---|---|
| 600px | 1200px |
| 700px | 1400px |
| 800px | 1600px |
注意点:画像サイズが2倍になると、ファイル容量も大きくなります。ブラストメールの50KB制限を考慮し、画像圧縮ツールで最適化しましょう。
画像圧縮のおすすめツール
- TinyPNG:PNG/JPEG形式の画像を高品質で圧縮
- Squoosh:Google製の画像圧縮ツール
- ImageOptim:Mac向けの画像最適化アプリ
ブラストメールの画像容量制限と注意点
ブラストメールでHTMLメール(デコメール)を作成する際には、いくつかの容量制限があります。これを守らないとメールが正しく配信されません。
デコメールの画像制限
- 画像枚数:最大5枚
- 合計容量:50KBまで
- 対象:メール本文と画像の合計
つまり、画像5枚を使う場合、1枚あたり平均10KB以下に抑える必要があります。
容量を抑えるコツ
① 画像形式を使い分ける
- JPEG:写真や複雑なグラデーションに最適。圧縮率が高い
- PNG:ロゴやイラスト、透過画像に最適。ファイルサイズが大きくなりがち
- GIF:アニメーションが必要な場合のみ使用
② 画質設定を調整する
JPEGの場合、画質を80〜85%程度に設定すると、見た目はほぼ変わらず容量を大幅に削減できます。
③ 不要な余白をトリミング
画像の周囲の余白をカットすることで、ファイルサイズを小さくできます。
HTMLメールの容量目安
一般的なHTMLメール全体の容量目安:
- 理想:100KB以内
- 推奨:200KB以内
- 上限:400KB以下
ブラストメールのデコメールは50KB制限がありますが、HTMLメールエディタを使う場合はもう少し余裕があります。ただし、容量が大きいと表示速度が遅くなり、読者の離脱を招きます。
メール配信ツールごとの容量制限の違いについては、こちらの比較記事で詳しく解説しています。
スマホで読みやすい画像を作る3つのポイント
スマホでメールを開封する読者が増えている今、モバイル最適化は必須です。以下の3つのポイントを押さえましょう。
① 画像内の文字サイズは大きめに
画像内にテキストを入れる場合、PCで見て「少し大きすぎる」くらいがちょうど良いです。
推奨サイズ:
- タイトル・見出し:24px以上(元画像で40〜50px)
- 本文テキスト:14〜16px以上(元画像で28〜32px)
スマホに縮小表示されることを考慮し、大きめのフォントサイズを設定しましょう。
② 重要な要素は中央に配置
画像の端に重要な情報を配置すると、デバイスによっては見切れてしまう可能性があります。
対策:
- ロゴやキャッチコピーは画像の中心部に配置
- 左右に10〜15%程度の余白(セーフエリア)を確保
- 重要なCTAボタンは中央寄せ
③ 表示速度を意識した軽量化
モバイル通信では、画像の読み込みに時間がかかると離脱率が急上昇します。
目標容量:
- 1枚あたり:100KB以内(理想は50KB以下)
- メール全体:200KB以内
画像圧縮ツールを活用して、見た目の品質を保ちながら容量を削減しましょう。
HTMLメールエディタで画像サイズを簡単設定
ブラストメールのHTMLメールエディタを使えば、画像サイズの調整やレスポンシブ対応が自動で行われます。専門知識は一切不要です。
HTMLメールエディタの特徴
- ドラッグ&ドロップ操作:画像を配置するだけで自動調整
- レスポンシブ対応:スマホ・PC両対応のメールが自動生成
- 豊富なテンプレート:10種類以上のレイアウトから選択可能
- 画像編集機能:トリミングや明るさ調整がエディタ内で完結
画像設定の手順
- レイアウトを選択:メルマガのデザインを選ぶ
- ヘッダー画像を設定:「編集」ボタンから画像をアップロード
- 自動調整:最適なサイズに自動変換される
- プレビュー確認:スマホ・PCでの表示を確認
- 配信:問題なければそのまま配信
画像のアップロード方法
ブラストメールでは、以下の方法で画像をアップロードできます:
- ファイル選択:PCから画像ファイルを選択
- ドラッグ&ドロップ:画像をブラウザにドロップ
- URLから挿入:Web上の画像URLを指定
自社のロゴや商品画像も簡単にアップロードして、オリジナルのメルマガを作成できます。
背景色やボタンのカスタマイズ
画像以外にも、以下の要素を自由にカスタマイズできます:
- 背景色
- 文字色・フォントサイズ
- ボタンのデザイン
- 余白の調整
HTMLの知識がなくても、見たまま編集できるWYSIWYG(What You See Is What You Get)エディタなので、初心者でも安心です。
他のメール配信ツールのエディタ機能と比較したい方は、メルマガ配信ツール比較記事もぜひご覧ください。
よくある画像サイズの失敗例と対策
実際にメルマガを作成する際によくある失敗例と、その対策方法をご紹介します。
失敗例1:画像が大きすぎてスマホで横スクロールが必要
原因:横幅800px以上の画像を使用している
対策:
- 横幅を600〜700pxに変更
- HTMLメールエディタで自動調整を活用
- プレビュー機能で必ずスマホ表示を確認
失敗例2:Retinaディスプレイで画像がぼやける
原因:通常サイズの画像をそのまま使用している
対策:
- 画像を2倍サイズで作成(表示600px → 作成1200px)
- HTMLで表示サイズを指定して縮小表示
- 画像圧縮ツールで容量を最適化
失敗例3:画像の読み込みが遅くて離脱される
原因:ファイル容量が大きすぎる(500KB以上など)
対策:
- 1枚あたり100KB以内(理想は50KB以下)に圧縮
- 画像形式を見直す(写真ならJPEG、ロゴならPNG)
- 不要な余白をトリミング
失敗例4:画像内の文字が小さくて読めない
原因:PCでの見た目だけを考えて文字サイズを設定
対策:
- 画像内テキストは24px以上(元画像で40〜50px)
- 可能であれば画像ではなくHTML textとして配置
- 重要な情報は画像外のテキストでも補足
失敗例5:ブラストメールの50KB制限を超えてしまう
原因:高解像度の画像を複数枚使用
対策:
- 画像枚数を3枚以下に抑える
- 1枚あたり10〜15KB程度に圧縮
- HTMLメールエディタ使用時は制限が緩和される場合もある
まとめ:最適な画像サイズで反応率アップ
ブラストメールで使用する画像サイズについて、基本から応用まで詳しく解説してきました。重要なポイントをまとめます。
- 推奨横幅:600〜700px(スマホ・PC両対応)
- Retina対応:表示サイズの2倍で作成し、HTMLで縮小表示
- 容量制限:デコメールは合計50KB、1枚あたり100KB以内が理想
- スマホ対策:文字は大きめ、重要要素は中央配置、軽量化必須
- HTMLエディタ:ドラッグ&ドロップで自動調整、専門知識不要
適切な画像サイズ設定は、メルマガの開封率・クリック率向上に直結します。
ブラストメールのHTMLメールエディタを使えば、これらの最適化が自動で行われるため、初心者でも安心してプロ並みのメルマガを作成できます。27,000社以上の導入実績と15年連続トップシェアという確かな信頼性、月額4,000円からという業界最安クラスの価格設定で、長く使い続けられます。
まずは7日間の無料トライアルで、実際の使い心地と画像の表示品質を体験してみてください。自動で有料プランに更新されることはありませんので、安心してお試しいただけます。
他のメール配信ツールの画像機能とも比較検討したい方は、メルマガ配信ツール比較記事で各サービスの詳細を確認できます。
画像サイズ設定 クイックリファレンス
| 項目 | 推奨値 |
|---|---|
| 横幅(スマホ優先) | 600〜700px |
| 横幅(Retina対応) | 1200〜1400px(表示時に縮小) |
| 1枚あたりの容量 | 100KB以内(理想50KB以下) |
| デコメール合計容量 | 50KB以内 |
| 画像内文字サイズ | 24px以上(元画像40〜50px) |
| 推奨画像形式 | JPEG(写真)、PNG(ロゴ) |
この表を参考に、どんなデバイスでも美しく表示されるメルマガを作成しましょう!

