小さく表示させたい画像が、スマホでは大きく表示されてしまいます。対処法はありますか？

画像ギャラリー 更新日 3月 28, 2021

Benchmark Emailでは、メールを受信する環境に合わせて表示を最適化する（レスポンシブ対応）する仕様となっております。ドラック＆ドロップエディタで白紙レイアウトまたはテンプレートを使ってメールを作成した場合は、画像やフォントサイズ、改行なども自動的に最適化されます。

しかしながら、時折「小さく表示させたい画像（ロゴマーク）が、スマートフォンでは大きく表示されてしまいます。」といったお悩みの声を聞くことがあります。こちらのFAQでは、その原因と対策についてご案内致します。

＜スマートフォンでロゴ画像が大きく表示される原因＞

ロゴマーク画像の左右に余白を設けていない場合、スマートフォンで表示される画像がデスクトップよりも大きく表示されます。例として、以下のロゴ画像サイズ【W（幅）50 x H（高さ）43】を使います。

W50×H73

PC版：デスクトップ上ではバランス良くロゴが表示されています。

モバイル版：スマートフォン上で表示されるロゴはデスクトップに比べて画面が小さいため、少し大きく見えます。

＜実験として、以下の異なったサイズの画像を並べてメールデザインを作成します。＞

上記で使用したサイズは、W50×H73の画像です。

W50×H73

お手持ちの画像編集ソフトを使って、以下のような余白付きの画像を2つ作成します。※Benchmark Email上では行えませんので、必ず画像編集ソフトで作成してください。

ロゴ画像の左右に余白を入れて、横幅W400とW500サイズの2種類を用意します。

W400×H73

 

W500×H73

上記のロゴサイズに背景色を加えて見てみると、2、3番目の画像の左右に余白が設けられていることが分かります。

メール編集画面を開き、3パターンの画像を挿入します。

右下のプレビューをクリックし、デスクトップを選択します。すると、3つの画像の見え方に変化はありません。

次に、プレビューでモバイルを選択して、スマートフォンでの表示を確認します。すると、PC版では同じ大きさに見えていた画像が、モバイル版では横幅によってサイズが変わって表示されることが分かりました。

 

＜スマートフォン版の表示サイズだけ画像を小さくする方法＞

上記の実験により、画像の左右に余白を設けて幅を広げた画像を作成すると、スマートフォンでの表示サイズを小さくすることができることが分かりました。ロゴ画像の横幅を変えて、お好みの表示サイズへと調整してください。

1. 画像編集ソフトを使って作成した画像を、Benchmark Emailの「画像ギャラリー」に保存します。

2. メール編集画面で、画像ブロックに画像を挿入します。

3. プレビュー機能で、デスクトップとモバイルの表示を確認します。

注意点：

• スマートフォンでも、機種やOS、メーラーによって見え方は変化します。
• 今回は表示確認をBenchmark Email上のプレビュー機能で行いましたが、プレビュー機能での表示は厳密にスマートフォンの表示と同じとは限りません。画像のサイズを細かく調整したい場合は、実際にメールを自分宛に配信するなどしてご確認ください。
• 横幅が600以上の画像はPC版での表示も変わってしまいます。（幅がPC版枠を超えるため、全体が縮小された結果、小さく表示されます。）
• サイドの空白枠は0で実験を行っています。

ご不明な点がございましたら、サポートまでご連絡ください。

 

 

＞＞「メール作成：編集操作」のまとめページに戻る